@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:#1CACED;

    --maincolor: #203DAA;

	--btncolor:#175DBA;

	--btnhovercolor:#1A57B8;

    --headlinecolor:#1A57B8;

    --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;

    padding: .2rem .5rem;

}

.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;

    border-color: #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);

}

.text-success {

    color: #22df4d !important;

}

.select2-container{

    width: 100% !important;

}

.select2-dropdown{

    z-index: 99999;

}

/** 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%;
    height: 55px;
    display: block;
    position: relative;
    background: var(--lightgray);
    padding: 4px;

}
.header_title img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.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: 8px 10px;

    font-size: 13px;

    line-height: 17px;

    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: 17px;

}

#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: 21px;

    display: block;

    padding: 6px 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: 0px 9px 6px;

}

#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: 8px;

    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: 56px;

	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: 3px solid var(--mainlightcolor);

	 background: #b9b9b9; 

	position: relative;

}

.profile_img img{

	width: 100%;

    height: 100%;

    object-fit: cover;

    overflow: hidden;

    border-radius: 50%;

}

.profile_img span{

    font-size: 14px;

    position: absolute;

    bottom: -4px;

    right: 0;

    background: #fff;

    border-radius: 50%;

    width: 14px;

    height: 14px;

    text-align: center;

    line-height: 1;

}

.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;

}

.status_change{

    background: #f1f1f1;

    border-radius: 5px;

    margin-bottom: 12px !important;

}

.status_change li a{

    padding: 5px 8px !important;

}

.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%;

    min-height: calc(100vh - 76px);

    padding: 10px 36px 10px 10px;

    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: 120px;

}

.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;

}

.notification_bar {

    position: relative;

    display: block;

    padding: 15px;

    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: 13px;

}

.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: 3px 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 tr th{

    font-weight: 600 !important;

    color: var(--maincolor) !important;

    padding:8px !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 !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-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;

}

.profile_card{

    position: relative;

    overflow: hidden;

    border-bottom: 5px solid #2cb2dc;

}

.profile_card::before{

    content: "";

    display: block;

    width: 100%;

    height: 159px;

    background: var(--maincolor);

    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: var(--mainlightcolor);

    clip-path: polygon(0 0, 100% 100%, 100% 0);

    position: absolute;

    top: 0;

    right: 0;

    z-index: 0;
    opacity: 0.8;

}

.profile_box {

    width: 120px;

    height: 120px;

    margin: auto;

    border-radius: 50%;

    margin-bottom: 10px;

    overflow: hidden;

    z-index: 1;

    position: relative;

    border: 7px 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: var(--maincolor);

    background: linear-gradient(90deg, var(--maincolor) 0%, var(--mainlightcolor) 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: #ffffff !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: var(--maincolor);

    color: #fff;

    border: 1px solid var(--maincolor);

    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;

    height: calc(100vh - 248px);

}

.stickytable3 .table thead tr th{

    position: sticky;

    top: -1px;

    z-index: 22;

}

.dataTables_length {

    display: inline-block;

}

.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: 20px;

    position: relative;

    margin-top: 10px;

    margin-bottom: 15px;

    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: 34px;

    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: 15%;

    left: 49%;

    transform: translate(44%,100%);

    margin: auto;

    font-size: 17px;

    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 button{

    width: 60px;

    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: -4px;

    top: 56vh;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

}

.indexlist button:hover,.indexlist button:focus{

    background: rgb(30 149 195);

    background: linear-gradient(90deg, rgb(28 173 218) 100%, rgb(30 149 196) 10%);

    color: #fff;

}

.allindex_container{

    overflow: auto;

    width: 100%;

    height: 100%;

}

.buttonIndex .btn {

    width: 25px;

}

.statusIndex i.fa {

    width: 42px;

    text-align: center;

}

.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: 0rem 0rem 0.5rem;

    margin-top: 0;

    margin-bottom: 3px;

}

.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;

}

.inputtioggle{

    display: none;

}

.inputtioggle.active{

    display: block;

}

.flagamt {

    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

}

.flagamt i {

    width: 20px;

}



.hoverdate {

    position: relative;

    cursor: context-menu;

}

.hoverdate span{

    display: none;

    position: absolute;

    top: auto;

    bottom: auto;

    left: 0;

    right: 0;

    background: var(--maincolor);

    z-index: 1;

    padding: 1px 5px;

    color: #fff;

    border-radius: 6px;

    min-width: 161px;

    width: max-content;

}

.hoverdate:hover span{

    display: block;

}



.file-block {

    border-radius: 10px;

    background-color: rgba(144, 163, 203, 0.2);

    margin: 5px;

    color: initial;

    display: inline-flex;

  }

  .file-block > span.name {

    padding-right: 10px;

    width: max-content;

    display: inline-flex;

    font-size: 10px;

  }



  .file-delete {

    display: flex;

    width: 24px;

    color: initial;

    background-color: #6eb4ff00;

    font-size: large;

    justify-content: center;

    margin-right: 3px;

    cursor: pointer;

  }

  .file-delete:hover {

    background-color: rgba(144, 163, 203, 0.2);

    border-radius: 10px;

  }

  .file-delete > span {

    transform: rotate(45deg);

  }

  .table_bottom_total{

    border: 1px solid #dadada;

    border-radius: 10px;

    padding: 0 10px;

  }
    .header_title {
        text-align: center;
        margin-bottom: 10px;
        font-family: 'Poppins', sans-serif;
    }

    h1 {
        font-size: 28px;
        color: #333;
        letter-spacing: 1px;
    }

    /* Center the Panel Name below the Website Title */
    .panel-identifier {
        /* margin-top: 15px; */
    }

    .panel-name {
     width:100%;
     margin-bottom: 15px;
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        /* border-radius: 15px; */
        font-size: 14px;
        font-weight: regular;
        color: #fff;
        background: linear-gradient(45deg, var(--maincolor), var(--mainlightcolor)); /* Modern gradient */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

    .panel-name i {
        margin-right: 10px;
        font-size: 14px;
    }

    .panel-name:hover {
        transform: translateY(-3px); /* Slight lift effect */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }

    /* Different panel colors */
    .user-panel, .admin-panel, .employer-panel  {
     background: linear-gradient(45deg, var(--maincolor), var(--mainlightcolor)); /* Dark Navy to Brand Color */
    color: #fff; /* White text for contrast */
    }