/********* Global styling for the Compose Case Management Solution ********/
 
/************************* Table of contents ******************************/

/*** 	1 General			 											***/
/*** 		1.1 Color palette		 									***/
/*** 		1.2 Fonts				 									***/
/*** 	2 Header and footer												***/
/*** 		2.1 Header													***/
/*** 		2.2 Side menu												***/
/*** 		2.3 Footer													***/
/*** 	3 Body - Generic components										***/
/*** 		3.1 Titles													***/
/*** 		3.2 Buttons													***/
/*** 			3.2.1 Primary and secondary buttons 					***/
/*** 			3.2.2 Access buttons (conditions) 						***/
/*** 		3.3 Form components											***/
/*** 			3.3.1 Text input elements 								***/
/*** 			3.3.2 Check boxes 										***/
/*** 			3.3.3 Dropdown element									***/
/*** 			3.3.4 Text elements										***/
/*** 			3.3.5 Calendar - Date/Month/Year picker					***/
/*** 		3.4 Box bodies												***/
/*** 		3.5 Modal windows											***/
/*** 		3.6 Snackbar												***/
/*** 	4 Home page - Dashboard											***/
/*** 	5 Case table interfaces											***/
/*** 		5.1 Case table			  									***/
/*** 			5.1.1 Shortcut action									***/
/*** 			5.1.2 Case table toolbar								***/
/*** 				5.1.2.1 Filter menu									***/
/*** 				5.1.2.2 Search bar									***/
/*** 				5.1.2.3 Columns										***/
/*** 			5.1.3 Case overview										***/
/*** 				5.1.3.1 Highlighting								***/
/*** 			5.1.4 Footer - Export Excel button						***/
/*** 			5.1.5 Footer - Page numbers								***/
/*** 		5.2 Case information panel									***/
/*** 		5.3 Case history panel 										***/
/*** 		5.4 Actions panel	  										***/
/*** 			5.4.1 Action buttons									***/
/*** 			5.4.2 Action properties									***/
/*** 			5.4.3 Grouping/Linked cases functionality				***/
/***	6 User administration											***/
/*** 		6.1 Add user menu											***/
/*** 		6.2 Edit user												***/
/*** 		6.3 User list												***/
/***	7 Portal Settings - Admin										***/
/*** 		7.1 Overview		  										***/
/*** 		7.2 Workflows												***/
/*** 			7.2.1 Add/Edit workflow									***/
/*** 			7.2.2 Case Tables admin									***/
/*** 				7.2.2.1 Columns admin								***/
/*** 				7.2.2.2 Filters admin								***/
/*** 				7.2.2.3 Tables admin								***/
/*** 			7.2.3 Case info admin									***/
/*** 			7.2.4 Deletion rule admin								***/
/*** 			7.2.5 Highlights admin									***/
/*** 		7.3 Case tables												***/
/*** 		7.4 Case actions											***/
/*** 		7.5 Groups and roles										***/
/*** 		7.6 Super admin GUI											***/
/*** 	0 Graveyard	 													***/
 
/*------------------------------------------------------------------------*/

/*** 1.1 Color palette ***/

:root {
	/* Default Compose colors */
	--Neutral-Dark-Blue: #0E3052;		--Neutral-Lighter-Font: #D6E1EE;
	--Neutral-Blue: #15487D;			--Neutral-Light-Font: #A1AFC1;
	--Font-Black: #1B2331;				--Font-Lighter-Black: #2A364C;
	--Neutral-Light-Blue: #354261;		--Neutral-300: #E3E9F1;
	--Neutral-400: #AEBDD5;				--Neutral-100: #EFF4FB;
	--Sapphire-100: #EBEFFF;			--Sapphire-700: #020D31;
	--Sapphire-600: #041858;			--Han-Purple-400: #6851FB;
}

/*------------------------------------------------------------------------*/

/*** 2 Header and footer ***/

/*------------------------------------------------------------------------*/

/*** 2.1 Header ***/

/* Language selection */

.lang-select {
    color: grey;
    width: 170px !important;
    margin-top: 7px;
    border: 0 !important;
}

.lang-select  .css-13cymwt-control {
    background-color: transparent !important;
    border: 0 !important;
}

.lang-select  .css-t3ipsp-control {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none;
}

.lang-select .css-1dimb5e-singleValue {
    color: white;
}

.lang-select
.css-1xc3v61-indicatorContainer,
.css-15lsz6c-indicatorContainer,
.css-1xc3v61-indicatorContainer:hover,
.css-15lsz6c-indicatorContainer:hover {
    color: white !important;
}

.lang-en-img,
.eng-img {
    background-image: url("../../img/world_flags_eng.png");
}

.lang-no-img,
.no-img {
    background-image: url("../../img/world_flags_nob.png");
}

.lang-en-img,
.lang-no-img,
.eng-img,
.no-img {
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 26.67px;
    transform: scale(0.75);
    cursor: pointer;
}

.lang-eng-span {
    margin-right: 0px !important;
}

.css-nfp1ut {
    color: darkslategrey;
}

/*------------------------------------------------------------------------*/

/*** 2.2 Side menu ***/

.sidebar-menu.tree svg.feather {
    margin-left: -3px;
    margin-top: 2px;
    padding-right: 3px;
}

/*------------------------------------------------------------------------*/

/*** 2.3 Footer ***/

/*------------------------------------------------------------------------*/

/*** 3 Body - Generic components ***/

body {
    font-family: 'Inter', 'Manrope', Arial, Open Sans, -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol' !important;
    color: var(--Font-Lighter-Black) !important;
    font-size: 16px !important;
}

/*------------------------------------------------------------------------*/

.has-error {
    color: #dd4b39;
}

/*** 3.1 Titles ***/

h4.section-header{
    font-family: Manrope, Arial, Open Sans !important;
    font-size: 14px;
    color: #436689;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 170%;
    font-weight: bold;
	margin-top: 0;
}


/*------------------------------------------------------------------------*/

/*** 3.2 Buttons ***/

button.btn.btn-app, a.btn.btn-app {
    min-width: 84px;
    margin: 0 0 8px 8px;
    border: 1px solid #CCD6E1;
    text-decoration: none;
    color: var(--Font-Lighter-Black);
    padding: 22px 5px;
    height: 76px;
    background-color: transparent;
    border-radius: 6px;
}

a.btn.btn-app span.glyphicon, a.btn.btn-app span.fa, a.btn.btn-app i.fa,
button.btn.btn-app span.glyphicon, button.btn.btn-app span.fa, button.btn.btn-app i.fa {
    height: 24px;
    margin-top: -5px;
    margin-bottom: 4px;
    font-size: 24px;
}

button.btn.btn-app, a.btn.btn-app {
    font-size: 13px;
    font-family: Manrope, Arial, Open sans, sans-serif;
    font-weight: 600;
}

/*------------------------------------------------------------------------*/

/*** 3.2.1 Primary and secondary buttons ***/

.btn.btn-default {
    /* float: left; */
    font-family: 'Inter', 'Manrope', Arial, Open Sans, sans-serif, Helvetica;
    background-color: var(--White);
    border: 1px solid var(--Neutral-400);
    border-radius: 6px !important;
    padding: 10px 24px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
    font-weight: 600;
    font-size: 18px;
    line-height: 155%;
    letter-spacing: 0.02em;
    color: var(--Font-Black);
    width: auto !important;
}

.btn.btn-primary {
    background-color: var(--Sapphire-100);
    border: 1px solid var(--Neutral-400);
    border-radius: 4px;
    padding: 10px 24px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
    font-weight: 600;
    font-size: 18px;
    line-height: 155%;
    letter-spacing: 0.02em;
    color: var(--Dark-Blue);
    margin: 0px 0px 0px 16px;
    width: auto !important;
}

.modal:is(#modal-workflow,#modal-user-group,#modal-case-action,#modal-customize-case-access,
#modal-case-state) .modal-footer .btn.btn-default:nth-child(2), .btn.btn-primary {
    background-color: var(--Sapphire-100);
    border: 2px solid #416BF1;
    color: #2A55DF;
}

.modal:is(#modal-workflow,#modal-user-group,#modal-case-action,#modal-customize-case-access,
#modal-case-state) .modal-footer .btn.btn-default:nth-child(2):hover, .btn.btn-primary:hover {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16) !important;
    border: 2px solid var(--Font-Lighter-Black);
}

.modal:is(#modal-workflow,#modal-user-group,#modal-case-action,#modal-customize-case-access,
#modal-case-state) .modal-footer .btn.btn-default:nth-child(2):active, .btn.btn-primary:active {
    outline: none;
}

button.btn-default:hover, button.btn-default:active, button.btn-default.hover,.modal .modal-dialog .btn-xs:hover {
    background-color: var(--Sapphire-100);
}

/*------------------------------------------------------------------------*/

/*** 3.2.2 Access buttons (conditions) ***/

/*------------------------------------------------------------------------*/

/*** 3.3 Form components ***/

/*------------------------------------------------------------------------*/

/*** 3.3.1 Text input elements ***/

.form-control, .form-group>input,
:is(select,input,textarea).form-control{
	border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(0, 45, 71, 0.05) !important;
    border: 1px solid #A1B3C4;
    padding: 12px 16px;
    font-size: 16px;
    color: #17242F;
    line-height: 150%;
    /* font-weight: 400; */
	height: 48px;
}

.form-control:hover,.form-group>input:hover,
:is(select,input,textarea).form-control:hover{
	box-shadow: inset 0px 2px 4px rgba(20, 64, 107, 0.32);
	border: 1px solid #436689;
	background-color: var(--Sapphire-100);
}

.form-control:not([disabled]):not(.disabled):active,
.form-group>input:not([disabled]):not(.disabled):active,
:is(select,input,textarea).form-control:not([disabled]):not(.disabled):active,
.form-control:focus,
.form-group>input:focus,
:is(select,input,textarea).form-control:focus{
	box-shadow: inset 0px 2px 4px rgba(113, 206, 210, 0.48);
	border: 1px solid var(--Han-Purple-400);
	background-color: var(--Sapphire-100);
}

select.form-control:hover,
select.form-control:focus,
select.form-control:not([disabled]):not(.disabled):active{
	background-color: white;
}

.input-group label, .form-group label{
	padding-left: 4px;
    color: var(--Font-Lighter-Black);
    /* text-transform: uppercase; */
    font-size: 14px;
    line-height: 170%;
    letter-spacing: 0.02em;
	font-weight: 600;
}

.input-group .form-control:last-child{
	border-radius: 8px !important;
}

/*------------------------------------------------------------------------*/

/*** 3.3.2 Check boxes ***/

/*------------------------------------------------------------------------*/

/*** 3.3.3 Dropdown element ***/

/*------------------------------------------------------------------------*/

/*** 3.3.4 Text elements ***/

.info-text {
    font-size: 16px;
    border-radius: 4px;
    background-color: #C6D6FF;
    padding: 16px;
    line-height: 150%;
    margin-bottom: 16px !important;
}

/*------------------------------------------------------------------------*/

/*** 3.3.5 Calendar - Date/Month/Year picker ***/

.react-datepicker { font-size: 1em !important }
.react-datepicker__header { padding-top: 0.8em !important}
.react-datepicker__month { margin: 0.4em 1em !important}
.react-datepicker__day-name, .react-datepicker__day {
  width: 1.9em !important; 
  line-height: 1.9em !important;
  margin: 0.166em !important;
}
.react-datepicker__current-month { font-size: 1em !important }
.react-datepicker__navigation {
  top: 1em !important;
  line-height: 1.7em !important;
  border: 0.45em solid transparent !important;
}
.react-datepicker__navigation--previous { border-right-color: #ccc !important; left: 1em !important }
.react-datepicker__navigation--next { 
  border-left-color: #ccc !important; 
  right: 1em !important; 
  left: 220px !important 
}
.react-datepicker__time-container { width: 6em !important}
.react-datepicker-time__header { font-size: 1em !important }
.react-datepicker-time__header--time { padding-left: 0px !important; padding-right: 0px !important }
.react-datepicker__time-box { 
  margin-left: 0px !important; 
  margin-right: 0px !important; 
  width:100% !important
}
.react-datepicker__time-list { padding: 0 !important; }

/*------------------------------------------------------------------------*/

/*** 3.4 Box bodies ***/

.content>.table>tbody>tr>td:first-child {
    padding-left: 0 !important;
    width: 68% !important;
}

.box>.box-header {
    padding: 20px 24px 0px;
}

.box>.box-body {
    padding: 10px 24px 20px;
}

/* File links */

a[rel="noreferrer noopener"] {
    cursor: pointer;
}

/*------------------------------------------------------------------------*/

/*** 3.5 Modal windows ***/

.modal-content {
    padding: 5px;
	border-radius: 6px;
}

.modal .modal-dialog {
    width: 700px;
    max-width: 700px;
}

.modal:is(#modal-case-action,#modal-case-table,#modal-case-rules,#modal-case-rules,#modal-case-highlighting,#caseHighlightingAddModal) .modal-dialog {
    width: 800px;
    max-width: 800px;
}

.modal .modal-dialog .btn-xs {
    padding: 2px 10px;
    margin-right: 8px !important;
	background-color: white;
}

:is(.modal[id="modal-default"],.modal[id="modal-case-table"],.modal[id="modal-case-info"]) .table-bordered>tbody>tr>td:last-child,
:is(.modal[id="modal-default"],.modal[id="modal-case-table"],.modal[id="modal-case-info"]) .table-bordered>thead>tr>th:last-child {
    min-width: 220px;
}

:is(.modal[id="modal-default"],.modal[id="modal-case-table"],.modal[id="modal-case-info"]) .table-bordered>tbody>tr>td {
    padding-top: 12px;
    padding-left: 12px;
    border: 1px solid var(--Neutral-300);
}

.modal[id="modal-case-table"] .filter-value-table>tbody>tr>th:last-child,
.modal[id="modal-case-table"] .filter-value-table>thead>tr>th:last-child {
    min-width: 40px !important;
}


/* Tab styling */

.nav.nav-tabs>.nav-item {
    width: 50%;
}

.nav.nav-tabs {
    border-bottom: 1px solid #ECF1F7;
    background-color: #F4F9FF;
    margin-bottom: 16px;
    height: 64px;
}

.nav-tabs>li>a {
    height: 64px;
    text-decoration: none;
    width: auto;
    padding: 16px;
    margin-right: 0;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #17242F !important;
    font-family: Manrope, Inter;
    font-weight: 600;
    background-color: #F4F9FF;
    border-bottom-color: #ECF1F7;
}

.nav-tabs>li>a:before {
    background-image: url("img/Icon.svg");
    background-color: transparent;
    background-position: -64px -144px;
    display: inline-block;
    position: relative;
    left: -4px;
    top: 4px;
    width: 24px;
    height: 24px;
    content: "";
}

.nav-tabs>li>a:hover {
    border-color: #17242F;
    border-bottom-color: transparent;
    background-color: #FFF;
}

.nav-tabs>li>a:focus {
    border-color: #A1B3C4;
    background-color: #FFF;
    border-width: 2px;
    border-bottom-color: transparent;
    box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.16);
    margin-top: -1px;
    height: 65px;
}

.nav-tabs>li:first-child>a:before {
    background-position: -544px -264px;
}

.nav-tabs>li:nth-child(2) {
    float: right;
}

.nav-tabs>li>a, .nav-tabs>li.active>a {
    box-shadow: none;
    margin-top: 0;
}

/*------------------------------------------------------------------------*/

/*** 3.6 Snackbar ***/

/*------------------------------------------------------------------------*/

/*** 4 Home page - Dashboard ***/

/*------------------------------------------------------------------------*/

/*** 5 Case table interfaces ***/

/*------------------------------------------------------------------------*/

/*** 5.1 Case table ***/

.tabulator-selected {
    background-color: #B7C7FF;
}

.col-xs-12 .box-header >.box-header {
    padding-left: 0px;
	float: right;
}

.tabulator[tabulator-layout="fitColumns"] {
    margin-bottom: 0;
    background-color: transparent;
}

/*------------------------------------------------------------------------*/

/*** 5.1.1 Shortcut action ***/

.shortcut-button {
	float: right;
	margin-bottom: 10px;
}

.shortcut-button .btn.btn-primary {
    padding: 10px 18px;
    font-size: 16px;
	color: var(--Sapphire-600);
	border: 2px solid var(--Sapphire-600);
	background-color: var(--White);
}

.shortcut-button .btn.btn-primary:hover {
    background-color: var(--Sapphire-100);
}

.shortcut-button .btn.btn-primary:focus,
.shortcut-button .btn.btn-primary:active{
	background-color: var(--Sapphire-100);
    border: 2px solid #416BF1;
    color: #2A55DF;
    outline: none;
    box-shadow: none;
}

.shortcut-button svg.feather {
    margin-bottom: -6px;
    margin-right: 8px;
    margin-left: -4px;
}

/*------------------------------------------------------------------------*/

/*** 5.1.2 Case table toolbar ***/

/*------------------------------------------------------------------------*/

/*** 5.1.2.1 Filter menu ***/

.filter-dropdown {
    position: relative;
    display: inline-block;
    float: left;
}

.filter-dropdown .filter-dropdown-content {
    display: block;
    position: absolute;
    background-color: white;
    min-width: 270px;
    margin-top: 50px;
    box-shadow: 0 0 2.22478px rgba(0,0,0,.12);
    z-index: 2;
    padding: 12px;
    border: 1px solid #DFE6F1;
    border-radius: 8px;
}

.filter-dropdown-content a {
    padding: 12px 18px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    margin: 2px 0;
    font-size: 16px;
    line-height: 150%;
    color: #04294D;
}

.filter-dropdown-content a:hover {
    /* background-color: grey; */
}

.filter-dropdown:hover .filter-dropdown-content {
    display: block;
}

.filter-dropdown:hover .filter-btn {
    background-color: var(--Sapphire-100);
    border: 2px solid var(--Sapphire-600);
}

.filter-dropdown-title {
    color: var(--Blue-Label);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 170%;
    margin-bottom: 4px;
    margin-left: 4px;
    padding: 0;
}

i.fa.fa-times.filter-dropdown-close:before {
    cursor: pointer;
}

.filter-dropdown .filter-btn {
    float: right;
    font-size: 16px;
    line-height: 150%;
    padding: 11px 56px 11px 18px;
    cursor: default;
    background-color: #FFF;
    border-radius: 6px;
    cursor: pointer;
    color: var(--Sapphire-600);
    border: 1px solid #CCD6E1;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.filter-btn {
    position: relative;
}

.filter-btn:before {
    background-image: url("skins/img/Icons.svg");
    background-position: -1275px -318px;
    display: inline-block;
    margin-right: -24px;
    position: relative;
    top: -1px;
    left: 16px;
    float: right;
    width: 24px;
    height: 24px;
    content: "";
}

.filter-btn.filter-active:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 15px;
    width: 9px;
    height: 9px;
    background-color: #F69C97;
    border-radius: 50%;
}

.filter-dropdown-content .solid {
    border-top: 1px solid var(--Blue-20);
    margin-left: -12px;
    margin-right: -12px;
    margin-top: 10px;
}

.filter-dropdown-close {
    margin-top: -25px;
    float: right;
}

.selected-items-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
}

.filter-dropdown-content .selected-item {
    background-color: #FFF;
    border: 1px solid #E8ECF0;
    box-shadow: 0px 1px 3px 0px rgba(67, 102, 137, 0.12);
    border-radius: 16px;
    padding: 6px 12px;
    margin-bottom: 4px;
    margin-right: 4px;
    margin-left: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
}

.remove-item {
    margin-top: -1px;
    margin-left: 10px;
    cursor: pointer;
}

.css-1p3m7a8-multiValue .filter-select__multi-value__label {
    font-family: 'IBMPlexSans-Regular' !important;
    color: #14406B;
    font-size: 16px;
}

.select-metadata .filter-select__option {
    border-radius: 10px;
    padding: 7px 12px !important;
    font-size: 16px !important;
    border: 1px solid #DFE6F1;
    background-color: #FAFAFA;
    margin: 2px;
    width: 99%;
    cursor: pointer;
}

.filter-select__option:hover {
    background-color: var(--Sapphire-100);
    border: 1px solid #71CED2 !important;
    border-radius: 8px;
    color: #14406B !important;
}

.filter-select__indicator:hover {
    color: grey !important;
}

.filter-select__control {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 16%) !important;
    border-radius: 4px !important;
    border: 1px solid #A1B3C4 !important;
    margin-right: 15px;
    margin-left: 15px;
}

.filter-multiselect-title {
    color: var(--Blue-Label);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 170%;
    margin-bottom: 4px;
    margin-left: 16px;
    padding: 0;
    font-size: 14px;
}

/* All/My Cases toggle buttons */

.box-header .box-header .col-xs-5:first-child {
    width: 35%;
}

div.btn-group[aria-label="Basic example"]{
	border: 2px solid #DFE6F1;
	border-radius: 16px;
	font-weight: 600;
	margin-left: 16px;
	margin-bottom: 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-group[aria-label="Basic example"] button.btn {
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    border-radius: 13px;
    margin: 0;
    border: 0;
    /* border-radius: 12px; */
    box-shadow: none;
    z-index: 0;
}


.btn-group[aria-label="Basic example"] button.btn.btn-primary{
    background-color: #577AF9;
	color: #FFF;
}

.btn-group[aria-label="Basic example"] button.btn.btn-default {
    background-color: transparent;
}

/*------------------------------------------------------------------------*/

/*** 5.1.2.2 Search bar ***/

.box-header .box-header .col-xs-5:nth-child(2) {
    width: 50%;
    /* float: right; */
    padding-left: 16px;
    padding-right: 0;
}

input.form-control-navbar#searchText {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 6px;
    border: 1px solid #CCD6E1;
    padding: 12px 24px;
    height: 48px;
    font-size: 16px;
    color: #728CA6;
    background-color: transparent;
}

/*------------------------------------------------------------------------*/

/*** 5.1.2.3 Columns ***/

.box-header .box-header .col-xs-2 {
    width: 15%;
    float: right;
}

.dropdown .dropbtn {
    background-color: white;
    color: var(--Sapphire-600);
    padding: 12px 16px;
	font-weight: 500;
    cursor: pointer;
    border: 1px solid #DFE6F1;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown .dropdown-content {
    display: block;
    position: absolute;
    background-color: white;
    min-width: 220px;
    margin-top: 4px;
	margin-left: -100px;
    box-shadow: 0 0 2.22478px rgba(0,0,0,.12);
    z-index: 2;
    padding: 16px;
    border: 1px solid #DFE6F1;
    border-radius: 8px;
}

.dropdown-content a {
    padding: 12px 0px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    margin: 2px 0;
    font-size: 16px;
    line-height: 150%;
    color: #04294D;
}

.dropdown-content a:hover {
    background-color: var(--Sapphire-100);
    color: var(--Sapphire-700);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: var(--Sapphire-100);
    border: 2px solid var(--Sapphire-600);
    padding: 11.5px 15px;
}

.dropdown-title {
    color: #455A73;
    font-weight: 600;
    font-family: Manrope, Inter;
    letter-spacing: 0.02em;
    line-height: 170%;
    margin-bottom: 4px;
    margin-left: 4px;
}

/*------------------------------------------------------------------------*/

/*** 5.1.3 Case overview ***/

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{
	border-bottom: 0px solid transparent;
}

.tabulator-row .tabulator-cell {
    padding: 10px 14px;
    font-size: 16px;
    height: 44px !important;
}

/* In case there are no cases */
.box[state] section.content-header {
    padding: 0 0 30px 10px;
}

/*------------------------------------------------------------------------*/

/*** 5.1.3.1 Highlighting ***/

div.info-text{
	font-size: 16px;
	background-color: #C6D6FF;
}

.content>.table>tbody>tr>td:first-child .box>div.row {
    margin: 30px 30px 0px !important;
    border-radius: 4px;
    border: 1px solid transparent;
	padding: 12px;
}

.box>div.row.info-text>div{
	width: auto;
	padding: 0;
}

.box>div.row.info-text>div:first-child{
	max-height: 20px;
}

.box>div.row.info-text>div.col-md-10 {
    padding: 0 18px;
    margin-top: -2px;
    max-width: calc(100% - 48px);
    color: #243750;
}

.box>div.row.info-text>div:last-child{
    float: right;
}

div.info-text .fa-info-circle {
    font-size: 24px;
    margin-right: -4px;
	color: #173597;
}

div.row.info-text i.fa-info-circle,
div.info-text i.fa-times-circle-o{
	line-height: 20px;
	max-height: 20px;
}

div.info-text i.fa-times-circle-o:hover:before{
	cursor: pointer;
}

div.info-text i.fa-times-circle-o:hover {
    color: #EC5A51;
}

/*------------------------------------------------------------------------*/

/*** 5.1.4 Footer - Export Excel button	***/

button#export-table.btn-primary {
    padding: 10px 18px;
    font-size: 16px;
    margin-left: 0;
	margin-top: -20px;
	color: var(--Sapphire-600);
	border: 2px solid var(--Sapphire-600);
	background-color: var(--White);
}

button#export-table.btn-primary:hover {
    background-color: var(--Sapphire-100);
}

button#export-table.btn-primary:focus,
button#export-table.btn-primary:active{
	background-color: var(--Sapphire-100);
    border: 2px solid #416BF1;
    color: #2A55DF;
    outline: none;
    box-shadow: none;
}

button#export-table[disabled] {
    border: 2px solid var(--Neutral-400);
}

/*------------------------------------------------------------------------*/

/*** 5.1.5 Footer - Page numbers ***/

/*------------------------------------------------------------------------*/

/*** 5.2 Case information panel ***/

/*------------------------------------------------------------------------*/

/*** 5.3 Case history panel ***/

.box-body .col-xs-12 {
    padding-right: 0;
    padding-left: 0;
}

/*------------------------------------------------------------------------*/

/*** 5.4 Actions panel ***/

.col-xs-12 .box-body .box-body {
    padding: 0;
    margin-left: -10px;
    margin-right: -10px;
}

.col-xs-12 .box-body .box-body>span {
    margin-left: -5px;
    margin-right: 3px;
}

.col-xs-12 .box-body .box-body>p {
    margin-left: 3px;
    margin-right: 5px;
}


/*------------------------------------------------------------------------*/

/*** 5.4.1 Action buttons ***/

button.btn.btn-app {
    border: 0.626px solid rgba(223, 230, 241, 0.80);
    background-color: transparent;
    color: #455573;
    border-radius: 5px;
    padding: 18px 5px;
    height: 68px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 1.2526464462280273px 2.5052928924560547px 6.889554977416992px 0px rgba(0, 0, 0, 0.03);
}

button.btn.btn-app:hover{
    color: #4419E1;
}

button.btn.btn-app fa-file-pdf-o {
    color: #454545;
}

button.btn.btn-app i.fa.fa-file-pdf-o {
    color: inherit !important;
}

/*------------------------------------------------------------------------*/

/*** 5.4.2 Action properties ***/

/* Styling for disabled attachments for locked cases */

.cap-ul-label {
    text-transform: none !important;
}

.info-attachment-disable {
    cursor: no-drop !important;
    text-decoration: none;
}

/*------------------------------------------------------------------------*/

/*** 5.4.3 Grouping/Linked cases functionality ***/

.table>tbody>tr>td>a.inactive:before {
    background-image: url(../../img/glyphicons-archive.png);
    display: inline-block;
    opacity: 0.7;
    position: relative;
    background-size: 18px;
    background-repeat: no-repeat;
    top: 6px;
    width: 24px;
    height: 20px;
    line-height: 1.42857143;
    content: "";
}

.table>tbody>tr>td>a.inactive {
   text-decoration: none;
    opacity: 0.7;
}

.table>tbody>tr>td>a.active:before {
    background-image: url(../../img/glyphicons-link.png);
    display: inline-block;
    opacity: 0.7;
    position: relative;
    background-size: 18px;
    background-repeat: no-repeat;
    top: 6px;
    width: 24px;
    height: 20px;
    line-height: 1.42857143;
    content: "";
}

/*------------------------------------------------------------------------*/

/*** 6 User administration ***/

/*------------------------------------------------------------------------*/

/*** 6.1 Add user menu ***/

/*------------------------------------------------------------------------*/

/*** 6.2 Edit user ***/

/*------------------------------------------------------------------------*/

/*** 6.3 User list ***/

/*------------------------------------------------------------------------*/

/*** 7 Portal Settings - Admin ***/

/*------------------------------------------------------------------------*/

/*** 7.1 Overview ***/

.drag-area {
    margin-top: 10px;
    border: 2px dashed #eee;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 10px;
}

.drag-area.active {
    border: 2px solid #fff;
}

.drag-area .icon {
    font-size: 50px;
    color: #cdcbcb;
}

.drag-area header {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
}

.drag-area span {
    font-size: 25px;
    font-weight: 500;
    color: #fff;
    margin: 10px 0 15px 0;
}

.drag-area button {
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    outline: none;
    background: #fff;
    color: #5256ad;
    border-radius: 5px;
    cursor: pointer;
}

.drag-area img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.sample img {
    height: 100%;
}

.uploaded-file-list {
    list-style-type: none;
}

.skin-choose-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.skin-remove-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/*------------------------------------------------------------------------*/

/*** 7.2 Workflows ***/

/*------------------------------------------------------------------------*/

/*** 7.2.1 Add/Edit workflow ***/

/*------------------------------------------------------------------------*/

/*** 7.2.2 Case Tables admin ***/

.nav-tabs.case-tbl-modal>li:first-child>a:before {
    background-position: -496px -264px;
}

.nav-tabs.case-tbl-modal>li:nth-child(2)>a:before {
    background-position: -301px -445px;
}

.nav-tabs.case-tbl-modal>li:nth-child(3)>a:before {
    background-position: -1078px -360px;
}

.nav-tabs.case-tbl-modal>li.nav-item {
    width: 33.33%;
}

.nav-tabs.case-tbl-modal>li>a {
    width: auto;
}

/*------------------------------------------------------------------------*/

/*** 7.2.2.1 Columns admin ***/

/*------------------------------------------------------------------------*/

/*** 7.2.2.2 Filters admin ***/

/* The sorting buttons for filters do not work, so we'll hide them for now */
table#filterTable button[title="Move Up"], 
table#filterTable button[title="Move Down"] {
    display: none;
}

/*------------------------------------------------------------------------*/

/*** 7.2.2.3 Tables admin ***/

/*------------------------------------------------------------------------*/

/*** 7.2.3 Case info admin ***/

/*------------------------------------------------------------------------*/

/*** 7.2.4 Deletion rule admin ***/

/*------------------------------------------------------------------------*/

/*** 7.2.5 Highlights admin ***/

/*------------------------------------------------------------------------*/

/*** 7.3 Case tables ***/

.modal#modal-case-state button.btn.custom-btn-default {
    background-color: var(--Sapphire-100);
    border: 2px solid var(--Han-Purple-400);
    padding: 1.5px 9.5px;
    color: var(--Han-Purple-400);
}

/*------------------------------------------------------------------------*/

/*** 7.4 Case actions ***/

/*------------------------------------------------------------------------*/

/*** 7.5 Groups and roles ***/

.modal[id="modal-user-group"] div#section-header:before {
    content: "";
    display: block;
    width: calc(100% + 52px);
    margin: 16px 0 16px -26px;
    height: 1px;
    background-color: #D0D9E1;
}

.modal[id="modal-user-group"] div#select-users
:is(.col-xs-6,.form-group>label, .form-group>span.select2) {
    width: 100% !important;
}

/*------------------------------------------------------------------------*/

/*** 7.6 Super admin GUI ***/

.super-admin-title {
    color: #14406B;
    font-family: 'IBM Plex Serif';
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    margin-bottom: 6px !important;
    margin-left: 17px;
}

.select-metadata .css-1p3m7a8-multiValue {
    background-color: #FAFAFA;
    border: 1px solid #DFE6F1;
    padding: 3px 12px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
}

.super-admin-title {
    color: #14406B;
    font-family: 'IBM Plex Serif';
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    margin-bottom: 6px !important;
    margin-left: 17px;
}

.api-conf-mdl-body {
    padding-left: 50px;
}

.select-metadata {
    margin-top: 10px !important;
    margin-left: 0 !important;
}

.select-metadata .css-1p3m7a8-multiValue {
    background-color: #FAFAFA;
    border: 1px solid #DFE6F1;
    padding: 3px 12px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
}

.css-1p3m7a8-multiValue .sa-metadata-select__multi-value__label {
    font-family: 'IBMPlexSans-Regular' !important;
    color: #14406B;
    font-size: 16px;
}

.select-metadata .sa-metadata-select__option {
    border-radius: 10px;
    padding: 7px 12px !important;
    font-size: 16px !important;
    border: 1px solid #DFE6F1;
    background-color: #FAFAFA;
    margin: 2px;
    width: 99%;
    cursor: pointer;
}

.sa-metadata-select__option:hover {
    background-color: var(--Sapphire-100);
    border: 1px solid #71CED2 !important;
    border-radius: 8px;
    color: #14406B !important;
}

.sa-metadata-select__indicator:hover {
    color: grey !important;
}

.sa-metadata-select__control {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 16%) !important;
    border-radius: 4px !important;
    border: 1px solid #A1B3C4 !important;
}

.modal[id="api-config-modal"] .modal-header:before{
    background-position: -605px -319px;
    top: 5px;
}

.modal[id="api-config-modal"] .form-group .btn-primary {
    margin-left: 0 !important;
    font-size: 16px !important;
    padding: 9px 56px 9px 18px !important;
    margin-top: 4px !important;
}

.modal[id="api-config-modal"] .table-bordered {
    margin-top: -14px;
    margin-bottom: -24px;
}

/*------------------------------------------------------------------------*/

/*** 8 Miscellaneous ***/

.logo-copyright img {
    width: 20px;
    margin: -5px 5px 0 0;
}

/*------------------------------------------------------------------------*/

/*** 0 Graveyard ***/





/* Add styles for the Language Toggle button here */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 104px;
    height: 28px;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 17px; /* Make it half of the height to create a capsule shape */
    transition: 0.4s;
    background-image: url("../../img/togBG.svg");
    background-repeat: no-repeat;
 
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 50px; /* Set the width for the capsule shape */
    left: 2.2px;
    bottom: 2.2px;
    background-color: #fff;
    border-radius: 12px; /* Half of the height to match the parent capsule shape */
    transition: 0.4s;  
    background-image: url("../../img/togBtnEN.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
  
  input:checked + .slider:before {
    transform: translateX(50px); /* Move the capsule to the right */
    background-image: url("../../img/togBtnNO.svg");
  }
  
  /* End of styles for the Language Toggle button */
  
  
  .login-container {
    display: flex;
    height: 100vh;
  }
  
  
    @media (max-width: 800px) {
    .login-panel, .login-image {
      flex: 100%;
    
    }
    .login-image {
      display: none;
       /* Hide the left item */
    }
  }
  
  .login-image {
    flex: 3;
    background-color: #090979; /*Blue background color */
    background-image: url("../../img/CCM background.svg");
    background-size: cover; /* Optional: Adjust how the background image is sized */
    background-position: inherit;
    background-repeat: no-repeat;
    /* Add styles for the image here */
  }
  .login-panel {
    flex: 2;
    background-color: #fff; /* White background color */
    /* Add styles for the login panel here */
    display: flex;
    flex-direction: column;
  }



  .btn-login {
    color: #1B2331 !important;
    background-color:#51F895  !important;
    font-weight: bold !important;
}

.lockscreen-wrapper {
    background-color: #FFF;
    max-width: 526px!important;
    height: 404px!important;;
    margin: 0 auto;
    margin-top: 5%!important;
    border-radius: 20px;
    border-top: 5px solid #FFF ;
    margin: 98px auto !important;
}

.login-row{
    margin-top: 65px!important;
    background-color:#ffffff;
}

.skin-default {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-color: linear-gradient(rgba(32, 47, 62, .8),rgba(32, 47, 62, 0.8));
}

.login-page-title{
    color: #1B2331!important;
    font-size: 14px;
    font-family: "Montserrat",sans-serif;
}

.tabulator-row.warning {
    background-color: #ecea5b;
}

.tabulator-row.critical {
    background-color: #f57766;
}

.tabulator-row.info {
    background-color: #a0ee73;
}

.case-highlight-info, .case-highlight-warning, .case-highlight-critical {
    border: 1px solid;
    border-radius: 15px;
    padding: 5px;
    font-weight: bold;
}

.case-highlight-info {
    border-color: #a0ee73;
}

.case-highlight-warning {
    border-color: #ecea5b;
}

.case-highlight-critical {
    border-color: #f57766;
}

/**---------------- Case Tables --------------------------**/

.filterTabForm {
    padding-left: 15px;
    padding-right: 15px;
}

.modal .filter-value-table>tbody>tr>td:last-child,
.modal .filter-value-table>thead>tr>th:last-child{
    min-width: 0 !important;
    text-align: center;
}

.disabled-button {
    opacity: 0.65;
}

.form-group.has-error .help-block.filterTitle {
    color: #dd4b39;
}

.form-group.has-error .form-control {
    border-color: #dd4b39;
}

.input-group.has-error label {
    color: #dd4b39;
}

.input-group-btn.filter-value-btn:last-child > .btn {
    margin-left: -13px;
}

.input-group .form-control.filter-value:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 8px;
}

/**------------ skin-default styles ---------------------- **/
/*
 * Global styles add here
 * ------------
 */
 .skin-default .main-header .navbar {
    background-color: #091c6f;
  }
  .skin-default .main-header .navbar .nav > li > a {
    color: #ffffff;
  }
  .skin-default .main-header .navbar .nav > li > a:hover,
  .skin-default .main-header .navbar .nav > li > a:active,
  .skin-default .main-header .navbar .nav > li > a:focus,
  .skin-default .main-header .navbar .nav .open > a,
  .skin-default .main-header .navbar .nav .open > a:hover,
  .skin-default .main-header .navbar .nav .open > a:focus,
  .skin-default .main-header .navbar .nav > .active > a {
    background: rgba(0, 0, 0, 0.1);
    color: #f6f6f6;
  }
  .skin-default .main-header .navbar .sidebar-toggle {
    color: #ffffff;
  }
  .skin-default .main-header .navbar .sidebar-toggle:hover {
    color: #f6f6f6;
    background: rgba(0, 0, 0, 0.1);
  }
  .skin-default .main-header .navbar .sidebar-toggle {
    color: #fff;
  }
  
  /*Header color*/
  .skin-default .main-header .navbar .sidebar-toggle:hover {
    background-color: #091c4f;
  }
  @media (max-width: 767px) {
    .skin-default .main-header .navbar .dropdown-menu li.divider {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .skin-default .main-header .navbar .dropdown-menu li a {
      color: #fff;
    }
    /*Header color*/
    .skin-default .main-header .navbar .dropdown-menu li a:hover {
      background: #091c4f;
    }
  }
  /*Header color*/
  .skin-default .main-header .logo {
    background-color: #091c4f;
    color: #ffffff;
    border-bottom: 0 solid transparent;
  }
  /*Header color hover*/
  .skin-default .main-header .logo:hover {
    background-color: #3ec0e8;
  }
  
  /*Header color*/
  .skin-default .main-header .login-logo {
    background-color: transparent;
  }
  /*Header color hover*/
  .skin-default .main-header .login-logo:hover {
    background-color: transparent;
  }
  
  /* horizontal top menu background color  */
  .skin-default .main-header li.user-header {
    background-color: #091c6f;
  }
  .skin-default .content-header {
    background: transparent;
  }
  .skin-default .wrapper,
  .skin-default .main-sidebar,
  .skin-default .left-side {
    background-color: #222d32;
  }
  .skin-default .user-panel > .info,
  .skin-default .user-panel > .info > a {
    color: #fff;
  }
  .skin-default .sidebar-menu > li.header {
    color: #4b646f;
    background: #1a2226;
  }
  .skin-default .sidebar-menu > li > a {
    border-left: 3px solid transparent;
  }
  .skin-default .sidebar-menu > li:hover > a,
  .skin-default .sidebar-menu > li.active > a,
  .skin-default .sidebar-menu > li.menu-open > a {
    color: #ffffff;
    background: #1e282c;
  }
  .skin-default .sidebar-menu > li.active > a {
    border-left-color: #877040;
  }
  .skin-default .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #2c3b41;
  }
  .skin-default .sidebar a {
    color: #b8c7ce;
  }
  .skin-default .sidebar a:hover {
    text-decoration: none;
  }
  .skin-default .sidebar-menu .treeview-menu > li > a {
    color: #8aa4af;
  }
  .skin-default .sidebar-menu .treeview-menu > li.active > a,
  .skin-default .sidebar-menu .treeview-menu > li > a:hover {
    color: #ffffff;
  }
  .skin-default .sidebar-form {
    border-radius: 3px;
    border: 1px solid #374850;
    margin: 10px 10px;
  }
  .skin-default .sidebar-form input[type="text"],
  .skin-default .sidebar-form .btn {
    box-shadow: none;
    background-color: #374850;
    border: 1px solid transparent;
    height: 35px;
  }
  .skin-default .sidebar-form input[type="text"] {
    color: #666;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
  }
  .skin-default .sidebar-form input[type="text"]:focus,
  .skin-default .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: #fff;
    color: #666;
  }
  .skin-default .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    border-left-color: #fff;
  }
  .skin-default .sidebar-form .btn {
    color: #999;
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 0;
  }
  
  .tabulator-row .tabulator-cell .time-label {
      position: relative;
      margin-right: 10px;
      margin-bottom: 15px;
  }
  
  .tabulator-row .tabulator-cell .time-label .bg-green{
      padding: 5px;
      display: inline-block;
      color: #fff;
      border-radius: 4px;
      background-color: #00a65a !important;
  }
  
  .new_workflow {
      border:1px dashed #18252e;
  }
  
  .clear-button {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
  }
  
    /*CCM-339 columns settings*/
    .dropbtn {
      background-color: #dff1f1;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
  
  .info-attachment-disable {
      cursor: no-drop !important;
      text-decoration: none;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Slightly transparent white background */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading-icon {
    border: 8px solid #f3f3f3; /* Light grey background */
    border-top: 8px solid #007BFF;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
  }

  .icon-class {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon-container {
    display: flex;
    justify-content: center; 
    align-items: center;
  }
  
  .filter-dropdown-content {
    max-height: 60vh; /* Adjust the height as needed */
    overflow-y: auto;
    overflow-x: hidden;
}