@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/** BASIC CSS **/
:root {
    --mainlightcolor:#4a3cde;
    --maincolor: #1a0f8f;
	--btncolor:#ff530d;
	--btnhovercolor:#e94909;
    --headlinecolor:#2d324a;
    --black:#363636;
	--fontcolor:#555;
	--lightgray:#F0F0F8;
    --white:#fff;
    --green:#8BC34A;
    --blue:#0075FF;
}
* { 
	margin: 0; 
	padding: 0; 
	border:none; 
	outline:none;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box;
	box-sizing: border-box;	}
	

html, body{
	height:auto;
	max-width:100%;
	min-width:100%;
	background:var(--lightgray);
	font-family: 'Montserrat', sans-serif;
	font-size:12px;
	line-height:18px; 
	color:var(--black);
	font-weight:normal;
	font-style:normal;
	overflow-x:hidden;
    padding: 0 !important;}
	
p {
	font-size: 13px;
	color: #848484;
	line-height: 23px;
	font-weight: 400;}
	
h1,h2,h3,h4,h5,h6{
     margin:0;
	 color:#555;}

a {
	text-decoration:none;
	outline: none;
	color: #4b5460;}
	
:focus { 
	outline: none; }
	
a:focus {
	outline: none;}
	
a:hover, a:focus {
	color:  var(--maincolor);
	text-decoration: none;}
		
hr{
	background:#e3e3e3;
	border-top:1px solid #333;}
	
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
	
::selection {
	text-shadow: none;
	background:  var(--maincolor);
	color: #fff;}
	
::-moz-selection {
 text-shadow: none;
 background:  var(--maincolor);
 color:#fff;}
 
a, input, select, textarea, img {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;}
textarea{
    resize: vertical;
}		
.clearfix {
	clear: both;
	font-size: 0;
	line-height: 0;
	margin: 0;
	padding: 0;}
textarea{
    resize: vertical;
}		
.hidden{ 
	display: none !important;}
	
.show{ 
	display: block !important;}
	
.floatl{ 
	float: left;}
	
.floatr{
	float: right;}
	
.nopad{
	padding:0 !important;}

.nopadl{
	padding-left:0;}
	
.nopadr{
	padding-right:0;}
.btn{    
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 #4040403a;
}
.btn:focus,button:focus,.form-control:focus{
	outline:0;
	box-shadow:0 0 0 0 transparent;
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    pointer-events: none;
    opacity: .65;
    background: #bbb9b9 !important;
}
ul,ol{
	padding-left: 0;
}	
.desktop-mode{
    display: block !important;
}
.mobile-mode{
    display: none !important;
}
.modal-backdrop{
    z-index: 9999;
}
.modal {
    z-index: 99999;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.209);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
::-webkit-scrollbar-thumb:hover{
    background-color: rgba(0, 0, 0, 0.855);
}
.form-control::placeholder,
.form-control::-moz-placeholder,
.form-control::-webkit-input-placeholder{
    color: #a6a6a6 !important;
}
/** BASIC CSS END HERE **/ 
.menubar{
	display: flex;
	background:var(--white);
    position: fixed;
	border: none;
	left: 0;
	right: initial;
	border-color: var(--lightgray);
    border-radius: 0 0 0 0;
    z-index: 999;
    width: 230px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    border-right-width: 1px;
    border-right-style: solid;
    /* overflow: hidden; */
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px #33333326;
}
.menus {
    overflow: auto;
    height: 100%;
    padding: 20px 0;
}
.main_body{
    margin-left: 230px;
	margin-right: 0;
	transition: margin-left 0.2s linear;
    min-height: auto;
    position: relative;
    padding-top: 75px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.header_title {
	width: 100%;
    min-height: 75px;
    display: table;
    position: relative;
	background: var(--maincolor);
}
.header_title h1{
	font-size: 19px;
    width: max-content;
    display: table-cell;
    vertical-align: middle;
	text-align: center;
	color: var(--white);
    font-weight: bold;
}
/*------category-filter----------*/
.category_filter h2 {
	font-size: 15px;
    background: var(--maincolor);
    color: #fff;
    padding: 12px;
    border-radius: 0;
    margin-bottom: 7px;
}
#accordian {
    width: 100%;
    margin: 0;
    color: #404040;
	overflow: hidden;
	padding: 0 12px;
}
#accordian h3 {
	background: var(--white);
	position: relative;
	border-radius: 5px;
}
#accordian h3 a {
    padding: 10px 10px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    display: flex;
    color: #404040;
    text-decoration: none;
}
#accordian li > h3 a span ,
#accordian ul ul li a span, #accordian h4 span{
	color: var(--maincolor);
    width: 22px;
    display: block;
    height: 23px;
}
#accordian h3:hover {
	background: #e7f1f7;
}
#accordian i {
    margin-right: 10px;
}
#accordian li {
    list-style-type: none;
}
#accordian li.active {
    border-radius: 7px;
    background: #e7f1f7;
}
#accordian li.active h3{
    background: #e7f1f7;
}
#accordian ul ul li a, #accordian h4 {
    color: #404040;
    text-decoration: none;
    font-size: 13px;
    line-height: 18px;
    display: block;
    padding: 8px 15px;
    transition: all 0.15s;
    position: relative;
    border-radius: 5px;
    font-weight: 500;
}
#accordian ul ul li a:hover,
#accordian ul ul li.active a {
	background: #d5e3ec;
}
#accordian ul ul {
    display: none;
	padding: 11px;
}
#accordian li.active > ul {
	display: block;
}
#accordian ul ul ul {
    margin-left: 15px;
    border-left: 1px dotted rgba(0, 0, 0, 0.5);
}
#accordian a:not(:only-child):after{
    content: "\f104";
    font-family: fontawesome;
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 13px;
    color: #404040;
}
#accordian li h3:not(:only-child):after{
    content: "\f104";
    font-family: fontawesome;
    position: absolute;
    right: 10px;
    top: 13px;
    font-size: 14px;
    color: #404040;
}
#accordian li.active > a:not(:only-child):after,
#accordian li.active h3:not(:only-child):after {
    content: "\f107";
}
/*------end category-filter----------*/

.profile_sec {
    width: 100%;
    height: 100%;
	display: table;
	padding-right: 0;
    margin-right: 0;
}
.display-middle{
	display: table-cell;
	vertical-align: middle;
}
.profile_img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: auto;
    cursor: pointer;
    border: 2px solid var(--mainlightcolor);;
	background: #b9b9b9;
	position: relative;
}
.profile_img img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 50%;
}
.profile_img:before{
    display: none;
    content: "\f0d7";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: var(--maincolor);
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0;
    right: -16px;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 10px;
}
.dropdown_profile {
    position: absolute;
    top: 60px;
    right: 18px;
    width: 166px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 #bdbdbd9c;
	padding: 10px 7px;
	transform: scale(0);	
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
.dropdown_profile.open{
    top: 72px;
	transform: scale(1);
}
.dropdown_profile ul {
    text-align: left;
    list-style: none;
    margin: 0;
}
.dropdown_profile ul li a{
	display: block;
    width: 100%;
	padding: 8px 11px;
    border-radius: 5px;
}
.dropdown_profile ul li a span{
	color: var(--maincolor);
}
.dropdown_profile ul li a:hover{
	background: #e7f1f7;
	color: #404040;
}
.topmenubar {
    position: fixed;
    /* width: 100%; */
    left: 260px;
    right: 0;
    top: 0;
	height: 75px;
    padding: 9px 20px;
    background: var(--white);
    z-index: 99;
}
.dash-container {
    width: 100%;
    padding: 16px 30px 16px 30px;
    position: relative;
}
.dashboard_bx {
    background-color: var(--maincolor);
    color: #fff;
    padding: 30px 30px 0px;
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 var(--mainlightcolor);
    margin-bottom: 30px;
}
.dash_bx {
	display: table;
    width: 100%;
    height: 110px;
    margin-bottom: 30px;
    border: 1px solid #ff266e;
    border-radius: 8px;
    padding: 20px 20px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
.dash_bx:hover {
	background: var(--mainlightcolor);
}
.total_content,.icon_Set{
	display: table-cell;
	vertical-align: middle;
}
.icon_Set{
	text-align: right;
}
.dash_bx h1{
	font-size: 35px;
    color: var(--btncolor);
    font-weight: 800;
}
.dash_bx h5{
	font-size: 15px;
    color: var(--white);
}
.dash_bx span{
	font-size: 36px;
	color: var(--mainlightcolor);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
.dash_bx:hover span{
	color: var(--maincolor);
}
.collapse_nav {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    margin: auto;
    font-size: 22px;
    width: 40px;
    background: var(--maincolor);
    color: #ffffff;
    height: 40px;
    border-radius: 0 10px 10px 0px;
}

.tophead_sec{
    margin-left: 32px;
    /* margin-left: 0; */
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%;
    margin-right: 30px;
    overflow: hidden;
}
.dash_title {
    border-right: 1px solid #fff;
    min-width: 130px;
    height: 100%;
    display: flex;
    align-items: center;
}
.dash_title h5 {
    font-size: 17px;
    color: #fff;
}
.dash_title .toplogo {
    width: 140px;
    height: 57px;
    object-fit: contain;
    object-position: left center;
}
.page_title {
    font-size: 16px;
    margin-bottom: 25px;
    margin-top: 20px;
    color:var(--maincolor);
    font-weight: 500;
    text-transform: capitalize;
    position: relative;
    width: max-content;
    border-right: 2px solid var(--maincolor);;
    padding-right: 20px;
}
.page_title::after{
    display: block;
    content: "";
    width: 80px;
    height: 2px;
    background: var(--maincolor);
    position: absolute;
    right: -80px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.pagecumb_title {
    font-size: 18px;
    color: #000;
}
.noticenotification_div{
    margin-left: 10px;
    width: 100%;
}
.notice_bar {
    display: flex;
    align-items: center;
    height: 24px;
    justify-content: start;
    border: 1px dashed #c9c9c9;
    padding: 0 10px;
    background: #eaeaea;
    margin: 3px 0;
    border-radius: 50px;
}
.notice_bar b {
    min-width: 112px;
    color: rgb(96 96 96);
}
.notice_bar .marquee{
    width: 100%;
    color: rgb(96 96 96);
}
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .marquee span {
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    animation: marquee 12s linear infinite;
    animation-delay: 0.1s;
    padding: 0 12px;
    border-right: 1px solid #f75c6b;
    min-width: max-content;
  }
  .marquee:hover span {
    animation-play-state: paused;
  }
  .marquee span:last-child{
    border: 0;
  }

  @keyframes marquee {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }

.right_align_item {
    display: flex;
    align-items: center;
    justify-content: end;
    max-width: 109px;
    margin-left: auto;
}
.notification_bar {
    position: relative;
    display: block;
    padding: 15px 0;
    padding-right: 0 !important;
    border-left: 1px solid #fff;
}
.notification_bar div{
    cursor: pointer;
    position: relative;
}
.notification_bar div img {
    width: 22px;
}
.notification_bar div .badge {
    position: absolute;
    bottom: 10px;
    right: -9px;
}
.notification_bx {
    position: absolute;
    right: 10px;
    max-width: 260px;
    width: 100%;
    top: 100%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 #bdbdbd9c;
    padding: 3px;
    transform: scale(0);
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.notification_bx.open{
    transform: scale(1);
}
.notice_bx {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
}
.notice_bx:last-child{
    border-bottom: 0;
}
.dash_card{
    background: #fff;
    padding: 20px 20px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.dash_card .title {
    font-size: 20px;
    color: var(--black);
    margin-bottom: 20px;
}
form label{
    font-size: 14px;
    color: var(--black);
    margin-bottom: 5px;
}
.form-control,
#DataTables_Table_0_length select ,
#DataTables_Table_0_filter input{
    padding: 6px 7px;
    border-radius: 6px;
    border: 1px solid #cdcdcd;
}
input[type="file"],input[type="file"].form-control {
    padding: 3px 7px;
}
.form-control:focus,.form-control:hover,
#DataTables_Table_0_length select:hover,
#DataTables_Table_0_length select:focus,
#DataTables_Table_0_filter input:hover,
#DataTables_Table_0_filter input:focus{
    border: 1px solid #8c8c8c ;
}
#DataTables_Table_0_filter input{
    width: 243px;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #fff !important;
}
.table tr th{
    font-weight: 600 !important;
    color: var(--maincolor) !important;
    padding:15px 10px !important;
    font-size: 12px;
}
.table,.table tr td b,.table tr th b{
    font-weight: 500 !important;
    color: var(--black);
}
.table tr td{
    color: #878b8d !important;
    padding: 8px 10px !important;
}
.table tr td,.table tr th{
    vertical-align: middle;
    text-align: left;
    /* border-bottom: 1px solid #eaeaea !important; */
}
table.dataTable thead th, table.dataTable thead td,
table.dataTable.no-footer {
    /* border-bottom: 1px solid #eaeaea !important; */
}
.table>:not(caption)>*>* {
    border-bottom-width: 0;
}
.table tr td img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
}
ul.button-ico-list {
    list-style: none;
    display: flex;
    width: 100%;
    margin: 10px auto;
}
ul.button-ico-list li {
    width: 47%;
    text-align: center;
    margin: 0 4px;
}
ul.button-ico-list li a{    
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
}

/* .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius:6px;
    color: var(--maincolor) !important;
    border: 1px solid var(--maincolor);
} */
/* .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
    border-radius:6px;
    color: #fff !important;
    background: var(--mainlightcolor);
    border: 1px solid var(--mainlightcolor);
} */
.dataTables_wrapper .dataTables_paginate .paginate_button{
    color: var(--maincolor) !important;
    /* pointer-events: none; */
    background-color: #fff !important; 
    border: 1px solid #dee2e6 !important;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    margin-left: -1px;
}
.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: var(--maincolor) !important;
    border-color: var(--maincolor) !important;
    color: #fff !important;
}
/*--------------------admin-login------------------*/
.login_logo {
    margin-bottom: 10px;
    max-width: 162px;
    height: 100px;
    object-fit: contain;
}
.login_sec {
    /* background: url(../images/doted.png) no-repeat; */
    background: var(--maincolor);
    background-position: center center;
    padding: 100px 15px;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.login_bx {
    max-width: 450px;
    height: max-content;
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0;
    margin: auto;
    background: var(--white);
    padding: 21px 20px;
    border-radius: 5px;
}
.login_bx h2{
    color: var(--maincolor);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 13px;
}
.otrs_link{
    margin-top: 24px;
    display: block;
    color: var(--maincolor);
    font-size: 14px;
    font-weight: 500;
}
.logo_admin {
    max-width: 100%;
    width: 142px;
    height: 96px;
    margin-left: auto;
    text-align: center;
    margin-right: auto;
    margin-bottom: 20px;
    object-fit: contain;
}
#togglePassword {
    position: absolute;
    right: 17px;
    top: 9px;
    font-size: 15px;
    cursor: pointer;
    color: #727E8C;
}
.profile_card{
    position: relative;
    overflow: hidden;
    border-bottom: 5px solid #2cb2dc;
}
.profile_card::before{
    content: "";
    display: block;
    width: 100%;
    height: 159px;
    background: #1e83b3;
    clip-path: polygon(0 0, 100% 0, 100% 24%, 0 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.profile_card::after{
    content: "";
    display: block;
    width: 100%;
    height: 159px;
    background: #1daddaed;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.profile_box {
    width: 160px;
    height: 160px;
    margin: auto;
    border-radius: 50%;
    margin-bottom: 30px;
    overflow: hidden;
    z-index: 1;
    position: relative;
    border: 9px solid #fff;
}
.profile_box  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile_dtl h3{
    font-size: 17px;
    color: var(--black);
    margin-bottom: 7px;
    text-transform: uppercase;
}
.profile_dtl a{
    margin-bottom: 5px;
    color: var(--black);
    font-weight: 500;
}
.profile_dtl a:hover{
    color: var(--mainlightcolor);
}
.profile_dtl i.fa{
    color: #69c569;
    margin-right: 6px;
}
.profile_title {
    font-size: 14px;
    color: #fff;
    background: rgb(32,110,159);
background: linear-gradient(90deg, rgba(32,110,159,1) 0%, rgba(28,180,224,1) 100%);
    padding: 12px 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile_title span span{
    color: #ffc107;
}
.profile_title i.fa{
    font-size: 14px;
    color: #ffc107;
    margin-right: 5px;
}
.profile_title .btn i.fa{
    color: #f7f7f7;
}
.list_content {
    max-height: 320px;
    overflow: auto;
    margin-top: 10px;
}
.list_item{
    display: flex;
    width: 100%;
    align-items: center;
    background: #f0f0f8;
    padding: 8px;
    border-radius: 8px;
    margin: 8px 0;
}
.list_item:hover{
    box-shadow: 0px 1px 9px #cfcfcf;
}
.list_item img{
    max-width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    border: 1px solid #cfcfcf;
    object-fit: cover;
}
.item_content h5{
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--black);
}
.item_content span{
    font-size: 12px;
    color: #333;
}
.item_content span i.fa{    
    color: var(--maincolor);
}
.bg-theme{
    background: var(--maincolor);
}
.cariculam h3{
    font-size: 14px;
    color: #fff;
    margin-bottom: 7px;
}
.cariculam h6{    
    font-size: 12px;
    color: #e7e7e7;
    letter-spacing: 2px;
}
.table-profile tr td{
    padding: 12px 10px !important;
}
.table-profile tr:last-child td{
    border-bottom: 0px solid #eaeaea !important;
}
.table-profile thead tr th,
.table-border thead tr th{
    background: #e2e2e2;
    color: #171717;
}
.datatable {
    float: left;
    border-radius: 8px !important;
    overflow: hidden;
    margin-top: 10px !important;
}
.datatable thead tr th{
    background: #dddddd !important;
    color: var(--maincolor);
}
table.dataTable thead th, table.dataTable thead td {
    padding: 15px 10px;
    border-bottom: 0px solid #ffffff !important;
}
table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: 1px solid #eaeaea !important;
}
.holiday_box {
    padding: 14px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin: 9px 0;
    box-shadow: 0px 2px 6px #d7d7d7;
}
.holiday_box  strong{
    color: var(--black);
}
.holiday_box  span{
    color: #4f4f4f;
}
.holiday_box  span i{
    color: #4f4f4f;
}
.notice_content{
    margin-top: 10px;
    max-height: 342px;
    overflow: auto;
}
.notice_box {
    padding: 1rem;
    background: #f3f3f3;
    border-radius: 8px;
    margin: 15px 0;
    color: var(--black);
    font-size: 13px;
}
.notice_box p{
    color: var(--black);
    font-size: 13px;
    margin: 0;
}
.color_card{
    background: #fff;
    padding: 20px 20px;
    -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 5%);
    border-radius: 12px;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.color_card h4 {
    font-size: 14px;
    color: #fff;
}
.color_card h2{
    font-size: 20px;
    color: #fff;
}
.color_card .icon {
    display: block;
    margin-left: auto;
    font-size: 40px;
    text-align: right;
    color: #fff;
}
.text-primary{
    color: var(--maincolor) !important;
}
.primary-bg{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.success-bg{
    background: rgb(7,122,34);
    background: linear-gradient(90deg, rgba(7,122,34,1) 0%, rgba(9,121,43,1) 35%, rgba(0,255,102,1) 100%);
}
.danger-bg{
    background: rgb(122,7,7);
background: linear-gradient(90deg, rgba(122,7,7,1) 0%, rgba(121,31,9,1) 35%, rgba(255,72,0,1) 100%);
}
.info-bg{
    background: rgb(34,162,175);
background: linear-gradient(90deg, rgba(34,162,175,1) 0%, rgba(40,146,186,1) 35%, rgba(0,215,255,1) 100%);
}
.normal-bg{
    background: rgb(159,79,32);
background: linear-gradient(90deg, rgba(159,79,32,1) 0%, rgba(224,110,28,1) 100%);
}
.card-bg1{
    background: linear-gradient(87deg,#3788d8 0,#4d99e4 100%) !important;
}
.card-bg2{
    background: linear-gradient(87deg,#21d59d 0,#5ce3b8 100%) !important;
}
.card-bg3{
    background: linear-gradient(87deg,#c778ff 0,#dda6fd 100%) !important;
}
.card-bg4{
    background: linear-gradient(87deg,#d4bb17 0,#e7cf2c 100%) !important;
}
.chartselect{
    border-radius: 5px;
    text-align: center;
    padding: 5px 3px;
    background: #0c6889;
    color: #fff;
    border: 1px solid #0c6889;
    max-width: 106px;
    font-size: 12px;
}
.profile_title2 .chartselect{
    background: #fafafa !important;
    color: #575757 !important;
    border: 1px solid #cdcdcd !important;
    padding: 6px 7px !important;
}
.chart {
    overflow: auto;
    width: 100%;
}
.chart canvas{
    width: 100% !important;
}
.fullwidth-chart{
    height: auto;
    max-height: 68vh;
}
.object-contain{
    height: 100% !important;
    object-fit: contain !important;
}
.card tr{
    width: 100% !important;
}
.colord-table thead{    
    background: #1e95c4;
}
.colord-table thead th {
    /* background: #1e95c4;
    color: #fff; */
    background: #ffffff;
    color: #000;
}
.rounded_table{
    /* border-radius: 8px; */
}
.date_box_dark{
    background: #22adad !important;
}
.date_box {
    background: #41d0d0 !important;
}
.stickytable1{
    width:100%;
    overflow: auto;
    position: relative;
}
.stickytable1 .table thead tr th:nth-child(1){
    position: sticky;
    left: -1px;
}
.stickytable1 .table tbody tr td:nth-child(1){
    position: sticky;
    left: -1px;
    background: #1e87b6;
    color: #fff !important;
}
.stickytable2{
    width:100%;
    overflow: auto;
    position: relative;
    max-height: 70vh;
}
.stickytable2 .table thead tr th{
    position: sticky;
    top: -1px;
    z-index: 2;
}
.stickytable2 .table thead tr th:nth-child(1){
    position: sticky;
    left: -1px;
    z-index: 3;
}
.stickytable2 .table tbody tr td:nth-child(1){
    position: sticky;
    left: -1px;
    background: #ffffff;
    color: rgb(38, 38, 38) !important;
    box-shadow: -1px 0px 19px 0px #0000001a;
}
.stickytable3{
    width:100%;
    overflow: auto;
    position: relative;
    max-height: 70vh;
}
.stickytable3 .table thead tr th{
    position: sticky;
    top: -1px;
    z-index: 22;
}

.dataTables_wrapper,
.table.dataTable {
    position: relative;
    max-height: 70vh;
    overflow: auto;
    width: 100%;
}
.dataTables_wrapper .table.dataTable thead th{
    position: sticky;
    top: -1px;
    z-index: 2;
}
.borderColor-white{
    border-color: #fff !important;
}
#scroll {
    position:fixed;
    right:10px;
    bottom:60px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
.todolist {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 34px;
    height: 118px;
    margin: auto;
}
.todolist button{
    width: 120px;
    transform: translate(-43px,42px) rotate(90deg);
    padding: 8px;
    background: rgb(63,94,251);
    background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    color: #fff;
    border-radius: 0px 0px 10px 10px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.todolist button:hover,.todolist button:focus{
    background: rgb(63,94,251);
    background: linear-gradient(90deg, rgba(63,94,251,1) 100%, rgba(252,70,107,1) 0%);
    color: #fff;
}
.btn-primary{
    background: var(--btncolor);
    color: #fff;
    border-color: var(--btncolor);
}
.btn-primary:hover,.btn-primary:focus{
    background: var(--btnhovercolor);
    color: #fff;
    border-color: var(--btnhovercolor);
}

ul.accordion{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.accordion li{
    margin-bottom: 8px;
    position: relative;
}
ul.accordion li a{
    display: block !important;
    width: 100%;
}
.head_acc {
    background: var(--mainlightcolor);
    padding: 10px 65px 10px 10px;
    border-radius: 5px;
    position: relative;
}
.option-note {
    position: absolute;
    right: 40px;
    width: 20px;
    height: 20px;
    margin: auto;
    top: 0;
    bottom: 0;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 1.8;
}
.option-note i.fa{
    color: #206e9f;
}
.head_acc::after{
    content: "\f078";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 13px;
    width: 16px;
    height: 16px;
    margin: auto;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.toggle.in .head_acc::after{
    content: "\f077";
}
.head_acc h6{
    font-size: 14px;
    color: #ffffff;
}
.head_acc .datetimelist{
    display: block;
    color: #f0f0f0;
    font-size: 12px;
    margin-top: 8px;
}
.head_acc .datetimelist i.fa{
    color: #ffffff;
}
  .inneracc{
    padding: 10px;
    background: #ececec;
    border-radius: 0 0 7px 7px;
  }
  .fc .fc-toolbar-title {
    font-size: 1.3em;
    margin: 0;
}
.dashboard_feeds
{
    max-height: 455px;
    overflow: auto;
}

.feedshow .card-container {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    margin: 15px auto;
    box-shadow: 0 0px 20px rgb(0 0 0 / 28%);
    overflow: hidden;
    padding: 10px;
}

.dashboard_feeds .card-container {
    width: 95% !important;
    margin: 15px auto;
}
.feedshow .card-image{
    display: grid;
    grid-gap: 5px;
}
.feedshow .card-image img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    object-fit: cover;
    cursor: pointer;
  }
  
  .feedshow .card-badge {
    text-transform: uppercase;
    background-color: #fff;
    color: #fff;
    padding: 2px 8px;
    border-radius: 70px;
    margin: 0;
    font-size: 12px;
  }
  .feedimgzm {
    width: 100%;
}
  .feedshow .card-badge-blue {
    background-color: #92d4e4;
  }
  
  .feedshow .card-badge-purple {
    background-color: #3d1d94;
  }
  
  .feedshow .card-badge-pink {
    background-color: #c62bcb;
  }
  .feedshow .card-body {
    padding: 0;
  }
  .feedshow .card-body h1 {
    font-size: 14px;
    margin: 8px 0;
  }
  
  .feedshow .card-body p {
    font-size: 13px;
    margin: 8px 0 16px 0;
  }
  .feedshow .card-body a {
    color: #3788d8;
}
  .feedshow .card-author {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    position: relative;
    padding-right: 30px;
  }
  
  .feedshow .card-author p {
    margin: 0 16px;
    font-size: 12px;
    color: #333;
  }
  .feedshow .card-footer {
    border: 0 !important;
  }
  
  .feedshow .card-author p:last-child {
    color: #888;
  }
  .feedshow .card-author img {
    border-radius: 50%;
    height: 48px;
    width: 48px;
    margin-top: auto;
    object-fit: cover;
  }
  .feed_dots {
    position: absolute;
    right: 11px;
}
.feed_dots .dropdown span
{
    font-size: 20px;
    display: block;
    cursor: pointer;
    width: 21px;
    text-align: center;
    color: #b6b6b6;
}
.feed_dots .dropdown .dropdown-menu{
    left: inherit !important;
    right: 0;
}
  .liketaggs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-top: 1px solid rgba(0,0,0,.125);
    padding: 9px 0;
}
.liketaggs .ltgs span {
    cursor: pointer;
    color: #808080;
}
.liketaggs .ltgs span i.fa{
    font-size: 20px;
}
.liketaggs .ltgs span:hover i.fa{
    color: var(--mainlightcolor);
}
.input_comment {
    margin-top: 10px;
    position: relative;
    display: flex;
    width: 100%;
    padding: 2px 0;
}
.emojiPickerIconWrap {
    position: relative;
    width: 100%;
}
.input_comment .btn_send{
    width: 32px;
    height: 32px;
    background: #333;
    color: #fff;
    border-radius: 5px;
}
.feed_com_list {
    display: none;
    max-height: auto;
    overflow: auto;
    padding: 10px 0;
}
.feed_com_list ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.feed_com_list ul li{
    display: block;
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
}
.feed_com_list ul li:last-child{
    border-bottom: 1px solid #ffffff;
}
.feed_com_list ul li ul{
    margin-left: 19px;
    border-left: 1px solid #e0e0e0;
    padding-left: 11px;
}
.comments_feed {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    width: 100%;
    padding: 5px 0;
}
.prof_feed {
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e0dede;
    margin-right: 5px;
}
.prof_feed img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prof_des h5{
    font-size: 13px;
    color: #5f5f5f;
}
.prof_des p {
    line-height: 1.2;
}
.prof_des .pdate{
    font-size: 10px;
}
.prof_des .preply {
    color: #1d9dcb;
    cursor: pointer;
}
  /*-----------Company Hiraricaly chart--------*/
  .chart-container {
    overflow: auto;
    width: 100%;
}

  
.orgchart {
    background: #fff;
    text-align: center;
}

  
  .orgchart .node .title {
    margin-bottom: 0 !important;
    background-color: #006699;
}
.orgchart .node .content{
    border: 1px solid #006699;
    font-size: .725rem;
}
.orgchart ul li .node:hover {
    background-color: rgb(175 204 246 / 25%);
}
.advancesearch,.addbox{
    display: none;
}

.modal-primary .modal-header{
    background-color: var(--maincolor) !important;
}
.modal-primary .close{
   color: var(--white) !important;
}
.modal-primary .modal-content{
    border-color: var(--maincolor) !important;
}
.modal-warning .modal-header{
    background-color: #ffc107 !important;
}
.modal-warning .modal-content{
    border-color: #ffc107 !important;
}
.modal-content{
    border-width: 2px;
}
.profileprogress {
    padding: 0;
    width: 95%;
    height: 41px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;
  }
  .profileprogress .colorgain {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #063951;
    padding: 1px;
}
.profileprogress .colorgain span{
    display: block;
    width: 10%;
    height: 100%;
    border: 1px solid #fff;
}
.profileprogress .colorgain span:first-child{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.profileprogress .colorgain span:last-child{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.profileprogress .bar {
    position: absolute;
    min-width: 0.5%;
    max-width: 99.5%;
    height: 57px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    top: 0;
    background: transparent;
  }
  .profileprogress .bar::after{
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    width: 10px;
    background: #0000008a;
    height: 100%;
    right: 0;
    border-radius: 50px;
    top: -7px;
    transform: translate(-3px, 0px);
  }
  .profileprogress .percent {
    position: relative;
    top: 50%;
    left: 49%;
    transform: translate(44%,100%);
    margin: auto;
    font-size: 22px;
    color: #0f0f0f;
    width: min-content;
  }
  @media screen and (max-width: 991px)  {
  .profileprogress .percent {
    font-size: 11px;
  }
  .profileprogress .bar {
    min-width: 1.5%;
    max-width: 97%;
  }
}
  .topstickyonscroll{
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
  }
  .attendance_btn {
    position: fixed;
    right: 0;
    bottom: 110px;
    padding: 9px 10px;
    background: red;
    color: #fff;
    border-radius: 9px 0px 0px 9px;
    box-shadow: 0px 4px 8px #0000004a;
}
.attendance_btn.in{
    background: green;
}

.indexlist {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    max-width: 80%;
    height: 100%;
    width: 300px;
    margin: auto;
    background: #fff;
    padding: 18px 18px 29px;
    border-left: 2px solid #1cabd8;
    transform: translate(100%, 0px);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.indexlist.open{
    transform: translate(0%, 0px);
}

.indexlist .seeindex{
    cursor: pointer;
    width: 83px;
    height: 36px;
    transform: translate(-43px,42px) rotate(90deg);
    padding: 8px;
    background: rgb(30 149 195);
    background: linear-gradient(90deg, rgb(28 173 218) 0%, rgb(30 149 196) 100%);
    color: #fff;
    border-radius: 0px 0px 10px 10px;
    position: absolute;
    left: -16px;
    top: 0;
    line-height: 1.5;
    bottom: 0;
    margin: auto;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    display: block;
    text-align: center;
}
.indexlist .seeindex:hover,.indexlist .seeindex:focus{
    background: rgb(30 149 195);
    background: linear-gradient(90deg, rgb(28 173 218) 100%, rgb(30 149 196) 10%);
    color: #fff;
}

.upload_profile_img {
    width: 100%;
    height: 250px;
    position: relative;
    margin: 20px auto;
    border-radius: 10px 10px 0 0;
    padding-top: 97px;
    padding-left: 20px;
    overflow: hidden;
}
.upload_profile_img .profile_ppimg{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
}
.upload_profile_img .cover_ppimg{
    width: 100%;
    height: 80%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.upload_profile_img .pfupload_input{
    cursor: pointer;
    display: block;
    width: 33px;
    height: 33px;
    background: #000;
    text-align: center;
    color: #fff;
    line-height: 2;
    border-radius: 5px;
    position: absolute;
    bottom: 29px;
    left: 113px;
    font-size: 18px;
}
.upload_profile_img .coverupload_input{
    cursor: pointer;
    display: block;
    width: 33px;
    height: 33px;
    background: #000;
    text-align: center;
    color: #fff;
    line-height: 2;
    border-radius: 5px;
    position: absolute;
    bottom: 59px;
    right: 10px;
    font-size: 18px;
}
.thingstodo_pages{
    position: relative;
    max-height: 75vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e7e7e7;
    border-radius: 11px;
}
.diary_page {
    border: 1px solid #e7e7e7;
    border-radius: 11px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.diary_head {
    background: #e7e7e7;
    padding: 10px;
    border-radius: 10px;
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    height: 80px;
    top: 0px;
    z-index: 1;
}
.diary_head h1 {
    font-size: 47px;
    color: #1e8ebd;
}
.diary_head p{
    margin-bottom: 0;
    background: #818181;
    width: 140px;
    text-align: center;
    color: #fff;
    padding: 5px 2px;
    border-radius: 50px;
}
.diary_head h6{
    color: #818181;
    margin-top: 14px;
}
.diary_body{
    width: 100%;
    /* margin-bottom: 10px; */
}
.diary_body .table{
    margin: 0;
}
.diary_body .table tr td:nth-child(1){
    border-right: 1px solid #d5d5d5;
    vertical-align: top;
    font-size: 15px;
}
.diary_body .table tr:last-child td{
    border-bottom: 0 !important;
}
.diary_body .table tr td h6{
    font-size: 14px;
    margin-bottom: 5px;
    color: #1f82b2;
}
.feeds_rightbar {
    position: relative;
    width: 100%;
    height: 100%;
}


.post_feed_sec {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    width: 100%;
    height: auto;
}
.prof_img_dp {
    max-width: 50px;
    min-width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
.prof_img_dp img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content_post {
    width: 100%;
}
.content_post textarea {
    border: 0 !important;
    background: #f1f1f1;
}
.post_button_feed_sec{
    border-top: 1px solid #e5e5e5;
    margin-top: 13px;
    padding: 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.post_btns {
    width: 100%;
}
.post_btns label{
    cursor: pointer;
    padding: 9px;
    border-radius: 8px;
    color: #828282;
    display: block;
    text-align: center;
    margin: auto;
    font-size: 14px;
    width: 100%;
}
.post_btns label:hover{
    background: #e4e4e4;
}
.post_btns label input{
    display: none;
}
.post_btns label i.fa{
    font-size: 17px;
}
.post_btns label .fa-picture-o{
    color: #45bd62;
}
.post_btns label .fa-video-camera{
    color: #f02849;
}
.post_btns .btn{
    padding: 7px 20px;
    border-radius: 8px;
    background: #1f7dad;
    color: #ffffff;
    display: block;
    text-align: center;
    margin-left: auto;
    font-size: 14px;
    width: 98%;
    max-width: 130px;
}
.post_btns .btn:hover,.post_btns .btn:focus{


}

.search_bar {
    margin: 5px 0;
    display: flex;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    overflow: hidden;
}
.search_bar input {
   border: 0 !important;
}
.search_bar button {
    border: 0 !important;
    padding: 7px 13px;
}

.tab_responsive_vertical {
    list-style: none;
    margin: 0;
}
.tab_responsive_vertical li {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 9px 10px;
    background: #ededed;
    margin-bottom: 2px;
    border-radius: 0 50px 50px 0px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab_responsive_vertical li:hover,.tab_responsive_vertical li.active{
    background: var(--maincolor);
    color: #fff;
}
.tab-container{
    display: none;
}
.tab-container.active{
    display: block;
}
.usrprofile_dtls {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cover_sec{
    width: 100%;
    height: 200px;
    position: relative;
    padding-top: 83px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px 10px 0 0px;
}
.ppp_img {
    width: 167px;
    height: 167px;
    overflow: hidden;
    border-radius: 50%;
}
.ppp_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover_profile_imge h2{
    color: #fff;
}
.cover_profile_imge h6{
    color: #fff;
}


@keyframes progress {
    0% { --percentage: 0; }
    100% { --percentage: var(--value); }
  }
  
  @property --percentage {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  
  [role="progressbar"] {
    --percentage: var(--value);
    --primary: #1da1cf;
    --secondary: #e2e2e2;
    --size: 150px;
    animation: progress 2s 0.5s forwards;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  
  [role="progressbar"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
    mask: radial-gradient(white 55%, transparent 0);
    mask-mode: alpha;
    -webkit-mask: radial-gradient(#0000 55%, #000 0);
    -webkit-mask-mode: alpha;
  }
  
  [role="progressbar"]::after {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--primary);
  }
  
.profile_details_pp {
    margin-top: 38px;
    padding: 29px 22px;
}
.profile_details_pp p{
    font-weight: 400;
    color: #464646;
    margin-bottom: 3px;
}
.modal-scrollable-content {
    max-height: 88vh;
    overflow: auto;
}
.chat_section {
    width: 100%;
    height: 91vh;
    position: relative;
    padding: 0;
}
.chat_section .chat-area{
    height: 100% !important;
}
.tab_responsive_horizontal {
    display: flex;
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;
    overflow: auto;
    align-items: center;
}
.tab_responsive_horizontal li{
    min-width: max-content;
    display: inline-block;
    background: #fff;
    padding: 9px;
    color: #000;
    font-weight: 500;
    border-top: 1px solid #ebebf3;
    border-left: 1px solid #ebebf3;
    border-right: 1px solid #ebebf3;
    border-bottom: 1px solid #ffffff;
    margin-left: 4px;
    margin-right: -5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
}
.tab_responsive_horizontal li:hover{
    background: #f1f1f1;
    color: #000;
}
.tab_responsive_horizontal li.active{
    background: var(--maincolor);
    color:#fff;
}
.tag {
    display: inline-block;
    margin: 1px -1px;
    color: #fff !important;
    padding: 3px 9px;
    background: gray !important;
    border-radius: 50px;
}
.tag a{   
    display: block;
    color: #fff !important;
}
.awards_box {
    width: 100%;
    height: 100%;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.activeaward::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff8a;
    z-index: 0;
}
.label_award {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #28a745e8;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    display: block;
    height: 29px;
    width: 100%;
    z-index: 1;
}
.awards_img{
    width: 100%;
    height: 230px;
    overflow: hidden;
    position: relative;
}
.awards_img img{
    width: 100%;
    height:100%;
    object-fit: contain;
}
.awards_details{
    padding: 1.2rem;
    text-align: center;
}
.awards_details h5{
    color: #000;
    margin-bottom: 10px;
}
.referal_contnet h1{
    font-size: 46px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--maincolor);
    margin-bottom: 10px;
}
.referal_contnet p{
    font-size: 17px;
    color: #000;
}
.referal_contnet h5{
    color: #939393;
    margin-bottom: 4px;
}
.referal_no{
    display: flex;
    background: var(--maincolor);
    max-width: 200px;
    width: 100%;
    padding:2px 2px 2px 10px;
    border-radius: 8px;
    overflow: hidden;
}
.refno {
    width: 100%;
    font-size: 20px;
    padding: 4px;
    background: transparent;
    color: #fff;
}
.referal_no button{
    color: #fff;
    background: #ffffff24;
    font-size: 17px;
    padding: 8px 13px;
}
.referal_link{
    display: flex;
    background: var(--maincolor);
    max-width: 100%;
    width: 100%;
    padding:2px 2px 2px 10px;
    border-radius: 8px;
    overflow: hidden;
}
.reflink{
    width: 100%;
    font-size: 14px;
    padding: 4px;
    background: transparent;
    color: #fff;
}
.referal_link button{
    color: #fff;
    background: #ffffff24;
    font-size: 17px;
    padding: 8px 13px;
}
.breadcrumb {
    background-color: transparent;
    padding: 0.5rem 0rem;
}
.profile_title2 {
    color: #656565;
    font-weight: 400;
    font-size: 12px;
    padding: 0px 0px 18px;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ededed;
}
.page-item.active .page-link{
    background-color: var(--maincolor) !important;
    border-color: var(--maincolor) !important;
    color: #fff !important;
}
.page-link {
    color: var(--maincolor) !important;
}

.lifecicle_box {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    border-radius: 8px;
    padding: 30px 15px 15px;
    text-align: center;
    position: relative;
    margin-top: 40px;
}
.lifecicle_box span{
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--maincolor);
    font-size: 23px;
    color: #fff;
    line-height: 2.1;
    text-align: center;
    border-radius: 50%;
    top: -33px;
    left: 0;
    right: 0;
    margin: auto;
    border: 5px solid #fff;
}
.lifecicle_box h1{
    font-size: 14px;
    color: #000;
    margin-bottom: 4px;
}
.lifecicle_box p{
    margin: 0;
}
.current_position {
    width: 100%;
    display: flex;
    align-items: baseline;
    border: 1px solid #8bc34a;
    padding: 16px 30px 15px;
    border-radius: 10px;
    background: #dbfeb257;
    position: relative;
}
.current_position span{
    position: absolute;
    background: #8bc34a;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 23px;
    text-align: center;
    line-height: 1.8;
    border-radius: 50%;
    left: -12px;
    top: -11px;
}
.current_position h1{
    color: #619228;
    font-size: 19px;
}

.filter-checkbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    padding: 4px 0;
  }
  .filter-checkbox input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
  }
  .filter-checkbox input[type=checkbox] + .label-hidden {
    cursor: pointer;
    width: 52px;
    height: 22px;
    background-color: #FFFFFF;
    border: 1px solid #d4d4d4;
    display: inline-block;
    border-radius: 100px;
    position: relative;
    margin: 0px 4px;
  }
  .filter-checkbox input[type=checkbox] + .label-hidden:after {
    content: "";
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 16px;
    padding: 0px;
    background-color: #bcbcbc;
    border-radius: 100px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .filter-checkbox input[type=checkbox]:checked + .label-hidden{
    border: 1px solid #4CAF50;
  }
  .filter-checkbox input[type=checkbox]:checked + .label-hidden:after {
    background-color: #4CAF50;
    left: calc(100% - 2px);
    transform: translateX(-100%);
  }
  .filter-checkbox input[type=checkbox]:checked ~ .label-displayed.second-label{
    color: #4CAF50 !important;
  }
  .filter-checkbox .label-displayed {
    color: #8f8f8f;
    cursor: pointer;
    font-weight: 500;
  }
  .filter-checkbox .first-label {
    order: -1;
  }
  
  fieldset {
    border: 1px solid #dbdbdb;
    padding: 1rem;
    border-radius: 4px;
    margin: 20px 0;
}
fieldset legend {
    font-size: 1.2rem;
    margin-top: -21px;
    background: #fff;
    width: auto;
    padding: 0 5px;
    color: #bbb7b7;
}
.form-check-input:checked{
    background-color: #8BC34A;
    border-color: #8bc34a;
}

.container--tabs {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border-bottom: 1px solid var(--sidebarlinkhover);
    width: 100%;
    overflow: auto;
  }
  .container--tabs .tab {
    min-height: 2em;
    font-size: 14px;
    padding: 10px 5px;
    box-sizing: border-box;
    width: 160px;
    min-width: 160px;
    text-align: center;
    cursor: pointer;
    background-color: #aaaaaa;
    color: white;
    transition: background-color 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0px 0px;
  }
  .container--tabs .tab:hover {
    background-color: var(--maincolor);
    transition: background-color 0.25s;
    color: white;
  }
  .container--tabs .tabs--active {
    background-color: var(--maincolor);
    color: white;
    pointer-events: none;
  }
  
  .content {
    display: none;
  }
  
  .content--active {
    display: block;
  }

  .profile_img_upload {
    width: 150px;
    height: 188px;
    position: relative;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}
.profile_img_upload img{
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 0 0 7px 7px;
    margin-bottom: 4px;
    border: 1px solid #bebdbd;
}
.profile_img_upload label{
    cursor: pointer;
    background: var(--maincolor);
    color: #fff;
    padding: 8px;   
    width: 100%;
    text-align: center;
    border-radius: 7px;
}
.select2-container .select2-selection--single{
    height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}
.select2-container {
    z-index: 99999;
}
.add_todo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px 10px 20px;
    background: #efefef;
    box-shadow: 0px 10px 10px -2px #8f8c8cab;
}
.add_todo h2 {
    font-size: 15px;
    color: var(--maincolor);
    font-weight: bold;
    margin-bottom: 4px;
}
.allindex_container{
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 291px;
    top: 0;
    padding: 10px;
}
.todo_list {
    background: #3333330f;
    box-shadow: 0px 2px 10px 0px #b9b9b9;
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 8px;
}
.todoheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.todoheader .count {
    width: 20px;
    height: 20px;
    background: #000;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    line-height: 1.5;
}
.todo_list p,.todo_list{
    line-height: 1.3;
    font-size: 12px;
    color: #17a2b8;
}
.todo_list label{
    color: #000;
}
.border-top {
    border-top: 1px solid #dee2e6!important;
}
.border-end {
    border-right: 1px solid #dee2e6!important;
}
.border-start {
    border-left: 1px solid #dee2e6!important;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}
.todo-success{
    background: #d2f5d2 !important;
}
.todo-danger{
    background: #f7caca !important;
}
.todo-warning{
    background: #fff5cd !important;
}
.todo-info{
    background: #d0ebfd !important;
}

.dt-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
}
.dt-buttons .dt-button{
    margin: 0;
    border-radius: 0;
}
.buttons-csv{
    background: #9c27b0 !important;
    color: #fff !important;
    border-color: #9c27b0 !important;
}
.buttons-excel {
    background: #009688 !important;
    color: #fff !important;
    border-color: #009688 !important;
}
.buttons-pdf {
    background: #f44336 !important;
    color: #fff !important;
    border-color: #f44336 !important;
}
.buttons-print {
    background: #ff9800 !important;
    color: #fff !important;
    border-color: #ff9800 !important;
}