/****************************
    * DMS
    * Version: 1.0.0
*******************************/
:root{
    --color1: #364ccd;
    --color1-11: #364ccd11;
    --color1-33: #364ccd33;
    --color1-88: #364ccd88;
    --color1-cc: #364ccdcc;

    --color2: #000;
    --color2-aa: #004668aa;
    --color3:#fff;
    --light-3: #fff3;
    --dark-2: #0002;
    --err-bdr:#d10202;
    --err-bg:#d1020211;
    --success: #090;
    --success-bg: #0901;
}
.color1{color: var(--color1);}
.color1-c{color: var(--color1-cc);}
html, body{font-family: Arial, Helvetica, sans-serif;}
.bdy.container-fluid,
.container-fluid{padding-left: 50px; padding-right: 50px;}
a, [onclick]{cursor: pointer; color: var(--color1);}
.bg-light-trans{background-color: var(--light-3);}
.v-middle{
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
.link-btn {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    transition: all 0.3s;
}
.link-btn:hover {
    text-decoration: none;
    box-shadow: -2px -2px 3px 0px var(--color3), 2px 2px 3px 0px #0006;
}
.bdr-t-1 {border-top: 1px solid var(--dark-2);}
.main-app{
    min-height: 100vh;
    background-color: #f5f5f5;
}
/* header .logo{
    height: 40px;
    margin: 10px 0;
    background: url('../images/logo.png') no-repeat left center;
    background-size: contain;
} */
header .logo{
    line-height: 40px;
    margin: 10px 0;
    background: url(../images/logo.png) no-repeat left center;
    background-size: contain;
    padding-left: 50px;
    font-size: 24px;
    font-family: fantasy;
    color: var(--color1);
    user-select: none;
    display: inline-block;
}
header .logo2{
    line-height: 40px;
    margin: 10px 0;
    background: url(../images/logo2.png) no-repeat left center;
    background-size: contain;
    padding-left: 160px;
    font-size: 24px;
    font-family: fantasy;
    color: var(--color1);
	float:right;
}
.sign-header .logo{background-position: center center;}
.main-header{
    background-color: var(--color3);
    border-bottom: 1px solid #ccc;
}
.main-footer{
    background-color: var(--color3);
    border-top: 1px solid #ccc;
}
.main-header .profile {
    display: inline-block;
    margin: 10px 0;
    font-size: 14px;
    padding: 0 10px;
}
.main-header .profile i.profile-icon{
    font-size: 20px;
    color: #fff;
    border-radius: 50%;
    background: var(--color1);
    line-height: 40px;
    display: inline-block;
    width: 40px;
    text-align: center;
    box-shadow: -1px -1px 1px #0003 inset, 1px 1px 2px #fff inset;
    font-style: normal;
    text-transform: uppercase;
    font-weight: bold;
}
.main-header .notificatons {
    width: 34px;
    height: 43px;
    text-align: center;
    margin: 10px;
}
.main-header .notificatons .noti-icon{ position: relative; cursor: pointer; user-select: none;}
.main-header .notificatons .noti-icon c{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    background: var(--err-bdr);
    color: #fff;
    line-height: 18px;
    width: 18px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 1px 1px 5px #0002;
    font-weight: bold;
}
.main-header .notificatons .noti-icon i{
    font-size: 24px;
    color: var(--color1-cc);
    text-shadow: 0px 0px 10px #0003;
    line-height: 43px;
}
.main-header .notificatons .noti-icon:hover i{color: var(--color1);}
.main-header .noti-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #00000008;
    cursor: default;
}
.main-header .notification-details {
    position: fixed;
    background: #fff;
    z-index: 1000;
    width: 350px;
    max-width: 100%;
    right: -350px;
    top: 64px;
    bottom: 0;
    box-shadow: -1px 2px 10px #0003;
    transition: all 0.5s;
    text-align: left;
    counter-reset: msgPage;
}
.main-header .notification-details.active{right: 0;}
.main-header .notification-details .header {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    color: var(--color1);
    background: linear-gradient(0deg, #0001, transparent);
}
.main-header .notification-details .noti-single {
    padding: 3px 15px;
    font-size: 14px;
    background: var(--color1-11) linear-gradient(0deg, #fff0, #fff8);
    cursor: pointer;
    box-shadow: 1px 1px 2px #0005;
    margin: 5px;
    transform: scale(0.6, 0.1);
    opacity: 0;
    transition: all 0.5s;
}
.main-header .notification-details .noti-single.in {opacity: 1; transform: scale(1);}
.main-header .notification-details .noti-single:hover {background-color: var(--color1-33);}
.main-header .notification-details .noti-single strong {color: var(--color1); font-weight: 200;}
.main-header .notification-details .noti-single .noti-time {color: #0007; font-size: 12px; text-align: right;}
.main-header .notification-details .scrollable{max-height: calc(100vh - 110px); overflow: auto;}
.noti-single.msg prof-img {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
    width: 40px;
    font-size: 26px;
    border-radius: 50% 0 0 50%;
    background-color: var(--color1-33);
    color: var(--color1);
    text-align: center;
    text-shadow: 1px 1px 0px #fff4;
}
.noti-single.msg.mine prof-img{
    border-radius: 0 50% 50% 0;
    background: #eee;
    color: #888;
}
.noti-single.msg msg-box {
    display: inline-block;
    width: calc(100% - 50px);
    background: linear-gradient(0deg, var(--color1-33), var(--color1-11));
    box-shadow: 1px 1px 2px #0006;
    border-radius: 5px;
    padding: 1px 7px;
    margin-left: -5px;
}
.noti-single.msg.mine msg-box{
    margin: 0 -3px 0 0;
    background: linear-gradient(0deg, #f0f0f0 50%, #fff 70%);
    box-shadow: 1px 1px 2px #0003, -1px -1px 1px #0002;
}
.noti-single.msg msg-box strong{font-size: 120%;}
.main-header .notification-details .noti-single.msg {
    padding: 3px 5px;
    box-shadow: none;
    background: none;
    cursor: default;
}
.main-header .notification-details .noti-single.msg .attachment{color: var(--color1-88); float: left;}
.noti-single.msg msg-box .bdy{font-size: 85%;}
msg-box .sub {font-weight: bold;}
msg-box .reply-btn {
    margin-top: 3px;
    float: right;
    display: block;
    background: var(--color1-33);
    color: var(--color1);
    border-radius: 5px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    font-size: 12px;
}
.notification-details pagenum {
    display: block;
    margin: 20px 0;
    position: relative;
}
.notification-details pagenum:after {
    content: '';
    display: block;
    border-top: 1px solid #ddd;
    margin: 20px 20px 0;
}
.notification-details pagenum:before {
    counter-increment: msgPage;
    content: counter(msgPage);
    position: absolute;
    line-height: 28px;
    bottom: -15px;
    left: calc(50% - 15px);
    display: inline-block;
    background: #fff;
    width: 30px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 50%;
}
.main-menu{
    display: inline-block;
    margin-bottom: -20px;
    z-index: 10;
    position: relative;
}
.main-menubar {
    display: inline-flex;
    background: var(--color1);
    position: relative;
    box-shadow: 1px 1px 15px #000;
}
.main-menubar:before,
.main-menubar:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 35px solid transparent;
    border-top-color: var(--color1);
    border-right-color: var(--color1);
    position: absolute;
    top: 0;
    left: -70px;
}
.main-menubar:after{
    left:auto; right: -70px;
    transform: rotateY(180deg);
}
.main-menubar a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color3);
    height: 70px;
    padding: 0 20px;
    text-shadow: 1px 1px 3px #0007;
    font-size: 14px;
}
.main-menubar a i{
    font-size: 22px;
}
.main-menubar a:hover{
    text-decoration: none;
}
.sub-menu {
    background: var(--color1-cc);
    position: absolute;
    z-index: 100;
    top: 65px;
    width: 90%;
    left: 5%;
    padding: 30px;
    color: var(--color3);
    display: none;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #0006;
}
.sub-menu.show{display: block;}
ul.columns {
    column-count: 3;
    padding: 0;
    margin: 0;
}
ul.columns li{list-style: none;}
ul.columns a{color: inherit;}

.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.row>*{position:relative;}
.w-sm{min-width:95px;}
@media print{
.card-body{padding:0;margin:0;}
.card{border:0;}
}
[type=email]::-moz-placeholder{text-align:left;}
[type=email]:-ms-input-placeholder{text-align:left;}
[type=email]::placeholder{text-align:left;}
.form-wizard-wrapper label{font-size:14px;text-align:right;}
#progressbar{
    padding-left:0;margin-bottom:30px;overflow:hidden;
    color:#0003;display:flex; counter-reset: formpart;
    font-weight: 500;
}
#progressbar .active{
    color: var(--color1);
}
#progressbar li{list-style-type:none;font-size:15px;flex:1;position:relative;text-align:center;padding-top: 3px;font-family: inherit !important;}
#progressbar li:before{font-family:icomoon}
#progressbar li:not([class*="priya-"]):before{content: "\2714";}
#progressbar li:before{
    width:50px;height:50px;line-height:45px;display:block;
    font-size:26px;
    color:#aaa;
    background:#ccc;
    border-radius:50%;margin:0 auto 10px auto;padding:2px;text-align:center;
    position:relative;z-index:1;
    /* counter-increment: formpart;
    content: counter(formpart); */
}
#progressbar li:after{content:'';width:100%;height:2px;background:lightgray;position:absolute;left:0;top:25px;z-index:0;}
#progressbar li.active:before{box-shadow: -1px -1px 3px var(--color3), 1px 1px 3px #000;}
#progressbar li.active:before,#progressbar li.active:after{
    background:var(--color1);
    color: var(--color3);
}
#progressbar li.current:before {
    transform: scale(1.1) rotateY(360deg);
    border: 3px solid;
}
.form-group{margin-bottom:10px;}
.form-group{position:relative;}
.bdy {
    min-height: calc(100vh - 121px);
    padding: 1px;
}
.bdy .card-md{
    max-width: 900px;
    margin: 40px auto 15px;
}
.master-page .section{display: none;}
.master-page .section:target{display: block;}

/* LOGIN */
.login-container{
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 30px;
    position: relative;
}
.login-container .login-box{
    /* width: 280px; */
    max-width: 100%;
    padding: 30px;
    box-shadow: 1px 1px 50px #0003;
    border: 1px solid var(--dark-2);
    border-radius: 10px;
    background: #fffe;
}
/* .login-container .illustrations{width:70%} */
.login-container .illustrations{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.slider-1{max-width: 100%; height: 100%;}
.illustrations .slick-list{height: 100%;}
.slide-single img{width: 100%; /*height: 100vh;*/ object-fit: cover;}
.input-group input.form-control:-internal-autofill-selected,
.input-group .form-control {
    background: none;
    border: none;
    padding-left: 0;
}

.input-group .form-control:focus {
    box-shadow: none;
}
.input-group{
    border-radius: 20px;
    box-shadow: 1px 1px 5px #0003 inset;
    background: var(--light-3);
}
.input-group-addon{
    align-items: center;
    justify-content: center;
    display: flex;
    width: 40px;
    opacity: 0.5;
}
.input-group.pri-form .input-group-addon{
    position: absolute;
    z-index: 5;
    height: 100%;
}

.input-group.pri-form input,
input.pri-form, input.pri-form[readonly]{min-width: 80px;}

.input-group.pri-form .form-control { padding-left: 36px;}
.btn, .btn:focus {
    box-shadow: 1px 1px 2px #0005;
    border-radius: 4px;
    background: #f7f7f7;
    border: none;
    color: var(--color1);
    font-weight: 500;
    transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  position: relative;
  overflow: hidden;
}
.btn{background-color: var(--color1); color: var(--color3)}
.btn:hover {
    outline: 2px solid;
    transition-duration: 0.1s;
    background-color: var(--color3);
    color:var(--color1);
}
.btn.btn-primary{background-color: #0069d933; color:#0069d9}
.btn.btn-primary:hover {background-color: #0069d9; color:#fff}
.btn.btn-info{background-color: #46b8da33; color: var(--color1);}
.btn.btn-info:hover {background-color: #46b8da; color: #fff;}
.btn.btn-success{background-color: #4cae4c33; color: #4cae4c;}
.btn.btn-success:hover {background-color: #4cae4c; color: #fff;}
.btn.btn-warning{background-color: #eea23633; color: #eea236;}
.btn.btn-warning:hover {background-color: #eea236; color: #fff;}
.btn.btn-danger{background-color: #d43f3a33; color: #d43f3a;}
.btn.btn-danger:hover {background-color: #d43f3a; color: #fff;}
.btn.btn-cancel{background-color: #7773; color: #777;}
.btn.btn-cancel:hover {background-color: #777; color: #fff;}
.btn.btn-icon {
    background: none;
    box-shadow: none;
    line-height: 24px;
    width: 26px;
    text-align: center;
    transition: all 0.3s;
    padding: 2px 0 0;
    font-size: 18px;
}
.btn-circle {border-radius: 50%;}
.btn:after{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: 50%; top: 50%;
    background-color: var(--color1);
    border-radius: 50%;
    transition: all 0.5s;
    transform: scale(20);
    opacity: 0;
}
.btn:active:after {
    position: absolute;
    border-radius: 4em;
    transform: scale(0);
    opacity: 1;
    transition: 0s;
  }
.btn-login, .btn-login:focus{
    width: 100%;
    background: var(--color1);
    color: var(--color3);
    border-radius: 20px;
}
.btn-login:hover,
.btn-login:focus{color: var(--color1); background-color: var(--color3); outline: 2px solid;}
.btn.btn-r-curved {border-radius: 0 20px 20px 0;}
.btn.btn-l-curved {border-radius: 20px 0 0 20px;}
.login-box .logo {
    max-width: 100%;
    max-height: 50px;
}
.login-box .header {
    padding-bottom: 15px;
    text-align: center;
}
.login-box .header .title{
    text-transform:uppercase;
    font-size: 12px;
    letter-spacing: 2px;
}
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover, 
.login-box input:-webkit-autofill:focus, 
.login-box input:-webkit-autofill:active{
    -webkit-box-shadow: -3px 0 5px 1px #0002 inset, -3px 0 4px 23px #fff inset !important;
    border-radius: 0 30px 30px 0;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}
.card {
    box-shadow: 1px 1px 5px 1px #0003;
    border-radius: 4px;
    background-color: #fff;
    border: none;
    color: var(--color1);
    font-weight: 400;
}
.card .card-body{color: var(--color2);}
.card h6 {
    border: 1px solid var(--color3);
    display: inline-block;
    padding: 5px 20px;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 15px;
    box-shadow: 1px 1px 3px;
    color: var(--color1);
}
.card.collapsable .card-header{cursor: pointer;}
.card-header{background-color: var(--color3); text-transform: capitalize;}
.card-header .arrow {
    font-size: 120%;
    vertical-align: middle;
    float: right;
    transition: all 0.3s;
}
.card-header .arrow.down {
    transform: rotate(180deg);
}
h6.card-header {
    color: var(--color2);
    font-weight: bold;
    box-shadow: none;
    text-transform: capitalize;
}
.card.collapsable .card-body{
    transition: all;
}
.card-body h3 {
    border-bottom: 1px solid var(--color1-88);
    font-size: 20px;
    padding: 10px 0;
    margin: 25px 0 15px;
    color: var(--color1);
}
.card .form-section{
    color:var(--color2);
    font-weight: 500;
}
.pri-form{
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: #0002;
    color: #0008;
    font-size: 18px;
    /* font-weight: bold; */
    font-family: arial;
    padding: 0 20px;
    box-shadow: none;
    transition: all 0.3s;
}
.pri-form::placeholder{color: #0004;}
.pri-form:focus, .pri-form:hover{
    background-color: var(--light-3);
    border-color: var(--color1-88);
}
.pri-form:focus{
    background-color: var(--color1-11);
    box-shadow: none;
}
.pri-form:invalid, .pri-form input:invalid{background-color: #f3acac;}
textarea.pri-form{
    padding: 5px 20px;
    font-size: 16px;
}
input[type="file"].pri-form{padding: 3px;}
.input-group.pri-form{padding: 0;}
.pri-check input, .pri-radio input {display: none;}
.pri-check i, .pri-radio i {
    content: '';
    display: inline-block;
    border: 1px solid;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 1px;
}
.pri-radio i{border-radius: 50%;}
.pri-check input:checked + i:after, .pri-radio input:checked + i:after {
    content: "";
    border: 3px solid;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    width: 8px;
    height: 18px;
    display: inline-block;
    position: relative;
    left: 4px;
    bottom: 6px;
}
.repeat-container{
    position: relative;
}
.repeat-div {
    padding: 15px;
    border: 1px dashed #0005;
    position: relative;
    margin: 12px 0 20px;
}
.repeat-div .ttl{
    position: absolute;
    background-color: var(--color3);
    color: var(--color1);
    top: -10px;
    left: 15px;
    padding: 0 15px;
    line-height: 20px;
    border-radius: 20px;
    font-size: 12px;
}
.add-new {
    background: var(--color1);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 30px;
    position: absolute;
    z-index: 1;
    text-align: center;
    border-radius: 20px;
    right: 15px;
    bottom: -15px;
    padding: 0 20px;
    box-shadow: -1px -1px 3px 2px var(--color3), 1px 1px 3px 1px #000;
    transition: all 0.3s;
    overflow: hidden;
}
.shine{overflow: hidden; transition: all 0.3s;}
.shine:before,
.add-new:before{
    content:"";
    position: absolute;
    display: inline-block;
    background: #fffd;
    box-shadow: 0px 0px 5px 1px #fffc;
    height: 150%;
    width: 3px;
    transform: rotate(30deg);
    top: -10px;
    left: -10%;
    transition: all 0.5s;
}
.shine:hover,
.add-new:hover{
    transform: scale(1.1);
}
.shine:hover:before,
.add-new:hover:before{left:110%}

/* DATATABLE */
.card .table{color:var(--color2);}
.card .dataTables_wrapper .dataTables_length,
.card .dataTables_wrapper .dataTables_filter,
.card .dataTables_wrapper .dataTables_info, 
.card .dataTables_wrapper .dataTables_processing,
.card .dataTables_wrapper .dataTables_paginate{
    color:var(--color2);
}
.card .dataTables_wrapper .dataTables_length select,
.card .dataTables_wrapper .dataTables_filter input{
    border: 1px solid var(--color2-aa);
    color: var(--color2);
}
.card .theme-tbl tbody tr,
.card table.dataTable tbody tr{background: none;}
.card .theme-tbl thead th,
.card .theme-tbl tbody td,
.card table.dataTable thead th, 
.card table.dataTable thead td,
.card table.dataTable.no-footer{border-color: var(--color1-33);}
.card .theme-tbl.table-stripped tbody tr:nth-child(even),
.card table.dataTable tbody tr.even{background-color: #00000005;}
.card .theme-tbl thead th,
.card table.dataTable thead th{
    background-color: var(--color1-cc);
    color: var(--color3);
    white-space: nowrap;
}
.card .dataTables_wrapper .dataTables_paginate .paginate_button.btn{
    padding: 0;
    line-height: 26px;
    width: 26px;
    border-radius: 5px;
    margin: 2px;
    background-color: #fff;
    color: var(--color1) !important;
    border-color: var(--color1-11);
}
.card .dataTables_wrapper .dataTables_paginate .paginate_button.btn.current{
    background: var(--color1) !important;
    color: #fff !important;
    box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{background-color: #ccc;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: linear-gradient(0deg, #0002, transparent);
    outline: none; box-shadow: 1px 1px 5px #0003;
}

/*****************************
.pr-multiselect{
    background-color: #0002;
    border-radius: 4px;
}
.pr-multiselect .multiselect-dropdown,
.pr-multiselect .x{
    height: 60px;
    background-color: transparent;
    border: none;
    width: 100% !important;
}
.pr-multiselect .multiselect-dropdown span.placeholder{
    color: #0008;
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    font-family: arial;
}
.pr-multiselect .multiselect-dropdown span.optext{
    background-color: var(--color1);
    color: var(--color3);
}
*/

/* Flip Card */
.flip-card {
    background-color: transparent;
    width: 380px;
    height: 420px;
    perspective: 1000px; 
    /*backdrop-filter: blur(15px);*/
}
@media (max-width: 768px){
    .flip-card{
        margin-left: 0;
    }
}  
@media (min-width: 768px){
    .flip-card{
        margin-left: 45%;
    }
}  
@media (min-width: 998px){
    .flip-card{
        margin-left: 50%;
    }
}    
@media (min-width: 1200px){
    .flip-card{
        margin-left: 70%;
    }
}  

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:target .flip-card-inner {
    transform: rotateY(180deg);
}
  
/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-front{z-index: 1;}
.flip-card-back {transform: rotateY(180deg);}
/* /Flip Card */
.link{
    color: var(--color1);
    cursor: pointer;
    margin: 0;
    text-shadow: -1px -1px 10px #fff, 1px 1px 10px #fff;
}
.link:hover{text-decoration: underline;}
a.float-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 900;
    color: var(--color3);
    background: var(--color1);
    text-align: center;
    font-size: 60px;
    line-height: 60px;
    width: 60px;
    border-radius: 50%;
    border: none;
    padding: 0;
    box-shadow: -1px -1px 3px 1px #fff, 2px 2px 5px #0008;
    text-decoration: none;
    text-shadow: -1px -1px 1px #0005;
    transition: all 0.3s;
}
a.float-btn:hover {
    background: var(--color3);
    color: var(--color1);
    outline: 2px solid var(--color1);
}
.bg-img{
    background: url('../images/bazaar.jpg') no-repeat center;
    background-size: cover;
}
.gradiant-bg{background: linear-gradient(#b1e5c9dd,#fffbbadd, #b2e6cadd);}

/* Profile Page */
.user-detail .profile-img {
    max-width: 250px;
}
.user-detail img.prof-img {
    width: 100%;
    border: 1px solid var(--color1-88);
}
.user-detail h2 small{
    display: block;
    font-size: 18px;
    font-family: arial;
}
fieldset {
    padding: 15px;
    border: 1px dashed #0002;
    margin-top: 15px;
}
legend {
    display: inline-block;
    font-size: 1rem;
    width: auto;
    padding: 3px 15px;
    background-color: var(--color1-cc);
    color: #fff;
    /* background-image: linear-gradient(0deg, #ddd, #fff, #eee); */
    border-radius: 5px;
    text-shadow: 1px 1px 1px var(--color1);
    box-shadow: 1px 1px 2px #0006;
}
.user-detail fieldset {
    border: 1px dashed var(--color1-88);
    padding: 15px;
    border-radius:5px;
    position: relative;
}
.user-detail fieldset .dl {
    border: none;
}
.user-detail legend {
    font-size: 16px;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0 15px;
    border-left: 1px solid var(--dark-2);
    border-right: 1px solid var(--dark-2);
    border-radius: 7px;
    box-shadow: 1px 1px 1px #0008, 0px 0px 10px #0001 inset;
    background-color: var(--color1-cc);
    color: #fff;
    text-shadow: none;
    background-image: none;
}
.dl {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--dark-2);
}
.dt {
    color: var(--color2-aa);
    font-size: 90%
}
.dd, .dd-copy {
    color: var(--color2);
    font-size: 110%;
    line-height: 100%;
}
.editable .dl .dd,
.editable .hide-on-edit{display: none;}
.editable .form-field{display: block;}
.editable .form-control:disabled {
    border: none;
    padding: 0;
    height: auto;
    background: none;
    color: var(--color2);
}
.pri-form.h2 {font-size: 1.8rem;}
.pri-form.err {
    outline: 1px solid var(--err-bdr);
    background: var(--err-bg);
}

label.pri-multi{padding: 3px; height: auto;}
label.pri-multi input{border:none; background: none; font-size: 85%;}
label.pri-multi input:focus,
label.pri-multi input:focus-visible
{border:none; background: none; outline: none;}
label.pri-multi b {
    display: inline-block;
    font-weight: normal;
    font-size: 14px;
    background: linear-gradient(0deg, #ddd 10%, #fff 80%);
    margin: 2px;
    padding: 2px 16px 2px 8px;
    border-radius: 2px;
    box-shadow: 1px 1px 2px 1px #0003;
    position: relative;
    color: #444;
}
label.pri-multi b i{position: absolute;right: 0;width: 16px;text-align: center;color: #d53343;font-size: 110%;}

.form_validate_error {
    outline: 2px solid var(--err-bdr);
    background-color: var(--err-bg);
}
.has-submenu {
    width: 40px;
    position: relative;
}
.has-submenu .drop-menu {
    position: absolute;
    background: var(--color3);
    right: 0;
    top:40px;
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 1px 1px 10px #0005;
    display: none;
}
.has-submenu:hover .drop-menu::before{
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--color3);
    top: -4px;
    right: 10px;
    transform: rotate(45deg);
    z-index: -1;
}
.has-submenu:hover .drop-menu {
    display: block;
    width: 180px;
}
.has-submenu .drop-menu .header {
    background: linear-gradient(0deg, var(--color1-33), var(--color1-11));
    margin: -10px -10px 10px;
    padding: 10px;
    text-align: left;
    color: var(--color1);
}
.has-submenu ul {
    margin: 0;
    list-style: none;
    padding: 0;
}
.has-submenu ul a{
    display: block;
    padding: 3px 10px;
    text-align: left;
    border-bottom: 1px dashed #ddd;
    font-size: 14px;
}
.has-submenu ul a:hover{
    color: inherit;
    text-decoration: none;
    background-color: #0001;
}
.has-submenu ul li.logout {background: var(--dark-2);}
.has-submenu ul li.logout a{color: var(--color1); text-align: center;}
i.help {
    font-size: 1.9rem;
    vertical-align: middle;
    transition: all 0.3s;
    color: var(--color1-88);
}
i.help:hover {
    color: var(--color1);
}
/* [title]:hover::after {
    content: attr(title) 'sss';
    position: absolute;
    top: -100%;
    left: 0;
    background: #333;
    color: #fff;
  } */
.switch-btn{
    margin: 0;
    display: inline-block;
    border: 1px solid var(--color1);
}
.switch-btn input{display:none}

.r-menu {
    display: inline-block;
    border: 2px solid var(--color1);
    border-radius: 50%;
    padding: 5px;
    transform: translate(0px, 10px);
    background: #f5f5f5;
    margin-bottom: -10px;
    position: relative;
    z-index: 101;
}
i.priya-th {
    display: inline-block;
    font-size: 26px;
    line-height: 57px;
    width: 60px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 1px 1px 3px #0005;
    color: var(--color1);
    cursor: pointer;
    transition: all 0.8s ease;
    border: 1px solid;
}
i.priya-th:hover{
    transform: rotate(360deg);
    font-size: 36px;
}

ul.ico-menu {
    list-style: none;
    padding: 0;
    font-size: 16px;

}
ul.ico-menu label {
    font-size: 18px;
    margin: 0;
    cursor: pointer;
    text-shadow: 2px 2px 2px #0005;
    display: block;
    color: var(--color3);
}
ul.ico-menu label a,
ul.ico-menu label a:hover {
    color: inherit;
    text-decoration: none;
}
ul.ico-menu label i{
    width: 20px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
ul.ico-menu > li {
    border-bottom: 1px dashed #fff3;
    margin-bottom: 10px;
}
ul.ico-menu > li:hover {
    border-bottom: 1px solid #fffd;
}
ul.ico-menu > li input{display: none;}
ul.ico-menu ul a {
    color: #fff;
}

.success-msg {
    /*color: #4cae4c;*/
    text-align: center;
}
.success-check {
    display: inline-block;
    border: 5px solid;
    margin: 30px 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 3px;
    transform: rotate(45deg) scale(0);
    transition: all 1s ease;
    color: #4cae4c;
}
.success-check:before{
    content:'';
    display: block;
    border-right: 10px solid;
    border-bottom: 10px solid;
    width: 25%;
    height: 75%;
    margin: 15px auto 0;
}
.failed-msg {
    text-align: center;
}
.failed-msg h2, .success-msg h2 {
    color: var(--color1);
}

.failed-check {
    display: inline-block;
    border: 5px solid;
    margin: 30px 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 3px;
    transform: rotate(45deg) scale(0);
    transition: all 1s ease;
    position: relative;
    color: #d43f3a;
}
.failed-check:before, .failed-check:after{
    content:'';
    display: inline-block;
    border-top: 10px solid;
    width: 70%;
    top: calc(50% - 5px);
    left: 15%;
    position: absolute;
}
.failed-check:after{transform: rotate(90deg);}
.anim{transform: rotate(45deg) scale(1);}

ul.side-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.side-nav li{
    border-bottom: 1px solid #ddd;
    padding: 3px 0;
}
ul.side-nav li a,
ul.side-nav li .drop-menu-head{
    display: block;
    padding: 4px 10px;
    position: relative;
    color: var(--color1);
}
ul.side-nav li a:hover{
    text-decoration: none;
    background-color: var(--color1-11);
}
ul.side-nav li.active a{
    background: var(--color1);
    color: var(--color3);
    border-radius: 4px;
}

.side-nav li.active a:after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: var(--color1);
    transform: rotate(45deg);
    position: absolute;
    right: -4px;
    top: 8px;
}
ul.side-nav li a i{
    vertical-align: text-bottom;
    font-size: 1.04rem;
}
ul.side-nav .drop-icon {float: right;}
ul.side-nav li.drop-menu.m-active {
    background-color: var(--color1-33);
    box-shadow: 1px 1px 4px #0005;
}
ul.side-nav li.drop-menu.m-active .drop-icon { transform: rotate(90deg);}
ul.side-nav li.drop-menu.m-active ul.submenu {
    background: var(--color3);
    list-style: none;
    padding: 0 0 0 15px;
    border: 2px solid var(--color1-33);
}
ul.submenu li:last-child {border-bottom: none;}
/* SCROLLBAR */
::-webkit-scrollbar {width: 0.4em; transition: all 0.3s;}
body::-webkit-scrollbar,
:hover::-webkit-scrollbar {width: 0.4em;}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--color1-11);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color1);
    outline: 1px solid var(--color1-88);
}

/* CLOSE ICON */
i.priya-close {
    position: absolute;
    right: 2px;
    top: 2px;
    background: #caa;
    color: #fdd;
    padding: 5px 7px;
    border-radius: 3px;
    opacity: 0.6;
    z-index:10;
    cursor: pointer;
    transition: all 0.3s;
}
i.priya-close:hover{background: #e77; opacity:1; /* transform: rotate(360deg); */}

table.no-border,
table.no-border tr td {
    border: none;
}
.ordered-list{
    counter-reset: comodity;
}
.ordered-list .list{
    position: relative;
    padding-left: 50px;
    border-bottom: 1px solid #0000000f;
}
.ordered-list .list:before{
    counter-increment:comodity;
    content: counter(comodity);
    position: absolute;
    left: 2px;
    top: 10px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 1px 1px 10px #0002 inset;
}
.ordered-list .list:last-child{border:none;}
.alert {
    position: absolute;
    right: 10px;
    top: 9vh;
    z-index: 1000;
}
.alert.pop-in {
    top: 12px;
}
p.alert {
    position: fixed;
    z-index: 1000;
    top: 70px;
}

.stall_book_list {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
}
.stall_book_list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.stall_book_list ul li label{margin: 0;}
.stall_book_list ul li label span{
    display: block;
    margin: 0 -1px 0 0;
    padding: 4px 15px;
    background: #fafafa;
    font-size: 14px;
    border:1px solid #ccc;
    cursor: pointer;
}
.stall_book_list ul li.alloted label span{
    background: var(--err-bg);
    border: 1px solid var(--err-bdr);
    color: var(--err-bdr);
    z-index: 1;
    position: relative;
    cursor: not-allowed;
}
.stall_book_list ul li label input:checked + span{
    background: var(--success-bg);
    border: 1px solid var(--success);
    color: var(--success);
    z-index: 1;
    position: relative;
}
.stall_book_list ul li label input{display: none}

/* pr Alert */
.prAlert-wrapper{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    opacity: 0;
}
.prAlert-wrapper.show{opacity: 1;}
.prAlert-wrapper .prAlert-bg{background-color: #0001; position: absolute;top: 0;right: 0;bottom: 0; left: 0; z-index: 0;}
.prAlert-wrapper .prAlert-box{
    background-color: #fff;
    box-shadow: 1px 1px 5px #0009;
    position: relative;
    z-index: 10;
    border-radius: 5px;
    width: 400px;
    max-width: 100%;
    transform: translate(0px, -150px);
    transition: all 0.5s;
    opacity: 0;
    transition-delay: 0.1s;
}
.prAlert-wrapper.show .prAlert-box{opacity: 1; transform: translate(0px, -50px);}
.prAlert-wrapper .prAlert-box > i {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    line-height: 38px;
    width: 38px;
    text-align: center;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s;
}
.prAlert-wrapper .prAlert-box > i:hover {color: var(--err-bdr);}
.prAlert-wrapper .prAlert-box header {
    border-radius: 5px 5px 0 0;
    background: #0001;
    border-bottom: 1px solid #ddd;
    padding: 7px 20px 6px;
}
.prAlert-wrapper .prAlert-box .body{padding: 20px;}
.prAlert-wrapper .prAlert-box footer{text-align: right; padding: 20px;}

/* Glass Effect */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .sub-menu {
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      background-color: var(--color1-cc);
      box-shadow: -2px -2px 2px 1px #fff, 2px 2px 3px #0007;
    }
  }

.help-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0003;
    opacity: 0;
    transition: all 0.4s;
}
.help-modal .help-modal-content {
    background: #fff;
    position: relative;
    max-width: 100%;
    width: 1000px;
    max-height: 100vh;
    overflow: auto;
    box-shadow: 1px 1px 5px 0px #0005;
    border-radius: 4px;
    transition: all 0.3s;
    transform: scale(.8);
}
.help-modal .help-modal-content.pop-xl{width: 1200px;}
.help-modal .help-modal-content.pop-sm{width: 700px;}
.help-modal .help-modal-content.pop-xs{width: 400px;}
.help-modal.popin{opacity: 1;}
.help-modal.popin .help-modal-content{transform: scale(1);}
.help-modal-content header {
    border-bottom: 1px solid #ddd;
    padding: 10px 30px;
    font-size: 1.5rem;
    background-color: var(--color1-11);
    color: var(--color1);
}
.help-modal-content section {
    padding: 30px;
}
input#captcha,input#forgotcaptcha {
    background: none;
    border-radius: 20px 0 0 20px;
    box-shadow: 1px 1px 3px #0002 inset;
}
.form-control#captcha:focus,.form-control#forgotcaptcha:focus{border: none; background: none;}
.instructionmsg{color: var(--color1); font-size: 75%;}
table.dataTable thead .sorting{background-size: 12px;}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{background-size: 8px;}
.responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
color-palate {
    display: block;
    position: fixed;
    z-index: 999;
    right: -80px;
    top: 20vh;
    width: 130px;
    box-shadow: 1px 1px 5px #0007;
    border-radius: 50%;
    border: 3px solid #fff;
    transition: all 0.5s;
}
color-palate:hover{right: -60px; box-shadow: 1px 1px 10px #000a;}
color-palate svg {width: 100%; transition: all 3s ease; transform: rotate(180deg);}
color-palate svg:hover {transform: rotate(0deg); transition: all 1s ease;}
color-palate text {
    fill: #ffffff;
    font-size: 5rem;
    transform: rotate(15deg) translate(80px, -90px);
    cursor: default;
}
color-palate circle.clr {
    r: 50px;
    stroke: #fff8;
    stroke-width: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
color-palate circle.clr:hover {stroke: #fff;}
color-palate circle.clr.clr-1 { cy: 80px; cx: 220px; }
color-palate circle.clr.clr-2 { cy: 165px; cx: 110px; }
color-palate circle.clr.clr-3 { cy: 300px; cx: 70px; }
color-palate circle.clr.clr-4 { cy: 435px; cx: 110px; }
color-palate circle.clr.clr-5 { cy: 520px; cx: 220px; }

.btn-grp {float: right; display: flex;}
.btn-grp btn {
    font-size: 16px;
    padding: 2px 10px 0;
    border: 1px solid var(--color1);
    margin-left: -1px;
    margin-top: -5px;
    margin-bottom: -5px;
    cursor: pointer;
    line-height: 30px;
}
/* .btn-grp btn:first-child{border-radius: 5px 0 0 5px;}
.btn-grp btn:last-child{border-radius: 0 5px 5px 0;} */
.btn-grp btn:hover{background-color:var(--color1); color:var(--color3)}

.ico-btn {
    padding-right: 40px;
    position: relative;
}
.ico-btn .btn {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 0.25rem 0.25rem 0;
    line-height: 40px;
    padding: 0;
    width: 40px;
}
.ico-btn .pri-form {
    border-radius: 0.25rem 0 0 0.25rem;
}
table .pri-form {height: 34px; padding: 0 7px}
table .pri-form[readonly] {
    border: none;
    background: none;
    padding: 0;
}
table .text-center .pri-form[readonly] {text-align: center;}
table .pri-check{color: var(--color1-cc);}
.priya-inr{vertical-align: middle; transform: translate(0, -1px);display: inline-block; margin-right: 2px;}

.photoupload {
    position: relative;
    border: 5px solid var(--color1-88);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 1px 1px 3px #0009;
}
.photoupload:not(.readonly):after,
.photoupload.readonly .form-field:after {
    content:'Choose Photo';
    display: block;
    background: var(--color1-cc);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    padding: 3px 0;
    bottom:0
}
.photoupload[data-label]:not(.readonly):after,
.photoupload.readonly .form-field[data-label]:after {
    content: attr(data-label);
}

.photoupload img{
    width: 100%;
    max-height: 200px;
    object-fit: contain;
}
.photoupload input{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    z-index: 2;
    opacity:0;
}

i.plus {
    transform: scale(1.8);
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
}
.ui-widget.ui-widget-content{
    z-index: 1000;
    max-height: 220px;
    overflow: auto;
    box-shadow: 1px 1px 5px #0008;
}
.ui-menu .ui-menu-item {
    border-bottom: 1px solid #eee;
}
.ui-state-active, .ui-widget-content .ui-state-active{
    max-width: 100%; 
    background-image: linear-gradient(0deg, var(--color1), var(--color1-cc));
    background-color: #fff;
    border: none;
}
.card.single-data {
    padding: 30px;
    text-align: center;
    border-top: 5px solid;
}
.card.single-data h5 {
    color: #333;
}
.card.single-data h1 {
    font-size: 3rem;
    background: #8882;
    width: 80px;
    text-align: center;
    margin: 0 auto;
    border-radius: 4px;
}
.deviders [class*="col-"]:not(:last-child) {border-right: 1px solid #ccc}
.certificate {
    max-width: 100%;
    max-height: 50px;
    border: 1px solid var(--color1);
    border-radius: 5px;
    cursor: pointer;
}
preview-img {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0008;
    opacity: 0;
}
preview-img *{transition: all 0.3s ease;}
preview-img.in{opacity: 1;}
preview-img close {
    position: absolute;
    z-index: 100;
    right: 15px;
    top: 15px;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #000;
    background: #ffc7c7;
    color: #e10000;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
}
preview-img close:hover {color: #fff;background-color: #e10000; text-shadow: 1px 1px 0px #0006;}
preview-img img{
    max-width: 95%;
    max-height: 95%;
    transform: scale(0.6);
}
preview-img.in img{transform: scale(1);}
.copy-btn {
    display: flex;
    align-items: center;
}
.copy-btn i{
    font-size: 20px;
    width: 40px;
    background-image: linear-gradient(20deg, var(--color1), var(--color1-cc));
    color: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #0009;
    cursor: pointer;
}
.copy-btn i:before {
    transform: translateY(-2px);
    display: inline-block;
    transition: all 0.3s;
}
.copy-btn i:hover:before {transform: translateY(-2px) scale(1.2) translateX(5px);}
.xsmall-card{padding: 11px 1.25rem; border-radius: 5px;background: linear-gradient(45deg, var(--color1-88), transparent);}
.small-card{border-top: 5px solid var(--color1); padding: 10px 1.25rem;}
.small-card h4, .xsmall-card h4{color: #0007; font-size: 1.1rem;}
.small-card h2, .xsmall-card h2{ font-size: 1.8rem;}

.small-card .icon{width: 30%;margin-right: 5px; background: no-repeat center; background-size: contain;}
.small-card.d-flex > span{flex: auto;}
.icon.present{background-image: url(../images/present-icon.png);}
.icon.leave{background-image: url(../images/leave-icon.png);}
.icon.absent{background-image: url(../images/absent-icon.png);}
.icon.requisition{background-image: url(../images/requisition-icon.png);}
.icon.purchase{background-image: url(../images/purchase-icon.png);}
.icon.sale{background-image: url(../images/sale-icon.png);}
.cbox{padding: 10px;background-color: var(--color1-33);border: 1px solid var(--color1-cc);border-radius: 5px;}
.cbox > h2 {color: var(--color1);font-size: 1rem;}

.settings {
    position: fixed;
    z-index: 999;
    width: 240px;
    left: -240px;
    top: 64px;
    background: #fff;
    min-height: 100px;
    box-shadow: 1px 1px 3px #0003;
    transition: all 0.3s;
}
.settings .setting-btn {
    position: absolute;
    right: -15px;
    top: 50px;
    background: var(--color1);
    color: #fff;
    line-height: 30px;
    width: 15px;
    text-align: center;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}
.settings:hover{left:0}
.settings-content {
    padding: 15px;
    font-size: .9rem;
}

body.fixed-header .main-header {
    position: fixed;
    width: 100%;
    z-index: 999;
    left: 0; top: 0;
}
body.fixed-header .bdy.container-fluid{margin-top: 64px;}
body.fixed-header-footer .bdy{overflow: auto; height: calc(100vh - 121px);}

.no-gap .row.gap-opt{margin:0}
.no-gap .row.gap-opt > div{padding: 0;}
.no-gap .row.gap-opt > div .card{border-radius:0; box-shadow: none; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}

.signup-wrapper{position: relative; display: inline-block;}
.signup-wrapper span{cursor: pointer;}
signuptooltip {
    display: block;
    background: var(--color1);
    padding: 3px;
    border-radius: 6px;
    position: absolute;
    left: calc(50% - 65px);
    bottom: 20px;
    min-width: 130px;
    box-shadow: 1px 1px 3px #0009;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s;
}
signuptooltip:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -4px;
    left: calc(50% - 10px);
    background: var(--color1);
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    z-index: -1;
}
signuptooltip a {
    display: block;
    padding: 5px 10px;
    color: #fff;
    margin: 1px;
    border-bottom: 1px solid #fff3;
    font-size: .9rem;
    transition: all 0.3s;
}
signuptooltip a:last-child{border: none;}
signuptooltip a:hover {
    background: #fff;
    color: var(--color1);
    text-decoration: none;
}
.signup-wrapper:hover signuptooltip{
    pointer-events: all;
    opacity: 1;
    transform: translateY(0px);
}
.text-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.585rem;
    color: var(--color1);
}
.dashboard{background-color: #fefefe;}
/* .dashboard .row { margin: 0 -5px; } */
/* .dashboard .row > div { padding: 5px; } */
.table-attendance {text-align: center;}
.table-attendance thead th {
    font-size: 14px;
    vertical-align: middle;
    background-color: var(--color1-11);
    text-align: center;
}
.table-attendance thead th.a-date {padding: 2px;}
.table-attendance thead tr.small th {
    font-weight: normal;
    font-size: 12px;
    padding: 2px;
}
.table-attendance .p-small th {padding:2px;}
.table-attendance .checkin span {
    color: #090;
    border: 1px solid #090;
    padding: 2px 5px 2px 2px;
    border-radius: 4px;
    white-space: nowrap;
}
.table-attendance .checkin span i{
    color: #fff;
    background: #090;
    vertical-align: text-bottom;
    display: inline-block;
    margin: -2px;
    padding: 3px;
}
.table-attendance .checkout span {
    color: #995000;
    border: 1px solid #995000;
    padding: 2px 5px 2px 2px;
    border-radius: 4px;
    white-space: nowrap;
}
.table-attendance .checkout span i{
    color: #fff;
    background: #995000;
    vertical-align: text-bottom;
    display: inline-block;
    margin: -2px;
    padding: 3px;
}
.table-attendance .checkout.not span {
    padding: 2px 3px;
    border-color: #d10202;
    background: #d10202;
}
.table-attendance .checkout.not span i {background: #d10202;}
.table-attendance .leave{background-color: #d1020220;}
.info-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--color1);
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
}
.info{position: relative;}
.info tooltip {
    position: absolute;
    background: var(--color1-cc);
    color: #fff;
    width: 220px;
    z-index: 10;
    padding: 10px;
    font-family: sans-serif, arial;
    font-size: 16px;
    transform: translate(calc(-100% + 50px), calc(-100% - 35px));
    border-radius: 5px;
    backdrop-filter: blur(3px);
    box-shadow: 1px 1px 3px #000a;
    display: none;
}
.info:hover tooltip {display: block;}
.info tooltip:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    bottom: -20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color1);
}

.table-attendance .employee {font-size: 14px;}
.table-attendance .employee small{display:block}
/* .dashboard-filter {
    padding: 0px 15px;
    margin: 10px 0 5px;
} */
.dashboard-filter {
    position: fixed;
    right: -250px;
    width: 250px;
    z-index: 999;
    background: #fff8;
    padding: 15px;
    box-shadow: -1px 0px 3px #0003;
    top: 64px;
    backdrop-filter: blur(15px);
    bottom: 0;
    transition: all 0.3s;
}
.dashboard-filter.in {right: 0;}
.dashboard-filter-bg{position: fixed; z-index: 998;left:0;right: 0;top:0;bottom: 0; display: none;}
.dashboard-filter .btn-sec {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    text-align: center;
}
.dashboard-filter .header {
    margin: -15px -15px 10px;
    padding: 10px 15px;
    background: var(--color1);
    color: #fff;
}
.dashboard-filter .scrollable {
    max-height: calc(100% - 70px);
    overflow: auto;
}
.dashboard-filter i.priya-filter {margin-right: 10px;}
.dashboard-filter label {
    margin-bottom: 0;
}
.dashboard-filter .pri-form {
    height: 36px;
    background: var(--color1-33);
    color: #000;
}

.compliance {
    padding: 10px 0;
    border-bottom: 1px solid #0001;
}
.compliance .avtar {
    font-size: 40px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background: var(--color1-33);
    display: inline-block;
    color: var(--color1);
}
.compliance h4 {font-size: 1.25rem;}
.compliance-comment {
    position: fixed;
    top: 10px;
    left: calc(50% - 250px);
    background: #fff;
    padding: 15px;
    width: 500px;
    box-shadow: 1px 1px 10px #0008;
    border-radius: 5px;
}
.compliance-comment .heading {
    background: var(--color1-11);
    color: var(--color1);
    padding: 10px;
    margin: -15px -15px 10px;
}
.compliance .comply-reply {
    margin-left: 100px;
    background-color: var(--color1-11);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--color1-33);
}
.compliance .connecter{position: relative;}
.compliance .connecter:before{
    content: '';
    display: block;
    width: 65px;
    height: 100%;
    border-radius: 0 0 0 30px;
    border-left: 2px solid var(--color1-33);
    border-bottom: 2px solid var(--color1-33);
    position: absolute;
    left: 50%;
    top: 64px;
}
.msg-tittle span {
    border: 1px solid;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 20px;
    background-color: var(--color1-11);
    margin-left: 10px;
    display: inline-block;
}
.msg-tittle .community-name{
    display: none;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--color1);
    padding: 2px 10px;
}

.msg-tittle .community-name::after{content: '';clear: both; display: block;}
.msg-tittle .community-name c {
    margin: 0px 2px;
    line-height: 125%;
    display: inherit;
    float: left;
}
.msg-tittle .community-name c:not(:last-child):after {
    content: ', ';
}
search-box {
    margin: 5px 0;
    background-color: var(--color1);
    padding: 5px 15px;
    display: block;
    color: #fff;
    border-radius: 5px;
}
search-box label{margin: 0; }
search-box .txtbx{
    border:none;
    height: 38px;
    padding: 0 15px;
    margin-left: 10px;
    border-radius: 5px;
    width: 300px;
}
search-box .btn:not(:hover){background: #0002;outline: 1px solid #fff8; color:#fff}
search-result {
    padding: 10px 15px;
    display: block;
    border: 3px solid var(--color1);
    margin: -8px 0 5px;
}
search-result h5 {
    border-bottom: 1px solid var(--color1-33);
    color: var(--color1);
    font-size: 1.1rem;
}
search-result .row {margin-left: -7px; margin-right: -7px;}
search-result .row > * {
    padding-left: 7px;
    padding-right: 7px;
}
search-result dl{
    padding: 5px;
    background-color: var(--color1-11);
    font-size: 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--color1-11);
}
search-result h2 {
    text-align: center;
    color: #ddd;
}
.editable .form-field.buttoned {display: flex;}
.form-field.buttoned input{border-radius: 4px 0 0 4px;}
.form-field.buttoned .btn{border-radius: 0 4px 4px 0;}
.pri-loader{position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 100;background-color: #fffa;display: flex;align-items: center;justify-content: center;flex-direction: column;color: var(--color1);font-size: 24px;text-shadow: 1px 1px 5px #fff;font-weight: bold;}
.pri-loader::after {
    content: '';
    display: block;
    border: 1px solid var(--color1);
    border-radius: 4px;
    width: 200px;
    height: 8px;
    background-color: #eee;
    animation: grow 1s infinite;
}


@media screen and (max-width: 767px) {
    .r-menu{transform: translate(0); margin-bottom: 0;}
    .bdy.container-fluid, .container-fluid{padding-left: 10px; padding-right: 10px;}
    header .logo{font-size: 20px;}
    .mob-abs {
        position: absolute;
        transform: scale(0.8) translate(0px, 30px);
        z-index: 200;
        width: 60px;
        left: calc(50% - 50px);
    }
    .login-container .illustrations{width: 100%;position: absolute;}
    #progressbar li:before{
        width: 40px;
        height: 40px;
        line-height: 35px;
        font-size: 20px;
    }
    .card-header{padding: 5px; font-size: 16px;}
}
.flag-card{transition: transform 0.3s; transform-origin: 50% top; animation: cardhang 3s 3 linear;}
.card:hover .flag-card{ animation: cardhang2 8s 1 ease-in-out; transition: transform 0.3s;}

.link{
    color: var(--color1);
    cursor: pointer;
    margin: 0;
    text-shadow: -1px -1px 10px #fff, 1px 1px 10px #fff;
}
.link:hover{text-decoration: underline;}
c.float-btn {
    position: fixed;
    right: 40px;
    bottom: 40px;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background-color: var(--color1);
    color: #fff;
    border-radius: 50%;
    z-index: 100;
    font-size: 22px;
    box-shadow: 1px 1px 2px 1px #0008;
    border: 2px solid;
    cursor:pointer;
    transition: all 0.3s;
}
c.float-btn:hover{
    animation: jello 1s 1;
    transform-origin: center;
    background-color: #fff;
    color: var(--color1);
}
.ordered-list.addable {
    padding: 5px;
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 10px;
}
.ordered-list.addable .add {
    position: absolute;
    right: -9px;
    bottom: 16px;
    line-height: 40px;
    width: 24px;
    text-align: center;
    background: var(--color1);
    color: #fff;
    font-size: 20px;
    border-radius: 5px;
    z-index: 10;
    cursor: pointer;
}
.rejection-remark .dd{color: #bd5700;}
@keyframes cardhang {
    0%,100% { transform: rotate(0) rotateY(0deg) }
    20% { transform: rotate(5deg) rotateY(5deg) }
    40% { transform: rotate(-5deg) rotateY(10deg) }
    60% { transform: rotate(4deg) rotateY(0deg) }
    80% { transform: rotate(-3deg) rotateY(3deg) }
}
@keyframes cardhang2 {
    0%,100% { transform: rotate(0) rotateY(0deg) }
    15% { transform: rotate(30deg) rotateY(15deg) }
    30% { transform: rotate(-20deg) rotateY(20deg) }
    45% { transform: rotate(10deg) rotateY(10deg) }
    60% { transform: rotate(-5deg) rotateY(13deg) }
    75% { transform: rotate(5deg) rotateY(13deg) }
    90% { transform: rotate(-3deg) rotateY(13deg) }
}
@keyframes jello {
    11.1% {
      transform: none
    }
    22.2% {
      transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
      transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
      transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
      transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
      transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }
    77.7% {
      transform: skewX(0.390625deg) skewY(0.390625deg)
    }
    88.8% {
      transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
    }
    100% {
      transform: none
    }
  }
@keyframes grow {
    0%{border-left-width: 1px;}
    100%{border-left-width: 200px;}
}
.inputgroup {display: flex;}
.inputgroup button {width: 130px;font-size: 14px;border-radius: 0 5px 5px 0;padding: 0;}
.inputgroup .pri-form {border-radius: 5px 0 0 5px;}
button.resend-btn {margin-left: 7px;border-radius: 5px;width: 120px;}
button.resend-btn:disabled {pointer-events: none;}
.welcome-content .destails .card-body{padding: 0.2rem 1rem;}
.bdr-0 {border: 0;}

.loader-container {position: fixed;width: 100vw;height: 100vh;z-index: 1000;background: var(--color2);display: flex;align-items: center;justify-content: center;}
.loader {
    animation: rotate 2s infinite;
    height: 50px;
    width: 50px;
  }

  .loader:before,
  .loader:after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
  }
  .loader:before {
    animation: ball1 1s infinite;
    background-color: #fff;
    box-shadow: 30px 0 0 var(--color1);
    margin-bottom: 10px;
  }
  .loader:after {
    animation: ball2 1s infinite;
    background-color: var(--color1);
    box-shadow: 30px 0 0 #fff;
  }

  @keyframes rotate {
    0% { transform: rotate(0deg) scale(0.8) }
    50% { transform: rotate(360deg) scale(1.2) }
    100% { transform: rotate(720deg) scale(0.8) }
  }

  @keyframes ball1 {
    0% {
      box-shadow: 30px 0 0 var(--color1);
    }
    50% {
      box-shadow: 0 0 0 var(--color1);
      margin-bottom: 0;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 var(--color1);
      margin-bottom: 10px;
    }
  }

  @keyframes ball2 {
    0% {
      box-shadow: 30px 0 0 #fff;
    }
    50% {
      box-shadow: 0 0 0 #fff;
      margin-top: -20px;
      transform: translate(15px, 15px);
    }
    100% {
      box-shadow: 30px 0 0 #fff;
      margin-top: 0;
    }
  }
  .bdr-25rem input#captcha{border-radius: 0.25rem 0.25rem 0 0 !important;}
.bdr-25rem .btn.btn-r-curved{border-radius: 0 0.25rem 0.25rem 0 !important;}

span.translator select {width: 200px;height: 32px;padding: 0 10px;border-radius: 20px;}
span.translator {display: block;height: 40px;overflow: hidden; margin-top: 11px;}

.has-icon {display: flex; align-items:center}
.has-icon .icon {font-size: 5rem;color: var(--color1-cc);}
.has-icon h2 {text-align: center;}
.inline-list {border-bottom: 1px solid #eee;}
.inline-list a{display: inline-block;padding: 0px 10px;border: 1px solid #eee;border-radius: 4px 4px 0 0;margin-bottom: -1px;background-color: var(--color1-11);}
.inline-list a:hover, .inline-list a:focus{text-decoration: none;}
.inline-list a.active {background-color: #fff;border-bottom-color: #fff;}

.drop-file {
    background: #ddd;
    border-radius: 5px;
    position: relative;
}
.drop-file input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
}
.drop-file .drop-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    color: #aaa;
    font-size: 22px;
}
.drop-file .drop-text i {font-size: 4rem;}
.drop-file .choosen {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: var(--color1);
    background: #f3f3f3;
    border: 1px solid;
    border-radius: 5px;
    display: none;
}
.drop-file .drop-text i {
    font-size: 4rem;
}
.drop-file .choosen i.file-type {
    font-size: 4rem;
}

/* filter section ---*/

.filter-panel {
    position: fixed;
    right: -283px;
    width: 280px;
    z-index: 100000;
    top: 80px;
    height: calc(100vh - 100px);
    transition: all 0.3s;
    
}
.filter-panel.open {
    right: 0;
}
.filter-panel .filter-toggle-btn {
    position: absolute;
    top: 0;
    left: -40px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 40px;
    text-align: center;
    font-size: 1.3rem;
    background: #fdfdfd;
    width: 40px;
    color: #034b89;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 1px 3px #3333;
    cursor: pointer;
}

.filter-panel .filter-area {
    background: #fff;
    padding: 15px;
    box-shadow: 0px 0px 20px #0003;
    overflow: auto;
    height: 100%;
    margin-top: 30px;
}
.filter-panel .filter-area label {
    margin-bottom: 2px;
}
button.filter-btn {
    border: 1px solid #034b8933;
    color: #034b89;
    background: #fff;
    height: 36px;
    padding: 0 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #3333;
}
button.filter-btn.grey {
    background: #ddd;
    border-color: #ccc;
    color: #666;
}

/*--- Login Page Style ---*/
.login-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-right: 15px;
    padding-left: 15px;
}
.login-div .login-wrapper{
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(166,182,230,.9);
    overflow: hidden;
}
.login-div .login-wrapper h6{
    font-weight: 600;
    color: #ababab;
}
.login-div .footer{
    font-size: 14px;
}
.float-bt{
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 100;
    background: #fff;
    border: solid 2px var(--color1)!important;
    border-radius: 50%!important;
    padding: 0!important;
    width: 60px;
    height: 60px;
    display: flex!important;
    align-items: center;
    justify-content: center;
}
.float-bt img{
    height: 50px;
}
.float-bt .sub-txt{
    position: absolute;
    top: -58px;
    right: 30px;
    background: var(--color1);
    padding: 5px 10px;
    /* white-space: nowrap; */
    border-radius: 11px;
    font-size: 12px;
    width:150px;
}
.float-bt:hover{
    text-decoration: none;
    color: #fff;
}
.card .dataTables_wrapper .dataTables_length label{
    display: inline-flex;
    align-items: center;
}
.card .dataTables_wrapper .dataTables_length label select{
    margin: 0 5px;
}
.card .dataTables_wrapper .dataTables_filter label{
    display: inline-flex;
    align-items: baseline;
}
.main-header .row .col-3:last-child{
    padding-right: 0;
}
.logo-div a, .site-logo a{
    display: inline-block;
}
.site-logo{
    text-align: right;
}
.select2-container{
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple{
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px){
    .slider-1, color-palate, .float-bt .sub-txt{
        display: none;
    }
    .logo-div a{
        margin-top: 12px;
    }
    .site-logo a{
        margin-top: 6px;
    }
    .site-logo img{
        height: 40px !important;
    }
    .main-header .profile .userName p{
        font-size: 11px;
    }
}
@media (min-width: 768px){
    .slider-1, color-palate, .float-bt .sub-txt{
        display: block;
    }
    .logo-div a{
        margin-top: 12px;
    }
    .site-logo a{
        margin-top: 6px;
    }
    .site-logo img{
        height: 50px !important;
    }
    .main-header .profile .userName p{
        font-size: 12px;
    }
}
@media (min-width: 998px){
    .main-header .profile .userName p{
        font-size: 14px;
    }
}
@media (min-width: 1200px){
    .logo-div a{
        margin-top: 8px;
    }
}