/****************************
    * OLMS
    * Version: 1.0.0
*******************************/
:root{
    --color1: #028cd1;
    --color1-11: #028cd111;
    --color1-33: #028cd133;
    --color1-88: #028cd188;
    --color1-cc: #028cd1cc;

    --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;
}
.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;position:relative; transition: all 0.3s;}
.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;
}
.login-container .login-box{
    /* width: 280px; */
    max-width: 100%;
    padding: 30px;
    /* box-shadow: -3px -3px 10px 1px #d1d1d1, 3px 3px 6px 3px #0002; */
    border: 1px solid var(--dark-2);
    border-radius: 10px;
    background: #ffffffdd;
}
.login-container .illustrations{width:70%}
.slider-1{max-width: 100%;}
.slide-single img{max-width: 100%; max-height: 100%;}
.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 .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: 5px;
}
.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: 8px; /* For register page */
    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;
}
.mSelect{
    background-color: #0002;
    border-radius: 4px;
}
.mSelect .multiselect-dropdown,
.mSelect .x{
    height: 60px;
    background-color: transparent;
    border: none;
    width: 100% !important;
}
.mSelect .multiselect-dropdown span.placeholder{
    color: #0008;
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    font-family: arial;
}
.mSelect .multiselect-dropdown span.optext{
    background-color: var(--color1);
    color: var(--color3);
}

/* Flip Card */
.flip-card {
    background-color: transparent;
    width: 380px;
    height: 485px;
    perspective: 1000px; 
  }
  
  .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;
}
.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;
    letter-spacing: 3px;
    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 {
    color: var(--color2);
    font-size: 110%;
    line-height: 100%;
}
.editable .dl .dd,
.editable .hide-on-edit{display: none;}
.editable .form-field{display: block;}
.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;
}
.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: 20px;
    margin: 0;
    cursor: pointer;
    text-shadow: 2px 2px 2px #0005;
    display: block;
}
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 {
    background: none;
    border-radius: 20px 0 0 20px;
    box-shadow: 1px 1px 3px #0002 inset;
}
.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-top: 2px;
    border: 1px solid var(--color1);
    margin-left: -1px;
    cursor: pointer;
    width: 36px;
    line-height: 30px;
    text-align: center;
}
/* .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);}
.small-card{border-top: 5px solid var(--color1); padding: 10px 1.25rem;}
.small-card h4{color: #0007; font-size: 1.1rem;}
.small-card h2{ font-size: 1.8rem;}

.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: 3rem;
    color: var(--color1);
}
.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; font-weight: normal;}
.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;
}

.pri-group {
    background-color: var(--color1-11);
    padding: 10px;
    border: 1px solid var(--color1-33);
    border-radius: 5px;
}
.pri-collapsed{display:none}
.pri-group .pri-collapsed{display:inherit}

.compliance {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #0001;
}
.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;
}
.msg-tittle span {
    border: 1px solid;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 20px;
    background-color: var(--color1-11);
    margin-left: 10px;
}
.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: ', ';
}
.status-sec h5 {
    border-bottom: 1px solid var(--color1-33);
    padding-bottom: 5px;
    color: var(--color1);
}
.status-sec ul{list-style: none; padding: 0;}
.status-sec ul li {
    list-style: none;
    padding: 5px 0 5px 30px;
    color: #bbb;
    position: relative;
}
.status-sec ul li:before {
    content: '';
    display: block;
    background: #bbb;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}
.status-sec ul li:not(:last-child):after {
    content: '';
    display: block;
    background: #bbb;
    width: 2px;
    height: calc(100% - 16px);
    border-radius: 50%;
    position: absolute;
    left: 7px;
    top: 24px;
}
.status-sec ul li.approved { color: #28a745; }
.status-sec ul li.approved:before,.status-sec ul li.approved:after { background: #28a745;}

@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;}
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);
}
.payment-options {
    text-align: center;
    padding: 10px;
}
a.payment-option {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 2px 10px;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #0004;
}
.payment-option img {
    max-width: 150px;
    height: 70px;
    object-fit: contain;
}
@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
    }
  }