body {
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

a {
    text-decoration: none !important;
}

ul {
    padding: 0;
}

.lgn {
    background-color: #fff3e0;
}

#login {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend', sans-serif;
}

    #login .row {
        margin: 0;
        border-radius: 4px;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        background-color: #fff;
    }

    #login .log-img {
        height: 70vh;
        width: fit-content;
        object-fit: cover;
        border-radius: 4px 0 0 4px;
    }

    #login .lodctrl {
        padding: 50px 20px;
        width: 50%;
        margin: auto;
    }

        #login .lodctrl .htxt {
            font-size: 2rem;
            color: #6396cb;
            font-weight: 400;
            margin-bottom: 20px;
        }

        #login .lodctrl .form-control {
            margin-bottom: 20px;
            box-shadow: none;
        }

        #login .lodctrl .signupbtn {
            width: 100%;
            background-color: #6396cb;
            color: #fff;
            font-weight: 600;
        }

.menu-list .material-icons-outlined {
    padding: 0 15px;
    font-size: 20px;
}

.menu-list a {
    display: flex;
    align-items: center;
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
}

.dahbrd--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 30px;
    gap: 1rem;
}

.dahbrd--card {
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}


.dahbrd--grid .itm {
    display: flex;
    column-gap: 10px;
    flex-direction: row-reverse;
    justify-content: space-between;
}

    .dahbrd--grid .itm .icon {
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: antiquewhite;
        border-radius: 4px;
    }

.det--lv summary {
    list-style-type: none;
    padding-bottom: 10px;
}

    .det--lv summary:after {
        content: "\e5cf";
        color: #000;
        padding: 0;
        float: right;
        font-family: "Material Icons Outlined";
        transition: all 0.5s ease;
    }

.det--lv[open] summary:after {
    content: "\e5ce";
    transition: all 0.5s ease;
    font-family: "Material Icons Outlined";
}

.lv--list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #ccc;
    padding: 10px 0;
}

.lvsts {
    background: #daf2df;
    color: #28a745;
    padding: 5px 8px;
    border-radius: 50px;
    margin: 0;
}

.nt--aprd {
    background-color: #f9a7a1;
    color: #d93025;
}

.user--card {
    margin-top: 30px;
    background-color: #17212b;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    column-gap: 20px;
    color: #fff;
}

.user--img img {
    height: 70px;
    width: 70px;
    border-radius: 15px;
}

.reminder--user {
    margin-top: 15px;
}

.rmdr--bx {
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
}

.usr--rmdr {
    display: flex;
    column-gap: 10px;
}

    .usr--rmdr .material-icons-outlined {
        padding: 15px;
        background: #efb4b4;
        border-radius: 100px;
        font-size: 28px;
    }

.rmdr--dlt {
    display: flex;
    justify-content: flex-end;
}

    .rmdr--dlt .material-icons-outlined {
        color: #d93025;
    }

.work--calender {
    margin: 20px 0;
    background-color: #fff;
    width: fit-content;
    padding: 20px 15px;
    border-radius: 20px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}

.mnt--name {
    margin-bottom: 15px;
}

.calender--grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 10px;
    width: fit-content;
}

.date--wise {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #92ce8f;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-cmpt {
    background-color: #f5d05f;
    color: #1f1f05;
}

.leave--date {
    background-color: #e81414;
    color: #fff;
}
.holiday-date{
    background:#1a73e8;
    color:#fff;
}


.blank-date {
    background: #fff;
    color:#000;
}

.overTimeRqst {
    margin: 20px 0;
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 20px;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}

.fx--bx {
    display: flex;
    gap: 10px;
}

    .fx--bx div {
        width: 100%;
    }

    .fx--bx label {
        font-size: 14px;
        margin: 0;
    }

.overTimeSts {
    background-color: #28a745;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    #login .lodctrl {
        width: 100%;
    }

    .date--wise {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .fx--bx {
        flex-wrap: wrap;
    }
}

.dahbrd .dshitm {
    margin-bottom: 15px;
}


.dahbrd summary::-webkit-details-marker {
    display: none;
    outline: none;
}

.dahbrd summary:after {
    content: "\e5cf";
    color: #000;
    padding: 0 0 0 15px;
    margin: auto 0;
    height: 20px;
    float: right;
    font-family: 'Material Icons';
}

.dahbrd details[open] summary:after {
    content: "\e5ce";
    font-family: 'Material Icons';
}

.bg {
    background-color: #e6f1fa;
    /*background-color:#070b11;*/
    font-family: 'Lexend', sans-serif;
    /*color: #6396cb;*/
}

#prjtlst {
    font-family: 'Lexend', sans-serif;
    border-radius: 4px;
    border: none;
}

table.dataTable thead .sorting {
    /*background-color: #17212b;*/
}

.prjlist {
    margin: 30px 0;
}



table.dataTable.display tbody tr.odd {
    /*background-color: #17212b !important;*/
}

    table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
        /*background-color: #17212b !important;*/
    }

.prjnam {
    color: #1a73e8;
    font-weight: 500;
}

#prjtlst thead, #prjtlst tbody, #prjtlst th, #prjtlst td, #prjtlst tr {
    /*background-color:#fff !important;*/
    color: #3c4043;
}

#prjtlst th, #prjtlst td {
    background-color: #fff;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    #prjtlst thead, #prjtlst tbody, #prjtlst th, #prjtlst td, #prjtlst tr {
        display: block;
    }

    #prjtlst tr {
        margin-bottom: 15px;
        padding: 20px;
        border-radius: 5px;
        background-color: white;
    }


    /* Hide table headers (but not display: none;, for accessibility) */
    #prjtlst thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }



    #prjtlst td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        background-color: #fff;
    }

        #prjtlst td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }
}

.lvrqst {
    padding: 0;
}

    .lvrqst span {
        font-weight: 500;
    }

    .lvrqst .form-control {
        margin: 5px 0 10px 0;
    }

.lst {
    display: flex;
    align-content: center;
    column-gap: 10px;
    color: #6396cb;
    width: fit-content;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 15px;
}

    .lst:hover {
        color: #6396cb;
        background-color: #17212b;
    }

    .lst .material-icons-outlined {
        font-size: 20px;
    }

.dtlv {
    display: flex;
    column-gap: 20px;
}

.sbmt {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #6396cb;
    font-weight: 500;
}

    .sbmt:hover {
        color: #fff;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }

.cncl {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #d93025;
    font-weight: 500;
}

.dltbtn {
    color: #1a73e8;
    font-weight: 600;
}

.enm a {
    color: #6396cb;
    font-weight: 500;
}

.edet a {
    font-weight: 400;
    color: #6396cb !important;
}

.pghdr {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 30px;
    text-transform: capitalize;
}

.prjnme {
    color: #1a73e8;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: 600;
    font-size: 15px;
}

.lbls {
    font-weight: 500;
    margin: 10px 0 15px;
    font-size: 2rem;
}

.ppop {
    margin: 15px 0;
    display: flex;
}

.pp {
    width: auto;
}

#divWorkReportPopUp .form-control {
    margin: 5px 0 10px 0;
}

#divWorkReportPopUp span {
    font-weight: 500;
    font-size: 14px;
}

.pagntn {
    display: flex;
    margin-top: 20px;
}

.nxt {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6396cb;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

    .nxt:hover {
        color: #fff;
    }

    .nxt .material-icons-outlined {
        font-size: 18px;
    }

.chk label {
    padding: 0 5px 0 0;
    margin: 0;
}

.chk input[type=checkbox] {
    margin: 0 5px 0 0;
}

.card-view {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    width: fit-content;
    margin-top: 20px;
}

    .card-view .lbl1 {
        margin-bottom: 10px;
        display: flex;
        column-gap: 15px;
        align-items: center;
    }

    .card-view .chk {
        display: flex;
        column-gap: 15px;
        align-items: center;
    }

    .card-view .material-icons-outlined {
        color: #676b6f;
        font-size: 18px;
    }

.txtlbl {
    color: #676b6f;
    font-weight: 600;
}

.updbt {
    margin-top: 20px;
}

.bklbl {
    font-weight: 500;
    margin-top: 5px;
}

#divMailList .form-control {
    margin: 5px 0 10px 0;
}

.lblbk {
    font-size: 15px;
    font-weight: 500;
}

.lbbc {
    font-weight: 600 !important;
    margin: 0;
}

.werk {
    display: flex;
    column-gap: 10px;
    align-items: center;
    font-size: 15px;
    margin-bottom: 20px;
}

.srcbtn {
    display: flex;
    align-items: center;
    width: fit-content;
    column-gap: 5px;
}

    .srcbtn:hover {
        color: #fff;
    }

    .srcbtn .material-icons-outlined {
        font-size: 18px;
    }

.inbox-card {
    background-color: #17212b;
    color: #6396cb;
    padding: 15px;
    border-radius: 15px 15px 15px 0;
    width: fit-content;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.sndr {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: #3f5473;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbx {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
    align-items: flex-end;
}

.msgsub {
    font-size: 18px;
    font-weight: 500;
}

.mshd {
    margin-bottom: 10px;
}

.msglbl {
    font-size: 16px;
    font-weight: 500;
    color: #6396cb;
}

.msgtym {
    font-weight: 400;
    color: #888;
    font-size: 14px;
}

.msgbx {
    margin-top: 20px;
}

.mssg {
    font-weight: 400;
    color: #fff;
    font-size: 14px;
}

.rmdr .form-control {
    margin: 5px 0 10px 0;
}

.rmdr span {
    font-weight: 500;
}

.ddbtn a, .lnk a {
    color: #fff;
}

.adbtn, .upldbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    column-gap: 10px;
}

.lblft {
    font-weight: 500;
    margin: 10px 0;
}

.lbltf {
    margin: 5px 0;
}

.tblbx {
    font-weight: 400;
    margin: 15px 0;
}

    .tblbx td, .tblbx th {
        padding: 5px;
    }

.divprojectEst {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
}

.prctmenu {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

    .prctmenu a {
        padding: 5px 8px;
        border-radius: 300px;
        color: #6396cb;
    }

        .prctmenu a:hover {
            background-color: #17212b;
        }

.prjctdd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    column-gap: 5px;
    color: #1a73e8;
    padding: 5px 7px;
    transition: .3s;
}

    .prjctdd:hover {
        background-color: #e6eefa;
        border-radius: 4px;
        color: #1a73e8;
    }

.procard {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    width: fit-content;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.075);
}

.mrb {
    margin-bottom: 15px;
}

    .mrb .pghdr {
        border-bottom: solid 2px #1a73e8;
    }

.itm1 {
    margin-bottom: 10px;
}

.itm2 {
    margin-bottom: 5px;
}

.gryclr {
    color: #575a5e;
    font-weight: 500;
}

.txt {
    margin-bottom: 10px;
}

.fubtn {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
}

.pghd {
    font-weight: 500;
}

.msnv {
    margin-bottom: 15px;
}

    .msnv a {
        color: #fff;
    }

.msgul span {
    font-weight: 500;
}

.msgul .form-control {
    margin: 5px 0 10px 0;
}

.nwmssg {
    display: flex;
    align-items: center;
    font-weight: 500;
    column-gap: 5px;
    background-color: #1a73e8;
    border-radius: 300px;
    padding: 8px 14px;
    width: fit-content;
    color: #fff;
}

.prfitm {
    display: flex;
    align-items: center;
    column-gap: 5px;
    padding: 10px;
}

.empnme {
    text-transform: capitalize;
}

.tpbg .container {
    margin: 0 0 0 auto;
}

.topicns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rw .nvmenu {
    padding: 0;
}

.prjctnm {
    padding: 5px 8px;
    border-radius: 300px;
}

@media only screen and (max-width: 768px) {
    .inbx {
        display: block;
    }

    .sndr {
        margin-bottom: 8px;
    }

    .inbox-card {
        border-radius: 0 15px 15px 15px;
    }

    .topicns {
        display: block;
    }

    .usr {
        margin-top: 10px;
    }
}

.attdnc .form-control {
    margin: 5px 0 10px 0;
}

.sav {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #6396cb;
}

.emply {
    background-color: #17212b;
    border-radius: 5px;
    padding: 25px;
    color: #6396cb;
}

.dpde {
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding-bottom: 10px;
}

.disimg {
    height: 60px;
    width: 60px;
}

.nmds .name {
    font-weight: 600;
    font-size: 18px;
}

.nmds .desg {
    font-weight: 600;
    font-size: 14px;
    color: #6396cb;
    margin-top: 5px;
    text-transform: lowercase;
}

.mdmenu label {
    font-weight: 500;
}

.mdmenu .form-control {
    margin: 5px 0 10px 0;
}

.menuitm {
    margin: 10px 0;
}

.empldet {
    background-color: #070b11;
    padding: 15px 10px;
    width: fit-content;
    border-radius: 5px;
    margin-bottom: 10px;
}

.tm {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin: 5px 0;
}

.form-control {
    /*background-color: #0f161d !important;*/
    border: solid 1px #ccc;
    box-shadow: none !important;
    /*color:#fff !important;*/
    margin: 5px 0 10px 0;
}

#divtodo {
   /* background-color: #17212b;*/
    padding: 20px;
    border-radius: 5px;
    width: fit-content;
}

.lbltdo {
    font-weight: 400 !important;
}

.cpw {
    background-color: #17212b;
    padding: 25px;
    border-radius: 5px;
}

    .cpw label {
        font-size: 20px;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .cpw .form-control {
        margin: 5px 0 10px 0;
    }

.tables a {
    color: #6396cb;
}

    .tables a:hover {
        color: #6396cb;
    }

.tables .cncl {
    color: #fff;
}

    .tables .cncl:hover {
        color: #fff;
    }

.nwprjc .form-control {
    margin: 5px 0 10px 0;
}

.nwprjc label {
    font-weight: 400;
}

#divcreatetechnlgy .form-control {
    margin: 5px 0 10px 0;
}

#lirolesname1 label, .rlbl {
    font-weight: 400 !important;
}

#lirolesname {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

    #lirolesname .prvedt {
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        transition: .3s;
    }

        #lirolesname .prvedt:hover {
            border-bottom: solid #6396cb 1px;
        }

.prvdlt {
    font-weight: 500;
    padding: 4px 10px;
    /*background-color:#d93025;*/
    color: #d93025;
    border-radius: 5px;
}

    .prvdlt:hover {
        color: #d93025;
    }

.edtrol {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.rolnme {
    color: #1a73e8;
    font-weight: 600;
    padding: 5px;
    transition: .3s;
    text-transform: capitalize;
}

    .rolnme:hover {
        background-color: #ecf3fe;
        border-radius: 5px;
    }

.rlbl label {
    font-weight: 400;
    vertical-align: middle;
}

.clr-lght {
    color: #fff !important;
}

.lvrqst1 a {
    color: #6396cb;
}

.rdiobtn {
    border: none;
    margin-bottom: 15px;
}

    .rdiobtn label {
        font-weight: 500 !important;
    }

.emplactv {
    color: #1a73e8 !important;
    font-weight: 600;
    padding: 5px;
    transition: .3s;
    text-transform: capitalize;
}

    .emplactv:hover {
        background-color: #ecf3fe;
        border-radius: 5px;
    }

.clntnmes {
    margin: 15px 0;
}

.lvrqst1 {
    font-weight: 400;
}

.dlt-ftp {
    font-weight: 600;
    color: #d93025 !important;
}

.aprv-ftp {
    font-weight: 600;
    color: #28a745 !important;
}

.blk-ftp {
    font-weight: 600;
    color: #ffc107 !important;
}

.skip {
    padding: 5px 15px;
    border: solid 1px #6396cb;
    border-radius: 4px;
    color: #6396cb;
    font-weight: 500;
    background-color: transparent;
}

    .skip:hover {
        background-color: #6396cb;
        color: #fff;
    }

.mrt {
    margin-top: 15px;
}

.empdeslst {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.lbdate {
    font-weight: 500;
    color: #fff;
    margin: 10px 0;
}

.mlmsg {
    font-weight: 500;
    color: #f1f1f1;
    text-transform: uppercase;
}

.addtd {
    background-color: #6396cb;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    column-gap: 5px;
    width: fit-content;
    padding: 6px 15px;
    margin-bottom: 15px;
    font-weight: 500;
}

    .addtd:hover {
        color: #fff;
    }

.todolbl {
     
  
    text-transform: uppercase;
}

.btns {
    margin-top: 10px;
}

    .btns a, .linbtn a {
        color: #fff;
    }

.linbtn {
    margin-top: 15px;
}

.empnme1 {
    text-transform: capitalize;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.tym1 {
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: #9e9e9e;
}

.tym {
    font-weight: 500;
}

.lbl2 {
    color: #9e9e9e;
    font-weight: 500;
}

.card-cls {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.flexitm {
    display: flex;
    column-gap: 10px;
}

.downld {
    background-color: #6396cb;
    color: #fff !important;
    display: flex;
    align-items: center;
    border-radius: 4px;
    column-gap: 5px;
    width: fit-content;
    padding: 6px 15px;
    margin-top: 15px;
    font-weight: 500;
}

.clr {
    padding: 6px 15px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #28a745;
    font-weight: 500;
}

.tpmnu a {
    color: #6396cb;
}
/*#txtDOB,#txtDOB0{
background-color: #0f161d !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    border-radius:5px;
    padding:6px 12px;
    width: 110px !important;
}*/
.dte {
    display: flex;
    column-gap: 10px;
}

.dashani {
    display: flex;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    width: fit-content;
    margin-top: 50px;
    border-left: solid 4px #6396cb;
}

.cpsw {
    color: #9e9e9e;
    font-weight: 600;
}

.dlt {
    color: #9e9e9e;
}

.pjctnme {
    color: #6396cb;
    font-weight: 600;
}

.flx {
    display: flex;
    align-items: center;
}

#lirolesname1 {
    width: 200px;
}

.alclnt {
    color: #28a745;
    font-weight: 600;
}

.epmrbtn label {
    padding: 0 5px;
}

.edi-btn {
    display: flex;
    align-items: center;
    column-gap: 10px;
    background-color: #b49dd1;
    padding: 4px 10px;
    border-radius: 300px;
    color: #fff;
    width: fit-content;
}

    .edi-btn:hover {
        color: #fff;
    }

.crt {
    color: #36373b;
}

.clsd {
    background-color: #d3f2e0;
    color: #167440;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 300px;
    font-weight: 500;
}

.crt-chck input[type=checkbox] {
    display: none;
}

.chckd {
    color: #28a745 !important;
    font-weight: 600;
}

.blnc label {
    color: #9e9e9e;
}

.bln-amt {
    color: #1a73e8;
    font-size: 28px;
    font-weight: 600;
}

.inrstd {
    background-color: #b0f2ce;
    color: #167440;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 300px;
    font-weight: 500;
}

.flwup {
    display: flex;
    column-gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.cont-info {
    margin-bottom: 15px;
}

.nme {
    font-size: 20px;
    font-weight: 500;
}

.scnd {
    color: #888;
}

.stus input[type=radio] {
    display: none;
}

.stus label {
    margin: 0 5px 0 0;
    padding: 5px 8px;
}





.cllsmels {
    display: grid;
    grid-template-columns: 50% auto;
    column-gap: 10px;
}

.stus tr {
    display: flex;
    font-size: 14px;
    width: max-content;
}

@media only screen and (max-width: 768px) {
    .stus tr {
        display: grid;
        grid-template-columns: 55% 55%;
        font-size: 12px;
    }
}

.bx-card {
    margin: 15px 0;
}

.rlbl1 {
    font-weight: 500;
}

.cht label {
    padding-left: 5px;
}

.flw-clnt {
    position: relative;
}

.prev-msg {
    position: absolute;
    right: 30px;
    top: 0px;
}

.msgs {
    padding: 20px;
    width: 300px;
}

.msg-name {
    color: #888;
    font-weight: 500;
    font-size: 18px;
}

.tym-date {
    color: #888;
    font-size: 14px;
}

.invc-act input[type=checkbox] {
    display: none;
}

    .invc-act input[type=checkbox]:checked + span {
        color: red;
    }

.dpImg {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.usr {
    display: flex;
    align-items: center;
    column-gap: 10px;
    background-color: transparent;
    border: none;
    color: #17212b;
}

.snd-name {
    font-weight: 500;
    font-size: 1.2rem !important;
    color: #888;
}

.txt-msg {
    display: block;
    font-weight: 500;
    color: #555;
    margin: 10px 0;
}

.msg-lbl {
    color: #888;
    font-size: 12px;
}

.user1::after {
    display: none;
}

.user1 {
    position: relative;
}

    .user1 .dot {
        border-radius: 50%;
        background-color: #1a73e8;
        position: relative;
        right: 20px;
        top: -7px;
        height: 15px;
        width: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 3px #fff;
    }

.vw-all {
    margin: 10px 0;
}

    .vw-all a {
        padding: 4px 8px;
        background-color: #ecf3fe;
        color: #1a73e8;
        border-radius: 5px;
    }

.msgs-all {
    padding: 20px 10px;
    background-color: #fff;
    border-radius: 5px;
}

.grncolor {
    color: forestgreen;
}

.redcolor {
    color: red;
}

.orngcolor {
    color: orange;
}

.invoicetbl thead, .invoicetbl tbody, .invoicetbl th, .invoicetbl td, .invoicetbl tr {
    /*background-color:#fff !important;*/
    font-size: 13px !important;
}

.payment--card {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.flx-bx {
    display: flex;
    justify-content: space-between;
}

.flx--lbl {
    color: #888;
}

.td-border {
    border-bottom: solid 1px #888;
}

.th--hed {
    font-weight: 600;
    border-bottom: dashed 2px #ccc;
}

.bordr {
    border-bottom: dashed 1px #888;
}

.total--invoice {
    font-weight: 600;
}

.bg-dash {
    background-color: rgba(0, 0, 0, 0.05);
}

.flx-link {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
    gap: 5px;
}

.lnk-href {
    padding: 8px;
    border-radius: 4px;
    background-color: #ecf3fe;
    font-weight: 500;
    color: #1a73e8;
}

.lbl--invoice {
    font-weight: 500;
}

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

.subscription--btn {
    border: none;
    border-radius: 4px;
    padding: 8px;
    background-color: #6396cb;
    color: #ecf3fe;
    font-weight: 500;
    margin-bottom: 5px;
}

.margin--btm {
    margin-bottom: 20px;
}

.stusChecked {
    border: solid 2px #1a73e8;
    border-radius: 300px;
    padding: 5px 8px;
    background-color: #ecf3fe;
}

.flx-box {
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;
}

.mrt {
    margin-top: 15px;
}

.invc--rprt {
    display: flex;
    align-items: center;
    column-gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.dt-buttons {
    left: 0;
    margin: 10px 0;
}

.dt-button {
    border: none;
    padding: 7px 16px;
    border-radius: 4px;
    background-color: #6396cb;
    color: #fff;
}

.compUser {
    display: flex;
    justify-content: flex-end;
}

.sml--lbl {
    font-weight: 400;
    color: #1a73e8;
    width: 100%;
}

.invc--lbl {
    font-weight: 500;
    color: #676b6f;
    width: 100%;
}

.invs--amt {
    font-size: 20px;
    color: #28a745;
    font-weight: 500;
}

.Company--flex {
    color: #000;
    margin-bottom: 15px;
}

.company--details {
    background: rgba(0,0,0,.15);
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 50%;
    border: solid 2px #000;
    margin-top: 20px;
    color: #000;
    border-radius: 10px;
}

.Company--flex p {
    margin: 0;
    font-size: 18px;
}

.address--company {
    width: 50%;
}

.statusofcompany {
    width: 100%;
    color: #000;
    font-size: 10px;
    text-transform: uppercase;
    color: #17212b;
    font-weight: 500;
}

.status--comp {
    padding: 5px 16px;
    background: #1a73e8;
    border-radius: 100px;
    width: fit-content;
    color: #fff;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .company--details, .address--company {
        width: 100%;
    }
}

.holiday--list {
    margin-top: 20px;
}

    .holiday--list .sbmt {
        display: flex;
        width: fit-content;
    }

.hlydy--add {
    margin-top: 30px;
}

a.overTymApprv {
    background: #def2e3;
    color: #28a745;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}

a.overTymRjct {
    background: #ffd6d2;
    color: #d93025;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}

.ovrtym--aprv {
    display: flex !important;
    column-gap: 10px;
    font-weight: 500;
}

.ovrtym--aprvl{
    background:#fff;
    border-radius:15px;
    padding:10px 20px 0 20px;
}
.colender-direction{
    display:flex;
    margin:20px 0 0 0;
    flex-wrap:wrap;
}
.btm-pagntin{
    display:flex;
    column-gap:5px;
    align-items:center;
    margin-right:5px;
}
.btm-pagntin .lbl{
    font-size:13px;
}
.Completed{
    height:10px;
    width:10px;
    background:#28a745;
    border-radius:50%;
}
.btm-pagntin .not-cmpt{
    background:#f5d05f;
}
.btm-pagntin .leave{
    background:#e81414;
}
.btm-pagntin .holiday{
    background:#1a73e8;
}
.rmnder--card{
    background:#fff;
    border-radius:15px;
    padding:15px 10px;
    width:fit-content;
    margin-top:15px;
}
.rmdr--icn .material-icons-outlined{
    padding:8px;
    border-radius:5px;
    background:#afd0f3;
    margin-bottom:10px;
}
a.rmder--lbl{
    font-weight:500;
    color:#17212b;
    text-decoration:none;
    margin-bottom:10px;
}
a.dlt--btn--rmndr .material-icons-outlined{
    color:#d93025;
}