/*==============================================
@@ Styles for components.
   for use on Refroute
===============================================*/



/*
* Bootstrap
*/

@media (min-width: 1440px) {
    .container {
        max-width: 1336px;
    }
}




/*-----------------------------------------------------------
* Text Styles
*
------------------------------------------------------------*/
.color-primary {
    color: var(--primary-color);
}
.color-secondary {
    color: var(--secondary-color);
}

.text-uppercase {
    text-transform: uppercase;
}

.text-bold {
    font-weight: 800;
}

/*
* Icon Text Inline
*/

.icon-text-inline {}
.icon-text-inline i.material-icons {
    color: var(--secondary-color);
    font-size: 1.24em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    margin-right: 4px;
}



/*-----------------------------------------------------------
* Buttons
*
------------------------------------------------------------*/

.ui-btn {
    position: relative;
    border: 0;
    border-radius: 35px 35px;
    padding: 8px 20px;
    margin: 0 5px;

    font-size: 12px;
    display: inline-block;

    font-weight: 600;
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;
}


.ui-btn:hover {
    background-color: var(--primary-color-darker);
    color: #fff;
}


.ui-btn.ui-btn-primary {
    background-color: var(--primary-color);
}

.ui-btn.ui-btn-primary:hover {
    background-color: var(--primary-color-darker);
    color: #fff;
}

.ui-btn.ui-btn-secondary {
    background-color: var(--secondary-color);
}

.ui-btn.ui-btn-secondary:hover {
    background-color: var(--secondary-color-darker);
    color: #fff;
}





.ui-btn.ui-btn-grey {
    background-color: var(--grey-2);
    color: #333;
}

.ui-btn.ui-btn-grey:hover {
    background-color: var(--grey-2);
    color: #333;
}


/* UI btn circle */
.ui-btn.ui-btn-circle {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    line-height: 32px;
    background-color: var(--primary-color);
    text-align: center;
    padding: 0;
    color: #fff;
}

.ui-btn.ui-btn-circle .material-icons {
    font-size: 18px;
    line-height: 42px;
}



.ui-btn.ui-btn-circle.ui-btn-grey {
    background-color: #e5e5e5;
    color: var(--secondary-color);
    transition: 0.15s all ease-in-out;
}

.ui-btn.ui-btn-circle.ui-btn-grey:hover {
    background-color: var(--grey-2);
}


/* UI Icon btn */
.ui-btn.ui-icon-btn {
    line-height: 25px;
    text-transform: uppercase;
}

.ui-btn.ui-icon-btn .text {
    display: inline-block;
}
.ui-btn.ui-icon-btn .icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0px;
}
.ui-btn.ui-icon-btn .icon .material-icons {
    display: block;
}

/* ui btn no shadow*/
.ui-btn.no-shadow {
    box-shadow: none;
}



/* Button outline */
.ui-btn.ui-btn-outline {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
}

.ui-btn.ui-btn-outline:hover {
    color: #fff;
    background-color: var(--primary-color);
}






/*-------------------------
* UI LABEL
--------------------------*/

.ui-label {
    word-spacing: initial;
    display: inline-block;
    padding: 8px var(--spacing-0-5x);
    background-color: var(--primary-color);
    color: #fff;
    margin-right: 15px;
}

.ui-label.ui-label-secondary {
    background-color: var(--secondary-color);
}

.ui-label.ui-label-secondary:hover {
    color: #fff;
}





/*
* Text and Icon Button
*/


.icon-text-btn {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--black);
    font-size: 0.85em;
    padding: 0 15px;
    margin-right: 15px;
    border-right: 1px solid ;
    height: 14px;
}
 .icon-text-btn .icon {
    color: var(--secondary-color);
    line-height: 1;
    display: inline-block;
    margin-right: 5px;
}

.icon-text-btn .icon .material-icons {
    font-size: 18px;
}







/*
* Icon Link
*/


.icon-link {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--black);
    font-size: 1em;
    height: 14px;
    padding: 2px 4px;
}

.icon-link.color-primary {
    color: var(--primary-color);
}

.icon-link.color-secondary {
    color: var(--secondary-color);
}

.icon-link .icon {
    color: var(--secondary-color);
    line-height: 1;
    display: inline-block;
    margin-right: 5px;
}

.icon-link .icon.color-primary {
    color: var(--primary-color);
}
.icon-link .icon .material-icons {
    font-size: 18px;
}







/*-----------------------------------------------------------
* Input
*
------------------------------------------------------------*/

input[type='text'].general-field,
input[type='password'].general-field,
input[type='email'].general-field,
input[type='telephone'].general-field {
    -webkit-apperance: none;
    apperance: none;
    color: var(--primary-color);
    font-weight: 500;
    border: none;
    padding: 5px 30px;
    border-radius: 35px;
    transition: 0.2s all ease-in-out;

    display: block;
    width: 100%;
}


input[type='text'].general-field:focus,
input[type='password'].general-field:focus,
input[type='email'].general-field:focus,
input[type='telephone'].general-field:focus {
    box-shadow: 0 0 1px 1px var(--secondary-color);
    outline: 0;
}




/* UI General Input */
.general-text-input {
    display: inline-block;
    background-color: #fff;
    border-radius: 20px;
    max-width: 256px;
    width: 100%;
    overflow: hidden;

    margin-bottom: 8px;
    margin-right: 8px;
}


.general-text-input.general-text-input-block {
    margin-bottom: 0;
    margin-right: 0;
    max-width: 100%;
}




.general-text-input.not-round {
    border-radius: 0;
}

.general-text-input:focus-within {
    box-shadow: 0 4px 5px 0px rgba(0,0,0,0.095);
}

.general-text-input input,
.general-text-input textarea {
    width: 100%;
    apperance: none;
    border: none;
    font-size: 16px;
    padding: 10px var(--spacing-2x);
    outline: none;
    display: block;
    color: var(--black);
}


.general-text-input.block {
    max-width: 100%;
}




.general-text-input.input-icon input,
.general-text-input.input-icon textarea {
    padding-left: 42px;
    position: relative;
}

.general-text-input.input-icon {
    position: relative;
}
.general-text-input.input-icon::before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 21px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "search";
    color: var(--secondary-color);
    z-index: 1;
}


.general-text-input.input-icon.icon-marker::before {
    content: "place";
}

/*
* Selection input
*/


.selection-input-container {
    position: relative;
}

.selection-input-container > .selection-box {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);

    display: none;
}

.selection-input-container > .selection-box.active {
    display: block
}

.selection-input-container > .selection-box ul {
    list-style-type: none;
    padding: 0;
}

.selection-input-container > .selection-box ul li > a {
    padding: 5px 10px;
    display: block;

}

.selection-input-container > .selection-box ul li > a:hover {
    background: var(--grey-1);
}





/*
* Dynamic Selection Input
*/


/*
* Dynamic input select | Chosen
*/



.general-select-group-dynamic {
    background-color: #fff;
    padding: 0 15px;
    border-radius: 30px;
    transition: 0.2s all ease-in-out;
}


.general-select-group-dynamic:focus-within {
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.25);
    transition: 0.2s all ease-in-out;
}

.general-select-group-dynamic .select-container:focus-within {
    outline: 1px dotted #ccc;
}


.general-select-group-dynamic select {
    width: 100%;
}


.general-select-group-dynamic.full-width {
    display: block;
}
.general-select-group-dynamic.full-width .select-container {
    width: 100%;
    display: inline-block;
}
.general-select-group-dynamic.full-width .select-container select {
    width: 100%;
}


.general-select-group-dynamic .select-container {
    display: inline-block;
    margin: 8px 0;
}

.general-select-group-dynamic .select-container select {
    padding-left: 15px;
    padding-right: 15px;
}

.general-select-group-dynamic .select-container {
    border-left: 1px solid #ccc;
}

.general-select-group-dynamic .select-container:first-child {
    border-left: 0;
}


.general-select-group-dynamic .chosen-container {
    font-size: 16px;
}
.general-select-group-dynamic .chosen-container-single .chosen-single {
    background-color: #fff;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600;
    padding: 0px 5px;
    height: 25px;
}

.general-select-group-dynamic .chosen-container-single .chosen-single::after {
    content: "keyboard_arrow_down";
    padding-right: 5px;
    font-family: 'Material Icons';
    color: var(--secondary-color);
    font-size: 17px;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


.general-select-group-dynamic .chosen-container-single .chosen-drop {
    background-color: #fff;
    border: none;
    border-radius: 5px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    margin-top: 5px;

}

.general-select-group-dynamic .chosen-container-single .chosen-drop .chosen-results li {
    padding: 5px 5px;
}
.general-select-group-dynamic .chosen-container-single .chosen-drop .chosen-results li.highlighted {
    background-color: var(--secondary-color);
    background-image: none;
}


.general-select-group-dynamic.general-select-bg-transparent {
    background-color: transparent;
}


.general-select-group-dynamic.general-select-bg-transparent:focus-within {
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.25);
    transition: 0.2s all ease-in-out;
}





/*
* Selection Dropdown Secondary
*/


/*
* Dynamic input select | Chosen
*/



.selection-dropdown-dynamic {
    background-color: #fff;
    padding: 8px 20px ;
    padding: 0px 20px !important;
    border-radius: 30px;
    transition: 0.2s all ease-in-out;
    overflow: visible !important;
    font-size: 14px;
    color: #fff;
}



.selection-dropdown-dynamic::before {
    content: "";
    display: none;
    color: var(--secondary-color);
}

.selection-dropdown-dynamic.primary::before {
    content: "";
    display: none;
    color: var(--primary-color);
}



body .selection-dropdown-dynamic:hover::after {
    color: var(--secondary-color);
}

body .selection-dropdown-dynamic.primary:hover::after {
    color: var(--primary-color);
}



body .selection-dropdown-dynamic:hover {
    background-color: #ffffff !important;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.25);
    transition: 0.2s all ease-in-out;
    font-size: 14px;
    color: var(--secondary-color);
}

body .selection-dropdown-dynamic.primary:hover {
    background-color: #ffffff !important;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.25);
    transition: 0.2s all ease-in-out;
    font-size: 14px;
    color: var(--primary-color);
}

.selection-dropdown-dynamic:hover {
    outline: 1px dotted #ccc;
}



.selection-dropdown-dynamic  select {
    padding-left: 15px;
    padding-right: 15px;
}

.selection-dropdown-dynamic  {
    border-left: 1px solid #ccc;
}



.selection-dropdown-dynamic  {
    font-size: 16px;
}

.selection-dropdown-dynamic .chosen-container-single {
    padding: 8px 0;
    z-index: 1;
}
.selection-dropdown-dynamic .chosen-container-single .chosen-single {
    background-color: #fff;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    font-weight: 600;
    padding: 0px 5px;
    height: 25px;
}


.selection-dropdown-dynamic .chosen-container-single .chosen-drop {
    background-color: #fff;
    border: none;
    border-radius: 5px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    margin-top: 10px;

}

.selection-dropdown-dynamic .chosen-container-single .chosen-drop .chosen-results li {
    padding: 5px 5px;
}
.selection-dropdown-dynamic .chosen-container-single .chosen-drop .chosen-results li.highlighted {
    background-color: var(--secondary-color);
    background-image: none;
}

.selection-dropdown-dynamic.primary .chosen-container-single .chosen-drop .chosen-results li.highlighted {
    background-color: var(--primary-color);
}


.selection-dropdown-dynamic .chosen-container-single .chosen-single span {
    margin-right: 0;
}




/*---------------------------------------
* Outline Text Input
----------------------------------------*/


.outline-text-input {
    position: relative;
    display:inline-block;
    border-bottom: 1px solid var(--primary-color);
    padding-left: 36px;
    font-size: 14px;
}

.outline-text-input .material-icons {
    position: absolute;
    left: 0;
    color: var(--primary-color);
    top: 50%;
    transform: translateY(-50%);

}

.outline-text-input input {
    border: none;
    background-color: transparent;
    font-size: 16px;
    padding: 5px 0;
    color: var(--primary-color);
    outline: 0;
}



.outline-text-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--primary-color);
}
.outline-text-input input::-moz-placeholder { /* Firefox 19+ */
  color: var(--primary-color);
}
.outline-text-input input:-ms-input-placeholder { /* IE 10+ */
  color: var(--primary-color);
}
.outline-text-input input:-moz-placeholder { /* Firefox 18- */
  color: var(--primary-color);
}






/*
* Select Input
*/



.input-inline-group {
    display: block;
}

.input-inline-group .general-select-group {
    display: inline-block;
}

.general-select-group {
    background-color: #fff;
    border-radius: 20px;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 4px 5px 0px rgba(0,0,0,0.0);
    margin-right: 20px;

}

.general-select-group:focus-within {
    box-shadow: 0 4px 5px 0px rgba(0,0,0,0.095);
}

.general-select-group .select-container {
    position: relative;
    display: inline-block;
    margin: 8px 0;
    padding-left: 5px;
    padding-right: 5px;
}

.general-select-group select {
    border: none;
    font-size: 16px;
    display: inline-block;
    padding: 0 10px;
    padding-right: 25px;
    text-align: center;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    background: none;

    font-weight: 600;
}
.general-select-group select option {
    font-weight: 600;
}

.general-select-group  .select-container {
    border-right: 1px solid #ccc;
}
.general-select-group .select-container:last-child  {
    border-right: 0;
}

.general-select-group  .select-container::after {
    content: "keyboard_arrow_down";
    padding-right: 5px;
    font-family: 'Material Icons';
    color: var(--secondary-color);
    font-size: 17px;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}





/*-------------------------------------------
* Custom Select - 2
--------------------------------------------*/

.custom-select-dropdown {
    position: relative;
    display: inline-block;
    background-color: var(--primary-color);
    text-align: center;
    padding: 0px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
    overflow: hidden;
}

.custom-select-dropdown.secondary {
    background-color: var(--secondary-color);
}

.custom-select-dropdown::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.05);
    opacity: 0;
}


.custom-select-dropdown::after {
    content: "keyboard_arrow_down";
    padding-right: 5px;
    font-family: 'Material Icons';
    color: #fff;
    font-size: 17px;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}


.custom-select-dropdown:focus-within::before {
    opacity: 1;
}

.custom-select-dropdown > select {
    position: relative;
    display: block;
    text-transform: uppercase;
    color: #fff;
     border: none;
    font-size: 12px;
    display: inline-block;
    padding: 10px 10px;
    padding-right: 20px;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    background: none;
    font-weight: 600;
    text-align: center;
}

.custom-select-dropdown > select option {
    text-align: center;
    color: #333;
}







/*
* Custom Form Input Messages
*/


.form-input-message {
    font-size: 0.85em;
    margin: 0;
    padding: 0px 0;
    margin-top: 5px;
    line-height: 1.2;
}

.form-input-message.error {
    color: var(--error-color);
}

.form-input-message.success {
    color: var(--success-color);
}

.form-input-message.warning {
    color: var(--warning-color);
}






/*------------------------------
* Bootstrap New Tooltip
-------------------------------*/
.tooltip-new.show {
    opacity: 1;
}

.tooltip-new .tooltip-inner {
    background-color: #F2F2F2;
    color: var(--black);
    padding: 10px 5px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}


.tooltip-new.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip-new.bs-tooltip-right .arrow::before {
    border-right-color: #F2F2F2;
}


.tooltip-new.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip-new.bs-tooltip-left .arrow::before {
    border-right-color: #F2F2F2;
}

.tooltip-new.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip-new.bs-tooltip-top .arrow::before {
    border-top-color: #F2F2F2;
}


.tooltip-new.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip-new.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #F2F2F2;
}



/*------------------------------
* Bootstrap New Popover
-------------------------------*/
.popover.popover-new {
    background-color: #F2F2F2;
    font-size: 14px;
    border: 1px solid rgba(0,0,0,.1);
}
.popover.popover-new .popover-header {
    background-color: transparent;
    border-bottom: none;
    padding:;
    font-weight: 400;
    font-size: 16px;
}

/*-----------------------------------------------------------
* UI Message Component
*
------------------------------------------------------------*/
.ui-message-component {
    position: relative;
    border: 1px solid var(--primary-color);
    padding: 5px 10px;
    display: flex;
    align-items:center;
    vertical-align: middle;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.8);
}

.ui-message-component .icon {
    min-width: 18px;
    min-height: 18px;
    margin-right: 15px;
}
.ui-message-component .icon .material-icons {
    display: block;
    font-size: 18px;
}

.ui-message-component .message {
    vertical-align: middle;
}

/* error */
.ui-message-component.error {
    border: 1px solid var(--error-color);
    color: var(--error-color);
    background-color: var(--error-color-light);
}



/* success */
.ui-message-component.success {
    border: 1px solid var(--success-color);
    color: var(--success-color);
    background-color: var(--success-color-light);
}


/* warning */
.ui-message-component.warning {
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
    background-color: var(--warning-color-light);
}


/* progress */
.ui-message-component.progress {
    border: 1px solid var(--progress-color);
    color: var(--progress-color);
    background-color: var(--progress-color-light);
}


/*------------------------------------------
* Custom Label Checkbox
------------------------------------------*/

.custom-checkbox-label {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    padding: 10px;
}

.custom-checkbox-label input {
    display: none;
}

.custom-checkbox-label span {
    vertical-align: middle;
}

.custom-checkbox-label .checkbox-inner {
    width: 16px;
    height: 16px;
    border: 2px solid ;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}


.custom-checkbox-label input:checked + .checkbox-inner {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTkgMTYuMkw0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40TDkgMTYuMnoiLz48L3N2Zz4=);
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDQyLjUzMyA0NDIuNTMzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDIuNTMzIDQ0Mi41MzM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNDM0LjUzOSw5OC40OTlsLTM4LjgyOC0zOC44MjhjLTUuMzI0LTUuMzI4LTExLjc5OS03Ljk5My0xOS40MS03Ljk5M2MtNy42MTgsMC0xNC4wOTMsMi42NjUtMTkuNDE3LDcuOTkzTDE2OS41OSwyNDcuMjQ4ICAgbC04My45MzktODQuMjI1Yy01LjMzLTUuMzMtMTEuODAxLTcuOTkyLTE5LjQxMi03Ljk5MmMtNy42MTYsMC0xNC4wODcsMi42NjItMTkuNDE3LDcuOTkyTDcuOTk0LDIwMS44NTIgICBDMi42NjQsMjA3LjE4MSwwLDIxMy42NTQsMCwyMjEuMjY5YzAsNy42MDksMi42NjQsMTQuMDg4LDcuOTk0LDE5LjQxNmwxMDMuMzUxLDEwMy4zNDlsMzguODMxLDM4LjgyOCAgIGM1LjMyNyw1LjMzMiwxMS44LDcuOTk0LDE5LjQxNCw3Ljk5NGM3LjYxMSwwLDE0LjA4NC0yLjY2OSwxOS40MTQtNy45OTRsMzguODMtMzguODI4TDQzNC41MzksMTM3LjMzICAgYzUuMzI1LTUuMzMsNy45OTQtMTEuODAyLDcuOTk0LTE5LjQxN0M0NDIuNTM3LDExMC4zMDIsNDM5Ljg2NCwxMDMuODI5LDQzNC41MzksOTguNDk5eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    background-position: center;
}


/*
*
*/
.information-tooltip-icon {
    display: inline-block;
    vertical-align: middle;
    color: var(--secondary-color);
}

.information-tooltip-icon .material-icons {
    font-size: 14px;
}



/*-----------------------------------------------------------
* JS Tab Component
*
------------------------------------------------------------*/


.js-tabbed-content {}

.js-tabbed-content [data-tab-content] {
    display: none;
    animation: jsContentTabFade 0.15s linear;
}

.js-tabbed-content [data-tab-content].active {
    display: block;

}

@keyframes jsContentTabFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}










/*---------------------------------
* Custom Checkbox Btn Group
----------------------------------*/


.btn-group.ui-group-toggle > .btn {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--black);
    margin: 0;
    border-right-width: 0;
    box-shadow: none;
}

.btn-group.ui-group-toggle.primary > .btn {
    border-color: var(--primary-color);
}
.btn-group.ui-group-toggle.secondary > .btn {
    border-color: var(--secondary-color);
}




.btn-group.ui-group-toggle > .btn:hover,
.btn-group.ui-group-toggle > .btn.active {
    background-color: var(--primary);
    color: #fff;
}


.btn-group.ui-group-toggle.primary > .btn:hover,
.btn-group.ui-group-toggle.primary > .btn.active {
    background-color: var(--primary-color);
    color: #fff;
}


.btn-group.ui-group-toggle.secondary > .btn:hover,
.btn-group.ui-group-toggle.secondary > .btn.active {
    background-color: var(--secondary-color);
    color: #fff;
}


.btn-group.ui-group-toggle >.btn:not(:first-child):last-child {
    border-right-width: 2px !important;
}




/*--------------------------------
* Rounded Label
--------------------------------*/


.rounded-label {
    background-color: #f8f8f8;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
}

.rounded-label.primary {
    background-color: var(--primary-color);
}
.rounded-label.secondary {
    background-color: var(--secondary-color);
}


.rounded-label.grey-1 {
    background-color: var(--grey-1);
}
.rounded-label.grey-2 {
    background-color: var(--grey-2);
}

.rounded-label.grey-3 {
    background-color: var(--grey-3);
}
.rounded-label.grey-4 {
    background-color: var(--grey-4);
}



.rounded-label.icon::before {
    content: "";
    display: inline-block;
    width: 22px;

    height: 18px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.rounded-label.icon.icon-users::before {
    background-color: transparent;
    background-image: url(../img/icons/secondary/users.svg);
}






/*--------------------------------
* List item edit component
--------------------------------*/



.list-edit-items {
    padding: 0;
    list-style-type: none;
}

.list-edit-items > li.item {
    position: relative;
    padding: var(--spacing-1x) var(--spacing-1x);
    margin-bottom: var(--spacing-1x);
}
.list-edit-items > li.item:last-child {
    margin-bottom: 0;
}

.list-edit-items > li.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--spacing-1x);
    right: var(--spacing-1x);
    background: var(--primary-color);
    height: 1px;
    opacity: 0.5;
}

.list-edit-items > li.item .edit-inner-section::after {
    opacity: 0;
}

.list-edit-items > li.item .edit-inner-section {
    padding-bottom: 0;
    margin-bottom: 0;
    padding: 0;
}

.list-edit-items > li.item:last-child::after {
    opacity: 0;
}

.list-edit-items li.item .item-header {
    margin-bottom: var(--spacing-0-5x);
}

.list-edit-items li.item .item-header .item-header-inner {
    display: flex;
    align-items: center;
}
.list-edit-items li.item .item-header .image {
    width: 100px;
    height: 100px;

    min-width: 100px;
    min-height: 100px;
    align-self: flex-start;

    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--spacing-2x);

}
.list-edit-items li.item .item-header .image img {
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.list-edit-items li.item .item-header .details {

}

.list-edit-items li.item .item-header .details .title {
    color: var(--black);
    font-size: 1.75em;
    font-weight: 300;
}

.list-edit-items li.item .item-header .details .tagline {
    color: var(--black);
    font-size: 1.35em;
    font-weight: 300;
}



.list-edit-items li.item .item-header .from-label {
    background: #fd8717;
    color: #fff;
    text-align: center;
    padding: 8px var(--spacing-0-5x);
    display: inline-block;
    border-radius: 40px;
    font-size: 10px;
    position: absolute;
    top: 8px;
    right: 40px;
    font-weight: 600;
}


.list-edit-items .item-edit-btn {
    position: absolute;
    right: -45px;
    top: 20px;
    transform: translateX(0%);
}





/*
* List View Component
*/


/*--------------------------------
* List item edit component
--------------------------------*/



.list-view-items {
    padding: 0;
    list-style-type: none;
}

.list-view-items > li.item {
    position: relative;
    padding: var(--spacing-1x) var(--spacing-1x);
    margin-bottom: var(--spacing-1x);
}
.list-view-items > li.item:last-child {
    margin-bottom: 0;
}

.list-view-items > li.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--spacing-1x);
    right: var(--spacing-1x);
    background: var(--primary-color);
    height: 1px;
    opacity: 0.5;
}

.list-view-items > li.item .edit-inner-section::after {
    opacity: 0;
}

.list-view-items > li.item .edit-inner-section {
    padding-bottom: 0;
    margin-bottom: 0;
    padding: 0;
}

.list-view-items > li.item:last-child::after {
    opacity: 0;
}

.list-view-items li.item .item-header {
    margin-bottom: var(--spacing-0-5x);
}

.list-view-items li.item .item-header .item-header-inner {
    display: flex;
    align-items: center;
}
.list-view-items li.item .item-header .image {
    width: 100px;
    height: 100px;

    min-width: 100px;
    min-height: 100px;
    align-self: flex-start;

    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--spacing-2x);

}
.list-view-items li.item .item-header .image img {
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.list-view-items li.item .item-header .details {

}

.list-view-items li.item .item-header .details .title {
    color: var(--black);
    font-size: 1.75em;
    font-weight: 300;
}

.list-view-items li.item .item-header .details .tagline {
    color: var(--black);
    font-size: 1.35em;
    font-weight: 300;
}



.list-view-items li.item .item-header .from-label {
    background: #fd8717;
    color: #fff;
    text-align: center;
    padding: 8px var(--spacing-0-5x);
    display: inline-block;
    border-radius: 40px;
    font-size: 10px;
    position: absolute;
    top: 8px;
    right: 40px;
    font-weight: 600;
}


.list-view-items .item-edit-btn {
    position: absolute;
    right: -45px;
    top: 20px;
    transform: translateX(0%);
}












/*------------------------
* Labels Component
------------------------*/


.labels-block {
    padding: 15px 0;
    word-spacing: -4px;
}

.labels-block .label-tag {
    position: relative;
    background: var(--secondary-color);
    color: #fff;
    display: inline-block;
    padding: 8px 15px;
    padding-right: 35px;
    cursor: auto;
    font-weight: 600;
    margin: 2px 0;
    margin-right: 4px;
    word-spacing: initial;
}

.labels-block .label-tag i.discard {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--black);
}

.labels-block .label-tag i.discard:hover {
    color: red;
}


.labels-block .label-tag.label-tag-2 {
    border: 2px solid var(--secondary-color);
    background-color: transparent;
    color: var(--secondary-color);
    border-radius: 5px;
    font-weight: 400;
    font-size: 12px;
    padding: 5px 12px;
    padding-right: 20px;
    margin-right: 15px;
}

.labels-block .label-tag.label-tag-2 span {
    color: var(--black);
    word-spacing: initial;
}

.labels-block .label-tag.label-tag-2 i.discard {
    font-size: 12px;
    font-weight: 700;
}


/*-----------------------------------
* Right sidebar and widgets
-----------------------------------*/

#right-sidebar {
    margin-top: var(--spacing-2x);
}


/* Sidebar Widget */
.sidebar-widget .sidebar-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--primary-color);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--primary-color);
}








/*---------------------------------
* Connection Cards Group
-----------------------------------*/

.card-style-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 40px;
    align-items: flex-start;
}




@media ( min-width: 768px ) {
    .card-style-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-gap: 20px 40px;
    }

    .card-style-grid.card-grid-2 {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 40px;
        align-items: flex-start;
    }
}


@media ( min-width: 1200px ) {
    .card-style-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-gap: 20px 40px;
    }

    .card-style-grid.card-grid-2 {
        grid-template-columns: 1fr 1fr;
        align-items: flex-start;
    }


}


/* Row */
.connection-cards-grid.card-style-list {
    display: grid;
    grid-gap: 20px 40px;
}

/*---------------------------------
* Connection Cards
-----------------------------------*/


.connection-card  {
    position: relative;
    margin: 0 auto;
    display: block;
    width: 100%;
}


.connection-card .con-card-header p {
    margin: 0;
}

.connection-card .con-card-header {
    padding-top: 15px;
}

.connection-card .con-card-header .text {
    padding: 15px;
    text-align: center;
    font-size: ;
}

.connection-card .con-card-header .text .name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}


.connection-card {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 5px;
    color: var(--black);
}

.connection-card .avatar-image {
    /*max-width: 110px;*/
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.connection-card .avatar-image img {
    max-width: 100%;
}


.connection-card .con-card-meta {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
}


.con-card-meta .mutuals-count {
    position: absolute;
    left: 0;
    background-color:var(--grey-4);
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
}



.con-card-meta .con-card-menu {
    position: absolute;
    right: 0;
    top: 0;
}

.con-card-meta .con-card-menu .con-menu-btn {
    width: 32px;
    height: 32px;
    display: block;
    background-image: url('../img/icons/primary/dot-menu.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;
}

.con-card-meta .con-card-menu .con-menu-btn:hover {
    background-color: var(--grey-1);
}









.connection-card .con-card-actions {
    display: flex;
    border-top: 2px solid #f6f7f8;

}

.connection-card .con-card-actions > .card-action {
    padding: 15px 10px;
    display: block;
    width: 100%;
    text-align: center;

    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
}


.connection-card .con-card-actions > .card-action:hover {
    background-color: var(--grey-1);
}


.connection-card .con-card-actions > .card-action {
    text-indent: -999999px;
}

.connection-card .con-card-actions.btns-2 > .card-action:first-child {
    border-right: 1px solid #f6f7f8;
}
.connection-card .con-card-actions.btns-2 > .card-action:nth-child(2n) {
    border-left: 1px solid #f6f7f8;
}



.con-card-actions .card-action.card-action-accept {
    background-image: url("../img/icons/secondary/folder-tick.svg");
}

.con-card-actions .card-action.card-action-message {
    background-image: url("../img/icons/secondary/chat-icon.svg");
}


.con-card-actions .card-action.card-action-connect {
    background-image: url("../img/icons/secondary/two-arrows.svg");
}

.con-card-actions .card-action.card-action-draftaccept {
    background-image: url("../img/icons/secondary/Group_584.svg");
}

.con-card-actions .card-action.card-action-draftclose {
    background-image: url("../img/icons/secondary/Group_586.svg");
}

.con-card-actions .card-action.card-action-close {
    background-image: url("../img/icons/secondary/close-icon.svg");
}



/* Dropdown Con card actions */
.con-card-actions .dropdown-item {
    transition: 0.1s all ease-in-out;
}


.con-card-actions .dropdown-item:hover {
    color: #333;
    text-decoration: none;
    background-color: var(--grey-1);
}

.con-card-actions .dropdown-item.active,
.con-card-actions .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--secondary-color);
}

.con-card-actions .dropdown-menu {
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}








/*
* Page top tabs - main
*/

/*
*  connection top tabs
*/


.page-top-tabs {
    position: relative;
    margin-bottom: var(--spacing-2x);
    margin-top: var(--spacing-1x);
}

.page-top-tabs > ul {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--primary-color);
}

.page-top-tabs > ul > li {
    margin-right: 30px;
}
.page-top-tabs > ul > li > a {
    font-size: 16px;
    padding: 10px ;
    color: var(--black);
    display: inline-block;
    border-bottom: 3px solid transparent;
    position: relative;
    top: 2px;
}

.page-top-tabs > ul > li:first-child > a {
    padding-left: 0;
}

.page-top-tabs > ul > li:focus-within > a,
.page-top-tabs > ul > li:hover > a,
.page-top-tabs > ul > li.active > a {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--secondary-color);
}



/*---------------------------------------------
* Custom Code
* Chat Functionality
----------------------------------------------*/



/* Entire frame */
.referoute-chat {
    position: fixed;
    bottom: 0;
    top: 0;
    /*left: 0;*/
    right: 0;
    background-color: rgba(255,255,255,0.75);
    z-index: 97;
}



/* Chat list pop-out right */
.chat-list-popout {
    position: absolute;
    right: 0;
    right: 0;
    top: 76px;

    min-width: 460px;
    height: calc(100vh-76px);
    z-index: 9999;
    background-color: #fff;

    box-shadow: 0 -2px 6px rgba(0,0,0,0.245);

    overflow: auto;
}


.chat-list-popout .inner {
    padding: var(--spacing-1x);
    overflow-y: auto;
    max-height: calc(100vh - 76px);
}


.chat-list-popout .inner .chat-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-0-5x) 0;
    margin-bottom: var(--spacing-1x);
}

.chat-list-popout .inner .chat-list-header > div {
    width: 50%;
}

.chat-list-popout .inner .chat-list-header .users-name {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}
.chat-list-popout .inner .chat-list-header .right-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.user-availability-toggler .toggler-container {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-1x);
}
.user-availability-toggler .toggler-container .custom-toggle-container {
    margin-right: 3px;
}

.chat-list-popout .inner .chat-list-header .settings-cog {
    align-items: center;
    line-height: 1;
    color: var(--black);
}

.chat-list-popout .inner .chat-list-header .settings-cog .settings-icon-chat {
    display: inline-block;
}






/* Custom Online / Offline Toggler */

.custom-toggle-style {
  position: relative;
  display: block;
  width: 50px;
  height: 24px;
  border: 2px solid #8d8d8d;
  margin: 0 auto;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
}

.custom-toggle-container input {
  display: none;
}

.custom-toggle-style .toggle-oval {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0px;
  bottom: 0px;
  left: 2px;
  background-color: #bfbfbf;
  border-radius: 20px;
  transition: 0.2s all ease-in-out;
}


.custom-toggle-container  input[type="checkbox"]:checked + .custom-toggle-style .toggle-oval {
  left: 26px;
  background-color: #67d839;
}


.custom-toggle-container  input[type="checkbox"]:checked + .custom-toggle-style {
   background: #fff;
   border-color: #67d839;
}

.toggle-state-alt {
  color: #15161e;
  font-weight: 700;
}

.toggle-state-alt .toggle-label-online {
  color: #67d839;
}




/*
* Chat list box - header search
*/

.chat-list-popout  .chat-list-search {
    margin-bottom: 30px;
}

.chat-list-popout  .chat-list-search .search-box-outer {
    position: relative;
    border-bottom: 2px solid #ccc;
    padding-left: 36px;
}

.chat-list-popout  .chat-list-search .search-box-outer input {
    width: 100%;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    outline: none;
    font-size: 16px;
}

.chat-list-popout  .chat-list-search .search-box-outer input {}


.chat-list-popout  .chat-list-search .search-box-outer i.material-icons {
    position: absolute;
    left: 0;
    color: var(--primary-color);
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: var(--black);
}



/*
* Chat List Group
*/

.chat-list-container {}
.chat-list-container .chat-list-group {
    padding: 15px 0;
    margin-bottom: 30px;
}

.chat-list-container .chat-list-group .list-label {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.chat-list-group .chat-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.chat-list-group .chat-list li:not(:last-child) {
    border-bottom: 2px solid #eee;
}


.chat-list-group .chat-list li.chat-person-item {
    position: relative;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
}

.chat-list-group .chat-list li.chat-person-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.chat-list-group .chat-list li.chat-person-item:hover {
    background-color: var(--grey-1);
}

.chat-list-group .chat-list li .person-list-item {
    display: flex;
    align-items: center;
    position: relative;
}

.chat-list-group .chat-list li  .profile-avatar {
    position: relative;
}
.chat-list-group .chat-list li  .profile-avatar .avatar-inner {
    width: 46px;
    height: 46px;
    border: 0px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    position: relative;
    background-color: #fff;
    /*background-color: var(--secondary-color);*/
}


.chat-list-group .chat-list li  .profile-avatar .avatar-inner > span {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    font-weight: 700;
    color: #fff;
}


.chat-list-group .chat-list li  .profile-avatar .status-indicator {
    position: absolute;
    bottom: 2px;
    right: 17px;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    text-indent: -9999999px;
    border: 1px solid rgba(0,0,0,0.15);
}

.status-indicator {
    background-color: var(--grey-4);
}
.status-indicator.online {
    background-color:  #29fd17;;
}
.status-indicator.idle {
    background-color:  #fd8717
;
}



.chat-list-group .chat-list li  .profile-avatar  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chat-list-group .chat-list li .item-right-col .profile-name {
    font-weight: 600;
}






/*------------------------------------------------
* Chat Cards
*
-------------------------------------------------*/

.referoute-chat-cards {
    position: fixed;
    /*z-index: 99;*/
    bottom: 0;

    left: 0;
    right: 0;

    display: flex;
    overflow-y: auto;

    align-items: flex-end;

    right: 460px; /* Same as the width + 40 of the chatlist box, set this to 0 when chatlist is closed. */
    margin-right: 20px;
    margin-left: 20px;
    display: flex;
    overflow-y: auto;
    align-items: flex-end;
    overflow-x: auto;


    /*height: 0;*/
}


.chat-box-container {
    min-width: 323px;
    margin-right: 10px;
    box-shadow: 0px -1px 5px rgba(0,0,0,0.15);
    border-radius: 5px 5px 0 0;

    margin-top: 10px;
    margin-left: 10px;

    background-color: #fff;
}


.chat-box-container .chat-box-header {
    border: 1px solid #e5e5e5;
    border-bottom-width: 2px;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
}

.chat-box-container.minimized .chat-box-header:hover {
    background-color: var(--grey-1);
    cursor: pointer;
}

.chat-box-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}

.chat-box-header .inner .chat-info {
    display: flex;
    align-items: center;
}

.chat-box-header .inner .chat-info .chat-user-avatar {
    width: 42px;
    height: 42px;
    position: relative;
    margin-right: 8px;

}

.chat-info .chat-user-avatar .user-avatar-inner {
    border-radius: 50%;
    overflow: hidden;
    width: 42px;
    height: 42px;
    background-color: var(--secondary-color);
}
.chat-info .chat-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}
.chat-user-avatar .user-avatar-inner > span {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    font-weight: 700;
    color:#fff ;
}


.chat-user-avatar .status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    text-indent: -9999999px;
    border: 1px solid rgba(0,0,0,0.15);
}


.chat-box-header .chat-info .chat-name {
    font-size: 14px;
    max-width: 130px;
    min-width: 130px;
}

.chat-info .chat-name .title {
    font-weight: 600;
    color: var(--black);
    /* Ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-info .chat-name .secondary-text {
    font-size: 12px;
}


.chat-box-header .chat-actions {
    line-height: 1;
    margin-left: 20px;
}

.chat-box-header .chat-actions .chat-action-icons {
    display: flex;
}

.chat-actions .chat-action-icons > a {
    display: block;
    margin-left: 5px;
    color: #929292;
    padding-left: 2px;
    padding-right: 2px;

}

.chat-actions .chat-action-icons > a i.material-icons {
    font-size: 21px;
}

.chat-actions .chat-action-icons > a:hover {
    color: var(--primary-color);
}


/* Showing icons based on condition */
.chat-actions .chat-action-icons > a.action-close,
.chat-actions .chat-action-icons > a.action-title,
.chat-actions .chat-action-icons > a.action-add,
.chat-actions .chat-action-icons > a.action-close  {
    display: none;
}

.chat-box-container.expanded .chat-actions .chat-action-icons > a.action-add,
.chat-box-container.expanded .chat-actions .chat-action-icons > a.action-title {
    display: block;
}




.chat-box-container.minimized .chat-actions .chat-action-icons > a.action-minimize {
    display: none;
}
.chat-box-container.minimized .chat-actions .chat-action-icons > a.action-close {
    display: block;
}


/* Chatbox main */
.chat-box-main {
    min-height: 320px;
    max-height: 320px;
    position: relative;
    background-color: #fff;

}

.chat-box-main .inner {
    padding: 8px 16px;
    background-color: #fff;
    min-height: 100%;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}





.chat-text-group .chat-text-bubble {
    font-size: 12px;
    margin: 5px 0;
    display: block;
    text-align: left;
    color: var(--black);
}

.chat-text-group .chat-text-bubble .text-bubble-inner {
    background-color:#daefff;;
    border-radius: 5px;
    padding: 5px 12px;
    display: inline-block;
}

.chat-text-group .sender-span,
.chat-text-group-info {
    font-size: 10px;
    font-weight: 600;
    color: #929292;
    display: block;
    opacity: 0.8;
}


/* Text self */

.chat-text-self {
    text-align: right;
}

.chat-text-self .chat-text-bubble {
    text-align: right;
}

.chat-text-self .chat-text-bubble .text-bubble-inner {
    background-color: #e5e5e5;
}


/* Chat notif internal */

.chat-notif {
    background: var(--grey-1);
    padding: 6px 16px;
    border-radius: 4px;
    margin: 12px 0;
}

.chat-notif.secondary {
    background: var(--secondary-color);
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}





/*
* Chat Sender Area
*/

.chat-sender {
    background-color: #fff;
}

.chat-sender .inner {
    margin: 12px 16px;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 12px;
}

.chat-sender .text-area-container {
    display: flex;
    align-items: center;
}

.chat-sender .text-area-container .chat-sender-action {
    display: block;
    width: 45px;
    min-height: 32px;
    background-color: #f8f8f8;
    text-align: center;
    align-self: stretch;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1;
}

.chat-sender .text-area-container .chat-sender-action.emoji-send {
    background-color: transparent;
}

.chat-sender .text-area-container .chat-sender-action i.material-icons {
    font-size: 19px;
    color: var(--black);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}


.chat-sender .text-area-container .textarea-inner {
    width: 100%;
}

.chat-sender .text-area-container .textarea-inner textarea {
    border: 0;
    background-color: none;
    width: 100%;
    padding: 8px 15px;
    rows: 1;
    height: 42px;
    display: block;
    resize: none;
    height: 100%;
}




/*
* Chatbox Minimized
*/

.chat-box-container.minimized .chat-box-main,
.chat-box-container.minimized .chat-sender {
    height: 0;
    min-height: 0;
    overflow: hidden;
}













/*--------------------------------------
* Page Inner Container
---------------------------------------*/

.page-form-inner {
    background-color: var(--grey-3);
    padding: var(--spacing-2x) var(--spacing-1x);
    border-radius: 5px;
    margin-bottom: var(--spacing-2x);
}


.page-toolbar {
    margin-bottom: 15px;
}

/* Page View Type */


.toolbar-view-type {
    position: relative;
    text-align: center;
    padding: 5px 0;
}

.toolbar-view-type > a.icon-view-type {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 8px;
    background-image: url("../img/icons/primary/grid-view.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.toolbar-view-type > a.icon-view-type.list {
    background-image: url("../img/icons/primary/list-view.svg");
}

.toolbar-view-type > a.icon-view-type span {
    display: none;
}





/* Toolbar Right Area */


.right-toolbar-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.right-toolbar-list .toolbar-icon {

}

.right-toolbar-list .toolbar-icon .toolbar-action-icon {
    margin-right: 15px;
    padding-right: 15px;
    display: block;
    line-height: 1;
    position: relative;
    color: var(--secondary-color);
}

.right-toolbar-list .toolbar-icon:last-child .toolbar-action-icon  {
    margin-right: 0;
    padding-right: 0;
}

.right-toolbar-list .toolbar-icon .toolbar-action-icon::before {
    content: "";
    width: 1px;
    height: 13px;
    background-color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}


.right-toolbar-list .toolbar-icon:last-child .toolbar-action-icon::before {
    display: none;
}

.right-toolbar-list .toolbar-icon .toolbar-action-icon > span {
    display: none;
}

/* Connection Filter */


.toolbar-select-filter {
    position: relative;
    display: inline-block;
    background-color: var(--secondary-color);
    text-align: center;
    padding: 0px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
    overflow: hidden;
}

.toolbar-select-filter::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.05);
    opacity: 0;
}


.toolbar-select-filter::after {
    content: "keyboard_arrow_down";
    padding-right: 5px;
    font-family: 'Material Icons';
    color: #fff;
    font-size: 17px;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}


.toolbar-select-filter:focus-within::before {
    opacity: 1;
}

.toolbar-select-filter > select {
    position: relative;
    display: block;
    text-transform: uppercase;
    color: #fff;
     border: none;
    font-size: 12px;
    display: inline-block;
    padding: 10px 10px;
    padding-right: 20px;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    background: none;
    font-weight: 600;
    text-align: center;
}

.toolbar-select-filter > select option {
    text-align: center;
    color: #333;
}










/*--------------------------------------
* Wall Card
---------------------------------------*/

.wall-cards-grid {
    margin-top: 0px;
    padding-top: 30px;
}

.wall-card-outer {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 5px;
    color: var(--black);

    margin-top: 30px;
}


/* Meta */
.wall-card-outer  .card-meta {
    display: block;
}

.wall-card-outer .card-meta .shared-details {
    position: absolute;
    top: 0;
    background-color: #0c2069;
    color: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    transform: translateY(-50%);
    font-size: 12px;
    left: var(--spacing-1x);

    max-width: 260px;
}



.wall-card-outer .card-meta .label-detail {
    position: absolute;
    top: 0;
    background-color: transparent;
    color: #fff;
    transform: translateY(-50%);
    font-size: 12px;
    right: var(--spacing-1x);
}

.wall-card-outer .card-meta .label-detail span {
    position: relative;
    display: block;
    padding: 10px 12px;
    padding-left: 22px;
    padding-right: 0px;
    line-height: 1;
    padding-right: 14px;
}

.wall-card-outer .card-meta .label-detail::before {
    position: absolute;
    left: 0;
    right: -7px;
    top: 0;
    bottom: 0;
    content: "";
    transform: translateY(0%) rotate(180deg);
    color: var(--primary-color);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iIzBjMjA2OSIgZD0iTTE3LjYzIDUuODRDMTcuMjcgNS4zMyAxNi42NyA1IDE2IDVMNSA1LjAxQzMuOSA1LjAxIDMgNS45IDMgN3YxMGMwIDEuMS45IDEuOTkgMiAxLjk5TDE2IDE5Yy42NyAwIDEuMjctLjMzIDEuNjMtLjg0TDIyIDEybC00LjM3LTYuMTZ6Ii8+PC9zdmc+);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}



/* HEADER */
.wall-card-outer .card-header {
    background-color: transparent;
    padding: 0 var(--spacing-1x);
    border-bottom: 0;
}


.wall-card-outer .card-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    padding: var(--spacing-0-5x) 0;
    padding-top: var(--spacing-2x);
}


.wall-card-outer .card-header .header-inner .left {
    display: flex;
    align-items: center;

}
.wall-card-outer .card-header .avatar-image {
    max-width: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    min-width: 64px;
    min-height: 64px;
    margin-right: 15px;
}


.wall-card-outer .card-header .avatar-image img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.wall-card-outer .card-header  .text p {
    margin: 0;
    font-size: 16px;
}
.wall-card-outer .card-header  .text p.name {
    font-weight: 600;
}



/* btn */
.wall-card-outer .card-header .con-menu-btn {
    width: 26px;
    height: 26px;
    display: block;
    background-image: url('../img/icons/primary/dot-menu.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;
}

.wall-card-outer .card-header  .con-menu-btn:hover {
    background-color: var(--grey-1);
}




/*
* Card Content
*/

.wall-card-outer .card-content {
    position: relative;
    /*padding: 0 var(--spacing-1x);
    display: flex;
    align-items: center;
    justify-content: space-between;*/
}

.wall-card-outer .card-content .card-content-inner {
    position: relative;
    padding: 0 var(--spacing-1x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wall-card-outer .card-content .card-content-description {
    display: none;
}


/* Details list */
.wall-card-outer .card-content .card-details-list {
    list-style-type: none;
    padding: 0;

    /* -moz-column-count: 2;
    -moz-column-gap: 15px;
    -webkit-column-count: 2;
    -webkit-column-gap: 15px;
    column-count: 2;
    column-gap: 15px; */

	display: flex;
	flex-direction: column;

    margin: 0;
}

.card-content .card-details-list li {
    position: relative;
    padding: 4px 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

.card-content .card-details-list li span {
    display: inline-block;
    vertical-align: middle;
}

.card-content .card-details-list li::before {
    content: "";
    display: inline-block;
    width: 24px;
    background-color: #eee;
    height: 18px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.card-details-list li.exp::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-work.svg');
}


.card-details-list li.loc::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-marker-2.svg');
}


.card-details-list li.pkg::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-money.svg');
}

.card-details-list li.gender::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/ic_account_box_24px.svg');
}

.card-details-list li.industry::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/factory.svg');
}



/* points */

.wall-card-outer .card-content .points {
    position: relative;
}

.wall-card-outer .card-content .points > span {
    display: inline-block;
    background-color: #e5e5e5;
    padding: 5px 15px;
    border-radius: 200px;
    padding-left: 50px;
}

.wall-card-outer .card-content .points::before {
    position: absolute;
    content: "";
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #e5e5e5;
    top: 50%;
    transform: translateY(-50%);

    background-image: url('../img/icons/secondary/icon-coupon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}




/*
* Card Action Buttons -- Wall Cards
*/


.wall-card-outer .card-actions {
    display: flex;
    border-top: 2px solid #f6f7f8;
    margin: 0 var(--spacing-1x);
    margin-top: var(--spacing-1x);
}

.wall-card-outer .card-actions > .card-action {
    padding: 15px 5px;
    display: block;
    width: 100%;
    text-align: center;

    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
}


.wall-card-outer .card-actions > .card-action:hover {
    /*background-color: var(--grey-1);*/
}


.wall-card-outer .card-actions > .card-action {
    color: var(--black);
}

.wall-card-outer .card-actions.btns-2 > .card-action:first-child {
    border-right: 0px solid #f6f7f8;
}
.wall-card-outer .card-actions.btns-2 > .card-action:nth-child(2n) {
    border-left: 0px solid #f6f7f8;
}


.wall-card-outer .card-actions .card-action.lbl-show .lbl {
    position: relative;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    font-size: 11px;
    padding-left: 25px;

}

.wall-card-outer .card-actions .card-action.lbl-show .lbl::before {
    position: relative;
    width: 20px;
    height: 20px;
    content: ".";
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.wall-card-outer .card-actions .card-action.card-action-accept.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/folder-tick.svg");
}

.wall-card-outer .card-actions .card-action.card-action-refer.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/folder-return.svg");
}

.wall-card-outer .card-actions .card-action.card-action-message.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/chat-icon.svg");
}


.wall-card-outer .card-actions .card-action.card-action-connect.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/two-arrows.svg");
}

.wall-card-outer .card-actions .card-action.card-action-close.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/close-icon.svg");
}


.wall-card-outer .card-actions .card-action.card-action-comment.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/icon-comment.svg");
}

.wall-card-outer .card-actions .card-action.card-action-matchreferral.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/match_referrals.svg");
}







/*
* Field Info
*/

.field-info {
    color: var(--secondary-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 5px;
}

.field-info:hover {
    color: var(--primary-color);
}
.field-info i.material-icons {
    font-size: 18px;
}





/*
* Wall Card -List View
*/





.card-style-list .wall-card-outer .card-header .text-description {
    display: none;
}

.card-style-list .wall-card-outer .inner {
    padding-right: 60px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.card-style-list .card-menu-btn.card-menu-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
}



.card-menu-btn .card-menu ul {
    z-index: 9;
}

.card-style-list .wall-card-outer .card-header {
    align-self: start;
}

.card-style-list .wall-card-outer .card-header .details {
    font-size: 14px;
}


.card-style-list .wall-card-outer .card-content .card-content-description  {
    display: block;
}

.card-style-list .wall-card-outer .card-content {
    display: block;
    width: 60%;
    align-self: start;
        padding-top: var(--spacing-2x);
}

.card-style-list  .wall-card-outer .card-content .card-content-inner {
    padding-left: 0;
}
.card-style-list  .wall-card-outer .card-content .card-details-list {
    display: flex;
    align-items: center;
}

.card-style-list .wall-card-outer .card-content .card-content-inner {
    justify-content: flex-start;
    margin-top: 30px;
}

.card-style-list  .wall-card-outer .card-content .card-details-list li {
    margin-right: 15px;
}

.card-style-list .wall-card-outer .card-meta .shared-details {
    max-width: 95%;
}


.card-style-list .wall-card-outer .card-actions {
    display: block;
    border-top: 0;
    border-left: 2px solid #f6f7f8;
    border-right: 2px solid #f6f7f8;
    padding-left: 15px;
    padding-right: 15px;
}





/*---------------------
* Points
-----------------------*/

.points-label {
    position: relative;
}

.points-label > span {
    display: inline-block;
    background-color: #e5e5e5;
    padding: 5px 15px;
    border-radius: 200px;
    padding-left: 50px;
}

.points-label::before {
    position: absolute;
    content: "";
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #e5e5e5;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../img/icons/secondary/icon-coupon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.points-label.icon-coupon::before,
.wall-card-outer .card-content .points.icon-coupon::before {
    background-image: url('../img/icons/secondary/icon-coupon.svg');
}

.points-label.icon-coins::before,
.wall-card-outer .card-content .points.icon-coins::before {
    background-image: url('../img/icons/secondary/icon-coins.svg');
}

.points-label.icon-money::before,
.wall-card-outer .card-content .points.icon-money::before {
    background-image: url('../img/icons/secondary/icon-money.svg');
}


/*--------------------------------------
* Icon List
--------------------------------------*/


/* Details list */
.icon-items-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}



.icon-items-list li {
    position: relative;
    padding: 4px 0;
    vertical-align: middle;
    display: flex;
    align-items: center;
}


/* inline */
.icon-items-list.icon-inline {
    display: flex;
    flex-wrap: wrap;
}

.icon-items-list.icon-inline > li {
    margin-right: 30px;
    font-size: 14px;
}



.icon-items-list li span {
    display: inline-block;
    vertical-align: middle;
}

.icon-items-list li::before {
    content: "";
    display: inline-block;
    width: 24px;
    background-color: #eee;
    height: 18px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-items-list li.exp::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-work.svg');
}


.icon-items-list li.loc::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-marker-2.svg');
}


.icon-items-list li.pkg::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-money.svg');
}

.icon-items-list li.tel::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/telephone-ring.svg');
}

.icon-items-list li.draftemail::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/ic_drafts_24px.svg');
}


.icon-items-list li.time::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-clock.svg');
}


.icon-items-list li.date::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/icon-calendar.svg');
}

.icon-items-list li.users::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/users.svg');
}



.icon-items-list li.book::before {
    background-color: transparent;
    background-image: url('../img/icons/secondary/book.svg');
}













/*---------------------------------
* ADD TO CHAT MODAL
---------------------------------*/

#addToChatModal .modal-dialog {
    max-width: 728px;
}

#addToChatModal .modal-body {
    padding: 15px 30px;
}

@media (min-width: 960px) {
    #addToChatModal .modal-dialog {
        max-width: 840px;
    }
}


#addToChatModal .person-list-scrollview {
    max-height: 420px;
    overflow-y: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 0px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}


#addToChatModal .modal-bottom-part {
    margin: 10px 0;
}

#addToChatModal .confirmation-container {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
}


#addToChatModal .modal-bottom-part .selected-count {
    font-weight: 600;
    color: var(--primary-color);
}

#addToChatModal .title {
    padding: 15px 0;
    margin-bottom: 0px;
    color: var(--primary-color);
}


/*--------------------------------------------
* Person List Component
---------------------------------------------*/





.person-list .selection-label {
    display: block;
    cursor: pointer;
}

.person-list .person-list-item {
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}



.person-list-item .left {
    padding: 8px 0;
    padding-left: 8px;
    display: flex;
    align-items: center;
}

.person-list-item .center {
    padding: 5px;
    text-align: center;
}

.person-list .person-list-item  .select_person {
    min-width: 44px;
}

.person-list .person-list-item  .select_person .custom-checkbox-label .checkbox-inner {
    margin-right: 0;
}


.person-list .person-list-item .left .avatar {
    border-radius: 50%;
    overflow: hidden;
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    background-color: #fff;
    /*background-color: var(--secondary-color);*/
}
.person-list .person-list-item .left .avatar  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

.person-list .person-list-item .left .avatar  > span {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    font-weight: 700;
    color:#fff ;
}


.person-list .person-list-item .left .user-details {
    margin-left: 15px;
}
.person-list .person-list-item .left .user-details p {
    margin-bottom: 0;
}

.person-list .person-list-item .left .user-details .name {
    font-weight: 600;
    margin-bottom: 4px;
}

.person-list .person-list-item .left .user-details .about {
    font-size: 12px;
}







.item-card-label {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--grey-4);
    border-radius: 50px;
    font-size: 12px;
}


/* Item Actions */
.person-item-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-right: 15px;
    align-items: stretch;
}

.person-item-actions .item-action-outer {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
}

.person-item-actions .item-action-outer:last-child {
    border-bottom: 1px solid transparent;
}

.item-action-outer .item-action {
    position: relative;
    display: block;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    padding: 5px 0;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    min-width: 118px;
    text-align: center;
    justify-content: center;
}

.item-action-outer .item-action::before {
    content: "";
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 5px;
    background-color: #e5e5e5;
    align-items: center;
}


.item-action-outer .item-action.connect-action::before {
    background-color: transparent;
    background-image: url("../img/icons/secondary/two-arrows.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.item-action-outer .item-action.invite-action::before {
    background-color: transparent;
    background-image: url("../img/icons/secondary/envelope-plus.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}




.item-action-outer .menu-action {
    width: 32px;
    height: 32px;
    display: block;
    background-image: url('../img/icons/primary/dot-menu.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 15px;

}

.item-action-outer .menu-action > span {
    display: none;
}

.item-action-outer .menu-action:hover {
    background-color: var(--grey-1);
}

.item-action-outer .menu-action::before {
    display: none !important;
}






@media ( min-width: 768px ) {
    .person-item-actions .item-action-outer  {
        border-top-width: 0;
        border-bottom-width: 0;

        border-left: 1.5px solid #e5e5e5;
    }

    .item-action-outer .item-action {
        padding: 15px 15px;
    }

    .person-item-actions {
        display: flex;
        flex-direction: row;
    }

}



@media ( max-width: 768px ) {
    .person-list .person-list-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .person-item-actions {
        flex-direction: row;
    }

    .person-item-actions .item-action-outer {
        justify-content: center;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}







/*--------------------------------------
* Sidebar Inner and Blocks
--------------------------------------*/
.sidebar-inner {}
.sidebar-inner > .block {
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
}










/*
* Horizontal Page Tabs


.page-top-tabs.horizontal-scrolling-menu {

}

.page-top-tabs.horizontal-scrolling-menu > ul {
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom: 0;
    white-space: nowrap;
    position: relative;
}

.page-top-tabs.horizontal-scrolling-menu > ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
     border-bottom: 2px solid var(--primary-color);
     bottom: 0;
}

.page-top-tabs.horizontal-scrolling-menu > ul > li {
    position: relative;
    display: inline-block;
    bottom: 0;
    transition: 0.2s all ease-in-out;
    transform: translateX(0px);
}

.page-top-tabs.horizontal-scrolling-menu > ul > li > a {
    top: 0;
}

*/






/*----------------------------------
* Slider Nav Link
-----------------------------------*/

.horizontal-scrolling-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px ;
    background-color: var(--primary-color);
}

.slider-nav-link  {
    margin-right: 30px;
}

.slider-nav-link a {
    font-size: 16px;
    padding: 10px ;
    color: var(--black);
    display: block;
    border-bottom: 3px solid transparent;
    position: relative;
}



.slider-nav-link:focus-within > a,
.slider-nav-link > a:hover,
.slider-nav-link > a.active {
    color: var(--primary-color);
    border-bottom-color: var(--secondary-color);
}








.horizontal-scrolling-menu .slider-menu {
    padding-left: 0px;
    padding-right: 24px;
}


.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-prev,
.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 24px;
    height: 100%;
    color: var(--secondary-color);
    margin: 0;
    text-align: center;
    display: flex;

    background-image: linear-gradient(-90deg, rgba(255,255,255,0.15), #fff);
}


.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-prev.disabled,
.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next.disabled {
    display: none;
}

.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-prev  span,
.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next  span {
    text-indent: -9999999px;
    display: none;
}

.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next {
    left: initial;
    right: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.15), #fff);
}

.horizontal-scrolling-menu  .owl-theme .owl-nav [class*='owl-']:hover {
    color: var(--secondary-color);
    background-color: transparent;
}

.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-prev::before,
.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next::before {
    content: "keyboard_arrow_left";
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 23px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    display: block;
    display: inline;
    display: flex;
}

.horizontal-scrolling-menu .owl-theme .owl-nav button.owl-next::before {
    content: "keyboard_arrow_right";
}






/*------------------------------------------------------
* Custom UI Modal
* -----------------------------------------------------
-------------------------------------------------------*/

.custom-ui-modal .modal-body {
    padding: 15px 30px;
}

.custom-ui-modal .modal-body .modal-title {
    padding: 15px 0;
    margin-bottom: 0px;
    color: var(--primary-color);
}


.custom-ui-modal .modal-close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 28px;
    height: 28px;
    text-indent: -9999px;
    border: 2px solid var(--black);
    border-radius: 50%;
    background-image: url("../img/icons/black/close-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    z-index: 1;
}


.custom-ui-modal  .person-list-scrollview {
    max-height: 580px;
    overflow-y: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 0px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

@media (min-width: 570px) {
    .custom-ui-modal .modal-dialog {
        max-width: 414px;
        margin: 1.75rem auto;
    }
}


@media (min-width: 1200px) {
    .custom-ui-modal .modal-dialog {
        max-width: 980px;
        width: 980px;
        margin: 1.75rem auto;
    }


    .custom-ui-modal.custom-ui-modal-small .modal-dialog {
        max-width: 640px;
        width: 640px;
        margin: 1.75rem auto;
    }
}
























/*----------------------------------------------------
* Manage Users - Modal
----------------------------------------------------*/

.manage-users-table .table-header {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #0e2367;
}





/*
* thead row
*/



.manage-user-thead-row {
    padding: 15px 0;
    font-size: 18px;
}
.manage-user-thead-row .col---1 {
    width: 200px;
    margin-left: 120px;
}

.manage-user-thead-row .col---2 {
    width: 200px;
    margin-left: 40px;
}

.manage-user-thead-row .col---3 {
    width: 120px;
    margin-left: 5px;
}

.manage-user-thead-row .col---4 {
    width: 120px;
    margin-left: 5px;
}



/*
* Person List for Manage User
*/




.profile-list-table .selection-label {
    display: block;
    cursor: pointer;
}


.profile-item-row-table {
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px;
}



/* Main col user img and detail */
.profile-item-row-table .main-col .main-block {
    display: flex;
    align-items: center;
}


.main-col .main-block .user-details {
    min-width: 170px;
}
.person-list-item .center {
    padding: 5px;
    text-align: center;
}

.profile-item-row-table .main-col  .select_person {
    min-width: 30px;
}

.profile-item-row-table .main-col  .select_person .custom-checkbox-label {
    padding-left: 0;
}
.profile-item-row-table .main-col  .select_person .custom-checkbox-label .checkbox-inner {
    margin-right: 0;
}


.profile-item-row-table .main-col .avatar {
    border-radius: 50%;
    overflow: hidden;
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    background-color: var(--secondary-color);
}
.profile-item-row-table .main-col .avatar  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

.profile-item-row-table .main-col .avatar  > span {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    font-weight: 700;
    color:#fff ;
}


.profile-item-row-table .main-col .user-details {
    margin-left: 15px;
}
.profile-item-row-table .main-col .user-details p {
    margin-bottom: 0;
}

.profile-item-row-table .main-col .user-details .name {
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-item-row-table .main-col .user-details .about {
    font-size: 12px;
}



/* action col */
.profile-item-row-table .actions-col {

}

.profile-item-row-table .actions-col .action-icon {
    display: inline-block;
    line-height: 1;
    color: var(--secondary-color);
    margin-left: 15px;
}

.profile-item-row-table .actions-col .action-icon .material-icons {
    display: block;
    line-height: 1;
    font-size: 24px;
}


@media ( max-width: 768px ) {
    .profile-item-row-table .email-block,
    .profile-item-row-table .pwd-block,
    .profile-item-row-table .role-block {
        padding-top: 5px;
    }

    .profile-item-row-table .email-block::before {
        content: "Email:";
        font-weight: 700;
        width: 80px;
        display: inline-block;
        font-size: 11px;
        text-transform: ;
    }

    .profile-item-row-table .pwd-block::before {
        content: "Password:";
        font-weight: 700;
        width: 80px;
        display: inline-block;
        font-size: 11px;
        text-transform: ;
    }

    .profile-item-row-table .role-block::before {
        content: "Role:";
        font-weight: 700;
        width: 80px;
        display: inline-block;
        font-size: 11px;
        text-transform: ;
    }
}


/* Manage User - Add Users */

.add-user-outer {
    background-color: #f9f9f9;
    padding: 30px 30px;
    border-radius: 5px;
    margin-top: 30px;
}

.add-user-outer .general-select-group {
    max-width: 256px;
    width: 256px;
    margin-right: auto;
}

.add-user-outer  .general-select-group .select-container {
    width: 100%;
    display: block;
}

.add-user-outer  .general-select-group .select-container select  {
    width: 100%;
}

.add-user-outer b {
    display: inline-block;
}

@media ( max-width: 768px ) {
    .add-user-outer b {
        display: inline-block;
        margin-bottom: 5px;
    }

}


/*------------------------------------------
* Close Requirement Modal
--------------------------------------------*/

.close-requirement-outer  {

}

.close-requirement-outer .select-container {

}

.close-requirement-outer .general-select-group {
   box-shadow: 0 2px 8px 0px rgba(0,0,0,0.15);
}



.close-requirement-outer .general-text-input {
    max-width: 512px;
    border-radius: 5px;
    box-shadow: 0 2px 8px 0px rgba(0,0,0,0.15);
}






/*---------------------------------------
* Avatar Image Components
---------------------------------------*/
.avatar-image {
    position: relative;
    max-width: 64px;
    border-radius: 50%;
    overflow: hidden;
    min-width: 64px;
    min-height: 64px;
    /*background-color: var(--secondary-color);*/
}


.avatar-image img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.avatar-image > span {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    font-weight: 700;
    color:#fff ;
}













/* --------------------------------------------
* Refer Dialog
---------------------------------------------*/


/* Refer Dialog - Top  */
.refer-dialog-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    margin-bottom: 20px;
}

.refer-dialog-outer .shared-details {
    background-color: var(--secondary-color);
    color: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
}

.refer-dialog-top .position {
    font-size: 18px;
    font-weight: 600;
}

.refer-dialog-top .position sup {
    font-size: 11px;
    font-weight: 300;
}



/* Detail Block */
.refer-modal .middle-detail-block {
    margin-bottom: 15px;
}

.refer-modal .middle-detail-block .detail-top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

}

.middle-detail-block .detail-top .avatar-image {
    margin-right: 20px;
}

.middle-detail-block .detail-top .name {
    font-size: 18px;
}
.middle-detail-block .description {
    font-size: 12px;
}



/* Search Row */
.refer-modal  .search-row .search-container {
    max-width: 150px;
}

.refer-modal  .search-row  .outline-text-input {
    max-width: 100%;
    font-size: 12px;
}

.refer-modal  .search-row  .outline-text-input  input {
    font-size: 12px;
    max-width: 90%;
}




/* Refer List Container */

.refer-list-container {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
    padding-left: 5px;
}

.refer-modal .refer-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.refer-list-item {}
.refer-list-item .selection-label {
    display: block;
    display: flex;
    align-items: center;
    cursor: pointer;

}

.refer-list-item .selection-label .checkbox-left {
    margin-right: 5px;

}

.refer-list-item .selection-label .checkbox-left .custom-checkbox-label {
    padding-right: 0;
    padding-left: 0;
}


.refer-list-item .details-row {
    width: 100%;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    box-shadow: 0 2px 2px rgba(0,0,0,0.12);
}

.refer-list-item .details-row {
    display: flex;
    align-items: center;
}

.refer-list-item .details-row .avatar-image {
    margin-right: 15px;
}


.refer-list-item .details-row  .name-outer {
    max-width: 200px;
}
.refer-list-item .details-row .name {
    font-weight: 700;
    line-height: 1;
}


.refer-list-item .details-row .position-outer {
    justify-content: flex-end;
    display: flex;
    align-items: start;
    align-self: start;

    width: 33%;
}










/*--------------------------------------
* Apply modal
*
---------------------------------------*/



.apply-modal .search-row {
    margin-bottom: 35px;
}
.apply-modal .search-row .search-container {
    width: 100%;
}
.apply-modal .search-row .outline-text-input {
    width: 100%;
    border-bottom-width: 2px;
}

/* Apply List  */

.apply-list-container {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
    padding-left: 5px;
}

.apply-modal .apply-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding: 20px 0;
}

.apply-list-item {}
.apply-list-item .selection-label {
    display: block;
    display: flex;
    align-items: center;
    cursor: pointer;

}

.apply-list-item .selection-label .checkbox-left {
    margin-right: 5px;

}

.apply-list-item .selection-label .checkbox-left .custom-checkbox-label {
    padding-right: 0;
    padding-left: 0;
}


.apply-list-item .details-row {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    display: flex;
}

.apply-list-item .details-row {
    display: flex;
    align-items: center;
}

.apply-list-item .details-row .avatar-image {
    margin-right: 15px;
}


.apply-list-item .details-row  .name-outer {
    max-width: 200px;
    min-width: 200px;
}
.apply-list-item .details-row .name {
    font-weight: 700;
    line-height: 1;
}


.apply-list-item .details-row .position-outer {
    justify-content: flex-end;
    display: flex;
    align-items: start;
    align-self: end;
    justify-self: ;
    width: 100%;

}






















/*----------------------------------
* Circular Progress Bar
-----------------------------------*/


.progress-circle {
   font-size: 8px;
   margin: 20px;
   position: relative; /* so that children can be absolutely positioned */
   padding: 0;
   width: 5em;
   height: 5em;
   background-color: #e5e5e5;
   border-radius: 50%;
   line-height: 5em;
      float: left;
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: white;
    content: " ";
}
/* Text inside the control */
.progress-circle span {
    position: absolute;
    text-align: center;
    display: block;
    color: var(--secondary-color);
    z-index: 2;
}
.left-half-clipper {
   /* a round circle */
   border-radius: 50%;
   width: 5em;
   height: 5em;
   position: absolute; /* needed for clipping */
   clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
   clip: rect(auto,auto,auto,auto);
}

.value-bar {
   /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 2.5em, 5em, 0);
   width: 5em;
   height: 5em;
   border-radius: 50%;
   border: 0.45em solid var(--secondary-color); /*The border is 0.35 but making it larger removes visual artifacts */
   /*background-color: #4D642D;*/ /* for debug */
   box-sizing: border-box;

}

/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 5em, 5em, 2.5em);
   background-color: var(--secondary-color);
   border-radius: 50%;
   width: 5em;
   height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }


.progress-circle .percentage {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;

}


/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }











/*------------------------------------------------------
* Notification List Popout
--------------------------------------------------------*/



/*
* Referoute Notification Sidebar
*/

.referoute-notification-outer {
    position: fixed;
    bottom: 0;
    top: 0;
    /*left: 0;*/
    right: 0;
    background-color: rgba(255,255,255,0.75);
    z-index: 98;
}


.referoute-notification-outer .notification-list-popout {
    position: absolute;
    right: 0;
    right: 0;
    top: 76px;
    min-width: 460px;
    height: calc(100vh - 76px);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.245);
    overflow: auto;
}


.notification-list-popout > .inner {
    padding: var(--spacing-1x);
    overflow-y: auto;
    max-height: calc(100vh - 76px);
}


.notification-list-header .mark-all-read {
    display: block;
    font-weight: 600;
    color: var(--black);
}


/* Notification list */

.notification-list {
    position: relative;
    padding: 0;
    list-style-type: none;
    margin-top: 15px;
}

.notification-list .notification-item {
    padding: ;
    position: relative;
    margin-bottom: 10px;
    padding: 15px 10px;
    background-color: #f4f4f4;
    background-color: #fff;
    border-radius: 5px;
    transition: 0.15s all ease-in-out;
}

.notification-list .notification-item:hover,
.notification-list .notification-item:focus-within {
    background-color: #f4f4f4;
}
.notification-list .notification-item .inner {
    display: flex;
    color: var(--black);
    justify-content: space-between;
    align-items: center;
}

.notification-item .inner .notification-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}

.notification-item .inner .notification-time {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.notification-item .inner .notification-time i.material-icons {
    display: block;
    font-size: 18px;
    margin-right: 8px;
}


.notification-item .right-area {
    min-width: 100px;
    justify-content: end;
    opacity: 1;
}

@media ( min-width: 768px ) {
    .notification-item .right-area {
        opacity: 0;
    }
}

.notification-list .notification-item:hover .right-area ,
.notification-list .notification-item:focus-within .right-area  {
    opacity: 1;
}


.notification-item  .notification-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.notification-item  .notification-actions > .notification-action-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 7px;
    border-right: 1px solid #111;
}

.notification-item  .notification-actions > .notification-action-icon:last-child {
    border-right: 1px solid transparent;
}

.notification-actions > .notification-action-icon i.material-icons {
    font-size: 29px;
}









/*
* Con Card Menu Button
*/


.card-menu-btn {
    position: relative;
}

.card-menu-btn .card-menu {
    display: block;
    position: absolute;
    padding-top: 10px;
    min-width: 200px;
    right: 0;
    z-index: 9;
    text-indent: initial;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    max-width: 0;
    transition: 0.1s all ease-in-out;
}

.card-menu-btn:active .card-menu,
.card-menu-btn:focus-within .card-menu,
.card-menu-btn.active .card-menu {
    max-width: 2000px;
    max-height: 2000px;
    opacity: 1;
    overflow: visible;
}


.card-menu-btn .card-menu ul {
    padding: 0;
    margin: 0;
    background: #ffffff;
    color: #333;
    list-style-type: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    border-radius: 5px;
}

.card-menu-btn .card-menu ul li {}
.card-menu-btn .card-menu ul li a {
    display: block;
    padding: 5px 15px;
    color: #333;
}

.card-menu-btn .card-menu ul li a:hover {
    background: var(--grey-1);
}



/*----------------------------------------------
* Referral Chain Component
*
------------------------------------------------*/


.referral-chain-outer {}
.referral-chain-outer .modal-title {
    padding: 0 !important;
    margin-bottom: 32px !important;
    border-bottom: 2px solid #000;
    font-size: 16px;
    font-weight: 600;
}

/*
* Referral Chain Design
*/

.referral-chain {
    position: relative;
}

.referral-chain ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.referral-chain ul li {
    position: relative;
}

.referral-chain ul > li > ul {
    padding-left: 80px;
}


.referral-chain-item {
    position: relative;
}

.referral-chain-item .item-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
}



.referral-chain-item .item-inner .item-information-area {
    display: flex;
}

.referral-chain-item .item-inner .item-information-area .avatar-outer {
    margin-right: 16px;
    position: relative;
    z-index: 1;
}

.referral-chain-item .item-inner .item-information-area .name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
}

.referral-chain ul li::before {
    position: absolute;
    top: 64px;
    left: 32px;
    width: 1px;
    background-color: #000;
    bottom: 0;
    height: 100%;
    content: "";
}

.referral-chain .referral-chain-list > li::before {
    height: 64px;
    bottom: initial;
}

.referral-chain .referral-chain-list > li > .referral-chain-item .item-inner {
    margin-bottom: 32px;
}

.referral-chain .referral-chain-list > li > ul > li:first-child::after {
    position: absolute;
    top: 32px;
    left: -48px;
    width: 64px;
    height: 1px;
    background-color: #000;
    bottom: 0;
    content: "";
}

.referral-chain .referral-chain-list > li > ul > li:last-child::before {
    display: none;
}


/*
* Suggestions Input Box
*/



.suggestions-input-field {
    display: block;
    position: relative;
}

.suggestions-input-field .suggestions-box {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 12;
    max-width: 98%;
    margin: 0 auto;
    max-height: 360px;
    overflow: auto;
    /*display: none;*/
}

.suggestions-input-field .suggestions-box.active {
    display: block;
}

.suggestions-input-field .suggestions-box .no-results {
    padding: 15px;
    text-align: center;
}
.suggestions-input-field .suggestions-box > ul {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: 0;
}

.suggestions-box > ul > li {
    display: flex;
    padding: 10px 15px;
    cursor: pointer;
    align-items: center;
}

.suggestions-box > ul > li:hover {
    background-color: var(--grey-1);
}

.suggestions-box > ul > li .img {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

.suggestions-box > ul > li .img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-text-bubble.left-text{
    text-align: left;
}

.chat-text-group-info.left-text{
    text-align: left;
}