/**
	Single page Style sheet
*/

.width-65px { width: 65px; }
.width-100px { width: 100px; }
.width-120px { width: 120px; }
.width-500px { width: 500px !important; }

.logo-container { position: relative; display: inline-block; }
.logo-container img { /* height: 35px; */ margin-left: 25px; }
.slots-container { position: relative; display: block; }
.measures { position: absolute; display: inherit; right: calc(0% + 100px); bottom: 8px; }
.slot-add-sub span, .measures span { padding: 5px 10px; border-radius: 50%; cursor: pointer; }

.slot-add-sub { position: relative; display: block; top: calc(100% - 25px); }

.badge-icon { font-size: 20px; vertical-align: middle; }


.profile-badge-icon { position: absolute; top: 50px; width: 35px; left: calc(50% + 35px); border: solid 1px #ccc; border-radius: 50%;
	box-shadow: 0 0 20px #ccc; }

.new-card .new-card-item { /* background: #f1f1f1; */ display: block; overflow: hidden; text-align: center; position: relative;
	border-radius: 0 0 10px 10px; font-family: 'Exo', sans-serif; box-shadow: 0px 3px 16px #dedede; /* box-shadow: 0px 6px 16px #b7b8bc; */ }

.new-card .number{ font-size: 35px; font-weight: 700; line-height: 30px; padding-top: 20px; }
.new-card .number-label{ position: relative; display: block; height: 20px; font-weight: 400; font-size: 12px; padding-bottom: 5px; }
.new-card .icon-container{ padding: 10px; }
.new-card .title{ border-bottom: solid 10px #BD0045; font-weight: 500; padding: 15px 0; }

.highlight-new-user{
	background-color: #fff5da !important;
}

.highlight-new-user-trial{
	background-color: #dee2e6 !important;
}

.highlight-b2b{
    background-color: #00FFFF !important;
}

.highlight-success{
	background-color: #00c2921a !important
}

.highlight-danger{
	background-color: #cd1e5614 !important
}

.highlight-warning{
	background-color: #f8e9ff !important
}

/**
-----------------------------------Arrow Background and color change on event  ----------------------------------------------
*/
.right_arrow{
	transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	border:2px solid orange; border-radius:40%;
}

.right_arrow:hover{
	background: orange;
	color:white;
}

/**
	Funnel User Selector
*/
.user-selector .id-span { position: relative; display: inline-block; width: 55px; }
.user-selector .name-span { position: relative; display: inline-block; width: 200px; }

.user-selector .left-choose-option,
	.user-selector .right-choose-option {
		position: relative; display: block; min-height: 100px; max-height: 400px; overflow-y: scroll }
.user-selector .left-choose-option a,
	.user-selector .right-choose-option a {
		position: relative; display: block; width: 100%; padding: 2px 10px; transition-duration: 0.3s; cursor: pointer; }
.user-selector .left-choose-option a:hover,
	.user-selector .right-choose-option a:hover {
	padding-left: 20px; color: #cd1e56; font-weight: 600 }

.user-selector .disabled { color: #aaa; text-decoration: line-through; }
.user-selector .disabled:hover { color: #aaa !important; text-decoration: line-through; padding-left: 10px !important;
	font-weight: 100 !important; }

.user-selector .all-choose-option { display: flex; min-height: 100px; max-height: 400px; text-align: center; justify-content: center; }

.user-selector .all-choose-option-container { width: 100%; margin-top: -40px;
	transform: translateY(50%); -webkit-transform: translateY(50%); -o-transform: translateY(50%); -moz-transform: translateY(50%); }

.user-selector .all-choose-option-container i { height: 40px; width: 40px; border-radius: 50%; color: #5d5d5d; border: solid 1px #bbb;
	transition-duration: 0.3s;
}
.user-selector .all-choose-option-container i::before { position: relative; display: inline-block; line-height: 38px }
.user-selector .all-choose-option-container i:hover { background-color: #cd1e56; border: solid 1px #cd1e56; color: #fff }

.single-heading { padding: 0 15px 0 10px; border-left: solid 1px #ccc; margin-left: 10px }
.single-heading:first-child { padding: 0 15px 0 0px; border-left: none }

.map-icon-img { position: absolute; left: 0px; user-select: none; border: 0px; padding: 0px; margin: 0px;
	max-width: none; width: 16px; height: 192px; }

i.is_renew_icon { background-color: #00c292; color: #fff; padding: 7px 4px 5px 5px; border-radius: 50%;
    height: 25px; width: 25px; font-size: 12px; justify-content: center; margin-left: 5px; }

/**
 *	Horizontal Bar chart
 */

.brand-bar {
	position: relative;
	display: block;
	margin: 5px 0;
	padding: 10px 15px;
	border: solid 1px #d0d0d2;
	background-color: #f3f3f4;
	border-radius: 3px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
}
.brand-bar::before {
	position: absolute;
	left: 5px;
    top: 5px;
    content: attr(title);
    background-color: var(--brand-color);
    width: calc(var(--bar-width) - 10px);
    color: #fff;
    padding: 5px 10px;
    z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 3px;
	font-size: 12px;
}
.brand-bar::after {
	content: "";
    background-color: #f3f3f4;
    z-index: 1;
    height: 100%;
    right: 0%;
    top: 0;
    width: 5px;
    position: absolute;
    display: block;
}

/* ----------- Bar Chart ---------- */

.notification-rejected-number {
	position: relative;
	transform-style: preserve-3d;
	animation: moveRejected 1.5s;
	animation-iteration-count: infinite;
	margin-left: 5px !important;
}

  @keyframes moveRejected {
	0% {top: 0px;}
	50% {top: -10px;}
	100% {top: 0px;}
  }

.dot {
	position: relative;
	height: 12px;
    width: 12px;
    border-radius: 50%;
	display: inline-block;
	border: solid 1px;
    padding: 4px;
}

.fill:after {
	content: "";
	position: absolute;
	display: block;
	height: 8px;
	width: 8px;
	left: 1px; top: 1px;
	border-radius: 50%;
}

.fill-primary:after { background-color: var(--primary); }
.fill-secondary:after { background-color: var(--secondary); }
.fill-success:after { background-color: var(--success); }
.fill-danger:after { background-color: var(--danger); }
.fill-info:after { background-color: var(--info); }
.fill-warning:after { background-color: var(--warning); }


/* -------------- Call Log ------------------- */

.order-head { font-size: 12px; color: #fff; border-radius: 5px; }
.order-head .small-bold { position: relative; display: block; font-weight: 600; font-size: 11px; }
.order-head .vertical-center, .call-log-body .vertical-center
	{ position: relative; display: flex; align-items: center; height: 100%; }

.call-log-body .bold-bottom-border { position: relative; display: block; border-bottom: solid 1px #9a9a9a; }
.call-log-body .log-container { font-size: 13px; }
.call-log-body .log-container .status-card { padding: 15px 20px; color: #fff;
	border-radius: 5px; text-align: center; }
.call-log-body .response-code-block { border: solid 1px #9a9a9a !important; border-radius: 5px; padding: 15px 20px !important; margin-bottom: 3px }
.call-log-body .dial-time { font-weight: 500; font-size: 12px; }
.call-log-body .dial-number { font-weight: 600; }

.custom-row { position: relative; display: block; }
.custom-row .col-30 { position: relative; display: inline-block; width: 31%; }

/* ----------- Audio record ------------ */

.player { position: relative; display: inline-block;
	border: solid 1px var(--brand-color); border-radius: 50%; text-align: center; background-color: #fff;
	transition-duration: 0.5s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s; margin: 3px;
}
.player:hover { background-color: var(--brand-color); }
.player:hover>i { color: #fff; }
.player>i { color: var(--brand-color); position: relative; display: flex; justify-content: center; align-items: center; }
.player-big-btn { width: 50px; height: 50px; }
.player-normal-btn { width: 30px; height: 30px; }

/* Custom CSS Of maid training report page */
.accordion-section .panel-default > .panel-heading {
    border: 0;
    background: #f4f4f4;
    padding: 0;
  }
  .accordion-section .panel-default .panel-title a {
      display: block;
      font-style: italic;
      font-size: 16px;
  }
  .accordion-section .panel-default .panel-title a:after {
      font-family: 'FontAwesome 5 Free';
      font-style: normal;
      font-size: 16px;
      float: right;
	  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0aa";
  }
  .accordion-section .panel-default .panel-title a.collapsed:after {
	font-weight: 900;content: "\f107";
  }
  .accordion-section .panel-default .panel-body {
      font-size: 16px;
  }