/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.fs-10{
	font-size: 10px !important;
}

.fs-11{
	font-size: 11px !important;
}

.fs-12{
	font-size: 12px !important;
}

.fs-13{
	font-size: 13px !important;
}

.fs-14{
	font-size: 14px !important;
}

.fs-14{
	font-size: 14px !important;
}

.fs-15{
	font-size: 15px !important;
}

.fs-16{
	font-size: 16px !important;
}

.fs-17{
	font-size: 17px !important;
}

.fs-18{
	font-size: 18px !important;
}

.fs-19{
	font-size: 19px !important;
}

.fs-20{
	font-size: 20px !important;
}

.fs-40{
	font-size: 40px !important;
}

.card-border{
	border: 1px solid #EBE9F1;
	border-radius: 0.25rem;
	padding: 20px;
	height: 100%;
}

.card-border-version2{
	border: 1px solid #EBE9F1;
	border-radius: 0.25rem;
	padding: 10px 20px;
}

.card-inner{
	box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
}

.form-group {
	margin-bottom: 1rem;
}

.help-block {
	color: red;
	font-size: 11px;
}

/*===============================================================
  line-graph.html style
==================================================================*/

.identification{
	height: 16px !important;
	width: 16px !important;
	margin-right: 8px;
	display: block;
}

.line_graph_grid {
    display: grid;
    grid-gap: 9px;
    grid-auto-rows: min-content;
    place-items: start;
    grid-template-columns: repeat(1,1fr);
}

.line_graph_grid > div {
    width: 100%;
    height: 100%;
	margin: 0 0 5px 0
}

.item{
	width: 100%;
    height: 100%;
    position: relative;
}

.color-1{
	background-color: #0077b6;
}

.color-2{
	background-color: #e5e5e5;
}

.color-3{
	background-color: #e5383b;
}

.color-4{
	background-color: #ff9800;
}

.color-5{
	background-color: #87ceeb;
}

.color-6{
	background-color: #9e9e9e;
}

.color-7{
	background-color: #83c5be;
}

.color-8{
	background-color: #bc6c25;
}

.color-9{
	background-color: #00b4d8;
}

.color-10{
	background-color: #4caf50;
}

.color-11{
	background-color: #ffeb30;
}

.color-12{
	background-color: #2196f3;
}

.color-13{
	background-color: #000000;
}

label.error{
	font-size: 12px !important;
	color: #ea5455 !important
}

.errorFromBack{
	font-size: 12px !important;
	color: #ea5455 !important
}

.errorTxt{
	font-size: 12px !important;
	color: #ea5455 !important
}

.custom-50{
	width: 50% !important;
}

.custom-80{
	width: 80% !important;
}

.inactive{
	background-color: rgb(248, 248, 248, 0.8);
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: not-allowed;
}

.ql-toolbar .ql-blank {
	height: 200px;
}

html.dark-layout table.dataTable thead tr>.dtfc-fixed-left,
html.dark-layout table.dataTable thead tr>.dtfc-fixed-right {
	z-index: 1;
	background-color: #343D55 !important;
}

html.dark-layout table.dataTable tbody tr>.dtfc-fixed-left,
html.dark-layout table.dataTable tbody tr>.dtfc-fixed-right {
	z-index: 1;
	background-color: #283046 !important
}

html.dark-layout div.dtfc-left-top-blocker,
html.dark-layout div.dtfc-right-top-blocker {
	background-color: #283046 !important
}

html.light-layout table.dataTable thead tr>.dtfc-fixed-left,
html.light-layout table.dataTable thead tr>.dtfc-fixed-right {
	z-index: 1;
	background-color: #D2EAF5 !important;
}

html.light-layout table.dataTable tbody tr>.dtfc-fixed-left,
html.light-layout table.dataTable tbody tr>.dtfc-fixed-right {
	z-index: 1;
	background-color: #FFFFFF !important
}

html.light-layout div.dtfc-left-top-blocker,
html.light-layout div.dtfc-right-top-blocker {
	background-color: #FFFFFF !important
}

.mb-8{
	margin-bottom: 8px !important;
}

.employee-add .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
}

.orgLogoDiv{
	height: 110px;
	width: 170px;
	border: 1px dashed #d8d6de;
    border-radius: 0.357rem;
}
.orgLogoDiv img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.hover-zoom{
	transition: all 0.2s ease-in-out;
}

.hover-zoom:hover{
	transform: translateY(-4px) scale(1.05);
}

.card-border .selected{
	border: 1px solid #03a3a2 !important;
	background-color: red;
}

.custom-a-none.btn-outline-secondary.dropdown-toggle::after {
	background-image: none;
	width: 0;
    height: 0;
}

.circle {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	position: relative;
	border: 8px solid #03a3a2;
	border-radius: 50%;
	/* 097A7D */
  }
  .circle .face {
	width: 100%;
	height: 100%;
  }
  .circle .face:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background: #036c86;
	border-radius: 6px;
	content: "";
	display: block;
  }
  .circle .face .hour, .circle .face .minute, .circle .face .second {
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #036c86;
	border-radius: 4px 0 0 4px;
  }
  .circle .face .minute, .circle .face .second {
	transform-origin: 50% 100%;
  }
  .circle .face .hour {
	margin: -4px 0 -4px -25%;
	padding: 4px 0 4px 25%;
	transform-origin: 100% 50%;
  }
  .circle .face .minute {
	margin: -40% -3px 0;
	padding: 40% 3px 0;
  }
  .circle .face .second {
	margin: -40% -1px 0 0;
	padding: 40% 1px 0;
  }


.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
}

.survey-list-grid {
    display: grid;
    grid-gap: 28px;
    grid-auto-rows: min-content;
    place-items: start;
    grid-template-columns: repeat(1,1fr);
}

.survey-list-grid> div {
    width: 100%;
    height: 100%;
	/* margin: 0 0 10px 0 */
}

.survey-list-grid .card{
	margin-bottom: 0 !important;
	cursor: pointer;
}

.survey-list-grid .card .card-body{
	padding: 1rem 1rem

}

.bd-callout{
	padding: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}

.bd-callout-primary-green {
    border-left-color: #03a2a1;
}

.description-overflow{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	-webkit-box-orient: vertical;
}

.progress-bar {
	width: 0;
	animation: progress 1.5s ease-in-out forwards;
}
.progress-bar .title {
	opacity: 0;
	animation: show 0.35s forwards ease-in-out 0.5s;
}
@keyframes progress {
	from {
		width: 0;
   }
	to {
		width: 75%;
   }
}
@keyframes show {
	from {
		opacity: 0;
   }
	to {
		opacity: 1;
   }
}

@media (max-width: 768px) {
	.custom-flex{
		align-items: unset !important;
	}
}

@media (max-width: 992px) {
	.mbc-1{
		margin-bottom: 10px;
	}
	.custom-flex{
		display: block !important;
	}
	.custom-50{
		width: 100% !important;
	}
	.custom-80{
		width: 100% !important;
	}
}

@media (min-width: 600px){
	.line_graph_grid {
		grid-template-columns: repeat(3,1fr);
	}
	.survey-list-grid {
		grid-template-columns: repeat(3,1fr);
	}
}

@media (min-width: 1264px){
	.line_graph_grid {
    	grid-template-columns: repeat(6,1fr);
	}
	.survey-list-grid {
		grid-template-columns: repeat(4,1fr);
	}
}

.dropzone {
	height: 150px!important;
	min-height: unset!important;
	position: relative!important;
	overflow-y: scroll;
}

.dropzone .dz-message::before {
	position: unset !important;
	top: unset !important;
}

.dropzone .dz-image img {
	height: 120px!important;
	width: 120px!important;
}

.dropzone .dz-preview .dz-remove {
	line-height: unset!important;
}

.survey-kind.active {
	border: 2px solid #03a3a2;
}
.profileImageContainer{
	position: relative;
	cursor:  pointer;
}

.profileImageContainer:hover .profileEdit{
	opacity: 1;
	transition: 0.2s;
}

.profileEdit{
	transition: 0.2s;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 3rem;
	z-index: 5;
	width: 110px;
	height: 110px;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	font-size: 25px;
	border: 2px dashed grey;
	border-radius: 0.357rem !important;;
}

.profileImageContainer img{
	max-width: 110px;
	min-width: 110px;
	max-height: 110px;
	min-height: 110px;

}

.workadsenseCom{
	border-right: 1px solid #3b4253;
}

.workAds{
	cursor: pointer;
	transition: 0.3s;
	border-radius: 5px;
}

.workAds:hover{
	opacity: 0.7;
	transition: 0.3s;
}

@media (max-width: 768px) {
	.workadsenseCom{
		border-right: unset;
	}
}

.new-dot {
	height: 15px;
	width: 15px;
	background-color: #1E5B9A;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	margin: auto;
}


.inputLoaderGG {
	margin-left: 5px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	border: 2px solid;
	border-color: #036c86 #036c86 transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

.inputLoaderGG::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: 2px solid;
	border-color: transparent #F05C2B #F05C2B;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	animation: rotationBack 0.5s linear infinite;
	transform-origin: center center;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotationBack {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.czoom {
	animation: z 3s linear infinite;
}
@keyframes z {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
		border: 1px solid #00b4d8;
		color: black;
	}
	100% {
		transform: scale(1);
	}
}

.dark-layout .czoom {
	animation: darkz 3s linear infinite;
}
@keyframes darkz {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
		border: 1px solid #00b4d8;
		color: white;
	}
	100% {
		transform: scale(1);
	}
}

.cut-text {
	text-overflow: ellipsis;
	overflow: hidden;
	width: 160px;
	white-space: nowrap;
	display: block;
}

.small-text-thead tr > th {
	font-size: 9px!important;
	padding: 5px!important;
}
.small-text-thead tr > td {
	font-size: 11px!important;
	padding: 5px!important;
}
#DataTables_Table_0.small-text-thead tr > th {
	padding: 0px!important;
}

html.light-layout table.dataTable tfoot tr>.dtfc-fixed-left,
html.light-layout table.dataTable tfoot tr>.dtfc-fixed-right {
    z-index: 1;
    background-color: #D2EAF5 !important;
}

.idx-width {
	width: 20px!important;
}

.toggle-vis.disabled {
	text-decoration-line: line-through;
}
a.toggle-vis.disabled {
	text-decoration-line: line-through!important;
}

.input-button {
    display: block;
    padding: 8.5px 8.5px;
    cursor: pointer;
    align-self: center;
    justify-content: center;
}

.bookmark-icon:hover {
	color: #f7d200!important;
}