@font-face {
	font-family: 'Como';
	font-style: normal;
	font-weight: 400;
	src: url('/inc/assets/fonts/Como/Como-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Como';
	font-style: normal;
	font-weight: 500;
	src: url('/inc/assets/fonts/Como/Como-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Como';
	font-style: normal;
	font-weight: 600;
	src: url('/inc/assets/fonts/Como/Como-ExtraBold.woff2') format('woff2');
}

html,
body {
	font-family: Como !important;
}

body,
h1,
h3,
h4,
.btnSubmit,
.countdown,
.ftTitel1,
.ftTitel2,
.ftTitel3,
.ftKaderTitel,
.KOPMENUtabCaptionDisabled,
.KOPMENUtabCaptionSelectedDisabled,
.menutext,
.table_data_1,
.table_data_1_kopcell,
.table_data_1_koprow,
.table_data_1_inputText,
.table_data_1_inputSelect,
.table_pages_data th ,
.table_pages_data_noborder,
.table_pages_data_fullborder,
.table_pages_inputSelect,
.table_default,
.table_kader,
.titelKader ,
.titelKaderDisabled ,
.windowButton,
.windowButtonOver,
.divEdit ,
.tblHeader ,
.btn1 ,
.btn2 ,
.btn3 ,
.btn4 ,
.btn5 ,
.btn6 ,
.btn7 ,
table.sortable thead th ,
.rapport_criteria ,
.checkerOn_1 ,
.checkerOff_1 ,
.checkerOn_2 ,
.checkerOff_2 ,
.agendaTable,
.tblAgenda td ,
.divDebug ,
.divHr ,
a ,
.page-head h2,
.scansporteren_kop ,
.scansporteren_data,
.rtd-menu-btn-label,
.block .header h2,
.stat-data .stat-blue h2,
#mainModal,
.popover {
	font-family: Como, sans-serif !important;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>li:not(.profile_menu).open>a,
.navbar-default .navbar-nav>li:not(.profile_menu).open>a:hover,
.navbar-default .navbar-nav>li:not(.profile_menu).open>a:focus,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-menu li>a:hover,
.multiselect-container>li.active:hover>a {
	background-color: var(--primary-10) !important;
	color: var(--text-color-1) !important;
}
.multiselect-container li label.checkbox {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mainBar.navbar-nav>.open>a,
#mainBar.navbar-nav>.open>a:hover,
#mainBar.navbar-nav>.open>a:focus,
#mainBar.navbar-nav>.active>a,
#mainBar.navbar-nav>.active>a:hover,
li.profile_menu.open>.dropdown-toggle {
	background-color: var(--primary-70) !important;
	color: var(--white) !important;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
	color: var(--text-color-1);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}

a.list-group-item:hover {
	border-left: 5px solid var(--primary-80);
	border-color: var(--primary-80) !important;
}
a.list-group-item:hover + a.list-group-item {
	border-top-color: var(--primary-80) !important;
}

.accordion.accordion-semi .panel-heading a:not(.collapsed) {
	background-color: var(--primary-100) !important;
	border-bottom-color: var(--primary-115) !important;
}

.blueButton,
.btnResetPassword,
.btnLoginSave,
.btnLoginReset,
.btnLoginVerify,
.btnLoginSaveTM,
.blueVaButton,
.button.style_default,
.btnResetPassword,
.btn--primary,
.steam-btn--primary,
.btn-primary {
	border-width: 1px;
	border-style: solid;
	background-color: var(--white) !important;
	border-color: var(--secondary-100) !important;
	color: var(--secondary-100) !important;
}
.blueButton:hover,
.btnResetPassword:hover,
.btnLoginSave:hover,
.btnLoginReset:hover,
.btnLoginVerify:hover,
.btnLoginSaveTM:hover,
.blueVaButton:hover,
.button.style_default:hover,
.btnResetPassword:hover,
.btn--primary:hover,
.steam-btn--primary:hover,
.btn-primary:hover {
	background-color: var(--secondary-100) !important;
	color: var(--white) !important;
}
.steam-btn--primary svg .fill-color {
	fill: var(--secondary-100);
}
.steam-btn--primary svg .stroke-color {
	stroke: var(--secondary-100);
}
.steam-btn--primary:hover svg .fill-color {
	fill: var(--white);
}
.steam-btn--primary:hover svg .stroke-color {
	stroke: var(--white);
}
.blueButton:disabled,
.btnResetPassword:disabled,
.btnLoginSave:disabled,
.btnLoginReset:disabled,
.btnLoginSaveTM:disabled,
.blueVaButton:disabled,
.button.style_default:disabled,
.btnResetPassword:disabled,
.btn--primary:disabled,
.btn-primary:disabled {
	background-color: var(--secondary-20) !important;
	color: #6c6c6c !important;
	border-color: #d9c0b7 !important;
	box-shadow: none;
}

.btn-primary,
.btn-secondary {
	border-radius: 2px;
	outline: none;
	padding: 6px 12px;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 12%), 1px 1px 0 rgb(255 255 255 / 20%) inset;
	color: #fff;
	font-weight: normal;
	border-width: 1px;
	border-style: solid;
	font-size: 13px !important;
	font-weight: 400;
	outline: none;
}

.btn-secondary {
	border-radius: 2px;
	outline: none;
	padding: 6px 12px;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 12%), 1px 1px 0 rgb(255 255 255 / 20%) inset;
	color: #fff;
	font-weight: normal;
	border-width: 1px;
	border-style: solid;
	font-size: 13px !important;
	font-weight: 500;
	background-color: var(--white) !important;
	color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}
.btn-secondary:hover {
	background-color: var(--white) !important;
}

.cl-vnavigation li ul,
.cl-vnavigation li a,
.cl-vnavigation .parent a {
	background-color: var(--primary-100);
}
.cl-vnavigation li a {
	border-top-color: var(--primary-95);
	border-bottom-color: var(--primary-95);
}
.cl-vnavigation .parent ul li a,
.cl-vnavigation .sub-menu a,
.cl-vnavigation .parent ul li.sub-menu a {
	background-color: var(--primary-80);
}
.cl-vnavigation .sub-menu a {
	border-top: none;
}
.cl-vnavigation .parent ul li a:hover,
.cl-vnavigation li a:hover,
.activeSubMenu {
	background-color: var(--primary-70) !important;
}
.cl-vnavigation .active>a {
	border-left: none !important;
	background-color: var(--primary-70) !important;
}

.iradio_square-blue,
.icheckbox_square-blue {
	background: url("/inc/libs/icheck-new-brand/icheck-twilight.png") no-repeat;
}
.iradio_square-blue {
	background-position: -120px 0;
}

.form-control {
	font-weight: 500;
}
.form-control:not([readonly]):focus {
	border-color: var(--primary-100) !important;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--primary-70);
}
.form-control.invalid:not([readonly]):focus,
.form-control.error:not([readonly]):focus {
	border-color: #ff0000 !important;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px #e3a5a5;
}

.chosen-container-active .chosen-single {
	border-color: var(--primary-100);
}

.chosen-container .chosen-results li:hover,
.chosen-container .chosen-results li.highlighted {
	background: var(--primary-10) !important;
	color: var(--text-color-1) !important;
}

.multiselect-container>li.active>a {
	background-color: var(--white);
	color: var(--text-color-1);
}

.colored-header .modal-header {
	border-bottom-color: var(--primary-115) !important;
	background-color: var(--primary-100);
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled],
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled],
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
	background-image: none;
	background-color: var(--primary-100);
}
.datepicker table tr td span.new.active,
.datepicker table tr td span.old.active {
	color: var(--white);
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
	background: #fff !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
	background-color: #fff;
}
.bootstrap-switch .bootstrap-switch-label:after {
	background: var(--white);
	border-color: var(--secondary-100);
}

.bootstrap-switch.bootstrap-switch-focused {
	border-color: #ccc;
	box-shadow: none;
}

.chosen-container-active .chosen-choices {
	border-color: var(--primary-100);
}

.chosen-container-multi .chosen-drop .result-selected {
	color: var(--text-color-1);
}

.panel-primary {
	border-color: var(--primary-100);
}
.panel-primary>.panel-heading {
	background-color: var(--primary-100);
	border-color: var(--primary-115);
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus,
.pagination>li>a,
.pagination>li>span {
	color: var(--primary-100);
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
	background-color: var(--primary-100);
	border-color: var(--primary-100);
	color: var(--white);
}

.ui-widget-header {
	background-color: var(--primary-100);
}
.ui-datepicker-calendar thead tr th,
.ui-datepicker-calendar thead tr th span {
	background-color: var(--primary-100) !important;
	color: var(--white) !important;
}
.paginate_button.current {
	background-color: var(--primary-100);
	color: var(--white) !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
	border-top-color: var(--primary-100) !important;
}
.nav-tabs>li.active>a:after,
.nav-tabs>li.active>a:hover:after,
.nav-tabs>li.active>a:focus:after {
	background-color: var(--primary-100) !important;
}
.nav-tabs>li>a {
	color: var(--text-color-1) !important;
}

ul.stepper.horizontal .step.active .step-title:before {
	background-color: var(--primary-100);
}

.paginationList>li.paginationItem a {
	color: var(--text-color-1) !important;
}
.paginationList>li.paginationItem.selected>a {
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
	color: var(--white) !important;
}

#unclosedShiftsList_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
#unclosedShiftsList_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current,
#unclosedShiftsList_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: var(--white) !important;
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}

.dropdown-menu>li.active>a,
.dropdown-menu>li.active>a:hover,
.dropdown-menu>li.active>a:focus {
	color: var(--white) !important;
	background-color: var(--primary-100) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid var(--primary-20);
	background: var(--primary-20);
	font-weight: bold;
	color: #666;
	white-space: nowrap;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fad42e;
	background: #fbec88 url("http://localhost:8037/styles/jqueryui/1.11.0/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png") 50% 50% repeat-x;
	color: #363636;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid var(--secondary-70);
	background: var(--secondary-70);
	color: #fff;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid var(--secondary-70);
	background: var(--secondary-70);
	border-radius: 4px;
}

.alert-info,
.alert-twilight-color {
	background-color: var(--secondary-10);
	color: var(--secondary-100);
	border-color: var(--secondary-70);
}

.hyper-link:hover {
	text-decoration: underline;
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--primary-100);
}

input[type='radio']:disabled {
	position: relative;
	cursor: not-allowed;
}

.multiselect-container.dropdown-menu>li.active>a,
.multiselect-container.dropdown-menu>li.active>a:hover,
.multiselect-container.dropdown-menu>li.active>a:focus {
	color: var(--text-color-1) !important;
	background-color: var(--white) !important;
}
.multiselect-container.dropdown-menu>li.active>a:hover {
	background-color: var(--primary-10) !important;
}

.btn-orange-color {
	background-color: var(--secondary-100) !important;
	border-color: var(--secondary-100) !important;
	color: var(--white);
}
.btn-orange-color:hover {
	background-color: var(--btn-orange-bg-hover) !important;
}

.cl-vnavigation .mCSB_dragger_bar {
	background-color: var(--primary-25) !important;
}

.chosen-container-single .chosen-single {
	font-size: 13px !important;
}

.multiselect-container>li.multiselect-item.multiselect-group>a,
.multiselect-container>li.multiselect-item.multiselect-group>a:hover {
	background-color: var(--white) !important;
}
.multiselect-container>li.multiselect-item.multiselect-group>a,
.multiselect-container>li.multiselect-item.multiselect-group>a>label {
	cursor: auto;
}

.daterangepicker td.in-range {
	background-color: var(--primary-10) !important;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
	background-color: var(--primary-20) !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: var(--primary-100) !important;
}

.md-modal .modal-header .close {
	color: #fff;
	text-shadow: none;
	opacity: .5;
	margin-top: 2px;
}

.accordion .panel-heading a {
	color: var(--primary-100);
}

.chosen-container-active .chosen-choices {
	border-color: var(--primary-100);
}

.chosen-container .chosen-results li.highlighted {
	background-color: var(--primary-100);
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: var(--primary-50);
}

#callbacks th{
	background-color: var(--primary-100);
}

.btn.btn-xs.btn-success{
	background-color: var(--follow-up-management-table-buttons-bg);
	border-color: var(--follow-up-management-table-buttons-border);
}

.btn.btn-xs.btn-success:hover{
	background-color: var(--follow-up-management-table-buttons-hover);
}

.btn.btn-success{
	background-color: var(--follow-up-management-table-buttons-bg);
	border-color: var(--follow-up-management-table-buttons-border);
}

select[multiple]:focus option:checked,
select[multiple] option:checked {
	background: var(--primary-100) linear-gradient(0deg, var(--primary-100) 0%, var(--primary-100) 100%);
	color: var(--white) !important;
}

.wtBorder.current,
.wtBorder.area {
	background-color: var(--primary-100) !important;
}

.ui-datepicker table th span,
select.ui-datepicker-month,
select.ui-datepicker-year {
	color: var(--primary-100);
}

.ui-datepicker {
	width: 230px;
}
.ui-widget-content {
	border-color: #dfd3df;
}

.block-flat .header h3 {
	font-family: Como !important;
}

.rt-light-theme .tri-state_btn[value="1"] svg g {
	fill: var(--primary-100);
}
.rt-light-theme .tri-state_btn[value="2"] svg g {
	fill: var(--primary-100);
}

.control-label {
	font-weight: 500 !important;
}

.agentsLivebarTitle {
	background-color: var(--primary-100);
	border-color: var(--primary-100);
}

.callscreenPopUpButtonPrimary:hover {
	background-color: var(--secondary-100);
	border-color: var(--secondary-80);
}

.callscreenPopUpButtonSecondary:hover {
	border-color: var(--secondary-100);
}

.callscreenPopUpButtonSecondary:hover {
	border-color: var(--secondary-100);
}

.agentsLivebarContainer::-webkit-scrollbar-thumb {
	background-color: var(--primary-80);
}

.agentsLivebarContainer {
	scrollbar-color: var(--secondary-100) #ddd;
}

.delayInfo {
    margin-left: 5px;
	color: var(--primary-100) !important;
}

.triggerMessageSortIcon i {
    font-size: 20px;
    padding-top: 2px;
	color: var(--primary-100) !important;
}

.addIcon {
    background-color: #fff;
    height: 14px;
    display: inline-block;
    width: 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 15px;
    margin-right: 4px !important;
	color: var(--secondary-100) !important; 
}
.searchButton {
	background-color: var(--secondary-100);
}
.onoffswitch .onoffswitch-inner .toggle-off,
.onoffswitch .onoffswitch-inner .toggle-on {
	background-color: var(--primary-100);
}
.callbackHoursHeader,
.closingHoursHeader {
	background-color: var(--primary-100);
}
.audioPanel label {
	font-size: 12px;
}
.rt-dark-theme .btn--primary {
	background-color: #383838 !important;
}
.rt-dark-theme .btn--primary:hover {
	background-color: var(--secondary-100) !important;
	color: var(--white) !important;
}
.rt-dark-theme .btn--primary:disabled {
	background-color: #666666 !important;
	color: #d9d9d9 !important;
	border-color: #565656 !important;
}
.callbackHours_icon {
	color: var(--primary-100);
}
.alertInfo {
	background-color: #EFE9EF;
	border-color: #cfbecf;
	color: #4C384D;
}
.btn-save-assignment {
	color: var(--secondary-100) !important;
	background-color: var(--white) !important;
	border-color: var(--secondary-100) !important;
}
.btn-save-assignment:hover {
	color: var(--white) !important;
	background-color: var(--secondary-100) !important;
}
.btn-save-assignment.disabled {
	background-color: #CCC !important;
	border-color: #777 !important;
	color: #777 !important;
}
.campaign-pickup-allowed-box,
.transfer-box {
	color: var(--primary-20) !important;
}
.project-pickup-allowed-box,
.conference-box {
	color: var(--primary-60) !important;
}
.queue-item-pickup-allowed-box,
.transfer-conference-box {
	color: var(--primary-100) !important;
}
.queue-item-pickup-allowed-box + label,
.transfer-conference-box + label {
	color: #fff !important;
	font-weight: 100;
}
.assignmentTable td.batchAssignV {
	background-image: url('/images/icon_assignment_batch_V_newBrand.png');
}
.assignmentTable td.batchAssignHV {
	background-image: url('/images/icon_assignment_batch_HV_newBrand.png');
}
.navbar-default .navbar-nav>li>a {
	font-size: 13px;
}

.achievement-widget-modal,
.agent-widget-modal,
.campaign-widget-modal,
.handledperchannel-widget-modal {
	font-family: Como !important;
}

.rt-dashboard input,
.rt-dashboard textarea,
.rt-dashboard select {
	font-family: Como !important;
}

#customerLogo {
	max-width: 250px !important;
	max-height: 100px !important;
}

.divQueueCount,
.divChatQueueCount {
	font-size: 50px !important;
}
.queueStatCell {
	font-size: 12px !important;
}
.divMaxRecords {
	font-size: 11px !important;
}

@media (max-width: 780px) {
	.steamLogo {
		display: none;
	}
	.loginWindowContent {
		width: 100%;
	}
}
@media (max-width: 560px) {
	.login-contact-list {
		display: none;
	}
	.loginWindowContent {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.loginWindowContent {
		padding: 0;
	}
	.login-form-wrapper {
		border-radius: 0px;
	}
}
.appointmentcontent {
	font-size: 14px !important;
	font-weight: 400 !important;
}
@media (max-width:480px) {
	.appointmentcontent {
		font-size: 11px !important;
	}
}

.delayInfo {
    margin-left: 5px;
	color: var(--primary-100) !important;
}

.triggerMessageSortIcon i {
    font-size: 20px;
    padding-top: 2px;
	color: var(--primary-100) !important;
}

.addIcon {
    background-color: #fff;
    height: 14px;
    display: inline-block;
    width: 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 15px;
    margin-right: 4px !important;
	color: var(--secondary-100) !important; 
}

ul.stepper .step.active:before {
    background-color: var(--primary-100)
}
.start-work-text {
	margin-top: 6px;
}
.cbp_tmtimeline>li .cbp_tmlabel {
	background: var(--primary-40) !important;
	color: var(--primary-100) !important;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
	border-right-color: var(--primary-40) !important;
}
.cbp_tmtimeline>li .cbp_tmlabel.cbp_tmlabelActive {
	background: var(--primary-100) !important;
	color: #fff !important;
}
.cbp_tmtimeline>li .cbp_tmlabel.cbp_tmlabelActive:after {
	border-right-color: var(--primary-100) !important;
}
.cbp_tmtimeline>li .cbp_tmicon {
	background-color: var(--primary-100);
	box-shadow: 0 0 0 8px var(--primary-20);
}
.cbp_tmtimeline:before {
	background-color: var(--primary-20);
}
.labelUploadAttachment {
	background: none;
	background: var(--primary-100);
	border-color: var(--primary-115);
}
.labelUploadAttachment:hover {
	background: var(--primary-90) !important;
}
.markAsImportant {
	color: var(--primary-100);
}
.dialogButton {
	background: var(--white) !important;
	border-color: var(--secondary-100) !important;
	color: var(--secondary-100) !important;
}
.dialogButton:hover {
	background: var(--secondary-100);
	border-color: var(--secondary-100);
	color: var(--white);
}
.calendarButton,
a.calendarButton:hover,
.calendarButton a {
	color: var(--primary-100);
}
.tblMatrix th {
	background: var(--primary-100);
	border-color: var(--primary-80);
}
.cbp_tmtimeline>li .cbp_tmtime span.dateSpan,
.cbp_tmtimeline>li .cbp_tmtime span.timeSpan {
	color: var(--primary-70);
}
.cbp_tmtimeline>li .cbp_tmInfo .avatar {
	background-color: var(--primary-60);
}
.emailAutoReplyIcon {
	border-color: var(--primary-60) !important;
}
.iradio_square-blue.disabled {
	cursor: not-allowed;
}
.form-field .form-field__control:focus {
	box-shadow: 0 0 0 4px rgb(76 56 77 / 30%)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
	background: var(--secondary-100);
}
.loader-spinner-wrapper {
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	row-gap: 10px;
}
.loader-spinner {
	border-width: 4px;
	width: 100px;
	height: 100px;
	display: inline-block;
	border: 4px solid var(--primary-25);
	border-radius: 50%;
	border-top-color: var(--primary-100);
	animation: spinner-rotate-animation 1s linear infinite;
}
@keyframes spinner-rotate-animation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.text-red {
	color: red;
}

/* Override Tagify styles */
.tagify__input {
	margin: 0px;
	margin-top: 4px;
}
.tagify--hasMaxTags,
.tagify--noTags {
	height: 28px;
}
.tagify--noTags {
	padding-top: 0px;
	padding-left: 0px;
}
.tagify__tag {
	margin-top: 4px;
	margin-left: 2px;
}
.tagify--empty .tagify__input::before {
	margin-top: 2px;
}
.tagify--focus {
	border-color: var(--primary-100)
}
.system-field .tagify__tag {
	width: 100%;
}
.system-field .tagify__tag>div {
	overflow: hidden;
	width: 100%;
}
.system-field .tagify__tag__removeBtn {
	min-width: 14px;
}
.system-field .tagify__tag-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.tagify__tag>div {
	padding: 1px 6px;
}
.cursor-pointer {
	cursor: pointer;
}
.tagify__dropdown__wrapper {
	border-color: #c9c9c9;
}
.tagify__dropdown__item--active {
	background: var(--primary-100);
	color: #fff;
}
.tagify--invalid {
	border-color: #ff0000 !important;
}

.mb-20 {
	margin-bottom: 20px;
}

.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.px-20 {
	padding-left: 20px;
	padding-right: 20px;
}

.py-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.pl-15 {
	padding-left: 15px;
}

.ml-15{
	margin-left:15px;
}

.h-full {
	height: 100%;
}

.absolute{
	position: absolute;
}

.r-20{
	right:20px;
}

.overflow-auto {
	overflow: auto;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.sc-form-group-control {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.sc-form-control {
	display: grid;
	grid-template-columns: 20% auto;
	align-items: center;
}

.sc-form-control__label {
	margin: 0px;
	font-weight: 100;
	color: #333;
	line-height: normal !important;
	font-size: 14px;
}

.sc-form-input {
	outline: none;
	border: 1px solid #cccccc;
	width: 350px;
	height: 28px;
	padding: 0px 10px;
}

	.sc-form-input[readonly],
	.sc-form-input[disabled] {
		border: none;
		border-bottom: 1px dashed #a5a5a5;
		background-color: transparent;
		padding: 0px;
	}



input[type=checkbox].sc-form-checkbox {
	width: 20px;
	height: 20px;
	position: relative;
	font-size: 10px;
	margin: 0px;
}

	input[type=checkbox].sc-form-checkbox::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0;
		left: 0;
		background-color: #fff;
		border: 1px solid #bbbbbb;
	}

input[type=checkbox].sc-form-checkbox:checked::before {
	background-color: var(--primary-100);
}

input[type=checkbox].sc-form-checkbox:checked::after {
	content: "";
	display: inline-block;
	width: .6em;
	height: 1em;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: .4em;
	left: .7em;
}

.sc-form-multiselect-btn {
	border: 1px solid #cccccc;
	background-color: transparent;
	box-shadow: none;
	text-align: center;
	height: 28px;
}

	.sc-form-input--disabled,
	.sc-form-multiselect-btn--disabled {
		pointer-events: none;
		border: none;
		background: none;
		text-align: left;
	}

.sc-form-multiselect-btn:disabled {
	padding: 0px;
	text-align: left;
	border: none;
	border-bottom: 1px dashed #cbcbcb;
}
	.sc-form-multiselect-btn:disabled > .caret {
		display: none;
	}


	.sc-form-control__checkbox-group {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
	}

	.sc-form-control__checkbox-group--vertical{
		flex-direction: row;
		column-gap: 10px;
	}

	.sc-form-control__checkbox {
		display: flex;
		align-items: center;
		column-gap: 8px;
	}

.sc-divider {
	all: initial;
	width: 100%;
	display: block;
	border-top: 1px solid #c7c7c7;
	margin: 30px 0;
}

.sc-form-control__disabled {
	pointer-events: none;
	color: #b8b8b8;
}
	.sc-form-control__disabled > * {
		pointer-events: none;
		color: #b8b8b8;
	}

.sc-form-control__hidden {
	display: none;
}

.sc-form-control__error {
	text-transform: capitalize;
	color: #ff0000;
	font-size: 12px;
	font-style: italic;
	display: none;
}

.sc-form-control__hint {
	text-transform: capitalize;
	color: #878787;
	font-size: 12px;
	font-style: italic;
}

.sc-alert-wrapper{
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.sc-alert {
	display: flex;
	column-gap: 10px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 4px;
	border: 1px solid;
}

.sc-alert--danger {
	background-color: #ffe5e5;
	border-color: #ffd8d8;
	color: #d73030;
}

.sc-alert--info {
	color: var(--primary-80);
	background-color: var(--primary-5);
	border-color: var(--primary-10);
}

.sc-alert__btn {
	background: none;
	border: none;
	outline: none;
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	cursor: pointer;
}

/* Override Tagify styles */
.tagify__input {
	margin: 0px;
	margin-top: 4px;
}
.tagify--hasMaxTags,
.tagify--noTags {
	height: 28px;
}
.tagify--noTags {
	padding-top: 0px;
	padding-left: 0px;
}
.tagify__tag {
	margin-top: 4px;
	margin-left: 2px;
}
.tagify--empty .tagify__input::before {
	margin-top: 2px;
}
.tagify--focus {
	border-color: var(--primary-100)
}
.system-field .tagify__tag {
	width: 100%;
}
.system-field .tagify__tag>div {
	overflow: hidden;
	width: 100%;
}
.system-field .tagify__tag__removeBtn {
	min-width: 14px;
}
.system-field .tagify__tag-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.tagify__tag>div {
	padding: 1px 6px;
}
.cursor-pointer {
	cursor: pointer;
}
.tagify__dropdown__wrapper {
	border-color: #c9c9c9;
}
.tagify__dropdown__item--active {
	background: var(--primary-100);
	color: #fff;
}
.tagify--invalid {
	border-color: #ff0000 !important;
}