﻿.srch-ico-overlay-1 {
    opacity: 0.4;
    position: relative;
    right: 20px;
    top: 0;
    color: #1d20bf;
}

.srch-ico-overlay {
    opacity: 0.4;
    position: absolute;
    right: 20px;
    top: 10px;
    color: #1d20bf;
    cursor: pointer;
}

    .srch-ico-overlay:hover:before {
        opacity: 1;
        color: #ff0000;
        content: "\f00d";
        transition: all 0.5s ease;
    }


.wr_dlg-outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0px;
}

.wr_dlg-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.wr_dlg {
    width: 85%;
    padding: 0px;
}

.wr-dlg-ctl-btncont {
    display: inline-flex;
    position: absolute;
    right: 10px;
    top: 10px;
}
.wr-dlg-actn-btncont {
    display: inline-flex;
    position: relative;
}
.wr-panel-outer {
    margin: 10px;
    border: 1px solid var(--wr-hdr-btn-bg-clr) !important;
    border-radius: 6px;
}

.wr-dlg-ctl-btn {
    position: relative;
    top: -3px;
    display: flex;
    border: 3px solid #bbb;
    border-radius: 25px;
    font-size: 18px;
    background-color: var(--wr-hdr-btn-bg-clr) !important;
}

    .wr-dlg-ctl-btn:hover {
        border: 3px solid #fff;
    }

.wr-dlg-ctl-btn-sav {
    position: relative;
    top: -3px;
    display: flex;
    border: 3px solid #bbb;
    border-radius: 25px;
    font-size: 18px;
    background-color: var(--wr-hdr-btn-bg-clr) !important;
    padding: 4px 10px 0px 10px;
}

    .wr-dlg-ctl-btn-sav:hover {
        border: 3px solid #fff;
    }
 

.wr-dlg-ctl-btn-gap {
    margin-right:20px;
}
.wr__row {
    border: 0px solid red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.wrow-spacer {
    margin-top: 18px;
}

.w__row-h1 {
    height: 60px;
    padding-top: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.m__col-sm-1 {
    padding-left: 30px;
}

.wr_col-1 {
    width: 8.33%;
}

.wr_col-2 {
    width: 16.66%;
}

.wr_col-3 {
    width: 25%;
}

.wr_col-4 {
    width: 33.33%;
    padding-left: 5px;
}

.wr_col-5 {
    width: 41.66%;
}

.wr_col-6 {
    width: 50%;
    padding-left: 5px;
}

.wr_col-7 {
    width: 58.33%;
}

.wr_col-8 {
    width: 66.66%;
}

.wr_col-9 {
    width: 75%;
}

.wr_col-10 {
    width: 83.33%;
}

.wr_col-11 {
    width: 91.66%;
}

.wr_col-12 {
    width: 100%;
}


.wreq-sched-cont {
    display: flex;
    flex-direction: column;
    line-height: 26px;
    text-decoration: none;
    align-content: center;
    align-items: center;
    width: 97%;
    /*height: var(--lst-hgt-sched);*/
    border: 1px solid var(--wr-hdr-btn-bg-clr);
    z-index: 0;
}

.wreq-task-cont {
    display: flex;
    flex-direction: column;
    line-height: 26px;
    text-decoration: none;
    align-content: center;
    align-items: center;
    width: 100%;
    height: var(--lst-hgt);
    border: 1px solid var(--wr-hdr-btn-bg-clr);
    z-index: 0;
}

.wreq-task-title-bar {
    padding: 0px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-weight: 600;
    font-size: 24px;
    width: 100%;
    height: 28px;
}


.wreq-task-lbl {
    display: inline-flex;
    padding: 0px 0px 0px 16px;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 2px;
    text-decoration: none;
    background-color: var(--wr-sch-task-lbl-bg-clr) !important;
    align-content: center;
    align-items: center;
    width: 100%;
    z-index: 0;
}

.wreq-task-btn {
    width: 100px;
    background-color: #2196f3;
    color: #fff;
    height: 28px;
    border: none;
    border-radius: 0px 2px 2px 0px;
}

    .wreq-task-btn:hover {
        background-color: #0070c8;
        color: #fff;
    }

.vert-list-upevents {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    border: solid 1px #e4e4e4;
}


.vert-list-sched {
    width: 100%;
    height: var(--lst-hgt-sched);
    overflow-y: auto;
    border: solid 1px #e4e4e4;
}

.vert-list {
    width: 100%;
    height: var(--lst-hgt);
    overflow-y: auto;
    border: solid 1px #e4e4e4;
}

.vert-list-compl {
    width: 100%;
    overflow-y: auto;
    border: solid 1px #e4e4e4;
}
.wreq-task-cont-compl {
    display: flex;
    flex-direction: column;
    line-height: 26px;
    text-decoration: none;
    align-content: center;
    align-items: center;
    width: 100%;
    border: 1px solid var(--wr-hdr-btn-bg-clr);
    z-index: 0;
}


.vert-list::-webkit-scrollbar {
    width: 8px;
    background: var(--wosched-list-scrollbar) !important;
}

    .vert-list::-webkit-scrollbar-track {
        background: var(--wosched-list-scrollbar-track) !important;
        border-radius: 100px;
    }

    .vert-list::-webkit-scrollbar-thumb {
        border-radius: 100px;
        background: var(--wosched-list-scrollbar-thumb) !important;
        box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    }

.vert-list-itm {
    cursor: pointer;
    background-color: #fff;
    color: black;
    display: block;
    padding: 5px 0 5px 12px;
    text-decoration: none;
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    border-bottom: solid 0px #e9e9e9;
    min-height: 54px;
    /*wrapping*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding-right: 20px;
    /*wrapping*/
}

    .vert-list-itm:hover {
        background-color: #f2faff;
    }

.vert-list-itm-dt {
    display: block;
    padding: 0px;
    font-weight: 100;
    font-size: 16px;
    color: rgb(108, 108, 108);
    text-decoration: none;
}

.vert-list-itm-usrsel {
    cursor: pointer;
    background-color: var(--wosched-list-cont-bg-clr) !important;
    color: black;
    display: block;
    padding: 5px 0 5px 12px;
    text-decoration: none;
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    border-bottom: solid 1px var(--wosched-list-cont-sep-line) !important;
    min-height: var(--lst-itm-hgt);
}

    .vert-list-itm-usrsel:hover {
        background-color: var(--wosched-list-cont-bg-clr-hvr) !important;
    }

.vert-list-itm-usrsel-right {
    display: flex;
    float: right;
    margin-top: -32px;
    padding: 0px 10px 0px 0px;
    font-weight: 100;
    font-size: 16px;
    color: rgb(108, 108, 108);
    text-decoration: none;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
}

.vert-list-itm-usrsel-right-icostyle {
    color: #cf0303;
    font-weight: 100;
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
}

    .vert-list-itm-usrsel-right-icostyle:hover {
        color: #fff;
        background-color: #ff0000;
    }

.wreq-task-btn-more {
    width: 40px;
    height: 30px;
    background-color: var(--wr-hdr-btn-bg-clr) !important;
    color: #fff;
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
}

    .wreq-task-btn-more:hover {
        background-color: #ffffff !important;
        color: var(--wr-hdr-btn-bg-clr) !important;
        border: 2px solid var(--wr-hdr-btn-bg-clr) !important;
    }

    .wreq-task-btn-more:disabled {
        background-color: #bebebe !important;
        color: #898989;
    }

.wreq-task-entry-tit {
    font-size: 13px;
    width: 100%;
    height: 32px;
    text-align: center;
}

.wreq-task-entry-des {
    font-size: 13px;
    width: 100%;
    height: 32px;
    text-align: left;
}

.wreq-task-entry-due {
    font-size: 13px;
    width: 100%;
    height: 32px;
    text-align: center;
}

.wreq-task-entry-attend {
    font-size: 13px;
    width: 100%;
    height: 32px;
    text-align: center;
}





/* ---------------------Listview stuff-------------------------*/
.wr-lstcont {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.wr__lstrow {
    border: 0px solid red;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: var(--lst-itm-hgt);
    cursor: pointer;
    border-bottom: solid 1px var(--wosched-list-cont-sep-line) !important;
    background-color: var(--wosched-list-cont-bg-clr) !important;
}

    .wr__lstrow:hover {
        background-color: var(--wosched-list-cont-bg-clr-hvr) !important;
    }

.wr__lstrow-text-l1 {
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    /*justify-content: space-between;*/
    padding-left: 10px;
}

.textContainer-bak {
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    /*justify-content: space-between;*/
    cursor: pointer;
    border-bottom: solid 1px #b9b9b9;
}

.textContainer {
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    /*justify-content: space-between;*/
    cursor: pointer;
    border-bottom: solid 1px #b9b9b9;
    background-color: #ecf7ff !important;
}

    .textContainer:hover {
        background-color: #cae9ff !important;
    }

.textStyle {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(0, 0, 0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.topItem {
    margin-bottom: 2px;
}

.textDetailStyle {
    font-weight: 100;
    font-size: 13px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #949494;
}

.OuterContainerprjstat1 {
    position: relative;
    padding: 8px 16px;
    transition: background-color 250ms ease-out 0s;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    min-height: 4.6875rem;
    border-bottom: solid 1px #b9b9b9;
}

    .OuterContainerprjstat1:hover {
        background-color: #f2faff;
    }

.textContainerprjstat1 {
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    padding: 0px;
    background-color: #ecf7ff !important;
}

.textDetailStyleprjstat1 {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(108, 108, 108);
    margin-right: -8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 17px;
    cursor: pointer;
}

.textDetailStyleprjstat2 {
    font-weight: 400;
    line-height: 16px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(108, 108, 108);
    margin-right: -8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 17px;
    cursor: pointer;
}

.imageBaseStyleprjstat1 {
    height: 62px;
    width: 62px;
    padding: 0px;
    flex-shrink: 0;
    min-width: 62px;
    border-radius: 0px;
    background-color: #e1ecff;
    object-fit: cover;
    margin-right: 10px;
    margin-left: 0px;
}

.textStyle2 {
    font-weight: 300;
    padding: 5px;
    font-size: 16px;
    line-height: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #000000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.textContainerprj-bak {
    padding-left: 38px;
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: solid 1px #b9b9b9;
}

.textContainerprj {
    padding-left: 38px;
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: solid 1px #b9b9b9;
    background-color: #ecf7ff !important;
}

    .textContainerprj:hover {
        background-color: #cae9ff !important;
    }
/* ---------------------Listview stuff-------------------------*/

.btn-zm-alert {
    animation: btn-zm-alert-anim 0.3s;
}

@keyframes btn-zm-alert-anim {
    0% {
        transform: scale(2.5);
    }

    90% {
        transform: translateY(-20px);
    }

    100% {
        transform: rotate(0);
    }
}
 
.wr-can-tag {
    z-index: 99;
    position: absolute;
    top: 40px;
    left: 20px;
    color: #ff0000;
    background-color: rgba(255,100,150,0.5);
    font-weight: bold;
    font-size: 18px;
    border: 2px solid #ff0000;
    padding: 5px;
    animation: wr-can-tag-animation 1s;
    transform: rotate(-45deg);
    /*transform: rotate(-45deg);*/
}
.complaint-can-tag {
    z-index: 99;
    position: relative;
    top: -40px;
    left: -24px;
    width: fit-content;
    color: #ff0000;
    background-color: rgba(255,100,150,0.5);
    font-weight: bold;
    font-size: 18px;
    border: 2px solid #ff0000;
    padding: 5px;
    animation: wr-can-tag-animation 1s;
    transform: rotate(-45deg);
    /* transform: rotate(-45deg); */
}
@keyframes wr-can-tag-animation {
    0% {
        transform: rotate(5deg);
    }

    35% {
        transform: scale(2.5);
    }

    100% {
        transform: rotate(-45deg);
    }
}

.wr-st-inf-que {
    padding-left: 20px;
    color: #c88d00;
    background-color: #ffedc2;
    text-align: center;
    width: 100%;
}

.wr-st-inf-aut {
    padding-left: 20px;
    color: #18bb06;
    background-color: #d6feca;
    text-align: center;
    width: 100%;
}

.wr-st-inf-can {
    padding-left: 20px;
    color: #ff0000;
    background-color: #ffb9b9;
    text-align: center;
    width: 100%;
}

.c-container-scr {
    padding: 5px;
    margin: 0px;
    overflow-x:scroll;
    width:100%;
}
.c-container {
    padding: 5px;
    margin:0px;
}
.c-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
}
.c-col-sm-6 {
    flex: 25%;
    max-width: 25%;
    padding: 0px;
}
.c-col-sm-3 {
    flex: 25%;
    max-width: 25%;
    padding: 0px;
}
.c-col-sm-12 {
    flex: 100%;
    max-width: 100%;
    padding: 0px;
}
/*Mobile devices*/
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}


/*large screens*/
@media (min-width: 768px) {
    .wr-dlg-actn-btncont {
        right: 10px;        
    }
    .c-col-sm-6 {
        flex: 50%;
        max-width: 50%;
    }

}
/*small screens*/
@media (max-width: 767px) {
    .wr-dlg-actn-btncont {
        flex-direction: row;
        -webkit-box-pack: center;
        justify-content: center;
        right: 10px;
        bottom: 0;
        z-index: 99;
        opacity: 0.5;
    }

    .wr-dlg-actn-btncont:hover {
        opacity: 1;
    }
    .c-col-sm-6 {
        flex: 100%;
        max-width: 100%;
    }
    .c-col-sm-3 {
        flex: 100%;
        max-width: 100%;
    }
    .c-container {
        padding: 0px;
    }


}


.wosched-cont-outer {
    height: 70vh;
    overflow-y: scroll;
}



.wrsched-dlg-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: hsla(0,0%,100%,.65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
    z-index: 98;
}

.wrsched-dlg-outer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
}


.wrsched-dlg-outer-main {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
}


.wrsched-dlg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 90%;
    max-width: 800px;
}

.wrsched-dlg-rpt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 90%;
    max-width: 400px;
}

.wrsched-dlg-outer-compvalid {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
}
.wrsched-dlg-compvalid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 95%;    
}
.wrsched-dlg-body-compvalid {
    padding: 20px;
    width: 100%;
    height:70vh;
}

.wrsched-dlg-main-complaint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    margin-top:60px;
    width: 98%;
}

.hiyapayfnd-dlg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 90%;
}
.hiyapayent-dlg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 70%;
    max-width: 800px;
}
.hiyaapl-dlg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f5;
    border-radius: 8px;
    border: solid 2px #0964a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    opacity: 1;
    width: 70%;
    max-width: 800px;
}
.wrsched-dlg-body {
    padding: 20px;
    width: 100%;
}

.wrsched-btn-cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
}

.wrsched-btn-ol {
    border-radius: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
}

    .wrsched-btn-ol:hover {
        border: solid 1px white;
    }

.wrsched-cont-tit-hdr {
    display: flex;
    flex-direction: row;
    background-color: var(--win-title-bg-clr);
    border-radius: 4px 4px 0px 0px;
    padding: 8px;
    width: 100%;
}

.wrsched-cont-tit-hdr-txt {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.wrsched-cont-tit-hdr-txt-subtask {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    text-align: left;
    align-content: center;
    align-items: center;
    width: 100%;
}

.wrsched-cont-tit {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: #052c97;
    padding: 10px;
}

.wrsched-cont-due {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #ff0000;
    padding: 10px;
}

.wrsched-cont-des {
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    padding: 5px;
}

.wrsched-cont-att {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    padding: 5px;
}

.wrsched-team-tbl-h0 {
    border: 2px dotted #b1b1b1;
    height: 0px;
    transition: height 0.2s;
}

.wrsched-team-tbl {
    margin-top: 0px;
    border: 2px dotted var(--wosched-list-cont-sep-line) !important;
    font-size: 12px;
    height: 165px;
    overflow-y: auto;
    transition: height 0.3s;
}

.wrsched-team-tbl-hdr {
    margin: 0px !important;
    font-size: 12px;
}

.wrsched-team-tbl-hdr-tbl {
    margin: 0px !important;
}

.wosched-list-cont {
    display: flex;
    background-color: var(--wosched-list-cont-bg-clr);
    width: 100%;
    height: 42px;
    flex-direction: column;
    cursor: pointer;
    border-bottom: 1px solid var(--wosched-list-cont-sep-line) !important;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.wosched-list-anim {
    animation: wosched-list-cont-anim 2.0s;
}

@keyframes wosched-list-cont-anim {
    0% {
        transform: translateY(100%);
    }

    10% {
        transform: scaleX(0.7);
    }

    20% {
        transform: scaleX(1.2);
    }

    30% {
        transform: scaleY(1.2);
    }

    40% {
        transform: scaleX(0.9);
    }

    50% {
        transform: scaleX(1);
    }

    60% {
        transform: scaleY(1);
    }


    100% {
        transform: translateY(0);
    }
}

.wosched-list-cont:hover {
    background-color: var(--wosched-list-cont-bg-clr-hvr);
}

.wosched-list-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    padding: 0px 0px 10px 10px;
}

.wosched-list-row-item-dt {
    width: 10%;
    min-width: 100px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
}

.wosched-list-row-item-dt-ico {
    position: absolute;
    opacity: 0.5;
    padding: 20px;
    font-size: 20px;
    color: var(--wosched-list-cont-sep-line) !important;
    width: 100%;
    text-align: right;
    z-index: 10;
}

.wosched-list-row-item-ti {
    width: 90%;
    font-size: 13px;
    line-height: 13px;
}

.wosched-list-row-item-rmk {
    width: 90%;
    font-size: 12px;
    line-height: 12px;
    word-wrap: break-word;
    font-style: italic;
}

.wosched-list-row-sidebtncont {
    display: flex;
    flex-direction: column;
    position: relative;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background-color: #ff0000;
    border: 2px solid #0031ba;
}

.wosched-sched-dt {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    padding: 10px;
}

.wosched-sched-alert-icon-auth {
    color: #ff0000;
    border: 6px solid #ff0000;
    border-radius: 50%;
    font-size: 58px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

.wosched-sched-alert-icon-resch {
    color: #ffb400;
    border: 6px solid #ffb400;
    border-radius: 50%;
    font-size: 58px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}


.wr-fndgrd-outer {
    margin-top: 10px;
    display: flex;
    flex-flow: column;
    height: 80vh;
}

.wr-fndgrd-inner {
    margin-top: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.wr-fndgrd {
    overflow-y: scroll;
    flex: 1 1 auto;
}








.circle-rippl {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 68px;
    width: 68px;
    border-radius: 50%;
    box-shadow: rgba(170, 173, 176, 0.9) 0px 0px 0px 0px;
    animation: 3s ease 0s infinite normal none running ripple-jsx-3334302308;
}

@keyframes ripple-jsx-3334302308 {
    70% {
        box-shadow: rgba(255, 0, 231, 0) 0px 0px 0px 30px;
    }

    100% {
        box-shadow: rgba(255, 0, 0, 0) 0px 0px 0px 0px;
    }
}

.pshed-summ-cont {
    display: flex;
    align-items: center;
    padding: 2px;
    border: 1px solid #000;
}
.pshed-summ-cont-noborder {
    display: flex;
    align-items: center;
    padding: 2px;
}

.pshed-summ-titcfull {
    display: flex;
    justify-content: center;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
}

.pshed-summ-titc {
    display: flex;
    justify-content: center;
    width: 50%;
    font-weight: 700;
    font-size: 16px;
}
.pshed-summ-titc-inner {
    display: flex;
    justify-content: center;
    width: 100% !important;
    padding: 0px 8px 0px 8px;
}
.pshed-summ-titl {
    display: flex;
    justify-content: flex-start;
    width: 50%;
    font-weight: 600;
    font-size: 14px;
}
.pshed-summ-titr {
    display: flex;
    justify-content: end;
    width: 50%;
    font-size: 14px;
}
.pshed-summ-lbl {
    display: flex;
    justify-content: flex-end;
    width: 30%;
    font-weight: 700;
    font-size: 16px;
}


.admin-grpusr-delbrn {
    cursor: pointer;
    color: #ff0000;
    font-size:40px;
}
.admin-grpusr-delbrn:hover {
    animation: admin-grpusr-delbrn-an 2s;
}
@keyframes admin-grpusr-delbrn-an {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}


.tab-cont-pane {
    margin-top: 15px;
    overflow-y: scroll;
    height: 58vh;
}
.nav-tabs {
    border-bottom: 2px solid #2186d3;
    margin-bottom: 5px;
}
    .nav-tabs > li.active > a {
        background-color: #0964a9 !important;
        color: #fff !important;
        border-radius: 20px 20px 0 0;
        border: 1px solid #ffffff !important;
        opacity: 1;
        margin-top: -4px;
        height: 44px;
        font-weight:600;
    }
    .nav-tabs > li > a {
        background-color: #a9c9e169 !important;
        margin-right: 1px;
        height: 34px;
        margin-top: 4px;
        border: 1px solid transparent;
        border-radius: 20px 20px 0 0;
        border: 1px solid #00479f !important;
        opacity: 0.7;
        transition: all 0.2s cubic-bezier(0.38, 0.23, 0.15, 1.33);
    }
        .nav-tabs > li > a:hover {
            opacity: 1;
            margin-top: -4px;
            height: 44px;
        }

.textarea-fixed {
    resize: none;
    height: 10em;
}

.totdisp {
    font-size: 18px;
    text-align: center;
    background-color: #fff8d4;
    border: 2px solid #d3a603;
}

.paydatelbl {
    font-size: 15px;
    font-weight: 700;
    color: #ff0000;
    padding-right:20px;
    animation: paydatelbl-an 2s infinite;
}
@keyframes paydatelbl-an {
    0% {color: #ffea00;}
    50% {transform: scale(1.5);
         margin-top:10px;
    }
    100% {color: #ff0000;}
}

.pay-due-alert {
    color: #ff0000;
    position: absolute;
    font-size: 45px;
    top: 5px;
    right: 10px;
    z-index: 10;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

@keyframes ring {
  0% {transform: rotate(0); }
  1% { transform: rotate(30deg); }
    2% {
        transform: scale(5);
    }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% {transform: rotate(-32deg);}
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  
  100% { transform: rotate(0); }
}


.pay-pend-alert {
    color: #7ab6dd;
    font-size: 20px;
    z-index: 10;
    margin-left:15px;
    animation: pay-pend-alert-ani 5s infinite;
    /*transform-origin: 50% 4px;*/
} 

@keyframes pay-pend-alert-ani {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    60% {
        transform: scale(2);
    }
    100% {
        transform: rotate(-180deg);
        
    }
}
.pay-pend-alert-amt {
    color: #fff;
    font-size: 22px;
    z-index: 10;
    margin-left:10px;
    animation: pay-pend-alert-amt-ani 2s infinite;
}
@keyframes pay-pend-alert-amt-ani {
    0% {
        color: #fff;
    }

    50% {
        color: #46bf1d;
    }

    100% {
        color: #000;
    }
}
.ost-alert-msg {
    margin-top: 10px;
    padding: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    animation: alert-msg-blinker 6s linear infinite;
    border: 3px solid #001da9;
    background-color: #006bff;
    border-radius: 15px;
}

@keyframes alert-msg-blinker {
    2% {
        opacity: 0.5;
    }
}
.ost-alert-msg-due {
    margin-top: 10px;
    padding: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    animation: alert-msg-blinker 4s linear infinite;
    border: 3px solid #a90000;
    background-color: #ff0000;
    border-radius: 15px;
}

@keyframes alert-msg-blinker {
    2% {
        opacity: 0.5;
    }
}
.notice-alert-msg-outer {
    position: absolute;
    right: 20px;
    top: 60px;
    z-index: 99999;
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align:center;
    animation: notice-alert-msg-outer-ani 2s linear;
}
@keyframes notice-alert-msg-outer-ani {
    0% {
        transform: translateY(100%);
    }
    25% {
        transform: scale(2);
    }
    100% {
        transform: translateY(0);
    } 
}
.notice-alert-msg {
    margin-top: 5px;
    padding: 10px 5px 5px 5px;
    font-size: 22px;
    font-weight: 100;
    fontFamily = "iyyu";
    color: #fff;
    border: 3px solid #0037a9;
    background-color: #0072ff;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    box-shadow: 0 3px 3px rgb(0 0 0 / 50%);
}
.notice-alert-msg-cl {
    cursor:pointer;
    display: flex;
    font-size: 18px;
    font-weight: 100;
    color: #fff;
    position: absolute;
    left: 50%-40px;
    top: -20px;
    border: 3px solid #a90000;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background-color: #ff0000;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 3px rgba(0,0,0,.5);
}




/*list view css-main list*/

.lvrow-lstm {
    width: 100%;
    height: 65px; /*row height---1*/
}

.textContainer-lstm {
    text-decoration: none;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    /*justify-content: space-between;*/
    cursor: pointer;
    border-bottom: solid 1px #b9b9b9;
    height: 65px; /*row height---1*/
    width: 100%;
}

    .textContainer-lstm:hover {
        background-color: var(--lst-row-hov-bg) !important;
        transition: background-color 0.3s ease-in-out;
        border-radius: 5px;
    }

.textSerial-lstm {
    position: absolute;
    left: 15px;
    top: 18px;
    padding: 0px;
    font-weight: 500;
    font-size: 13px;
    line-height: 13px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(0, 0, 0);
}

.textStyle-lstm {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(0, 0, 0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.textStyle-lstm-icon {
    padding-right:8px;
}
.textRightside-lstm {
    position: absolute;
    right: 10px;
    top: 18px;
    padding: 0px;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #0066a9;
}
.textRightside-lstm-fine {
    position: absolute;
    right: 10px;
    top: 30px;
    padding: 0px;
    /* font-weight: 700; */
    font-size: 12px;
    line-height: 18px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #ff0000;
}
.textRightside-lstm-fine-ico {
    font-size: 10px;
    color: #ff0000;
    padding:2px;
}

.textDetailStyle-lstm {
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    margin-right: -8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: rgb(142, 142, 142);
    cursor: pointer;
}
/*list view css*/

/*ac dets*/
.acdet-txt-al-c {
    text-align: center;
}
.acdet-txt-al-l {
    text-align: left;
}
.acdet-txt-al-r {
    text-align:right;
}
.acdet-outer {
    width: 100%;
    padding: 0px;
    border: 2px solid #747373;
    border-radius:8px;
}
.acdet-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0px;
    border: 1px solid #bababab6;
    background-color: var(--win-cont-bg-clr) !important;
}
.acdet-inner100 {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.acdet-inner75 {
    display:flex;
    flex-direction:column;
    width: 75%;
    padding: 0px;
}
.acdet-inner50 {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0px;
}
.acdet-inner33 {
    display: flex;
    flex-direction: column;
    width: 33%;
    padding: 0px;
}
.acdet-inner25 {
    display: flex;
    flex-direction: column;
    width: 25%;
    padding: 0px;
}
.acdet-inner20 {
    display: flex;
    flex-direction: column;
    width: 20%;
    padding: 0px;
}
.acdet-inner19 {
    display: flex;
    flex-direction: column;
    width: 19%;
    padding: 0px;
}
.acdet-inner17 {
    display: flex;
    flex-direction: column;
    width: 17%;
    padding: 0px;
}
.acdet-inner16 {
    display: flex;
    flex-direction: column;
    width: 16%;
    padding: 0px;
}
.acdet-inner15 {
    display: flex;
    flex-direction: column;
    width: 15%;
    padding: 0px;
}
.acdet-inner10 {
    display: flex;
    flex-direction: column;
    width: 10%;
    padding: 0px;
}
.acdet-tit {
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #00000099;
    padding: 4px 0px 0px 6px;
}
.ta-center {
    text-align:center;
    align-content:center;
    align-items:center;
    justify-content:center;
}
.fs-bold {
    font-weight: 700;
}
.acdet-lbl {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(0, 0, 0);
    padding: 2px 0px 8px 6px;
}
.acdet-lbl-readent {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: rgb(0, 0, 0);
    padding: 2px 0px 8px 6px;
}
    .acdet-cont-ico {
        font-weight: 700;
        font-size: 28px;
        line-height: 18px;
        color: rgb(0, 0, 0);
        padding: 6px;
        border: 3px solid #000;
        border-radius: 25px;
        cursor: pointer;
        opacity: 0.5;
        margin-left: 15px;
    }
.acdet-tit-readent {
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #00000099;
    padding: 4px 0px 0px 6px;
}
.readent-ch-btn-cont {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}
.acdet-cont-ico:hover {
    opacity: 1;
}
.readent-txtbx {
    font-size: 25px;
    text-align: center;
    height: 40px;
}
.readent-prelbl {
    font-size: 25px;
    text-align: center;
    height: 40px;
}

.acdet-cont-txt {
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: rgb(0, 0, 0);
    padding: 6px;   
}
.acdet-cont-etxt {
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: rgb(0, 0, 0);
    padding: 6px;
    cursor: pointer;
}
.acdet-att-outer {
    width: 100%;
    padding: 0px;
    border: 2px solid #747373;
    border-radius: 8px;
    overflow-y: scroll;
    max-height: 40vh;
}
.acdet-att-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 15px;
    border: 1px solid #bababab6;
    background-color: var(--win-cont-bg-clr) !important;
}
.acdet-att-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px;
    align-content:center;
    align-items:center;
}
.acdet-att-thumb-cont {
    display: flex;
    flex-direction: row;
}
.acdet-att-thumb {
    display: flex;
    flex-direction: row;
    background-color: #6e7885d9;
}
.acdet-att-thumb-delbtn {
    position: relative;
    color: #ff0000a3;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
    right: -9px;
    border: 2px solid #0000008c;
    height: 32px;
    border-radius: 25px;
    width: 32px;
    padding-left: 3px;
}
    .acdet-att-thumb-delbtn:hover {
        opacity: 1;
    }

.acdet-att-thumb-img {
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 1px;
    padding: 2px;
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    object-fit: cover;
    width: 240px;
    height: 120px;
}

    .acdet-att-thumb-img:hover {
        box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.8);
    }

.acdet-att-thumb-img-zm {
    width: 100%;  
    object-fit: contain;
}
.acdet-att-thumb-img-zm-outer {
    width: 100%;
    height: 100vh;
}
    /*ac dets*/


.wt-lst-opt {
    margin-right: 1px;
    cursor: pointer;
    font-size: 14px;
}
.wt-lst-opt-act {
    border: 2px solid #828282;
    /*font-size: 36px;*/
    cursor: pointer;
    border-radius: 5px;
    animation: wt-lst-opt-act-ani 0.2s;
}
@keyframes wt-lst-opt-act-ani {
    0% {transform:scale(1.2);}
    50% {transform:scaleX(2);opacity:0.5;}
    100% {transform:scaleX(1);}

}

.achist-tit {
    font-weight: 800;
    font-size: 12px;
    padding: 4px;
}
.read-calc-anal-above {
    background-color: #ff0000;
    animation: read-calc-anal-above-ani .5s infinite;
}
.read-calc-anal-below {
    background-color: #ffcb00;
    animation: read-calc-anal-below-ani .5s infinite;
}

@keyframes read-calc-anal-above-ani {
    0% {opacity:0.2;}
    50% {background-color: #d30101;
        border-radius: 50px;
    }
    100% {opacity:1;}
}
@keyframes read-calc-anal-below-ani {
    0% {opacity:0.2;}
    50% {background-color: #cca900;
         border-radius:50px;
    }
    100% {opacity:1;}
}

.btn-float-add-pay {
    position: fixed;
    right: 30px;
    bottom: 80px;
    font-size: 45px;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 3px solid #0964a9;
    border-radius: 50%;
    padding: 48px;
    cursor: pointer;
    z-index: 3;
    opacity: 0.7;
    background-color: var(--winhead);
    color: #fff;
}
    .btn-float-add-pay:hover {
        border: 4px solid #0964a9;
        opacity: 1;
    }


.btn-float-add-pay-home {
    position: fixed;
    right: 30px;
    bottom: 80px;
    font-size: 45px;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 3px solid #1a3e18;
    border-radius: 50%;
    padding: 38px;
    cursor: pointer;
    z-index: 3;
    opacity: 0.65;
    background-color: #327a2f;
    color: #fff;
}

    .btn-float-add-pay-home:hover {
        border: 4px solid #1a3e18;
        opacity: 1;
    }



.pay-hist-pend {
    color: #6cadff;
    animation: pay-hist-pend-ani 4s infinite;
    transform-origin: 32% 8px;
}
@keyframes pay-hist-pend-ani {
    0% {
        transform: rotate(0deg);
    }
    70% {
        transform: scale(0.8);
    }
    90% {
        transform: rotate(-180deg);
        
    }

}
.pay-hist-appr {
    color: #32a503;
    animation: pay-hist-appr-ani 2s infinite;
    transform-origin: 32% 8px;
}

@keyframes pay-hist-appr-ani {
    0% {
        transform: rotate(-10deg);
    }

    70% {
        transform: scale(0.8);
    }

    90% {
        transform: scale(1);
    }
}
.pay-hist-rej {
    color: #ff0000;
    animation: pay-hist-rej-ani 2s infinite;
    transform-origin: 32% 8px;
}

@keyframes pay-hist-rej-ani {
    0% {
        transform: scale(0.8);
    }
    20% {
        transform: rotate(-180deg);        
    }
    90% {
        transform: scale(1);
    }
}
.pay-trans-ac-no {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00a93c;
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    margin: 0px 0px 10px 5px;
    letter-spacing: 2px;
    background-color: #e4ffe9;
    border-radius: 25px;
    border: 2px solid #00a93c;
}

.pay-trans-ac-no-a-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #00a93c;
    margin: 10px 0px 10px 5px;
    background-color: var(--wosched-list-cont-bg-clr);
    border-radius: 15px;
    border: 2px solid var(--wosched-list-cont-sep-line) !important;
}
.pay-trans-ac-no-a-tit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    padding: 5px;
    letter-spacing: 2px;
}

.pay-trans-ac-no-a-val {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #00a93c;
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    margin: 0px 0px 10px 5px;
    letter-spacing: 2px;
    background-color: #e4ffe9;
    border-radius: 25px;
    border: 2px solid #00a93c;
    width:100%;
    animation: pay-trans-ac-no-a-val-ani 2s infinite;
}
@keyframes pay-trans-ac-no-a-val-ani {
    50% {
        transform: translateY(5px);
        background-color: #b4ffab;
        border: 2px solid #000000;
        border-radius: 15px;
        color: #000;
        letter-spacing: 3px;
    }

    100% {
        transform: translateY(0px);
    }
}