/*
    Autho|Developer: Isihaka Hussein Kiwory,
    Company: Ottimale,
    Autho-Email: isihakakiwory@gmail.com,
    Autho-Phone: 0742701011
*/
/* import fonts */
@font-face {
    font-family: 'Lucida Handwriting';
    src: url(../fonts/met/lucida-handwriting.TTF); /* IE9 Compat Modes */
    src: url(../fonts/met/lucida-handwriting.TTF?#iefix) format('embedded-opentype'), /* IE6-IE8 */
}

@font-face {
    font-family: 'Calibiri';
    src: url(../fonts/met/calibri-regular.ttf); /* IE9 Compat Modes */
    src: url(../fonts/met/calibri-regular.ttf?#iefix) format('embedded-opentype'), /* IE6-IE8 */
}

/* general style background-image: url(../media/images/met-watermark.png);background-position: top;background-repeat: no-repeat;background-size: cover;
    background-attachment: fixed;*/
html, body{
    margin: 0px;
    padding: 0px;
    font-family: 'Calibiri', 'Trebuchet MS', 'Nunito', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 100%;
    position: relative;
   }

/* header */
.cover-note-header, .app-header-bar{
    background: #fff;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
    padding: 0px 1%;
    width: 100%;
    margin: 10px 0px;
    border: 1px solid #B6840020;
}

   /*Button color*/

.bg-company{
    background-color: #B68400 !important;
    color: #ffffff !important;
}
.txt-color-company{
    color: #B68400 !important;
}

   .btnsuccessicl-a{
    background-color: #B68400 !important;
    color: #ffffff !important;
   }

   .filter-button-top{
    float:left;width:100%;border-radius:6px;margin-top: 18px !important; color:#333;
   }

   .error-password{color: #B68400 !important;font-size: 12px;margin: 5px;}

   /*End*/

   .line-break{width: 100%;height: 1px;clear: both;display:block;}

   .table-payment{
       border-collapse: collapse;
       width: 100%;
       margin: 10px 0px;
       padding: 10px 0px;
   }

   #btn-stamp-elect{
       object-fit: contain;
       width: 160px;
       height: 130px;
   }

   #viewminimg{
    width: 100%;
    min-height: 200px;
    clear: both;
    object-fit: contain;
   }

   .bg_main{
    background: #B68400 !important;
    color: #fff !important;
   }

   #btnAddTarget, #btnViewTargets{
       float:right;
       margin: 0px 0px 0px 10px;
       padding: 8px 2%;
       background: #fff8f8;
       border: 2px solid #fff8f8;
       border-radius: 3px;
       font-weight: bold;
       font-size: 12px;
       transition: 1s;
   }

   #btnAddTarget:hover, #btnViewTargets:hover{
    box-shadow: 0px 6px 9px 0 rgba(0, 0, 0, 0.28), 0 8px 12px 0 rgba(0, 0, 0, 0.28);
    transition: 1s;
   }

   .table-payment td{
       padding: 15px 2%;
       border: 8px solid #fff8f8;
   }

    .required-fields{
        color: #B68400;
    }
    .priceformated{
        color: #B68400;
        float: right;
        font-size: 14px;
        font-weight: bold;
    }
    .hidden-column{
        display: none;
        width: 20px;}
    .fixed-column{width: 100px;}
    .fixed-column-text{width: 250px;}
    .dspdata{padding: 0px 4px;}
    h2 a{cursor: pointer;}
    #nav-top-inc .nav-top a:hover, #top-agent a:hover{color: #B68400 !important;}

    .bg-main-met{background-color: #B68400 !important;color: #fff; padding: auto 2% !important;border-radius: 4px !important; font-size: 12px !important;margin-left: -3px !important;}

    /* images style images-full */
    #images-full{
        width: 900px !important;
        height: 550px;
        clear: both;
        display: block;
    }

    /* login container */
    .handwriting{font-family: 'Lucida Handwriting', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';}

    /* container modal */
.how-to-pay-cont{
    width: 90%;
    min-height: 600px;
    background-color: #fff;
    padding: 10px 2%;
    z-index: 300000px;
    margin: 20px auto;
    top: 20px;
    border-radius: 6px;
    position: absolute;
    left: 5%;
    right: 5%;
    box-shadow: 0px 6px 9px 0 rgba(0, 0, 0, 0.28), 0 8px 12px 0 rgba(0, 0, 0, 0.28);
    display: none;
}
.how-to-pay-cont .header-content{
    border-bottom: 1pz solid #f2f4f4;
    padding: 20px 0px;
}
.how-to-pay-cont .btnclose-modal{
    float: right;
    color: #B68400;
    cursor: pointer;
}
.how-to-pay-cont #images-full-modal{
    width: 100% !important;
    height: 550px;
    clear: both;
    display: block;
}

.btnSearchMotorDetails{
    padding: 5px 2%;
    width: 100%;
    border: 1px solid #B68400;
    background: #B68400;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
}

.btnActivelink{
    color: #B68400 !important;
    font-weight: bold;
}

/* status */
.span-status{
    display: block;
    font-size: 8px;
    border-radius: 25px;
    padding: 3px 2px;
    min-width: 60px;
    max-width: 75px;
    text-align: center;
}
.span-status-rec{
    display: block;
    font-size: 9px;
    border-radius: 25px;
    padding: 2px 2px;
    min-width: 40px;
    max-width: 50px;
    text-align: center;
}
.bg-active{
    background-color: #2ecc71;
    color: #fff;
}
.bg-recorded{
    background-color: #B68400;
    color: #fff;
}
.button-circle{
    background-color: #B68400;
    color: #fff;
    padding: 4px 8px;
    border-radius: 50%;
    text-align: center;
}
.bg-inactive{
    background-color: #ffcf17;
    color: #222;
}
.bg-incomplete{
    background-color: #B68400;
    color: #222;
}

#block-to-break{
    height: 20px;
    clear: both;
    width: 100%;
    margin: 5px;
    padding: 5px;
    display: block;
}

.paynumber{
    background-color: #ffcf17;
    color: #222;
    margin: 3px 0px;
    min-width: 50%;
    padding: 12px 2%;
    text-align: center;
    font-size: 28px;
    border-radius: 3px;
}

.paynumberid{
    background-color:#EA8C38;
    color: #222;
    margin: 10px 0px;
    min-width: 50%;
    padding: 10px 2%;
    text-align: center;
    border-radius: 3px;
}
.paynumberstatus{
    margin: 10px 0px;
    min-width: 50%;
    padding: 5px 2%;
    text-align: left;
    color: #B68400;
    border-radius: 3px;
    font-weight: bold;
    font-size: 32px;
}
.document-details-temp img{
    width: 30.33%;
    float: left;
    height: 250px;
    margin: 0px 1.5% 20px 1.5%;
    object-fit: cover;
    border-radius: 4px;
}

.document-details-temp .pdfviewtran{
    width: 30.33%;
    float: left;
    height: 250px;
    line-height: 250px;
    margin: 0px 1.5% 20px 1.5%;
    object-fit: cover;
    border-radius: 4px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    background-color: #fff8f8;
}

.document-raised{
    width: 100%;
    clear: both;
    min-height: 200px;
}
.document-raised img{
    float: left;
}
.imageview{
    width: 30.33%;
    float: left;
    height: 250px;
    margin: 0px 1.5% 20px 1.5%;
    object-fit: cover;
}

.pdfview{
    width: 30.33%;
    float: left;
    height: 250px;
    line-height: 250px;
    margin: 0px 1.5% 20px 1.5%;
    object-fit: cover;
    display: block;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    background-color: #fff8f8
}

/* hidden container */

.display-none{
    display: none;
}
.display-block{
    display: block;
}

/* text color */
.txt-color-blue {
    color:#B68400;
    padding: 5px 0px 0px 0px !important;
    margin: 5px 0px 0px 0px !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.add-branches,.view-active, .view-inactive, .add-agents, .customer-details-temp, .payment-details-temp,.motor-details-container, .transaction-details-temp,.endosement-container, .document-details-temp{display: none;}
/* background color */
.bg-color-a{
    background-color: #B6840083 !important;
    color: #222 !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.bg-color-clm{
    background-color: #B6840090 !important;
    color: #222 !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.bg-color-clo{
    background-color: #00376490 !important;
    color: #222 !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.bg-color-b{background-color: #B6840083 !important;color: #222 !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-c{color: #222;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-d{background-color: rgba(255, 255, 255, 0.75) !important;color: #222;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-e{background-color: rgba(255, 255, 255, 0.75) !important;color: #222;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-f{background-color: rgba(255, 255, 255, 0.75) !important;color: #222;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-ea{background-color: rgba(255, 255, 255, 0.75) !important;color: #222;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);}
.bg-color-fa{background-color: #CD6155  !important;color: #222;}

.bg-color-v1, .bg-color-v2, .bg-color-v3{background-color: #B6840045 !important;color: #222;}
.bg-color-v4,.bg-color-v5, .bg-color-v6{background-color: #B6840094 !important;color: #222;}
.bg-color-v7,.bg-color-v8, .bg-color-v9{background-color: #B6840045 !important;color: #222;}
.bg-color-v10, .bg-color-v11, .bg-color-v12{background-color: #B6840094 !important;color: #222;}

.bg-color-vp1, .bg-color-vp2{background-color: #B6840045 !important;color: #222;}
.bg-color-vp3, .bg-color-vp4{background-color: #B6840094 !important;color: #222;}
.bg-color-vp5, .bg-color-vp6{background-color: #B6840045 !important;color: #222;}
.bg-color-vp7, .bg-color-vp8{background-color:#B6840094 !important;color: #222;}
.bg-color-vp9, .bg-color-vp10{background-color: #B6840045 !important;color: #222;}
.bg-color-vp11, .bg-color-vp12{background-color: #B6840094  !important;color: #222;}
.btnsuccess{background-color: #2ecc71 !important;color: #fff;}
.btnsuccess:hover{background-color: #2ecc71 !important;color: #fff;box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.18), 0 4px 8px 0 rgba(0, 0, 0, 0.18);}

.icons-txt-white{
    color: #fff !important;
}

#exist-customer, #search-motor{
    background-color: #f4f6f6 !important;
}

.btn-filter-date{
    background-color: #f4f6f6 !important;
}

.btn-in-h2{
    float: right;
    background-color: #B68400;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #B68400;
    padding: 6px 1%;
    border-radius: 4px;
}

/* modal */
#modal-sub-user-pro{
    padding: 26px 0% 6px 0px;
    min-height: 280px;
    width: 20%;
    background-color: #fff;
    position: absolute;
    right: 1%;
    top: 60px;
    display: none;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.18), 0 4px 8px 0 rgba(0, 0, 0, 0.18);
    z-index: 100000;
}
#modal-sub-user-pro .user-pro-img{
    min-height: 120px;
    width: 100%;
    margin: 0px 0px 5px 0px;
    clear: both;
    display: block;
    text-align: center;
    position: relative;
}

#modal-sub-user-pro .user-pro-img img{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    padding: 0px;
    border: 2px solid #F4F6F7;
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
#modal-sub-user-pro .user-pro-img h4{
    padding: 15px 6%;
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
}
#modal-sub-user-pro .profile-links{
    padding: 12px 3%;
    text-align: center;
    border-bottom: 1px solid #F4F6F7;
    border-top: 1px solid #F4F6F7;
    margin: 0px 0px 0px 0px;
    font-size: 14px;
    font-weight: bold;
}

#modal-sub-user-pro .profile-links-a{
    padding: 12px 3%;
    text-align: center;
    border-bottom: 1px solid #F4F6F7;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

#modal-sub-user-pro .profile-logout{
    padding: 12px 3%;
    text-align: center;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

#modal-sub-user-pro a:hover{
    color: #B68400 !important;
}
/* end modal */

#header-from-container{
    width: 100%;
    padding: 5px 2%;
    background-color: #f2f4f480;
    border-radius: 4px;
    min-height: 65px;
    clear: both;
    margin: 0px 0px 10px 0px;
}

/* column layout */
.filter-range-date{
    float: right;
    width: 48%;
    margin-top: -20px;
}
.btn-filter-date{
    padding: 4px 0%;
    margin: 20px 0px 0px 0px;
    background-color: #1A5276;
    color: #fff;
    border-radius: 6px;
    border: 1px solid #1A5276;
    display: block;
    cursor: pointer;
}
.form-col3-left h5, .form-col3-mid h5{margin: 3px 0px 0px 0px;padding: 3px 0px;font-size: 9px;font-weight: lighter;}
.column-fixed-width{
    max-width: 190px;
    margin: 0px 10px 0px 0px;
}
.form-filter-left{width: 41.5%;float: left;padding: 1px 0%;margin: 0px;}
.form-filter-mid{width: 41.5%;float: left;padding: 1px 0%;margin: 0px 1.5%;}
.form-filter-right{width: 13%;float: left;padding: 1px 0%;margin: 0px;}

.form-col3-left{width: 41.5%;float: left;padding: 3px 0%;margin: 0px;}
.form-col3-mid{width: 41.5%;float: left;padding: 3px 0%;margin: 0px 1.5%;}
.form-col3-right{width: 13%;float: left;padding: 3px 0%;margin: 0px;}

.view-col-full{width: 100%;padding: 5px 0px;clear: both;}
.view-col-full-v2{width: 100%;padding: 1px 0px;clear: both;margin:0px}
.view-col-half-left{width: 49.5%;float: left;padding: 3px 0.5% 3px 0%;}
.view-col-half-right{width: 49.5%;float: right;padding: 3px 0% 3px 0.5%;}
.view-col3-left{width: 32%;float: left;padding: 3px 0%;margin: 0px;}
.view-col3-mid{width: 32%;float: left;padding: 3px 0%;margin: 0px 2%;}
.view-col3-right{width: 32%;float: right;padding: 3px 0%;margin: 0px;}
.view-col4-left{width: 24%;float: left;padding: 3px 0%;margin: 0px;}
.view-col4-mid-a{width: 24%;float: left;padding: 3px 0%;margin: 0px 1%;}
.view-col4-mid-b{width: 24%;float: left;padding: 3px 0%;margin: 0px 1%;}
.view-col4-right{width: 24%;float: right;padding: 3px 0%;margin: 0px;}
.view-col4-left h5, .view-col4-mid-a h5, .view-col4-mid-b h5, .view-col4-right h5, .view-col-full h5, .view-col-half-left h5, .view-col-half-right h5, .view-col3-left h5, .view-col3-mid h5, .view-col3-right h5{margin: 6px 0px 0px 0px;padding: 5px 0px;font-size: 12px;font-weight: lighter;}
.view-col-full h3{font-size: 14px;margin: 6px 0px 0px 0px;padding: 5px 0px;}
/* end column layout */
#block-div{
    clear: both;
    height: 5px;
    padding: 2px 0px;
    margin: 2px 0px;
    width: 100%;
    background-color: transparent;
}
/* input layout */
.select-full-width{width: 100%;padding: 10px 2%;border: 1.8px solid #ebedef;border-radius: 4px;margin: 0px 0% 10px 0%;transition:1s;}
.input-full-width{width: 97%;padding: 11px 1.5%;border: 1.8px solid #ebedef;border-radius: 4px;margin: 0px 0% 10px 0%;transition:1s;}
.input-full-width-v2{width: 98.5%;padding: 11px 0.75%;border: 1.8px solid #ebedef;border-radius: 4px;margin: 0px 0% 10px 0%;transition:1s;}
.txt-full-width{width: 97%;padding: 5px 1.5%;border: 1.8px solid #ebedef;border-radius: 4px;min-height: 100px;margin: 0px 0% 10px 0%;transition:1s;}
.txt-full-width-v2{width: 98%;padding: 5px 1%;border: 1.8px solid #ebedef;border-radius: 4px;min-height: 100px;margin: 0px 0% 10px 0%;transition:1s;}
/* end input layout */


/* status response */
.response-status{
    font-size: 48px;
    color: #2ecc71;
}
.bg-success-test{
    background-color: #B68400 !important;
}
.bg-met-color{
    background-color: #B68400 !important;
    color: #fff !important;
}
.btnsuccess-tira{
    background-color: #ffcf17 !important;
}

/* end */

/* button style */
.btnLinkDanger{
    float:right;
    font-size:13px;
    text-decoration:none;
    color: #B68400;
    font-weight: bold;
}

#sendRequest, #sendRequestStatus, #sendRequestTR, #sendRequestTRnon, .sendRequestTRnon{
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 10px;
    cursor: pointer;
    border:2px solid #B68400;
    background-color: #B68400;
    color: #fff;
}
#sendRequestStatus{
    display: none;
}
.sendRequestTRnon{
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 22px;
    cursor: pointer;
    border:2px solid #ffcf17;
    background-color: #ffcf17;
    color: #fff;
}
#sendRequestTR:hover, #sendRequestTRnon:hover, .sendRequestTRnon:hover, .clearError:hover{
    box-shadow: 0px 5px 7px 0 rgba(0, 0, 0, 0.2), 0 7px 9px 0 rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.clearError{
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 22px;
    cursor: pointer;
    border:2px solid #B68400;
    background-color: #B68400;
    color: #fff;
}

#btn-float-right-side{
    float: right;
}
#btn-float-right-side-print{
    float: right;
    background-color: #B68400 !important;
}

#btn-float-left-side{
    float: left;
}
.btnSubmit{
    width:100%;
    padding:8px 2%;
    text-align:center;
    background-color:#003764;
    border:2px solid #003764;
    color:#fff;
    font-weight:bold;
    font-size:16px;
    margin:6px 0px 0px 0px;
    border-radius:10px;
}
.btnSubmitV2{
    width:100%;
    padding:8px 2%;
    text-align:center;
    background-color:#B68400;
    border:2px solid #B68400;
    color:#fff;
    font-weight:bold;
    font-size:22;
    margin:10px 0px 0px 0px;
    border-radius:4px;}

    .btn-delete-data-v1{
        padding:1px 3px;
        text-align:center;
        background-color:#B68400;
        border:2px solid #B68400;
        color:#fff;
        font-weight:bold;
        font-size:8px;
        margin:2px 5px 0px 5px;
        border-radius:4px;
        float: left;
    }
    .btn-success-ac-v1{
        padding:1px 2px;
        text-align:center;
        background-color:#2ecc71;
        border:2px solid #2ecc71;
        color:#fff;
        font-weight:bold;
        font-size:8px;
        margin:2px 5px 0px 5px;
        border-radius:4px;
        float: left;
    }

    .btn-success-edit{
        padding:1px 2px;
        text-align:center;
        background-color:#ffcf17;
        border:2px solid #ffcf17;
        color:#fff;
        font-weight:bold;
        font-size:8px;
        margin:2px 5px 0px 5px;
        border-radius:4px;
        float: left;
    }

    .btn-success-ac-v2{
        padding:1px 2px;
        text-align:center;
        background-color:#B68400;
        border:2px solid #B68400;
        color:#fff;
        font-weight:bold;
        font-size:8px;
        margin:2px 5px 0px 5px;
        border-radius:4px;
        float: left;
    }

/* end */



/* top navigation nav-top-inc style */
#nav-top-inc{
    height: 90px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    clear: both;
    background-color: transparent;
}

#nav-top-inc .nav-top{
    float: left;
    width: 100%;
    margin: 0px;
    height: 90px;
    padding: 0px 0% 0px 0px;
    text-align: center;
    color: #333;
    background-color: transparent;
}
#nav-top-inc .nav-top .left-nv{
    width: 70%;
    margin: 0px;
    float: left;
    height: 70px;
    text-align: left;
    padding: 0px;
}
#nav-top-inc .nav-top .left-nv h2{
    padding: 0px 0%;
    text-align: left;
    margin: 23px 2px 7px 2px;
    font-size: 24px;
    font-weight: bold;
}

#nav-top-inc .nav-top .left-nv h2 a{
    padding: 0px;
    text-align: right;
    font-size: 13px;
    margin-top: 7px;
    font-weight: bold;
    float: right;
}

#nav-top-inc .nav-top .left-nv a:hover{
    color: #B68400 !important;
}

#nav-top-inc .nav-top .left-nv h4{
    padding: 0px 0%;
    text-align: left;
    margin: 10px 4px 5px 4px;
    font-size: 11px;
    font-weight: lighter;
}

#nav-top-inc .nav-top .right-nv{
    float: right;
    width: 30%;
    height: 70px;
    line-height: 70px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
}
#nav-top-inc .nav-top .right-nv li{
    float: right;
    list-style: none;
    cursor: pointer;
    padding: 0px 2%;
    margin: 0px 2px;
    font-size: 14px;}

#nav-top-inc .nav-top .right-nv  .img-elife-logo{
    height: 65px;
    width: 140px;
    margin: 8px 8px 0px 0px;
    object-fit: contain;
    float: right;
    border-radius: 5px;}

#nav-top-inc .nav-top .right-nv li img{
    height: 24px;
    width: 24px;
    margin: -3px 0px 0px 0px;
    object-fit: cover;
    border-radius: 5px;}

#nav-top-inc .nav-top .right-nv li span{
    font-size: 11px;
    font-weight: bold;}
/* end here */

/* side navigation nav-side-inc style */
#nav-side-inc{
    float: left;
    width: 18%;
    height: 97%;
    margin: 0px;
    padding: 1.5% 1%;
    text-align: center;
    color: #333;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.70);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

#nav-side-inc .user-info{
    width: 100%;
    height: 170px;
    clear: both;
}

#nav-side-inc .user-info img{
    width: 80%;
    height: 150px;
    clear: both;
    margin: 0px auto 10px auto;
    object-fit: contain;
}

#nav-side-inc article{
    width: 100%;
    position: relative;
}

#nav-side-inc article a{
    width: 48%;
    height: 80px;
    float: left;
    margin: 3px 1% 4px 1%;
    transition: 1s;
    color: #333;
    text-align: center;
    padding: 0px 0px 15px 0px;
    text-decoration: none;
    position: relative;
}

#nav-side-inc article a section{
    padding: 12px 0px 0px 0px;
}

#nav-side-inc article a section span{
    display: block;
    padding: 4px 1%;
    font-size: 12px;
}

#nav-side-inc article a label{
    position: absolute;
    top: 10px;
    right: 30px;
    background-color: #B68400;
    height: 20px;
    width: 20px;
    font-size: 10px;color: #fff;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    display: none;
}

#nav-side-inc article a:hover, #nav-side-inc article .activeLink{
    border-radius: 4px;
    background-color: #B68400;
    color: #fff;
    font-weight: bold;
    transition: 1s;
    box-shadow: 0px 6px 9px 0 rgba(0, 0, 0, 0.27), 0 7px 12px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#nav-side-inc article a ul{
    float: right;
    min-height: 100px;
    padding: 10px 2%;
    z-index: 9000;
    background: rgb(133, 193, 233);
    top: 0px;
    left: 95px;
    min-width: 200px;
    position: absolute;
    margin: 0px;
    list-style: none;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    text-align: left;
}

/* end here */

/* body container body-container style */
#body-container{float: right;width: 77.5%;min-height: 500px;padding: 0px;margin: 0px 2% 0px 1.5%;color: #333;background-color: transparent;}


/* home page in admin, staff, agent */
#body-container .analytics-div-container, #body-container #analytics-div-container{width: 48%;float: left;min-height: 490px;padding: 0px;margin: 0px 2% 20px 0px;background: transparent;}

#body-container .analytics-full-container{width: 100%;clear:both;min-height: 490px;padding: 0px;margin: 0px 0% 20px 0px;background: transparent;}

#body-container #small-container-right-a{
    width: 50%;float: left;min-height: 370px;padding: 0px 0% 10px 0px;margin: 0px;background: transparent;border-radius: 5px;}
    #body-container #small-container-right-a h2{padding: 5px 0px 10px 0px;margin: 0px;font-size: 16px;}

#body-container #small-container-right{
width: 50%;float: left;min-height: 490px;padding: 0px 0%;margin: 0px 0px 20px 0px;background: transparent;border-radius: 5px;}
#body-container #small-container-right h2{padding: 5px 0px 10px 0px;margin: 0px;font-size: 16px;}

#body-container #small-container-right .maps{width:100%;height: 464px; padding: 3px 0.7%;background-color:#FFF;border-radius: 5px;}
#body-container #small-container-right #maps{width:100%;height: 458px;}


#body-container #small-container-right #filter-bar-container{
    border-radius: 4px;
    padding: 10px 2%;
    background: #f4f9f9;
    width: 100% !important;
    border: 1px solid #dddeee;
}
.accordion-container{
    border-radius: 4px;
    padding: 5px 2%;
    background: #f4f9f9;
    width: 100% !important;
    border: 1px solid #dddeee;
}

#top-agent{
    width: 100%;
    padding: 11px 3% 6px 3%;
    border-radius: 4px;
    min-height: 200px;
    margin: 10px 0px 0px 0px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.70);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}
#top-agent h4{
    margin: 0px;
    padding: 0px;
    font-size: 15px;
}
#top-agent .rank-tb{
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0px 0px 0px;
}
#top-agent .rank-tb thead{
    margin: 0px;
    background-color: #FEF9E7;
    color: #222;
    font-size: 14px;
}
#top-agent .rank-tb thead th{
    padding: 8px 5px 8px 10px;
    font-size: 12px;
}
#top-agent .rank-tb tbody td{
    padding: 6.9px 5px 6.9px 10px;
    font-size: 13px;
}
#top-agent .rank-tb tbody tr{
    background-color:#FFF;
}
#top-agent .rank-tb tbody tr:nth-of-type(even){
    background-color:#FEF9E7;
}
#top-agent .rank-tb tbody tr:hover{
    background-color:#FEF9E7;
    box-shadow: 0px 2px 3px 0 rgba(133, 193, 233, 0.12), 0 3px 4px 0 rgba(133, 193, 233, 0.15);
    cursor: pointer;
}
#body-container #analytics-div-container .analytics-container-small-a{
width: 49%;float: left;height: 162px;padding: 0px;margin: 0px 1% 0px 0px;border-radius: 5px;}
#body-container #analytics-div-container .analytics-container-small-b{
width: 49%;float: left;height: 162px;padding: 0px;margin: 0px 0% 0px 1%;border-radius: 5px;}
#body-container #analytics-div-container .analytics-container-small-ab{
width: 49%;float: left;height: 162px;padding: 0px;margin: 15px 1% 0px 0%;border-radius: 5px;}
#body-container #analytics-div-container .analytics-container-small-bb{
width: 49%;float: left;height: 162px;padding: 0px;margin: 15px 0% 0px 1%;border-radius: 5px;}

#body-container #analytics-div-container .analytics-container-small-fa{
    width: 24%;float: left;height: 162px;padding: 0px;margin: 0px 1.3% 15px 0px;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-fb{
    width: 24%;float: left;height: 162px;padding: 0px;margin: 0px 1.3% 15px 0%;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-fc{
    width: 24%;float: left;height: 162px;padding: 0px;margin: 0px 1.3% 15px 0%;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-fd{
    width: 24%;float: left;height: 162px;padding: 0px;margin: 0px 0% 15px 0%;border-radius: 5px;}

#body-container #analytics-div-container .analytics-container-small-ha{
    width: 49%;float: left;height: 240px;padding: 0px;margin: 0px 1% 0px 0px;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-hb{
    width: 49%;float: left;height: 240px;padding: 0px;margin: 0px 0% 0px 1%;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-hab{
    width: 49%;float: left;height: 240px;padding: 0px;margin: 15px 1% 0px 0%;border-radius: 5px;}
    #body-container #analytics-div-container .analytics-container-small-hbb{
    width: 49%;float: left;height: 240px;padding: 0px;margin: 15px 0% 0px 1%;border-radius: 5px;}

#body-container #analytics-div-container #analytics-container-small h2{font-size: 16px;font-weight:bold;
        padding: 10px 0px 10px 4%;margin: 0px;}
#body-container #analytics-div-container #analytics-container-small .number-total{float: left;font-size: 24px;font-weight: bold;width: 65%;margin: 0px;padding: 0px;height: 85px;line-height: 85px;text-align: center;}



#body-container #analytics-div-container #analytics-container-small .contents-title{float: left;font-size: 20px;font-weight: bold;width: 35%;margin: 0px;padding: 0px;height: 85px;line-height: 85px;text-align: center;}
#body-container #analytics-div-container #analytics-container-small .content-sub-title{padding: 4px 2%;background: rgba(0,0,0,0.1);border-radius: 3px;clear: both;margin: 0px 3%;width: 50%;color: #222;font-size: 10px;font-weight: bold;}

#body-container .analytics-full-container .content-sub-title{padding: 4px 2%;background: rgba(0,0,0,0.1);border-radius: 3px;clear: both;margin: 0px 3%;min-width: 50% !important;color: #222;font-size: 10px;font-weight: lighter !important;}

#body-container #analytics-div-container #analytics-container-small .contents-title span{
    background: #B6840010;
    width: 60px;
    height: 65px;
    line-height: 65px;
    margin: 10px 30px 10px 0px;
    color: #191919;
    display: block;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 25px;
    border-top-right-radius: 15px;}







#body-container #analytics-div-container #analytics-container-height h2{font-size: 16px;font-weight:bold;
        padding: 10px 0px 10px 4%;margin: 0px;}

#body-container #analytics-div-container #analytics-container-height .number-total{
    float: left;
    width: 78%;
    margin: 0px;
    padding: 0px;
    height: 170px;
    text-align: center;
}

#body-container #analytics-div-container #analytics-container-height .number-total span{font-size: 24px; font-weight: bold;text-align: center;}
#body-container #analytics-div-container #analytics-container-height .number-total p{font-size: 18px;font-weight: lighter;padding:40px 0% 0px 8%;text-align: left;}
#body-container #analytics-div-container #analytics-container-height .contents-title{
    float: left;
    font-size: 26px;
    font-weight: bold;
    width: 22%;
    margin: 0px;
    padding: 0px;
    height: 170px;
    line-height: 170px;
    text-align: center;}

#body-container #analytics-div-container #analytics-container-height .content-sub-title{
    padding: 4px 2%;background: rgba(0,0,0,0.1);border-radius: 3px;clear: both;margin: 0px 3%;width: 50%;color: #222;font-size: 10px;font-weight: bold;}
    #body-container #analytics-div-container #analytics-container-height .contents-title span{
        background: #B6840010;
        width: 60px;
        height: 65px;
        line-height: 65px;
        margin: 50px 10px 10px 0px;
        color: #3d2427 !important;
        display: block;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 25px;
        border-top-right-radius: 15px;}

#body-container #analytics-div-container #analytics-container-height .table-stats{
    width: 93%;
    height: auto;
    border-collapse: collapse;
    margin: 30px 1.5% 0px 5.5%;
}

 #analytics-container-height .table-stats tr:nth-of-type(1){background: #B6840030;}
 #analytics-container-height .table-stats tr:nth-of-type(3){background: #B6840030;}
 #analytics-container-height .table-stats td{padding: 6px 4%;}

#body-container #analytics-div-container #analytics-container-height .number-total .table-stats .table-stats-hd{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color:#3d2427 !important;
}
#body-container #analytics-div-container #analytics-container-height .number-total .table-stats .table-stats-td{
    text-align: right;
    font-size: 15px;
    font-weight: bold;
    color:#3d2427 !important;
}
#body-container .analytics-full-container .number-total{
    float: left;
    width: 78%;
    margin: 0px;
    padding: 0px;
    height: 170px;
    text-align: center;
    font-size: 17px !important;
    font-weight: bold;
}
/* chart */
#simple-chart-design-left{
    width: 64%;
    float: left;
    min-height: 500px;
    background-color: transparent;
}
#simple-chart-design-right{
    width: 33%;
    float: right;
    margin: 0px 0px 0px 3%;
    min-height: 500px;
    background-color: transparent;
}

#simple-chart-design-right article{
    width: 100%;
    padding: 10px 4%;
    margin: 5px 0px 18.2px 0px;
    min-height: 180px;
    background-color: #fdfefe;
    border-radius: 6px;
    clear: both;
}
#simple-chart-design-right article h3{
    padding: 5px 0px 10px 0px;
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
 }

 #simple-chart-design-right article a{
     padding: 8px 4%;
     background-color:#f7f9f9;
     font-size: 12px;
     font-weight: bold;
     min-width: 40%;
     border-radius: 4px;
     text-decoration: none;
     color: #222;
     transition: 1s;
 }

 #simple-chart-design-right article a:hover{
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 4px 0 rgba(0, 0, 0, 0.11);
    transition: 1s;
 }

.full-div-width-block-chart-a{
    width: 100%;
    padding: 22px 2%;
    margin: 5px 0px;
    border-radius: 5px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.83);
    border-radius: 0px;
    border: 1px solid #B6840030;
    min-height: 500px;
    clear: both;
}
.full-div-width-block-chart-b{
    width: 100%;
    padding: 22px 3%;
    margin: 15px 0px 10px 0px;
    border-radius: 5px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.83);
    border-radius: 0px;
    border: 1px solid #B6840030;
    min-height: 500px;
    clear: both;
}

.chart-b-left{
    width: 49%;
    padding: 10px 1%;
    margin: 25px 1% 20px 0px;
    border-radius: 5px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.83);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    min-height: 500px;
    float: left;
}

.chart-b-right{
    width: 49%;
    padding: 10px 1%;
    margin: 25px 0px 20px 1%;
    border-radius: 5px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.83);
    border-radius: 0px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    min-height: 500px;
    float: right;
}
.full-div-width-block-chart-a h2, .full-div-width-block-chart-b h2, .chart-b-left h2, .chart-b-right h2{
    font-size: 16px;
    font-weight: bold;
}



/* Reports */




/* container style */

.full-div-width-block, .full-div-width-block-v{
    width: 100%;
    padding: 14px 1.5%;
    margin: 5px 0% 20px 0px;
    border-radius: 5px;
    min-height: 200px;
    clear: both;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.83);
    border-radius: 0px;
    border: 1px solid #B6840030;
}

.full-div-width-block-transparent{
    width: 100%;
    padding: 2px 0%;
    margin: 5px 0%;
    border-radius: 5px;
    min-height: 100px;
    clear: both;
    background-color: transparent;
}

.full-div-width-block h2{
    margin: 0px;
    padding: 5px 0px 10px 0px;
    font-size: 18px;
}

.full-div-width-block-v h2{
    margin: 0px;
    padding: 5px 0px 10px 0px;
    font-size: 18px;
}

.full-div-width-block h2 button, .full-div-width-block-v h2 button{
    float: right;
    padding: 3px 0.5%;
    margin: 0px 0px 0px 10px;
    border-radius: 2px;
    border: 2px solid transparent;
    cursor: pointer;
    background-color: transparent;
    font-size: 14px;
}
.btnTbActive{
    color: #B68400;
    font-weight: bold;
}

/* table style */
#normaldb thead{ font-size: 13px !important; }
#normaldb thead th{ white-space:nowrap; background-color: #B6840088 !important;color: #000;}
#normaldb tbody{ font-size: 12px !important; }
#normaldb tbody tr:hover{background-color: #fbfcfc !important;color: #000;}

#normalda thead{ font-size: 13px !important; }
#normalda thead th{ white-space:nowrap; background-color: #B6840088 !important;color: #000;}
#normalda tbody{ font-size: 12px !important; }
#normalda tbody tr:hover{background-color: #fbfcfc !important;color: #000;}

#normaldc thead{ font-size: 13px !important; }
#normaldc thead th{ white-space:nowrap; background-color: #B6840088 !important;color: #000;}
#normaldc tbody{ font-size: 12px !important; }
#normaldc tbody tr:hover{background-color: #fbfcfc !important;color: #000;}

#normaldd thead{ font-size: 13px !important; }
#normaldd thead th{ white-space:nowrap; background-color: #B6840088 !important;color: #000;}
#normaldd tbody{ font-size: 12px !important; }
#normaldd tbody tr:hover{background-color: #fbfcfc !important;color: #000;}

.full-table-sty{ margin: 10px 0px 0px 0px;width:100%;border-collapse:collapse; }
.full-table-sty td .hidecolumn{ display: none; }
.full-table-sty .square-img-table{ width:40px;height:40px;object-fit:contain;object-position:center; }
.full-table-sty thead{ background:#fbfcfc;color:#B68400;padding:0px 0%;margin:0px;text-align:left; }
.full-table-sty th{ padding: 14px 0.5%;margin: 0px;color: #B68400;font-size: 12px;text-align: left; }
.full-table-sty tbody{ color: #333;text-align: left; }
.full-table-sty tbody td{ padding:11px 0.5%;color:#333;font-size: 10px;text-align: left;}
.full-table-sty tbody tr{background: #fff;}
.full-table-sty tbody tr:nth-of-type(even){background: #fbfcfc;}

.full-table-sty tfoot{color: #333;text-align: left;}
.full-table-sty tfoot tr{background: #FEF9E7}
.full-table-sty tfoot td{padding: 12px 0.5%;color: #333;font-size: 14px;text-align: left;}

.full-table-details{width: 100%;border-collapse: collapse;}
.full-table-details h4{margin: 18px 0px 7px 0px;font-weight:bold;padding: 0px;font-size: 15px;}
.full-table-details td{font-size: 13px;}
.full-table-details-v{width: 100%;border-collapse: collapse;}
.full-table-details-v h4{margin: 18px 0px 7px 0px;font-weight:bold;padding: 0px;font-size: 15px;}
.full-table-details-v td{font-size: 13px;padding: 3px 0px 10px 0px;}
.full-table-details-v tr{border-bottom: 0.6px solid #fbfcfc;}


.full-table-details-border{width: 100%;border-collapse: collapse;margin: 15px 0px 0px 0px;}
.full-table-details-border h4{margin: 10px 0px;font-weight:bold;padding: 0px;font-size: 14px;}
.full-table-details-border td{font-size: 12px;border: 1px solid #f2f4f4;padding: 10px 2%;}

.full-table-details-border-v2{width: 100%;border-collapse: collapse;margin: 15px 0px 0px 0px;}
.full-table-details-border-v2 h4{margin: 10px 0px;font-weight:bold;padding: 0px;font-size: 14px;}
.full-table-details-border-v2 td{font-size: 12px;border: 3px solid #fff;padding: 10px 2%;}

#table-report{width:100%;}
#table-report thead{min-height: 50px;}
#table-report thead th{font-size: 12px;font-weight: bold;min-width: 20px; max-width: 220px;padding: 12px 15px;white-space:nowrap;background-color: #B6840088 !important;color: #000;}
#table-report td{font-size: 12px;min-width: 80px !important; max-width: 220px !important;padding: 10px 15px;word-wrap: break-word}
#table-report tbody tr:hover{background-color: #fbfcfc !important;color: #000;}


#table-report .td-long-words{
    min-width: 250px !important;
    max-width: 400px !important;
    min-height: 40px !important;
    max-height: 100px !important;
    overflow: hidden;
}

/* login container */
.login-body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: right;
    background-size: contain;
    transition: background-image 1s ease-in-out;
    background-repeat: repeat;background-attachment: fixed;
}
h5 cont{float:right; font-size: 12px;}
h5 .currency-title{float:right; font-size: 12px;}
#container-main-login{height: 100%;width: 100%;margin: 0px;padding: 0px;clear: both;}
.main-login-cont{}
.main-login-cont h4 a{font-size: 14px;text-decoration: none;color:#003764; font-weight: bold;}
.main-login-cont h6 a{text-decoration: none;color:#E83A3A; font-weight: bold;}
.main-login-cont h4{padding-top:15px;font-size: 12px;text-align: center;}
.main-login-cont h6{font-size: 11px;text-align: center; color: #003764;}
#container-main-login .login-container{width: 25%;height: 545px;float: left;padding: 5px 1.5%;margin:100px 0px 0px 7%;box-shadow: 0px 4px 6px 0 rgba(240, 243, 244, 0.17), 0 3px 5px 0 rgba(240, 243, 244, 0.15);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.80);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);}

#container-main-login .login-container .img-logo-lg{width:100%;clear:both;margin-top: 20px;}
#container-main-login .login-container .img-logo-lg img{height:120px;width:220px;margin:0px auto 0px auto;object-fit:contain;padding: 0px;}
#container-main-login .login-container .img-logo-lg #content-side-side{width: 100%;clear:both;height:170px;text-align: center !important;}
#container-main-login .login-container .img-logo-lg #content-side-side h3{text-align: center; margin:3px 0px 0px 0px 0px;padding: 0px;font-size: 22px;font-weight: 900;color: #003764;}
#container-main-login .login-container .img-logo-lg #content-side-side h2{text-align: center;margin: 10px 0px;font-weight: bold;font-size: 28px;}

/*#container-main-login #container-login-get-info{*/
/*    width: 59%;height: 500px;float: right;padding: 5px 1%;margin:75px 5%;*/
/*}*/
/*#container-main-login #container-login-get-info .logo-in-log{float:left;width:11%;margin:0px 0px;height: 500px;}*/
/*#container-main-login #container-login-get-info .logo-in-log img{*/
/*    width: 100%;height:300px;object-fit: contain;margin-top: -70px; display:none;*/
/*}*/
/*#container-main-login #container-login-get-info .text-in-log{*/
/*    float:left;width:87%;margin:0px 0px 0px 2%;*/
/*    text-align:left !important;*/
/*    height: 500px;*/
/*}*/

/*#container-main-login #container-login-get-info .text-in-log img{*/
/*    width: 400px;height:200px;object-fit: contain;margin-left: -50px;display:block;margin-top: 40px;*/
/*}*/

/*#container-main-login #container-login-get-info .text-in-log h1{*/
/*    text-align: left;*/
/*    font-size: 41px;*/
/*    font-weight: 800;*/
/*    color:#B68400;*/
/*    margin: 30px 0px 0px 0px;*/
/*}*/
/*#container-main-login #container-login-get-info .text-in-log h3{*/
/*    font-size:28px; text-align:left;*/
/*    padding: 25px 0px;*/
/*    font-weight: 800;*/
/*    width: 70%;*/
/*    color: #000;*/
/*}*/
/*#container-main-login #container-login-get-info .text-in-log h4{*/
/*    font-size:34px; text-align:left;*/
/*    padding: 10px 0px;*/
/*    font-weight: 800;*/
/*    color: #B68400;*/
/*    font-weight: 800;*/
/*}*/
/*#container-main-login #container-login-get-info .text-in-log h6{*/
/*    font-size:18px; text-align:left;*/
/*    padding: 0px 0px;*/
/*    color: #B68400;*/
/*    font-weight: 800;*/
/*}*/



/* form control */
.form-control-custom-round{
    background-color: transparent;
    border-radius: 6px;
    width: 100%;
    padding: 5px 4%;
    margin: 3px 0px 0px 0px;
    border: 1px solid #85929E;
    outline: none;
    transition: 1s ease-in-out;
}

.form-control-custom-round:focus{
    outline: 1.5px solid #85929E;
    transition: 1s ease-in-out;
}

#container-main-login .login-container h2{padding:0px;margin:6px 0px;text-align:center;color:#333;font-weight: 900;font-size:36px;}

.main-reset-email{background-image: url(../media/images/backgnd-ba.jpg);background-position: bottom;background-repeat: no-repeat;background-size: cover;}

#container-main-login .reset-pass-container{width: 69%;min-height: 370px;float: left;background: #f7f7f7;padding: 10px 1%;border-radius:5px;margin:330px 15% 0px 15%;box-shadow: 0px 6px 9px 0 rgba(240, 243, 244, 0.23), 0 5px 7px 0 rgba(240, 243, 244, 0.19);}
#container-main-login .reset-pass-container .reset-logo{float:left;height:340px;text-align:center;width:30%;line-height:340px;}
#container-main-login .reset-pass-container .reset-logo img{width:74%;height:200px;margin:0px 13%;object-fit:contain;}
#container-main-login .reset-pass-container .reset-cont{float:left;height:280px;width:61%;padding:5px 3%;}
#container-main-login .reset-pass-container .reset-cont p{margin: 0px;padding: 5px 0px;}
#container-main-login .reset-pass-container .reset-cont h2{padding:10px 0px 0px 0px;margin:0px;font-size:32px;font-weight:900;color:#333;}
/* end login style */

/* chat system style */
#chat-list-user::-webkit-scrollbar {
    display: none;
  }
#chat-list-user{
    background-color: transparent;
    width: 36%;
    min-height: 500px;
    max-height: 700px;
    overflow-y: auto;
    padding: 0px;
    float: left;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    display: block;}

    #chat-list-user .search-user-chat{
        width: 100%;
        padding: 0px;
        border-radius: 4px;
        background-color: #fff;
    }
    #chat-list-user .search-user-chat input{
        padding: 28px 2%;
        border: 0px;
        width: 100%;
    }

    #chat-list-user article{
        width: 100%;
        padding: 0px 1%;
        height: 80px;
        background-color: #fff;
        margin: 13px 0px;
        border-radius: 4px;
        display: block;
    }

    #chat-list-user article .user-img-avatar{
        float: left;
        width: 25%;
        height: 80px;
        padding: 0px;
        text-align: center;
    }

    #chat-list-user article .user-img-avatar img{
        object-fit: cover;
        border-radius: 50%;
        height: 56px;
        width: 56px;
        margin: 12px 0px;
    }

    #chat-list-user article .user-name-log{
        float: left;
        width: 73.5%;
        display: block;
        height: 80px;
        padding: 0px 1.5% 0px 0px;
        position: relative;
    }

    #chat-list-user article .user-name-log h2{
        font-size: 14px;
        font-weight: bold;
        padding: 15px 0px 0px 0px;
    }

    #chat-list-user article .user-name-log p{
        padding: 1px 0px 0px 0px;
        margin: 0px;
        width:85%;
    }

    #chat-list-user article .user-name-log .conv-time{
        font-size: 8px;
        font-weight: lighter;
        position: absolute;
        top:25px;
        right: 10px;

    }

    .smsUnread{
        color:#B68400 !important;
    }

    #chat-list-user article .user-name-log .unread{
        position: absolute;
        top:40px;
        padding:1px 3px;
        background: #B68400;
        border-radius: 50%;
        font-size:12px;
        color:#fff;
        right: 20px;

    }

    #default-chat-container{
        background-color: #fff;
        width: 62%;
        min-height: 550px;
        max-height: 650px;
        overflow-y: auto;
        padding: 0px;
        border-radius: 5px;
        margin: 0px 0px 0px 2%;
        float: right;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        display: block;
    }

    #default-chat-container .default-chat-container{
        height: 550px;
        text-align: center;
        background-color: transparent;
        width: 100%;
    }

    #default-chat-container .default-chat-container img{
        height: 100px;
        width: 100px;
        object-fit: cover;
        border-radius: 50%;
        margin-top: 180px;
    }
    #default-chat-container .default-chat-container h2{
        font-weight: bold;
        font-size: 18px;
    }
    #default-chat-container .default-chat-container h4{
        font-size: 16px;
    }

    #insurance-products-grid-3{
        display: grid;
        grid-column-gap: 2%;
        grid-row-gap: 25px;
        grid-template-columns: 32% 32% 32%;
    }

    #insurance-products-grid-3 .article-grid-3-items{
        padding: 35px 5px;
        background-color: #fbfcfc;
        border-radius: 4px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        transition: 1s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #insurance-products-grid-2{
        display: grid;
        grid-column-gap: 2.5%;
        grid-row-gap: 25px;
        grid-template-columns: 47.5% 47.5%;
    }

    #insurance-products-grid-2 .article-grid-2-items{
        padding: 35px 2%;
        background-color: #fbfcfc;
        border-radius: 4px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        transition: 1s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #insurance-products-grid-2 a:hover, #insurance-products-grid-3 a:hover{
        text-decoration: none;
        color: #222;
        box-shadow: 0px 3px 7px 0 rgba(133, 193, 233, 0.27), 0 5px 9px 0 rgba(133, 193, 233, 0.25);
        transition: 1s;
        cursor: pointer;
    }


    .full-div-width-block-nopadding{
        width: 100%;
        padding: 0px;
        margin: 5px 0% 50px 0px;
        border-radius: 5px;
        background-color: #fff;
        min-height: 200px;
        clear: both;
    }

    #sub-header-insuranse-v2{
        border-bottom: 2px solid #fbfcfc;
        padding: 12px 2%;
        clear: both;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: -10px;
        margin-top: 5px;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.83);
        border-radius: 0px;
        border: 1px solid rgba(209, 213, 219, 0.3);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    #sub-header-insuranse-v2 hr{
        margin-bottom: 5px;
        padding-bottom: 3;
    }

    .full-div-width-block-nopadding #container-step-count{
        width: 100%;
        height: 70px;
        clear: both;
        display: block;
        border-bottom: 2px solid #fbfcfc;
    }

    .full-div-width-block-nopadding #container-step-count a{
        text-decoration: none;
        color: #222;
    }

    .full-div-width-block-nopadding #container-step-count article{
        width: 100%;
        padding: 2px 0px;
        height: 40px;
        margin: 0px;
    }
    .full-div-width-block-nopadding #container-step-count article .section-count-ellipses{
        float: left;
        width: 5%;
        height: 40px;
        line-height: 40px;
        color: #bfc9ca;
        text-align: center;
        font-size: 20px;
    }
    .full-div-width-block-nopadding #container-step-count article .section-count{
        float: left;width: 16%;margin: 0px 1%;}
    .full-div-width-block-nopadding #container-step-count article .section-count-v1{
        float: left;width: 12%;margin: 0px 1%;}
    .full-div-width-block-nopadding #container-step-count article .section-count-v2{
        float: left;width: 18%;margin: 0px 1%;}
    .full-div-width-block-nopadding #container-step-count article .section-count-v3{
        float: left;width: 31.33%;margin: 0px 1%;}

    .full-div-width-block-nopadding #container-step-count article .section-count .icons-count-step, .full-div-width-block-nopadding #container-step-count article .section-count-v1 .icons-count-step, .full-div-width-block-nopadding #container-step-count article .section-count-v2 .icons-count-step, .full-div-width-block-nopadding #container-step-count article .section-count-v3 .icons-count-step{
        float: left;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 5px 5px 5px 10px;
        border-radius: 50%;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.83);
        border-radius: 0px;
        border: 1px solid rgba(209, 213, 219, 0.3);
    }

    .icons-count-step-empt{
        float: left;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 5px 5px 5px 10px;
    }

    .full-div-width-block-nopadding #container-step-count article .section-count #current-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v1 #current-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v2 #current-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v3 #current-step-cnted{
        background-color:  #B68400;
        font-weight: bold;
        color: #fff;
    }
    .full-div-width-block-nopadding #container-step-count article .section-count #completed-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v1 #completed-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v2 #completed-step-cnted, .full-div-width-block-nopadding #container-step-count article .section-count-v3 #completed-step-cnted{
        background-color:  #B68400;
        font-weight: bold;
        color: #fff;
    }

    .full-div-width-block-nopadding #container-step-count article .section-count .count-step-info, .full-div-width-block-nopadding #container-step-count article .section-count-v1 .count-step-info, .full-div-width-block-nopadding #container-step-count article .section-count-v2 .count-step-info, .full-div-width-block-nopadding #container-step-count article .section-count-v3 .count-step-info{
        float: left;
        height: 30px;
        width: auto;
        line-height: 30px;
        margin: 5px 2px 5px 5px;
        font-size: 12px;
        font-weight: bold;
    }

    .count-step-info-empt{
        float: left;
        height: 30px;
        width: auto;
        line-height: 30px;
        margin: 5px 2px 5px 5px;
        font-size: 12px;
        font-weight: bold;
    }


    #sub-header-insuranse{
        border-bottom: 2px solid #fbfcfc;
        padding: 12px 2%;
        clear: both;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
    }

    #full-block-cont{
        width: 100%;
        padding: 20px 2%;
        display: block;
        clear: both;}

    #full-block-cont h2{
        padding: 10px 0px;
        margin: 0px;}

    #full-block-cont h4{
        padding: 8px 0px 5px 0px;
        font-size: 16px;
        margin: 0px 0px 0px 0px;}

    #full-block-cont h2 label{
        font-size: 14px;
        color: #222;
        float: right;
    }

    .title-content{
        padding: 30px 6%;
        width: 100%;
        background-color: #fbfcfc;
        border-radius: 4px;
        margin: 20px 0px;
        clear: both;}

    .title-content-left-side{
        padding: 30px 4%;
        width: 48%;
        background-color: #fbfcfc;
        border-radius: 4px;
        margin: 20px 0px 2% 0px;
        min-height: 500px;
        float:left;}

    .title-content-right-side{
        padding: 20px 2%;
        width: 48%;
        background-color: #fbfcfc;
        border-radius: 4px;
        margin: 20px 0px 0px 2%;
        min-height: 500px;
        float: right;
    }
    .title-content-left-side h4{
        color: #B68400;
        font-weight: bold;
    }

    .how-to-pay{
        padding:10px 2%;
        text-align: center;
        color: #B68400;
        font-weight: bold;
        font-size: 14px;
        width: 120px;
        cursor: pointer;
        margin: 25px auto 5px auto;
        border: 3px solid #B68400;
    }
    /* chart style */
    #latest-customer-shortly{
        width: 100%;
        margin: 0px 0px 10px 0px;
        min-height: 390px !important;
        border-radius: 4px;
        background-color: #fff;
        padding: 15px 3%;
    }
    #latest-customer-shortly h2{
        padding: 8px 0px;
        margin: 0px 0px;
        font-weight: bold;
        font-size: 16px;
    }
    #bar-chart-full-transaction{
        width: 100%;
        margin-top: 10px;
        min-height: 450px !important;
    }
    #bar-chart-full-commission{
        width: 100%;
        margin-top: 10px;
        min-height: 450px !important;
    }
    #bar-chart-full{
        width: 100%;
        margin: 0px 0px 10px 0px;
        min-height: 390px !important;
        border-radius: 4px;
    }
    #agent-chart-per{
        width: 100%;
        margin: 30px 0px 10px 0px;
        min-height: 390px !important;
        border-radius: 4px;
        background-color: #fff;
    }
    #don-chart-full{
        width: 100%;
        margin-top: 5px;
        min-height: 320px !important;
    }

    #chart-side-1{
        float: left;
        width: 49%;
        margin: 20px 1% 30px 0%;
        padding: 5px 1%;
        display: block;
        background-color: #fff;
        border-radius: 6px;
        min-height: 370px;
    }

    #chart-side-none{
        float: left;
        width: 49%;
        margin: 20px 0% 30px 1%;
        display: block;
        background-color: transparent;
        min-height: 370px;
    }

    #chart-side-none article{
        border-radius: 4px;
        padding: 12px 2%;
        width: 100%;
        margin-bottom: 10px;
        background-color: #fff;
    }

    #chart-side-2{
        float: right;
        width: 57%;
        margin: 20px 0% 30px 1%;
        padding: 5px 0.5%;
        min-height: 370px;
        display: block;
        background-color: #fff;
        border-radius: 6px;
    }

    #chart-side-full{
        clear: both;
        width: 100%;
        margin: 1px 0% 30px 0%;
        padding: 5px 0.5%;
        min-height: 270px;
        display: block;
        background-color: #fff;
        border-radius: 3px;
    }

    #chart-side-1 h2, #chart-side-2 h2{
        font-size: 16px;
        padding: 10px 0px;
        font-weight: bold;
    }

    .hol-article{
        min-height: 120px;
        background-color: #fff;
        margin: 0px 0px 2px 0px;
        border-bottom: 1px solid #fbfcfc;
    }
    .report-in-tables .title-rp-data{
        min-height: 120px;
        width: 20%;
        margin: 0px;
        padding: 40px 2% 0px 2%;
        font-weight: bold;
        text-align: center;
        float: left;
    }
    .report-in-tables .title-rp-data-l{
        width: 20%;
        margin: 0px;
        padding: 0px;
        min-height: 120px;
        text-align: center;
        background-color:#B6840050;
        float: left;
    }
    .report-in-tables .title-rp-data-r{
        min-height: 120px;
        width: 20%;
        margin: 0px;
        padding: 0px;
        text-align: center;
        background-color: #ee980290;
        float: left;
    }

    .report-in-tables .data-header-crp{
        height: 30px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        background-color: #B68400;
        font-size: 12px;
        color: #222;
        font-weight: bold;
    }

    .report-in-tables .data-header-lrp{
        height: 30px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        background-color: #ee9802;
        font-size: 12px;
        color: #222;
        font-weight: bold;
    }

    .report-in-tables .full-width-count-data{
        border-bottom: 1px solid #fbfcfc;
        height: 30px;
        line-height: 30px;
        font-size: 11px;
        font-weight: bold;
        padding: 0px 3%;
        color: #222;
    }
    .report-in-tables .full-width-count-data:last-child{
        border-bottom: 0px solid #fbfcfc;
        padding: 0px 3%;
        height: 30px;
        line-height: 30px;
        font-size: 11px;
        font-weight: bold;
        color: #222;
    }



/* settings style */
#personal-details{
    width: 49%;
    margin: 0px 2% 0px 0%;
    min-height: 500px;
    background-color: transparent;
    float: left;
    display: block;
}
#personal-details .container-personal-d1{
    width: 100%;
    padding: 10px 1% 15px 1%;
    margin: 0px 0px 10px 0px;
    clear: both;
    display: block;
    border-radius: 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
}

#container-personal-changes{
    text-align: left !important;
}

.edit-profile-img{
    position: absolute;
    background-color: rgba(225, 225, 248, 0.8);
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    color: #B68400;
    font-size: 18px;
    font-weight: bold;
    display: block;
    top: 70px;
    right: 40%;
    cursor: pointer;
}

#personal-details .container-personal-d1 img{
    width: 96px;
    height: 96px;
    margin: 5px 0px;
    border-radius: 50%;
    object-position: center;
    object-fit: cover;
}
#personal-details .container-personal-d1 section{
    font-size: 14px;
    font-weight: bold;
}

#personal-details .container-personal-d2{
    width: 100%;
    padding: 3px 2% 7px 2%;
    margin: 0px 0px 10px 0px;
    clear: both;
    display: block;
    border-radius: 3px;
    background-color: #fff;
    text-align: left;
}
#personal-details .container-personal-d2 h2{
    padding: 10px 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;

}

#personal-details .container-personal-d2 h2 a{
    float: right;
    margin: 0px 0px 0px 8px;
    padding: 3px 5px;
    text-decoration: none;
}

#personal-details .container-personal-d2 p{
    padding: 10px 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: normal;
}


#settings-container-changes{
    width: 48%;
    margin: 0px 0% 0px 1%;
    min-height: 500px;
    background-color: transparent;
    float: right;
    display: block;
}
#settings-container-changes .change-personal-details{
    width: 100%;
    padding: 10px 4%;
    min-height: 140px;
    margin: 0px 0px 25px 0px;
    clear: both;
    display: block;
    background-color: #fff;
    border-radius: 4px;
}
#settings-container-changes .change-personal-details h2{
    padding: 10px 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

#settings-container-changes .change-personal-details h3{
    padding: 15px 0px 3px 0px;
    margin: 0px;
    font-size: 13px;
    font-weight: bold;
}

#settings-container-changes .change-personal-details h5{
    padding: 2px 0px 10px 0px;
    margin: 0px;
    font-size: 25px;
    font-weight: bold;
}
#settings-container-changes .change-personal-details .section-min-rate{
    padding: 4px 0%;
    margin: 0px 0px 5px 0px;
    color: #B6840090;
    border-radius: 5px;
    font-size: 12px;
    display: block;
    font-weight: bold;
}
#settings-container-changes .change-personal-details h4{
    padding: 10px 0px 6px 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
}

#settings-container-changes .change-personal-details h6{
    padding: 4px 0px;
    margin: 0px;
    font-size: 16px;
    font-weight: bold;
}

.mobile-nav{
    display:none;
}

.mobile{
    display: none;
}






#contact-us-body-container{
    width: 100%;
    height: 100%;
    padding: 38px 0.5%;
    margin: 0px;
    background-color: #fff;
    clear: both;
}

#contact-us-body-container h2{
    text-align: center;
    margin: 15px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
    font-size: 22px;
    font-weight: bold;
}
#contact-us-body-container p{
    text-align: center;
    margin: 10px 0px;
    padding: 0px 10px 0px 0px;
    font-size: 12px;
    font-weight: lighter;
}

#contact-us-body-container article{
    margin: 50px 0.5%;
    padding: 15px 2%;
    width: 24%;
    float: left;
    min-height: 215px;
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid #fdfcfc;
    font-size: 12px;
}

#contact-us-body-container article img{
    width: 36px;
    height: 36px;
    margin: 15px 0px;
    object-fit: contain;
    display: block;
}

.back-to-login-container{
    width: 18%;
    text-align: center;
    padding: 15px 4%;
    border-radius: 6px;
    margin: 20px auto;
    background-color: #fbfcfc;
    clear: both;
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.10), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
}

.back-to-login-container a{
    text-decoration: none;
    width: 100%;
    display: block;
    height: auto;
    color: #222;
}

.back-to-login-container img{
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin: 20px auto;
    display: block;
}


/* claims style  */
#claim-header{
    padding: 0px 2% 20px 2%;
    margin: 0px auto;
    width: 100%;
    clear: both;
    display: block;
    height: auto;
}

#claim-header-agent{
    padding: 0px 0% 20px 0px;
    margin: 0px auto;
    width: 100%;
    clear: both;
    display: block;
    height: auto;
}

#claim-header-mi{
    padding: 0px 0% 20px 0px;
    margin: 0px auto;
    width: 100%;
    clear: both;
    display: block;
    height: auto;
}


#claim-header article{
    float: left;
    min-height: 125px;
    width: 14.6%;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0px 2px 5px 0 rgba(248, 249, 249, 0.15), 0 3px 7px 0 rgba(248, 249, 249, 0.18);
    padding: 5px 0.5%;
    margin: 0px 1% 20px 1%;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color:#85929e;
}
#claim-header-agent article{
    float: left;
    min-height: 150px;
    width: 30%;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0px 2px 5px 0 rgba(248, 249, 249, 0.15), 0 3px 7px 0 rgba(248, 249, 249, 0.18);
    padding: 5px 2%;
    margin: 0px 10% 20px 10%;
    text-align: center;
    font-weight: bold;
    color:#85929e;
}

#claim-header-mi article{
    float: left;
    min-height: 150px;
    width: 30.3%;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0px 2px 5px 0 rgba(248, 249, 249, 0.15), 0 3px 7px 0 rgba(248, 249, 249, 0.18);
    padding: 5px 2%;
    margin: 0px 1.5% 20px 1.5%;
    text-align: center;
    font-weight: bold;
    color:#85929e;
}

#claim-header-agent .active-claim-header{
    background-color: #B6840080 !important;
    color: #fff !important;
}

#claim-header-mi .active-claim-header{
    background-color: #B6840080 !important;
    color: #fff !important;
}

#claim-header article img{
    height: 36px;
    width: 36px;
    object-fit: contain;
    margin: 20px 0px 10px 0px;
}

#claim-header .active-claim-header{
    background-color: #B6840080 !important;
    color: #fff !important;
}

#claim-header-agent article img{
    height: 36px;
    width: 36px;
    object-fit: contain;
    margin: 20px 0px;
}

#claim-header-mi article img{
    height: 36px;
    width: 36px;
    object-fit: contain;
    margin: 20px 0px;
}

#claims-info-success{
    float: left;
    width: 50%;
    padding: 10px 4% 20px 0.5%;
    margin: 20px 0px;
    background-color: transparent;
}

#claims-info-success h2{
    font-size: 22px;
    font-weight: bold;
}

#claims-container-block{
    float: left;
    width: 50%;
    padding: 15px 2.5%;
    min-height: 450px;
    border-radius: 4px;
    margin: 20px 0px;
    box-shadow: 0px 2px 5px 0 rgba(248, 249, 249, 0.15), 0 3px 7px 0 rgba(248, 249, 249, 0.18);
    background: rgba(253,254,254,6);
}

#claims-container-block h2{
    font-size: 22px;
    font-weight: bold;
}
#claims-container-block-transparent{
    float: left;
    width: 50%;
    padding: 5px 1%;
    min-height: 450px;
    border-radius: 4px;
    margin: 20px 0px;
    background: transparent;
}

#claims-container-block-transparent h2{
    font-size: 22px;
    padding: 0px 0px 0px 2%;
    font-weight: bold;
}

.raised-claim-img{
    float: left;
    padding: 5px 1%;
    margin: 10px 2%;
    border-radius: 6px;
    width: 46%;
    text-align: center;
    height: 130px;
    background-color: #fff;
    transition: 1.2s;
}

.raised-claim-img:hover{
    transition: 1.2s;
    box-shadow: 0px 4px 6px 0 rgba(248, 249, 249, 0.35), 0 5px 9px 0 rgba(248, 249, 249, 0.38);
    cursor: pointer;
}

.raised-claim-img .raised-img{
    width: 98%;
    object-fit: cover;
    height: 120px;
}

.raised-claim-img .upload-img{
    width: 98%;
    object-fit: contain;
    height: 120px;
}

#btnEditNotification{
    float: right;
    background-color: #B68400;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #B68400;
    cursor: pointer;
}
.notification-details-edit{
    padding: 15px 4%;
    width: 100%;
    min-height: 200px;
    background-color: #fff;
    border-radius: 5px;
}


/*  error page style */
#error-page-back{
    background-image: url('../media/images/back-moon.jpg');
    height: 100%;
    width: 100%;
    background-position: center;
    font-family: 'Nunito', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #f2f3f4;
}
#error-page-back .error-page-back{
    height: 100%;
    width: 100%;
    background-color: #B6840095;
}
#error-page-back #left-error-page{
    padding: 20px 10%;
    width: 50%;
    float: left;
}
#error-page-back #left-error-page h1{
    margin-top: 50%;
    font-size: 180px;
    text-align: left;
    font-weight: bold;
    text-align: center;
    color:#ECF0F1;
    background-color: transparent;
    text-shadow: 0px 2px 5px 0 rgba(212, 230, 241, 0.15), 0 3px 7px 0 rgba(212, 230, 241, 0.18);
}
#error-page-back #right-error-page{
    padding: 20px 10%;
    width: 50%;
    float: left;
}
#error-page-back #right-error-page h3{
    margin-top: 50%;
    font-size: 38px;
    font-weight: bold;
    color: #f2f3f4;
}
#error-page-back #right-error-page p{
    padding: 10px 0px;
    font-weight: bold;
    font-size: 16px;
}

#error-page-back #right-error-page button{
    padding: 4px 6%;
    background: #B68400;
    text-align: center;
    text-decoration: none;
    color:#fff;
    border-radius: 5px;
    border: 4px solid #B68400;
    font-weight: bold;
}
#error-page-back #right-error-page button:hover{
    box-shadow: 0px 2px 5px 0 rgba(212, 230, 241, 0.15), 0 3px 7px 0 rgba(212, 230, 241, 0.18);
}

.claim-status-container{
    padding: 10px 3%;
    margin: 10px 0% 20px 0px;
    border-radius: 6px;
    width: 100%;
    min-height: 20px;
    background-color: #fff;
    transition: 1.2s;
}
.claim-status-container h3{
    padding: 0px;
    margin: 0px 0px 5px 0px;
    font-size: 16px;
    font-weight: bold;
}
.claim-status-container p{
    font-size: 13px;
    padding: 5px 0px;
}
.large-img-view-document-claim{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* modal style */
.modal-article-sty{
    padding: 15px 0%;
    background-color: #B68400;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    transition: 1s;
    display: flex;
    color: #ffffff;
    justify-content: center;
    align-items: center;
}
#grid-boy-modal{
    display: grid;
    grid-column-gap: 3%;
    grid-row-gap: 25px;
    grid-template-columns: 46% 46%;
}


/* filtering */
#filter-menu{
    width: 100%;
    padding: 5px 2%;
    margin: 0px;
    border-radius: 4px;
    background-color: #fff;
    min-height: 30px;
}

/* transaction */
.endorsement-details{
    width: 30.33%;
    padding: 50px 5px;
    text-align: center;
    margin: 20px 1.5%;
    border-radius: 4px;
    float: left;
    background: #B68400;
    transition: 1s;
    font-weight:bold;
    color: #fff;
}
.endorsement-upgrade{
    width: 30.33%;
    padding: 50px 5px;
    text-align: center;
    margin: 20px 1.5%;
    border-radius: 4px;
    float: left;
    background: #B68400;
    transition: 1s;
    font-weight:bold;
    color: #fff;
}

.endorsement-status{
    width: 30.33%;
    padding: 50px 5px;
    text-align: center;
    margin: 20px 1.5%;
    border-radius: 4px;
    float: left;
    background: #B68400;
    transition: 1s;
    font-weight:bold;
    color: #fff;
}

#endorsement-status a:hover{
    color: #333 !important;
}


.endorsement-details:hover, .endorsement-upgrade:hover, .coverage-upgrade-list:hover, .endorsement-status:hover{
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 6px 0 rgba(0, 0, 0, 0.14);
    transition: 1s;
    cursor: pointer;
}

.coverage-upgrade-list{
    width: 30.33%;
    min-height: 130px;
    padding: 20px 4%;
    text-align: center;
    margin: 15px 1.5%;
    border-radius: 4px;
    font-size: 14px;
    float: left;
    background: #B68400;
    transition: 1s;
    font-weight: lighter;
    color: #fff;
}

.endorsement-status-list{
    padding: 10px 2%;
    width: 100%;
    margin: 0px 0px 10px 0px;
    background-color: #f4f6f7;
    border-radius: 3px;
    min-height: 40px;
    clear: both;
    display: block;
}
.endorsement-status-list h4{
    margin: 0px;
    padding: 6px 0px;
    font-size: 16px;
    font-weight: bold;
}
.endorsement-status-list h4 span{
    float: right;
}
.endorsement-status-list p{
    font-size: 13px;
    padding: 3px 0px 0px 0px;
}
.endorsement-status-list h5{
    font-size: 14px;
    padding:0px 0px;
    margin: 0px;
}

#original-data-end{
    width: 50%;
    background-color: transparent;
    padding: 0px 1.5% 15px 1.5%;
    margin: 0px 0px 5px 0px;
    float: left;
    display: block;
}
#requested-data-end{
    width: 50%;
    background-color: #f4f6f7;
    padding: 0px 1.5% 15px 0px;
    margin: 14px 0px 5px 0px;
    float: left;
    display: block;
}

#original-data-end h3, #requested-data-end h3{
    font-size: 15px;
    margin: 0px;
    font-weight: bold;
}

/* how to pay */
.how-to-pay-img{
    width: 100%;
    object-fit: cover;
}


/* agent logo */
.agent-logo{
    width:100%;
    height:150px;
    position:relative;
    text-align:center;
    padding:10px 0px;
}

.agent-logo img{
    width: 96px;
    height: 96px;
    margin: 5px 0px;
    border-radius: 50%;
    object-position: center;
    object-fit: cover;
}

.edit-agent-img{
    position: absolute;
    background-color: rgba(225, 225, 248, 0.8);
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    color: #B68400;
    font-size: 16px;
    font-weight: bold;
    display: block;
    top: 67px;
    right: 45%;
    cursor: pointer;
}


/* motor-search-container */
#motor-search-container{
    width: 87%;
    padding: 120px 7% 30px 7%;
    height: 100%;
    background-color: #fff;
    margin: 0px;
    position: fixed;
    top: 0px;
    left: 19%;
    right: 0%;
    z-index: 80000000000;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.view-col-full h4 .btnCancelSearchManual{
    float: right;
    background-color: transparent;
    border-radius: 4px;
    border: 2px solid #B68400;
    padding: 5px 2%;
    font-size: 13px;
    color: #B68400;
    font-weight: bold;
}

#motor-search-container #content-fleet-links{
    width:47%;
    float:left;
    min-height:300px;
    padding:0px 2%;
}

#motor-search-container #content-fleet-links a, #motor-search-container #content-fleet-links a:hover{
    text-decoration: none;
    color: #333;
}

#motor-search-container #content-fleet-policies{
    width:53%;
    float:right;
    min-height:300px;
    padding:0px 1%;
    font-size:13px;
}

#motor-search-container #content-fleet-links .is-fleet{
    width:92%;
    clear:both;
    background-color:#D5F5E3;
    border-radius:6px;
    height: 80px;
    padding:0px 2%;
}
#motor-search-container #content-fleet-links .is-not-fleet{
    width:92%;
    clear:both;
    background-color:#EBF5FB;
    border-radius:6px;
    height: 80px;
    padding:0px 2%;
    margin-bottom:30px;
}
#motor-search-container #content-fleet-links .contents-fleet{
    width:70%;
    height:80px;
    line-height:80px;
    float:left;
    font-size:19px;
    cursor:pointer;
    font-weight:bold;
}
#motor-search-container #content-fleet-links .icon-fleet{
    width:30%;
    font-size:32px;
    text-align:center;
    height:80px;
    line-height:80px;
    float:left;
    cursor:pointer;
    color:#B68400;
}

/*  table-addons  */
.table-addons{
    width: 100%;
    border: 1px solid gray;
    margin: 6px 0px;
    padding: 6x 2%;
}

.tfoot-view-total{
    padding: 10px 2%;
    background-color: #fff8f8;
}

.tfoot-view-total td{
    padding: 30px 2%;
    min-height: 50px;
    background-color: #fff8f8;
    font-weight: bold;

}

.tfoot-view-total td h1{
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0px;
    margin: 0px;
}

.tfoot-view-total td h2{
    font-size: 16px;
    font-weight: normal;
    padding: 2px 0px;
    margin: 0px;
}

.tfoot-view-total td h3{
    font-size: 18px;
    font-weight: bold;
    padding: 16px 0px;
    margin: 0px;
}

.table-addons h5{
    font-weight: bold;
}
.table-addons td{
    border: 1px solid gray;
    padding: 2px 1%;
}


/* mobile insurance */
#container-print-mi-cover{
    width: 100%;
    height: auto;
    padding: 5px 2% 10px 2%;
    border: 2px solid #333333;
    margin: 10px 0%;
}

/* mi phone */
#btnAgreeCountinue{
    padding: 6px 2% !important;
    background-color: #B68400 !important;
    border-radius: 3px !important;
    border: 1px solid #B68400 !important;
    color: #fff !important;
}

#btnPrintCoverNotePhone{
    padding: 6px 1% !important;
    background-color: #B68400 !important;
    border-radius: 3px !important;
    border: 1px solid #B68400 !important;
    color: #fff !important;
    font-size: 15px;
    float:right;
}

.agree-clicked{
    cursor: pointer;
}

#container-print-mi-cover .img-logo{
    margin: 3px 0px;
    border-bottom: 1px solid #333333;
    height: 90px;
    width: 100%;
    padding: 5px 0px;
    text-align: center;
}

#container-print-mi-cover .img-logo img{
    width: 250px !important;
    height: 52px !important;
    margin: 5px 0px;
    object-fit: contain !important;
}
#container-print-mi-cover h2{
    font-size: 20px;
    padding: 10px 0px;
    margin: 0px;
    text-align: center;
    border-bottom: 1px solid #333333;
}
#container-print-mi-cover .left-cont-sub{
    width: 50%;
    float: left;
    height: auto;
    font-size: 12px;
    font-weight:bold;
    padding: 13px 0px;
}
#container-print-mi-cover .right-cont-sub{
    width: 50%;
    float: right;
    height: auto;
    font-size: 12px;
    font-weight:bold;
    text-align: right;
    padding: 13px 0px;
}
#container-print-mi-cover .left-cont-sub span, #container-print-mi-cover .right-cont-sub span{
    background-color: #222;
    color: #fff;
    padding: 6px 3%;}
    .left-cont-sub-a{
    width: 35%;
    float: left;
    height: auto;
    font-size: 12px;
    font-weight:bold;
    padding: 30px 0px 10px 0px;
}
#container-print-mi-cover .mid-cont-sub-a{
    width: 30%;
    float: left;
    height: auto;
    text-align: center;
    font-size: 12px;
    font-weight:bold;
    padding: 15px 0px 12px 0px;
}

#container-print-mi-cover .mid-cont-sub-a img{
    width: 42px;
    height: 32px;
    margin: 2px 0px;
    object-fit: contain;
}
#container-print-mi-cover .right-cont-sub-a{
    width: 35%;
    float: right;
    height: auto;
    font-size: 12px;
    font-weight:bold;
    text-align: right;
    padding: 30px 0px 10px 0px;
}

#container-print-mi-cover .full-cover-note{
    width: 100%;
    clear: both;
    height: auto;
    font-size: 16px;
    font-weight:bold;
    text-align: center;
    padding: 20px 0px;
}

#container-print-mi-cover .left-cont-sub-a span, #container-print-mi-cover .right-cont-sub-a span, #container-print-mi-cover .mid-cont-sub-a span{
    background-color: #222;
    color: #fff;
    padding: 6px 3%;}

#container-print-mi-cover table{
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0px 7px 0px;
}
#container-print-mi-cover table td{
    padding: 6px 2%;
    border: 1px solid #333333;
}
#container-print-mi-cover table .bold-title{
    color: #222;
    font-size: 13px;
    font-weight: bold;
}

.result-searched-motor table .bold-title{
    color: #222;
    font-size: 18px;
    font-weight: bold;
}
#container-print-mi-cover article{
    width: 100%;
    clear: both;
    margin: 8px 0px;
    display: block;
}
#container-print-mi-cover article .itemsa{
    float: left;
    margin: 6px 2% 11.5px 0px;
    width: 48%;
    padding: 5px 2%;
    border: 1px solid #333333;
    font-size: 12px !important;
}
#container-print-mi-cover article .itemsb{
    float: right;
    margin: 6px 0% 11.5px 2%;
    width: 48%;
    padding: 5px 2%;
    border: 1px solid #333333;
    font-size: 12px !important;
}
#container-print-mi-cover .block{
    display: block;
    margin: 4px;
    clear: both;
}
#container-print-mi-cover .section-p{
    display: block;
    margin: 4px 0px;
    clear: both;
}

#container-print-mi-cover #article{
    width: 100%;
    clear: both;
    margin: 8px 0px;
    padding: 3px 2%;
    display: block;
    border: 1px solid #333333;
}


/*  mi style  */
.mi-report-container{
    width: 100%;
    height: auto;
    clear: both;
    display: block;
}
.mi-row-container{
    width: 100%;
    height: 102px;
    clear: both;
    display: block;
    margin-top: 0px;
}
.mi-lg-title{
    width:24%;
    height: 100px;
    background-color: #A3E4D7;
    float: left;
    padding: 35px 0px 0px 0px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}
.mi-sm-container-a{
    width:19%;
    height: 100px;
    background-color:#B6840090;
    float: left;
    text-align: center;
}
.mi-sm-container-b{
    width:19%;
    height: 100px;
    background-color:#ee980290;
    float: left;
    text-align: center;
}
.mi-sm-container-c{
    width:19%;
    height: 100px;
    background-color: #B6840090;
    float: left;
    text-align: center;
}
.mi-sm-container-d{
    width:19%;
    height: 100px;
    background-color:#ee980290;
    float: left;
    text-align: center;
}
.mi-sm-title-b{
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    background: #ee9802;
}
.mi-sm-title-a{
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    background: #B68400;
}
.mi-number-container{
    width: 100%;
    height: 65px;
    line-height: 65px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}





/*  fleet transaction  */
.motor-bar-list{
    border-top: 2px solid #f2f4f4;
    padding: 8px 0px;
}

.motor-bar-list h3{
    font-size: 18px;
    margin: 5px 0px;
    padding: 0px;
}

.motor-bar-list:last-child{
    border-top: 2px solid #f2f4f4;
    border-bottom: 2px solid #f2f4f4;
    padding: 8px 0px;
}

.btnExpandMotor{
    background-color: #B68400;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 3px;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    color: #fff;
    float: right;
    border: 1px solid #B68400;
}

.fleet-button_motor{
    width: 100%;
    display: block;
    clear: both;
    margin: 0px;
    padding: 15px 0px;
}

.btnViewFleetMotor{
    background-color: #B68400;
    border-radius: 6px;
    margin: 0px 30px 0px 0px;
    padding: 7px 2%;
    font-size: 13px;
    color: #fff;
    float: left;
    border: 1px solid #B68400;
}
.btnEditFleetMotor{
    background-color: #f0b27a;
    border-radius: 6px;
    margin: 0px 30px 0px 0px;
    padding: 7px 2%;
    font-size: 13px;
    color: #fff;
    float: left;
    border: 1px solid #f0b27a;
}

.fleet-edit-details-mt{
    width: 100%;
    padding: 10px 0px;
    margin: 10px 0px;
    clear: both;
}





/* vusha point */
#contents-vusha-display{
    width: 100%;
    min-height: 300%;
    clear: both;
    background-color: #fff;
    margin: 10px 0px;
}

.contents-vuna-getstarted{
    float: left;
    padding: 20px 5%;
    margin: 0px;
    height: 300px;
    width: 50%;
}

.contents-vuna-getstarted-img{
    float: left;
    width: 50%;
    padding: 20px 5%;
    margin: 0px;
    height: 300px;
}

.contents-vuna-getstarted-img img{
    width: 90%;
    height: 200px;
    object-fit: contain;
}


#vuna-point-items-list{
    width: 100%;
    height: 280px;
    clear: both;
    margin: 20px 0px 0px 0px;
}

#vuna-point-items-list h2{
    padding: 10px 0px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0px;
}

#vuna-point-items-list article{
    float: left;
    width: 22%;
    padding: 10px 1%;
    margin: 10px 1.5%;
    height: 270px;
    transition: 1.5s;
}

#vuna-point-items-list article:hover{
    transition: 1.5s;
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.13), 0 4px 7px 0 rgba(0, 0, 0, 0.10);
    border-radius: 4px;
    cursor: pointer;
}

#vuna-point-items-list .img-items{
    height: 150px;
    width: 90%;
    padding: 5px 5%;
    text-align: center;
}

#vuna-point-items-list .img-items img{
    height: 150px;
    width: 100%;
    object-fit: contain;
}

#vuna-point-items-list h3{
    margin: 15px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    font-size: 16px;
}

#vuna-point-items-list h4{
    margin: 2px 0px;
    padding: 2px 0px;
    text-align: center;
    font-size: 12px;
    color: #B68400;
    font-weight: bold;
}

.vuna-point-icons-title{
    width: 100%;
    clear: both;
    margin: 5px 0px;
    padding: 2px 0px;
}
.vuna-point-icons-title article{
    width: 25%;
    float: left;
    padding: 0px;
    margin: 0px;
    height: 50px;
}
.vuna-point-icons-title article .icons-vusha-vuna{
    width: 60px;
    height: 50px;
    float: left;
    text-align: center;
    line-height: 50px;
    padding: 0px;
    margin: 5px 10px 0px 0px;
    border-radius: 8px;
    font-size: 26px;
    color: #B68400;
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.13), 0 4px 7px 0 rgba(0, 0, 0, 0.10);
}
.vuna-point-icons-title article .vusha-vuna-icon-title{
    width: auto;
    height: 50px;
    float: left;
    text-align: left;
    font-size: 18px;
    line-height: 50px;
    margin: 5px 0px 0px 0px;
}

#home-vusha-vuna-point-container{
    width: 100%;
    min-height: 110px;
    clear: both;
    display: block;
    padding: 13px 1%;
}

#home-vusha-vuna-point-container .vuna-point-home-temp .article-used{
    margin: 0px 0px 20px 0px;
    height: 100px;
    background-color: #fbfcfc;
    width: 100%;
    padding: 0px 3%;
    border-radius: 6px;
}

#home-vusha-vuna-point-container .vuna-point-home-temp .article-current{
    margin: 0px;
    height: 100px;
    background-color: #fbfcfc;
    width: 100%;
    padding: 0px 3%;
    border-radius: 6px;
}

#home-vusha-vuna-point-container .vuna-point-home-temp{
    float: left;
    width: 75%;
}
#home-vusha-vuna-point-container .vuna-point-button-temp{
    float: right;
    width: 20%;
    margin: 0px 0px 0px 5%;
}

#home-vusha-vuna-point-container .vuna-point-button-temp .btnHistory{
    width: 100%;
    text-align: center;
    padding: 20px 2%;
    margin-bottom: 30px;
    background-color: #EBF5FB;
    border-radius: 5px;
    border: 2px solid #EBF5FB;
    font-weight: bold;
    transition: 1s;
}
#home-vusha-vuna-point-container .vuna-point-button-temp .btnClaimRewards{
    width: 100%;
    text-align: center;
    padding: 20px 2%;
    background-color: #B68400;
    border: 2px solid #B68400;
    font-weight: bold;
    border-radius: 5px;
    transition: 1s;
}

#home-vusha-vuna-point-container .vuna-point-button-temp .btnClaimRewards:hover, #home-vusha-vuna-point-container .vuna-point-button-temp .btnHistory:hover{
    transition: 1s;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}

#home-vusha-vuna-point-container .title-vusha-vuna{
    width: 70%;
    float: left;
    height: 100px;
    line-height: 100px;
    padding: 0px;
    font-size: 20px;
    font-weight: bold;
}
#home-vusha-vuna-point-container .points-vusha-vuna{
    width: 20%;
    float: right;
    height: 100px;
    line-height: 100px;
    margin: 0px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}


#vuna-testimonial-container{
    width: 100%;
    clear: both;
    min-height: 230px;
    display: block;
    margin: 30px 0% 10px 0%;
}

#vuna-testimonial-container h2{
    padding: 10px 0px;
    text-align: center;
    margin: 10px 0px;
    font-size: 20px;
    font-weight: bold;
}

#vuna-testimonial-container article{
    width: 47%;
    margin: 10px 1.5%;
    padding: 10px 1%;
    height: 200px;
    float: left;
    display: block;
    border-radius: 5px;
    background-color: #fbfcfc;
}

#vuna-testimonial-container article h2{
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
    padding: 0px;
}

#vuna-testimonial-container article h2 span{
    font-size: 12px;
    text-align: right;
    float: right;
    font-weight: bold;
}

#vuna-testimonial-container article .user-profile-picture{
    float: left;
    width: 25%;
    height: 145px;
    margin-top: 55px;
    text-align: center;
}

#vuna-testimonial-container article .user-profile-picture img{
    border-radius: 50%;
    width: 76px;
    height: 76px;
    object-fit: contain;
    box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.09), 0 1.5px 2px 0 rgba(0, 0, 0, 0.08);
}

#vuna-testimonial-container article .user-testmonial-content{
    float: left;
    width: 75%;
    padding: 0px 2%;
    height: 200px;
}


/* vusha modal */
#vuna-point-rewards-modal{
    width: 100%;
    height: 100%;
    padding: 30px 15%;
    z-index: 1000000000000000;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
}

#vuna-point-rewards-modal .vuna-point-rewards-modal{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    padding: 3px 2%;
    overflow-y: auto;
}

#vuna-point-rewards-modal .vuna-point-rewards-modal h4{
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    padding: 7px 0px;
}

#vuna-point-rewards-modal .vuna-point-rewards-modal h4 button{
    color: #B68400;
    background-color: transparent;
    font-weight: bold;
    font-size: 22px;
    float: right;
    border: none;
    cursor: pointer;
}

#vuna-point-rewards-modal .vuna-point-rewards-modal h3{
    text-align: center;
    padding: 7px 0px;
    margin: 0px;
    color: #ffcf17;
    font-size: 22px;
}

#vuna-point-rewards-modal .vuna-point-rewards-modal p{
    margin: 0px;
    padding: 7px 0px;
    font-size: 12px;
    text-align: center;
}

#cointainer-rewards-list{
    height: 100%;
    overflow-y: auto;
    display: block;
}

#cointainer-rewards-list article{
    width: 100%;
    min-height: 85px;
    padding: 5px 0px;
    margin: 4px 0px;
    display: block;
    clear: both;
    border-bottom: 2px solid #f2f4f4;
}

#cointainer-rewards-list .img-container-reward-items{
    float: left;
    width: 35%;
}

#cointainer-rewards-list .img-container-reward-items img{
    height: 70px;
    width: 180px;
    margin: 0px;
    object-fit: contain;
}

#cointainer-rewards-list .point-container-reward-required{
    float: left;
    width: 22%;
    color: #F4D03F;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    font-size: 16px;
}

#cointainer-rewards-list .button-container-reward-claims{
    float: left;
    width: 16%;
}

#cointainer-rewards-list .button-container-reward-claims button{
    padding: 5px 6%;
    border-radius: 4px;
    border: 2px solid #B68400;
    background-color: #B68400;
    color: #fff;
    transition: 1s;
    margin-top: 15px;
}

#cointainer-rewards-list .button-container-reward-claims button:hover{
    transition: 1s;
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16), 0 4px 7px 0 rgba(0, 0, 0, 0.4);
}

#cointainer-rewards-list .point-container-reward-remain{
    float: left;
    width: 27%;
}

#cointainer-rewards-list .point-container-reward-remain button{
    margin-top: 17px;
    padding: 3px 5%;
    border-radius: 4px;
    border: 2px solid #F2D7D5;
    background-color: #F2D7D5;
    color: #B68400;
    font-weight: bold;
    font-size: 12px;
}




/* successful */
#vuna-point-rewards-success-modal{
    width: 100%;
    height: 100%;
    padding: 100px 15%;
    z-index: 1000000000000000;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
}


#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal{
    width: 100%;
    height: 100%;
    background-color:#D6EAF8;
    border-radius: 5px;
    padding: 10px 4%;
    overflow-y: auto;
}

#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal h4{
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    padding: 7px 0px;
}

#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal h4 button{
    color: #B68400;
    background-color: transparent;
    font-weight: bold;
    font-size: 22px;
    float: right;
    border: none;
    cursor: pointer;
}

#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal .successful-claim-img{
    float: left;
    width: 45%;
    text-align: center;
    margin: 10px 5% 10px 0px;
}

#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal .successful-claim-img img{
    width: 90%;
    height: 280px;
    margin: 20px 0% 0px 0px;
    object-fit: contain;
}

#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal .successful-claim-feedback{
    float: right;
    width: 50%;
    text-align: center;
    margin: 10px 0px;
    padding: 10px 3%;
}
#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal .successful-claim-feedback h3{
    margin: 10px 0px;
    padding: 4px 0px;
    font-size: 20px;
    font-weight: bold;
}
#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal p{
    margin: 10px 0px;
    padding: 4px 0px;
    font-size: 12px;
    font-weight: lighter;
}
#vuna-point-rewards-success-modal .vuna-point-rewards-success-modal .successful-claim-feedback button{
    padding: 8px 3%;
    background-color: #B68400;
    margin: 30px 0px 0px 0px;
    border: 2px solid #B68400;
    border-radius: 5px;
    width: 160px;
    font-weight: bold;
}


.btn-get-started-vuna{
    width: 140px;
    text-align: center;
    padding: 10px 2%;
    margin: 40px auto 5px auto;
    border-radius: 4px;
    border: 2px solid #B68400;
    background-color: #B68400;
    text-decoration: none;
    display: block;
    clear: both;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.btn-get-started-vuna:hover{
    color: #fff;
    font-weight: bold;
}



/* vuna point admin */
#vuna-point-items-admin{
    background-color: #fbfcfc;
    border-radius: 3px;
    height: 420px;
    width: 100%;
    padding: 10px 0%;
    clear: both;
    display: block;
    margin: 0px 0px 20px 0px;
    overflow: auto;
}

#vuna-point-items-admin h3{
    padding: 3px 1.5% 10px 1.5%;
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
}

#vuna-point-items-admin h3 button{
    background-color: transparent;
    float: right;
    text-align: right;
    border: none;
    font-weight: bold;
}

#vuna-point-items-admin article{
    float: left;
    width: 47%;
    height: 110px;
    background-color: #fff;
    padding: 5px 2%;
    margin: 2px 1.5% 10px 1.5%;
    border-radius: 4px;
}

#vuna-point-items-admin article .vuna-point-img-admin-items{
    float: left;
    height: 100px;
    width: 35%;
}

#vuna-point-items-admin article .vuna-point-img-admin-items img{
    height: 100px;
    width: 100%;
    object-fit: contain;
}

#vuna-point-items-admin article .vuna-point-contents-admin-items{
    float: left;
    height: 100px;
    margin: 0px 0px 0px 5%;
    width: 60%;
    padding: 10px 0px;
}

#vuna-point-items-admin article .vuna-point-contents-admin-items h4{
    padding: 7px 0px 0px 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

#vuna-point-items-admin article .vuna-point-contents-admin-items h5{
    padding: 5px 0px;
    margin: 0px;
    font-size: 13px;
    font-weight: lighter;
}


#vuna-point-testmonia-admin{
    background-color: #fbfcfc;
    border-radius: 3px;
    height: 400px;
    width: 100%;
    padding: 14px 0%;
    clear: both;
    display: block;
    margin: 10px 0px 0px 0px;
    overflow: auto;
}

#vuna-point-testmonia-admin h3{
    padding: 3px 1.5% 10px 1.5%;
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
}

#vuna-point-testmonia-admin h3 button{
    background-color: transparent;
    float: right;
    text-align: right;
    border: none;
    font-weight: bold;
}

#vuna-point-testmonia-admin article{
    float: left;
    width: 97%;
    height: 80px;
    background-color: #fff;
    padding: 5px 2%;
    margin: 2px 1.5%;
    border-radius: 4px;
}

#vuna-point-testmonia-admin article .vuna-point-img-admin-items{
    float: left;
    height: 70px;
    width: 28%;
}

#vuna-point-testmonia-admin article .vuna-point-img-admin-items img{
    height: 70px;
    width: 100%;
    object-fit: contain;
}

#vuna-point-testmonia-admin article .vuna-point-contents-admin-items{
    float: left;
    height: 70px;
    margin: 0px 0px 0px 2%;
    width: 69%;
    padding: 5px 0px;
}

#vuna-point-testmonia-admin article .vuna-point-contents-admin-items h4{
    padding: 5px 0px 0px 0px;
    margin: 0px;
    font-size: 13px;
    font-weight: bold;
}

#vuna-point-testmonia-admin article .vuna-point-contents-admin-items h5{
    padding: 5px 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: lighter;
}



/* tra */
.container-one-dash{
    float: left;
    margin: 10px 3.5% 15px 0%;
    padding: 0px 2%;
    width:31%;
    height: 100px;
    cursor: pointer;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-two-dash{
    float: left;
    margin: 10px 4% 15px 0%;
    padding: 0px 2%;
    width:48%;
    height: 100px;
    cursor: pointer;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-two-dash:last-child{
    float: right;
    margin: 10px 0% 15px 0%;
    padding: 0px 2%;
    width:48%;
    height: 100px;
    cursor: pointer;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-one-dash:last-child{
    float: right;
    margin: 10px 0% 15px 0%;
    padding: 0px 2%;
    width:30.6%;
    height: 100px;
    cursor: pointer;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-one-dash .section-icons, .container-two-dash .section-icons{
    height: 100px;
    line-height: 100px;
    font-size: 26px;
    text-align: center;
    width: 15%;
    float: left;
    color: #B68400;
}
.container-one-dash .section-icons-other, .container-two-dash .section-icons-other{
    height: 100px;
    line-height: 100px;
    font-size: 22px;
    text-align: center;
    width: 10%;
    float: left;
    color: #B68400;
}
.container-one-dash .section-title-tra, .container-two-dash .section-title-tra{
    height: 100px;
    font-size: 14px;
    text-align: left;
    width: 65%;
    float: left;
    color: #000;
}

.container-one-dash .section-title-tra h2, .container-two-dash .section-title-tra h2{
    height: 50px;
    font-size: 28px;
    font-weight: bold;
    margin: 0px;
    padding: 23px 0px 0px 0px;
}

.container-one-dash .section-title-tra h3, .container-two-dash .section-title-tra h3{
    height: 50px;
    font-size: 12px;
    margin: 0px;
    padding: 7px 0px 0px 0px;
}
.container-one-dash .section-quantity-tra, .container-two-dash .section-quantity-tra{
    height: 100px;
    line-height: 100px;
    font-size: 22px;
    text-align: right;
    width: 20%;
    float: left;
    color: #000;
    font-weight: bold;
}

.container-one-dash .section-quantity-other, .container-two-dash .section-quantity-other{
    height: 100px;
    line-height: 100px;
    font-size: 14px;
    text-align: right;
    width: 25%;
    float: left;
    color: #000;
    font-weight: bold;
}

#container-left-receipt-invoice{
    width: 56%;
    padding: 10px 1%;
    margin: 10px 2% 20px 0px;
    float: left;
    min-height: 500px;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

#container-right-z-report{
    width: 42%;
    padding: 10px 1%;
    margin: 10px 0% 20px 0%;
    float: right;
    min-height: 500px;
    backdrop-filter: blur(19px) saturate(180%);
    -webkit-backdrop-filter: blur(19px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 6px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-block-new{
    width: 100%;
    height: 10px;
    padding: 0px;
    margin: 3px;
    clear: both;
}

#container-right-z-report h2, #container-left-receipt-invoice h2{
    padding: 3px 0px;
    margin: 3px;
    font-size: 14px;
    font-weight: bold;
}

#container-right-z-report h2 a, #container-left-receipt-invoice h2 a{
    padding: 4px 0px;
    margin: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #B68400;
    float: right;
}

#article-active-box{
    background: #B6840060 !important;
}

#btnMoreAction{
    background: #B6840060 !important;
}

#customer-seached-containers{
    position: relative;;
}

#customer-seached-containers #output-searched{
    position: absolute;
    width: 99%;
    height: auto;
    background: #fff8f8;
    padding: 10px 2%;
    z-index: 3000;
    margin:0px 1% 0px 0px;
    display: none;
}

#customer-seached-containers .searched-list-res{
    min-height: 60px;
    padding: 10px 2%;
    margin: 6px 0px 10px 0px;
    background: #fff;
}
#customer-seached-containers .searched-list-res h2{
    font-size: 13px;
    margin: 0px 0px;
    padding: 3px 0px;
}

#customer-seached-containers .btnCloseSearchCont{
    text-align: right;
    height: 40px;
    line-height: 40px;
    background: transparent;
}

#customer-seached-containers .btnCloseSearchCont button{
    background: #B68400;
    border-radius: 50%;
    line-height:40px;
    height: 40px;
    width: 40px;
    border:none;
    color: #fff;
    float: right;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}


#body-container #small-container-right .article-a{
    width: 49%;
    height: 80px;
    border-radius: 8px;
    background:#fff;
    float: left;
    padding: 12px 2%;
    margin: 20px 2% 0px 0px;}

#body-container #small-container-right .article-b{
    width: 49%;
    height: 80px;
    border-radius: 8px;
    background:#fff;
    float: left;
    padding: 12px 2%;
    margin: 20px 0% 0px 0px;}

.phoneins-view h3{
    font-weight: bold;
    font-size: 14px;
}

.phoneins-view p{
    font-size: 12px;
}

#chart-bar-phone{
    width: 100%;
    padding: 11px 3% 6px 3%;
    background-color: #fff;
    border-radius: 4px;
    min-height: 200px;
    margin: 0px 0px 0px 0px;
}


/* fleet */
.motor-fleet-entry-view{
    width: 96%;
    min-height: 50px;
    background-color: #fff8f8;
    margin: 10px 2%;
    clear: both;
}

.motor-fleet-entry-view .title-fleet-entry{
    width: 100%;
    background-color: #f4f8f8;
    padding: 15px 2%;
    font-size: 14px;
    font-weight: bold;
}

.motor-fleet-entry-view .title-fleet-entry button{
    float:right;
    background-color: #2ecc71;
    border: 1px solid #2ecc71;
    border-radius:4px;
    padding: 2px 5px;
    font-size: 12px;
    margin: 0px 0px 0px 10px;
}

#fleet-entry-details, #fleet-entry-compute-change{
    padding: 12px 2%;
}


#modal-view-images{
    position: fixed;
    width: 75%;
    height: 79vh;
    margin: 1vh 12.5%;
    padding: 10px 2%;
    background-color: #fff;
    border-radius: 5px;
    z-index: 800000000000;
    transition: 1s;
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16), 0 4px 7px 0 rgba(0, 0, 0, 0.4);
    top: 8vh;
    display: none;
}

#modal-view-images article{
    float: left;
    width: 65%;
    padding: 20px 2%;
    height: 90%;
    background-color: #fff8f8;
    margin-top: 20px;
}
#modal-view-images section{
    float: right;
    overflow-y: auto;
    height: 80%;
    width: 35%;
    padding: 30px 2% 10px 2%;
    margin-top: 70px;
}

#modal-view-images article img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#modal-view-images .btnClosedDiv{
    float: right;
    background-color: transparent;
    border: none;
    color: #B68400;
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 20px;
}


/* sms portal */
#small-container-right .article-sms-bar{
    width: 100%;
    padding: 10px 3%;
    border-radius: 8px;
    min-height: 158px;
    background-color: #B6840020;
    margin: 0px 0px 12px 0px;
}
#small-container-right .article-sms-bar-a{
    width: 100%;
    padding: 0px 0%;
    border-radius: 8px;
    min-height: 158px;
    background-color: transparent;
    margin: 0px 0px 12px 0px;
}
#small-container-right .article-sms-bar h4{
    font-weight: bold;
    margin: 1px 0px 8px 0px;
    padding: 0px;
    font-size: 15px;
}
#small-container-right .article-sms-bar .rank-tb{
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0px 0px 0px;
}
#small-container-right .article-sms-bar .rank-tb thead{
    margin: 0px;
    background-color: #B6840015;
    color: #222;
    font-size: 14px;
}
#small-container-right .article-sms-bar .rank-tb thead th{
    padding: 6px 5px 6px 10px;
    font-size: 12px;
}
#small-container-right .article-sms-bar .rank-tb tbody td{
    padding: 6px 5px 6px 10px;
    font-size: 12px;
}
#small-container-right .article-sms-bar .rank-tb tbody tr{
    background-color:#B6840008;
}
#small-container-right .article-sms-bar .rank-tb tbody tr:nth-of-type(even){
    background-color:#B6840005;
}
#small-container-right .article-sms-bar .rank-tb tbody tr:hover{
    background-color:#B6840005;
    box-shadow: 0px 2px 3px 0 rgba(133, 193, 233, 0.12), 0 3px 4px 0 rgba(133, 193, 233, 0.15);
    cursor: pointer;
}

h4 .more-button {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #8e92a4;
    box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
    opacity: 0.8;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }


.task-box {
    position: relative;
    border-radius: 12px;
    width: 100%;
    margin: 20px 0;
    padding: 16px;
    cursor: pointer;
    box-shadow: 2px 2px 4px 0px rgba(235,235,235,1);
  }
  .task-box:hover{
  }
  .time { margin-bottom: 6px; opacity: 0.4; font-size: 10px; }

  .task-name {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.6;
  }
  .yellow{
    background-color: #B6840020;
  }

  .task-box .more-button {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #8e92a4;
    box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
    opacity: 0.4;
    right: 20px;
    top: 30px;
    cursor: pointer;
  }

  .members {
    display: flex;
    margin-top: 14px;
  }
  .members img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    object-fit: cover;
  }


  .nav-bar-sms-pages{
      width: 100%;
      background: transparent;
      height: 140px;
      margin: 10px 0px;
      padding: 10px 0px;
      clear: both;
  }

.nav-bar-sms-pages .menu-container{
    float: left;
    width: 18.8%;
    background: #aeb6bf80;
    border-radius: 10px;
    height: 100px;
    padding: 0px 1%;
}

.nav-bar-sms-pages .menu-container .icons-menu-sms{
    float: left;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    text-align: center;
    background: #B6840030;
    margin: 20px 0px;
}
.nav-bar-sms-pages .menu-container .title-menu-sms{
    float: left;
    height: 100px;
    padding: 40px 0px 0px 10px;
    font-weight: bold;
    font-size: 14px;
}

.nav-bar-sms-pages .menu-container img{
    object-fit: cover;
    height: 25px;
    width: 25px;
    margin: 17.5px auto;
}
.nav-bar-sms-pages .margin-menu-sms{
    margin: 0px 1.5% 0px 0px;
}


.container-new-sms-step-a{
    float:left;
    background-color:#fff;
    padding: 20px 1.5%;
    margin: 10px 2% 10px 0px;
    width: 49%;
    border-radius: 5px;
    min-height: 100px;
}
.container-new-sms-step-b{
    float:right;
    background-color:#fff;
    padding: 20px 1.5%;
    margin: 10px 0% 10px 0px;
    width: 49%;
    border-radius: 5px;
    min-height: 100px;
}
.container-new-sms-step-c{
    float:left;
    background-color:#fff;
    padding: 20px 1.5%;
    margin: 10px 2% 10px 0px;
    width: 89%;
    border-radius: 5px;
    min-height: 100px;
}
.new-sms-conts h3{
    font-weight: bold;
    font-size: 16px;
}

/* arange */
.date-range-inline{
    float: right;
    width: 50%;
    margin: -5px 0px 5px 0px;
}


/* new pages */
.notes-container{
    width: 100%;
    min-height: 50px;
    clear: both;
    background-color: #B6840040;
    border: 2px solid #B6840080;
    border-radius: 5px;
    padding: 8px 1.5%;
}
.form-input-view-container{
    width: 100%;
    min-height: 120px;
    clear: both;
    background-color: #B6840010;
    border: 2px solid #B6840020;
    border-radius: 5px;
    padding: 15px 1.5%;
    margin: 15px 0px;
}
.notes-container h4{
    padding: 10px 0px;
    margin: 0px;
    font-weight: bold;
}


/* search section */
.button-section-with-hr{
    width: 100%;
    padding: 13px 0px 0px 0px;
}

.button-section-with-hr button{
    padding: 6px 1%;
    border-radius: 4px;
    margin: 0px 10px 0px 0px;
    transition: 1s;
    background-color: #ced4da;
    border: 1px solid #ced4da;
    color: #333;
}

.button-section-with-hr .btnActive, .button-section-with-hr button:hover{
    background-color: #B6840070;
    border: 1px solid #B6840070;
    color: #333;
    transition: 1s;
}



#date-filter-container-right{
    float: right;
    width: 40%;
    margin: 0px 0px 1px 0px;
    padding: 0px;
}




/* new report */
.report-header-bar{
    width:100%;
    height:65px;
    line-height: 65px;
    background-color: #f8f9f9;
    border-radius: 4px;
    padding: 0px 2%;
    position: relative;
}

.report-header-bar .header-rp-title{
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #85929e;
}
.report-header-bar .header-rp-filter{
    float: right;
    text-align: right;
    position: relative;
    width: 40%;
    height: 65px;
}

.report-header-bar .header-rp-filter .button-more{
    float: right;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

.report-header-bar .header-rp-filter .form-overlap{
    width: 220px;
    min-height: 155px;
    border-radius: 8px;
    background-color: #B6840088;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    padding: 20px 2%;
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 5;
    display: none;
}

.report-header-bar .header-rp-filter .form-overlap h3{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #fff;
}

.report-header-bar .header-rp-filter .form-overlap-exp{
    width: 420px;
    min-height: 155px;
    border-radius: 8px;
    background-color: #B6840088;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    padding: 5px 4%;
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 5;
    display: none;
}

.report-header-bar .header-rp-filter .form-overlap-exp h3{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    padding: 5px 0px;
    margin: 0px;
}

.report-header-bar .header-rp-filter .form-overlap-exp .btn-close-filter{
    font-size: 26px;
    color: #333;
    margin: -10px 0px 5px 0px;
    padding: 0px;
    height: 28px;
    width:28px;
    float: right;
    border-radius: 50%;
    cursor: pointer;
}

.container-rp-transparent{
    width: 100%;
    min-height: 150px;
    padding: 5px 0px;
    clear: both;
    margin: 3px 0px;
    background-color: transparent;
}

.container-rp-transparent .container-rp-substats{
    height: 250px;
    float: left;
    margin: 5px 0px;
    border-radius: 14px;
    background-color: #fdfefe90;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 10px 1%;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-rp-transparent .container-rp-substats-view{
    height: 150px;
    float: left;
    margin: 5px 0px;
    border-radius: 14px;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 5px 1%;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-rp-transparent .rp-width-a{
    width: 19% !important;
}
.container-rp-transparent .rp-width-b{
    width: 49% !important;
}
.container-rp-transparent .margin-rp-right{
    margin-right: 1.25% !important;
}

.container-rp-transparent .margin-rp-righthd{
    margin-right: 1% !important;
}

.container-rp-transparent .margin-rp-temp{
    margin-right: 2%;
    padding: 10px 3% 0px 3% !important;
}

.container-rp-transparent .padding-rp-temp{
    padding: 10px 3% 0px 3% !important;
}

.container-rp-transparent .rp-icons{
    padding: 10px 0px;
    float: left;
    clear: both;
    width: 100%;
}

.container-rp-transparent .rp-icons div{
    line-height: 45px;
    height: 45px;
    width: 45px;
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
}

.container-rp-transparent .rp-icons-min{
    padding: 6px 0px;
    float: left;
    clear: both;
    width: 100%;
}

.container-rp-transparent .rp-icons-min div{
    line-height: 35px;
    height: 35px;
    width: 35px;
    text-align: center;
    border-radius: 8px;
    font-size: 17px;
    color: #fff;
}

.container-rp-transparent .rp-icons .div-a, .container-rp-transparent .rp-icons-min .div-a{background-color: #a569bd80 !important;}
.container-rp-transparent .rp-icons .div-b, .container-rp-transparent .rp-icons-min .div-b{background-color: #58d68d80 !important;}
.container-rp-transparent .rp-icons .div-c, .container-rp-transparent .rp-icons-min .div-c{background-color: #3498db80 !important;}
.container-rp-transparent .rp-icons .div-d, .container-rp-transparent .rp-icons-min .div-d{background-color: #f4d03f80 !important;}
.container-rp-transparent .rp-icons .div-e, .container-rp-transparent .rp-icons-min .div-e{background-color: #2c3e5080 !important;}

.container-rp-transparent .rp-title{
    padding: 5px 0px;
    clear: both;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #99a3a4;
}

.container-rp-transparent .rp-stats-nmb{
    padding: 7px 0px;
    clear: both;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
}

.container-rp-transparent .rp-math-rising{
    padding: 7px 0px;
    clear: both;
    width: 100%;
    font-size: 14px;
    color: #99a3a4;
}
.container-rp-transparent .rp-math-rising .rising-perc{color:  #2ecc71;font-weight: bold;}
.container-rp-transparent .rp-math-rising .level-perc{color: #deca50;font-weight: bold;}
.container-rp-transparent .rp-math-rising .fall-perc{color: #f55971;font-weight: bold;}

.container-rp-transparent .rp-links{
    padding-top: 15px;
    margin-top: 5px;
    clear: both;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    border-top: 2px solid #eded;
}

.container-rp-premium-full{
    border-radius: 10px;
    width: 49.5%;
    float: left;
    min-height: 350px;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 20px 2%;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.container-rp-transparent .container-rp-left{
    width: 40%;
    height: auto;
    float: left;
    background-color: transparent;
}


.container-rp-transparent .short-rp-container-chart{
    width: 58.5%;
    height: 510px;
    float: right;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 20px 2%;
    border: 1px solid rgba(209, 213, 219, 0.3);
    border-radius: 5px;
    margin: 7px 0px 0px 1.5%;
}

.container-rp-transparent .short-rp-container-chart-min{
    width: 58.5%;
    height: 310px;
    float: right;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 3px 1%;
    border: 1px solid rgba(209, 213, 219, 0.3);
    border-radius: 5px;
    margin: 5px 0px 0px 1.5%;
}

.container-rp-transparent .short-rp-container-chart h2, .container-rp-transparent .short-rp-container-chart-min h2{
    font-weight: bold;
    font-size: 16px;
    border-bottom: 0.3px solid #ddd;
    padding: 0px 0px 15px 0px;
    color: #808b96;
    clear: both;
    width: 100%;
}


.container-rp-transparent .rightside-rp-cont{
    width: 58%;
    height: 650px;
    float: left;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 20px 2%;
    border: 1px solid rgba(209, 213, 219, 0.3);
    border-radius: 5px;
    margin: 2px 2% 0px 0%;
}

.container-rp-transparent .leftside-rp-cont-float{
    width: 40%;
    height: 510px;
    float: right;
    background-color: transparent;
    padding: 0px;
    margin: 0%;
}

.container-rp-transparent .leftside-rp-cont-float .fullside-rp-cont{
    width: 100%;
    height: 320px;
    clear: both;
    background-color: #fdfefe99;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    padding: 15px 2%;
    border-radius: 5px;
}

.container-rp-transparent .rp-cont-mid{
    margin: 0px 1%;
}

.container-rp-transparent .rp-cont-mrgbtm{
    margin-bottom: 10px !important;
}

.container-rp-transparent .rp-cont-hd2 h2{
    font-weight: bold;
    font-size: 14px;
    border-bottom: 0.3px solid #ddd;
    padding: 0px 0px 10px 0px;
    color: #808b96;
    clear: both;
    width: 100%;
}




.table-ranking{
    width: 100%;
    border-collapse: collapse;
}

.table-ranking thead{ background:#fbfcfc;color:#B68400;padding:0px 0%;margin:0px;text-align:left; }
.table-ranking th{ padding: 10px 2%;margin: 0px;color: #B68400;font-size: 12px;text-align: left; }
.table-ranking tbody{ color: #333;text-align: left; }
.table-ranking tbody td{ padding:14px 2%;color:#333;font-size: 10px;text-align: left;}
.table-ranking tbody tr{background: #fff;}
.table-ranking tbody tr:nth-of-type(even){background: #fbfcfc;}
.table-ranking .heading-ranking{
    padding: 0px 0px 0px 20px;
    width: 65%;}

    .table-ranking tbody tr:hover{background: #B6840020;cursor: pointer;}