body{ background-color: #F2F5F9; }

/* page */
.page-wrapper .page-body-wrapper{ background-color: #F2F5F9; }
.page-body{ 
    padding-top: 20px;
    margin-top: 83px;
    min-height: calc(100vh - 82px);
    margin-left: 280px;
    
    min-width: 1475px;
}
.page-header{ padding-bottom: 20px; }

/* card */
.card{
    border: 1px solid #e6edef;
    border-radius: 0;
    background: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.card .card-body{ padding: 50px; }
.card-top-title{
    position: relative;
    margin-bottom: 10px;
    z-index: 99;
}


/* header */
.main-header-style{ 
    border-bottom: 1px solid #e6edef;
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.header-grid{ grid-template-columns: 1fr 1fr; }
.header-grid-left{ text-align: left; }
.header-grid-left a{ 
    margin-left: 35px;
    padding: 0;
}
.header-grid-left div{ padding-left: 50px; }

.header-grid-right{ text-align: right; }

.header-list li{ 
    list-style-type: none; 
    float: left;
    padding-left: 50px;
    padding-right: 50px;
}

/* font-color */
.a-color-black{ color: #212529; text-decoration: none; }
.a-color-black:hover{ color: #212529; }
.a-color-black:active{ color: #212529; }
.a-color-black:focus{ color: #212529; }

.font-danger{ color: #C43434; }


/* width */
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-45 { width: 45% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-95 { width: 95% !important; }

.w-400{ width: 400px;}

.minw-300{ min-width: 300px; }

/* margin */
.mt-5px { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-25 { margin-top : 25px;}
.mt-30 { margin-top: 30px; }

.mt--30 { margin-top: -30px; }
.mt--40 { margin-top: -40px; }

.margin-4px-bottom{ margin-bottom: 4px; }
.mb-5px { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.mb--7 { margin-bottom: -7px;}

.ml-0{ margin-left: 0px !important; }
.ml-5px { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-2r{ margin-left: 25px;}

.center{ margin: 0 auto;}
.mr-2px { margin-right: 2px !important; }
.mr-5px { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-2r{ margin-right: 2rem;}
.mr-4r { margin-right: 4rem; }
.prl-3{
    padding-left: 3rem;
    padding-right: 3rem;
}


/* padding */
.pl-20{ padding-left: 20px; }
.plr-20 { 
    padding-left: 20px;
    padding-right: 20px; 
}
.pr-5px{padding-right: 5px;}

.pl-7r{ padding-left: 7rem;}
/* left */

.mp{ padding: 0.5rem 1.5rem 0.5rem;}
.left-div{
    left: 2rem;
}

/* font size */
.fs-1r{ font-size: 1.1rem; }
.fs-2r{ font-size: 2rem; }
.fs-3r{ font-size: 3rem; }

/* redial-social-widget */
.redial-social-widget {
    border-radius: 100%;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin: 0 auto;
    background-image: linear-gradient(90deg, #f4f4f4 50%, transparent 50%, transparent), 
        linear-gradient(90deg, #e6edef 50%, #f4f4f4 50%, #f4f4f4); 
}

.redial-social-widget .widget-text {
    background-color: #fff;
    height: 120px;
    width: 120px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    color: #6077ff;
    font-size: 1.5rem;
}

.redial-social-widget.radial-bar-70 {
    background-image: linear-gradient(342deg, #6077ff 50%, transparent 50%, transparent), 
        linear-gradient(270deg, #6077ff 50%, rgba(36, 105, 92, 0.1) 50%, rgba(36, 105, 92, 0.1)); 
}


/* button */
.btn-padding{ padding: .45rem 1.3rem; }
.btn-primary{ 
    background-color: #008751 !important; 
    border-color: #008751 !important;
}

.btn-primary:hover{ 
    background-color: #005c37 !important; 
    border-color: #005c37 !important;
}
.btn-secondary{ 
    background-color: #7a8085; 
    border-color: #7a8085;
}

.btn-secondary:hover{ 
    background-color: #60676d !important; 
    border-color: #60676d !important;
}


/* form */
.form-login{
    max-width: 500px;
    padding: 50px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 16%);
}

.login-bg-img{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.form-section label{ float: left; }

.input-bg{ 
    background-color: #F2F5F9;
    border-color: #F2F5F9;
}


.select-bg{
    background-color: #ffffff;
    border-color: #dde0e4;
}


.form-control:disabled{
    background-color: #E2E7EE;
    opacity: 1;
}

.form-label-display{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;    
    align-items: center;
    margin-bottom: 30px;
}
.input-btn-width{ width: calc(100% - 80px); }




.link-area{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.a-link{
    padding: 10px;
    color: #005c37;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

.a-link:hover{ color: #005c37; }

.link-section{
    padding: 20px 30px 20px 30px;
    background-color: #005c37;
    background-color: #ffffff;
    border: 4px solid #005c37;

    width: 500px;
    margin: 20px;
    border-radius: 10px;

    display: flex;
    justify-content: space-between;
}

.link-section i::before{ font-weight: bold !important; }

/* left-menu */
.left-menu{ 
    width: 280px;
    padding: 20px;
    height: calc( 100% - 82px );
    float: left;
    position: fixed;
    z-index: 8;
    top: 82px;
}

.menu-li button{
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 15px;
}

.menu-li button:hover{ background-color: #DEE9F7 !important; }
.menu-li button.active{ background-color: #DEE9F7 !important; }

.menu-sub-ul{ padding: 0px 15px 0px 15px; }
.menu-sub-ul li{ margin-bottom: 15px; }
.menu-sub-ul li a:hover{ color: #b5c8df !important; }

.menu-in-a{ color: #292929; text-decoration: none; }
.menu-in-a:hover{ color: #292929; }

/* box-style */
.box-shadow{ box-shadow: 0px 0px 20px 5px #DEE4EB; }
.basic-box{ border-radius: 10px; }


/* footer */
.footer-custom{
    /* bottom: 0; */
    position: absolute;
    width: 100%;
}

/* canvas-table */
.canvas-table-01{ width: 100%; position: relative; }
/* .canvas-table-01 td, .canvas-table-01 tr{ border: 1px solid #000 !important; } */

.custom-table-02{
    text-align: center;
    min-width: 150px;
    border-radius: 10px;
}

.canvas-table-01 table tbody tr:first-child th{ border-top-left-radius: 10px ; }
.canvas-table-01 table tbody tr:first-child td{ border-top-right-radius: 10px ; }
.canvas-table-01 table tbody tr:last-child th{ border-bottom-left-radius: 10px ; }
.canvas-table-01 table tbody tr:last-child td{ border-bottom-right-radius: 10px ; }

.right-animation{ width: 100%; opacity: 0; }
.right-down-animation{ width: 100%; opacity: 0; } 

.canvas-box1{ width: 105%; margin-left: -5px;}
.canvas-box2{ display: flex; justify-content: flex-start; margin-top: -40px; margin-right: 100px; }
.canvas-box3{ display: flex; justify-content: center; margin-top: -40px; }
.canvas-box4{ display: flex; justify-content: center; margin-top: -90px; }
.canvas-box5{ display: flex; justify-content: flex-start; margin-top: -40px; }

.table-display{ display: flex; justify-content: center; }

.canvas-table-img{ width: 150px; height: auto; opacity: 0; }
.table-background-img{ position: absolute; width: 95%; }

.custom-table-02 td, .custom-table-02 tr{ border: 1px solid #fff !important; }
.custom-table-02 th{ background-color: #e7f1ff; padding: 5px 20px; }
.custom-table-02 td{ background-color: #f8fafc; padding: 5px 20px; }

.canvas-overlfow{ display: flex; flex-direction: row; overflow: hidden; }





/* datatables */
.custom-table-01{
    text-align: center;
    width: 100% !important;
    border-radius: 10px;
}
.border-r{ border-right: 1px solid !important; }

.custom-table-01.dataTable thead th, 
.custom-table-01.dataTable tbody td, 
.custom-table-01.dataTable.no-footer{
    border-color: #ffffff !important;
}

.custom-table-01.dataTable thead tr th,
.custom-table-01.dataTable tbody tr td{
    border-right: 1px solid;
}
.custom-table-01.dataTable thead tr th:last-child, 
.custom-table-01.dataTable tbody tr td:last-child{
    border-right: none;
}

.custom-table-01.dataTable thead{
    background-color: #e7f1ff;
}

.custom-table-01.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
}
.custom-table-01.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
}

.custom-table-01.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
}

.custom-table-01.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
}

.custom-table-01.dataTable.stripe>tbody>tr.odd>*, 
.custom-table-01.dataTable.display>tbody>tr.odd>*{
    background-color: #eff7ff;
    box-shadow: 0 0 0 0 #000000;
}
.custom-table-01.dataTable.stripe>tbody>tr.even>*, 
.custom-table-01.dataTable.display>tbody>tr.even>*{
    background-color: #f8fafc;
    box-shadow: 0 0 0 0 #000000;
}

table.dataTable thead th, table.dataTable thead td, 
table.dataTable tfoot th, table.dataTable tfoot td{
    text-align: center !important;
}

.dataTables_wrapper .dataTables_paginate{
    border: 1px solid #e6edef;
    border-radius: 0.25rem;
    margin-top: 20px;
    padding-top: 0px;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    color: #fff !important;
    border: 1px solid #6077ff;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#6077ff), to(#6077ff));
    background: linear-gradient(to bottom, #6077ff 0%, #6077ff 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ 
    border: 1px solid #c5cefe;
    background: #fff;
    color: #111 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    border: 1px solid #6077ff !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#6077ff), to(#6077ff));
    background: linear-gradient(to bottom, #6077ff 0%, #6077ff 100%);
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active{
    box-shadow: 0px 0px 0px #000;
    background: #fff;
    color: #111 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:active{
    box-shadow: 0px 0px 0px #000;
    background: #6077ff !important;
    color: #fff !important;
}

/* table style */
.no-list-style, .no-list-style ul{  list-style: none; }
.pbt li{ padding:3px 3px; }
.tablestyle { width: 600px; border-spacing: 6px; border-collapse: separate;}

.tablestyle td, th {
    text-align: left;
    padding-left: 8px;
    white-space: nowrap;
    overflow: auto;
}

/* Table - fixed Col */
    .fixedCol1 {
        width:140px;
        min-width:140px;
        max-width:140px;
    }
    .fixedCol2 {
        width:130px;
        min-width:130px;
        max-width:130px;
    }
    .fixedCol3 {
        width:260px;
        min-width:260px;
        max-width:260px;
    }
    .fixedCol4{
        width: 180px;
        min-width:180px;
        max-width:180px;
    }
/* ----------------------- */

/* link style */
.a-none{
    text-decoration: none;
    color: #005c37;
}
.a-none:hover{ color: #008751;}

/* label style */
.flex-label{ display: flex;}
.spb{ justify-content: space-between;}
.w220 { width: 100%;}
/* pop up style */

.inblock{ display: inline-block; }
.flex-side{ justify-content: space-between; }

.bold{ font-weight: bold; }

.f-center{
justify-content: center;
    align-items: baseline;
}


.container{
    max-width: 50rem;
    position: absolute;
    z-index: 1001;
    top: 30%;
    left:33%;
    margin:-50px 0 0 -10px;
    display: none;
}

/* .dark{
    background: #000000;
    opacity: 0.3;
} */

.modal-box{
	display:none;
    background: rgba(0,0,0,.25);
    position:fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;  
    z-index: 1000;
}

.alert02{
    z-index: 9999;
}
/* ---------- select icon ---------*/
.droparrow{
    background-image: url(../img_ex/chevron-down-solid.svg);
    background-repeat: no-repeat;
    background-position: 98%, 20px;
    background-size: 15px;
}

/* color */
.white{background-color: #ffffff !important;}

.box1{
    position: relative;
    padding: 1.3rem 3rem 3rem .08rem;
    background: linear-gradient(45deg,  #d5e2f1,#dbdbe4);
    width: 100%px;
    height: 395px;
    border-radius: 15px;
    overflow: hidden;
}

.infolist{
    width: 100%;
    display: flex;
    transform: translate(0,0);
}
.listitem{
    list-style: none;
    user-select: none;
}
.link{display: block; -webkit-user-drag: none;}


.icon_img{
    margin-left: 5rem;
    display: inline-block;
    background-color: #ffffff7a;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.icon{
    color: rgb(73, 67, 107);
    position: relative;
    top: 3.7rem;
    left: 3.7rem;
    font-size: 5rem;
}

.icon_newimg{
    top: 24%;
    left: 30%;
    position: relative;
    width: 40px;
}
.icon_ess{
    top: 25%;
    left: 17%;
    position: relative;
    width: 70px;
}
.icon_bc{
    top:15%;
    left: 30%;
    position: relative;
    width: 37px;
}
.icon_bm{
    top:32%;
    left: 25%;
    position: relative;
    width: 50px;
}

/* reverstable style */
.reverstable{ 
    font-size: 0.96rem;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    background: #f9fcff;
    width: 250px; 
    border-collapse: collapse;
    border-style: hidden;
    border-radius: 15px;
    overflow: hidden;
}
.reverstable th, .reverstable td { 
    color: #4c524f;
    padding-top: 8px;
    text-align: center;
    width: 125px; height: 38px; 
    border-bottom: 1px solid #e9eef7;
    border-left: 1px solid #e9eef7;}
.reverstable thead{
    float: left;
}
/* table none border */
.reverstable th:last-child, .reverstable td:last-child{
    border-bottom: none;
}
.reverstable th{
    border-left: none;
    background-color: #f2f3f8;
}

.reverstable thead tr,
.reverstable thead tr th {display: block;}

.reverstable tbody {display: block; overflow-x: hidden; white-space: nowrap;}
.reverstable tbody tr td {display: block; } 

.tableradius{
    border-radius: 10px;
}

/* item box */
.itembox{
    margin-right: 3rem;
}

/* main ui */
.imgbox{
    z-index: 200;
    padding: 1rem;
    position: relative;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.back-img{
    width: 100% ;
    height: 100%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}


/* dashbord-body*/
.dashbord-body{
    min-width: 1608px;
    min-height: 100vh;
    padding: 30px 50px;
}

.img_dashbord-body{
    min-width: 1608px;
    min-height: 860px;
    height:calc(100vh - 150px);
    border-radius: 5px;

    background: url(../img_ex/001.gif);
    background-size: cover;
}

.dashboard-card{
    background: url(../img_ex/ypsumibg.png);
    background-size: cover;
    overflow: hidden;
}

/* flowCanvas */


/* cel style */
.cel{ 
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    background: #f9fcff31;
    width: 320px; 
    border-collapse: collapse;
    border-style: hidden;
    border-radius: 10px;
    overflow: hidden;
}
.cel th, .cel td { 
    padding-top: 8px;
    color: #4c524f;
    text-align: center;
    width: 160px; height: 35px; 
    border-bottom: 1px solid #e9eef7;
    border-left: 1px solid #e9eef7;}
.cel thead{
    float: left;
}
/* table none border */
.cel th:last-child, .cel td:last-child{
    border-bottom: none;
}
.cel th{
    border-left: none;
    background-color: #f2f3f873;
}

.cel thead tr,
.cel thead tr th {display: block;}

.cel tbody {display: block; overflow-x: hidden; white-space: nowrap;}
.cel tbody tr td {display: block; } 
/****************************************/

.c1{
    top:41%;
    position: absolute;
    left: 10%;
}

.c2{
    top:16%;
    position: absolute;
    left: 28%;
}

.c3{
    top:46%;
    position: absolute;
    left: 68%;
}

.c4{
    top:78%;
    position: absolute;
    left: 14%;
}


.a-arrow{
    position:absolute;
    top: 50%;
    left: 1%;
    transform: translate(0%, -50%);
    width: 20px;
    height: 36px;
    background: url(../img_ex/chevron-left-solid.svg) no-repeat;
    text-indent: -9999px;
}

.b-arrow{
    position:absolute;
    top: 50%;
    left: 97.8%;
    transform: translate(0%, -50%);
    width: 20px;
    height: 36px;
    background: url(../img_ex/chevron-right-solid.svg) no-repeat;
    text-indent: -9999px;
}

.img1{
    top: 12%;
    left: 33%;
    position: absolute;
    width: 80px;
}

.img2{
    position: absolute;
    top:35%;
    left: 15%;

    width: 70px;
}

.img3{
    position: absolute;
    top: 72%;
    left: 15%;
    width: 70px;
}

.img4{
    position: absolute;
    top: 74%;
    left: 18.5%;
    width: 40px;
}

.img5{
    position: absolute;
    top: 58%;
    left: 40%;
    width: 120px;
}

.img6{
    position: absolute;
    top: 46%;
    left: 65%;
    width: 40px;
}

.img7{
    position: absolute;
    top: 35%;
    left: 46%;
    width: 90px;
}

.capction{
    position: absolute;
    top: 39%;
    left: 50%;
    padding-left: 1rem;
    width: 170px;
    display: block;
    background: #ffffff52;
    border-radius: 10px;
}

.capction p{
    margin: 0;
}



.er{
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 3rem;
}

.dataTables_length{
	margin-top: 20px;
}