<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*------------------------------------------------------------------
* Table of Content
* 1. Soft UI Resets
-------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zeyada&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Damion&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&amp;display=swap');

@font-face {
  font-family: "Flat-UI-Icons";
  src: url('../fonts/flat-ui-icons-regular.eot');
  src: url('../fonts/flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/flat-ui-icons-regular.woff') format('woff'), url('../fonts/flat-ui-icons-regular.ttf') format('truetype'), url('../fonts/flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*@font-face {
    font-family: "Nunito";
    src: url('../fonts/Nunito/Nunito-VariableFont_wght.ttf');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: "Nunito";
    src: url('../fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf');
    font-weight: normal;
    font-style: italic;
} */

html, body {
  height: 100%;
}
/*****************************
 * Soft UI &amp; Bootstrap Resets
 * ***************************
 */
 :root {
  --bs-blue: #63B3ED;
  --bs-indigo: #596CFF;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #F56565;
  --bs-orange: #fd7e14;
  --bs-yellow: #FBD38D;
  --bs-green: #81E6D9;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #cb0c9f;
  --bs-secondary: #8392AB;
  --bs-success: #82d616;
  --bs-info: #17c1e8;
  --bs-warning: #fbcf33;
  --bs-danger: #ea0606;
  --bs-light: #e9ecef;
  --bs-dark: #344767;
  --bs-white: #fff;
  --bs-primary-rgb: 203, 12, 159;
  --bs-secondary-rgb: 131, 146, 171;
  --bs-success-rgb: 130, 214, 22;
  --bs-info-rgb: 23, 193, 232;
  --bs-warning-rgb: 251, 207, 51;
  --bs-danger-rgb: 234, 6, 6;
  --bs-light-rgb: 233, 236, 239;
  --bs-dark-rgb: 52, 71, 103;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 103, 116, 142;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: 'Open Sans', sans-serif;
  --bs-font-nunito: 'Nunito', sans-serif;
  --bs-font-roboto: 'Roboto', sans-serif;
  --bs-font-poppins: 'Poppins', sans-serif;
  --bs-font-inter: 'Inter', sans-serif;
  --bs-font-montserrat: 'Montserrat', sans-serif;
  --bs-font-encode-sans: 'Encode Sans', sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #67748e;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.5rem;
  --bs-border-radius-pill: 50rem;
  --bs-heading-color: #344767;
  --bs-link-color: var(--z-blue-500);
  --bs-link-hover-color: var(--z-blue-500);
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fcf8e3;
  --bs-placeholder-color: #adb5bd;
  --purple1100: 50, 52, 82;
  --purple1000: 59, 58, 112;
  --purple900: 67, 65, 141;
  --purple800: 76, 71, 171;
  --purple700: 84, 77, 201;
  --purple600: 95, 85, 238;
  --purple500: 127, 119, 241;
  --purple400: 153, 146, 244;
  --purple300: 178, 173, 247;
  --purple200: 204, 201, 250;
  --purple100: 229, 228, 252;
  --purple50: 242, 241, 254;
  --z-dark-100: 41, 46, 52;
  --z-dark-200: 32, 32, 32;
  --z-blue-100: 232, 240, 255;
  --z-blue-200: 200, 220, 255;
  --z-blue-300: 148, 185, 255;
  --z-blue-400: 112, 159, 245;
  --z-blue-450: 83, 139, 243;
  --z-blue-500: 24, 100, 250;/*38, 109, 240*/
  --z-white-rgb: 237, 239, 243;
  --brightBlue600: 0, 8, 255;
  --brightBlue600: 0, 42, 255;
  --brightBlue500: 0, 64, 255;
  --brightBlue400: 0, 98, 255;
  --brightBlue300: 0, 123, 255;
  --brightBlue200: 0, 157, 255;
  --brightBlue100: 0, 183, 255;
  --neonBlue1100: 46, 55, 84;
  --neonBlue1000: 50, 64, 117;
  --neonBlue900: 54, 73, 149;
  --neonBlue800: 59, 82, 182;
  --neonBlue700: 63, 91, 214;
  --neonBlue600: 68, 102, 255;
  --neonBlue500: 105, 133, 255;
  --neonBlue400: 135, 157, 255;
  --neonBlue300: 165, 182, 255;
  --neonBlue200: 195, 206, 255;
  --neonBlue100: 225, 231, 255;
  --neonBlue50: 240, 243, 255;
  --azureBlue1100: 38, 62, 80;
  --azureBlue1000: 34, 77, 107;
  --azureBlue900: 30, 93, 135;
  --azureBlue800: 25, 109, 162;
  --azureBlue700: 21, 124, 190;
  --azureBlue600: 16, 144, 224;
  --azureBlue500: 64, 166, 230;
  --azureBlue400: 102, 184, 235;
  --azureBlue300: 140, 202, 240;
  --azureBlue200: 179, 220, 245;
  --azureBlue100: 217, 237, 250;
  --azureBlue50: 236, 246, 253;
  --teal1100: 38, 64, 69;
  --teal1000: 33, 82, 86;
  --teal900: 29, 99, 103;
  --teal800: 25, 117, 120;
  --teal700: 20, 135, 138;
  --teal600: 15, 157, 159;
  --teal500: 63, 177, 178;
  --teal400: 101, 192, 194;
  --teal300: 140, 208, 209;
  --teal200: 178, 224, 224;
  --teal100: 217, 239, 240;
  --teal50: 231, 245, 245;
  --mint1100: 45, 68, 66;
  --mint1000: 48, 90, 80;
  --mint900: 51, 112, 94;
  --mint800: 54, 134, 108;
  --mint700: 57, 156, 122;
  --mint600: 61, 184, 139;
  --mint500: 100, 198, 162;
  --mint400: 131, 209, 181;
  --mint300: 162, 221, 199;
  --mint200: 193, 232, 218;
  --mint100: 224, 244, 236;
  --mint50: 240, 249, 246;
  --green1100: 35, 60, 55;
  --green1000: 29, 75, 57;
  --green900: 22, 89, 60;
  --green800: 15, 104, 62;
  --green700: 8, 118, 65;
  --green600: 0, 136, 68;
  --green500: 51, 160, 105;
  --green400: 92, 179, 135;
  --green300: 133, 198, 165;
  --green200: 173, 217, 195;
  --green100: 214, 236, 225;
  --green50: 235, 245, 240;
  --z-green100: 24,182,155;
  --z-green50: 37, 245, 210;
  --yellow1100: 75, 66, 44;
  --yellow1000: 108, 87, 35;
  --yellow900: 141, 107, 27;
  --yellow800: 174, 128, 19;
  --yellow700: 207, 148, 10;
  --yellow600: 248, 174, 0;
  --yellow500: 249, 190, 51;
  --yellow400: 251, 203, 92;
  --yellow300: 252, 216, 133;
  --yellow200: 253, 229, 173;
  --yellow100: 254, 242, 214;
  --yellow50: 254, 249, 235;
  --orange1100: 71, 56, 47;
  --orange1000: 101, 66, 42;
  --orange900: 130, 75, 38;
  --orange800: 159, 85, 33;
  --orange700: 188, 95, 28;
  --orange600: 225, 107, 22;
  --orange500: 231, 137, 69;
  --orange400: 236, 160, 106;
  --orange300: 241, 184, 143;
  --orange200: 245, 208, 180;
  --orange100: 250, 231, 218;
  --orange50: 253, 243, 236;
  --red1100: 69, 48, 55;
  --red1000: 96, 51, 57;
  --red900: 123, 53, 60;
  --red800: 150, 55, 62;
  --red700: 177, 58, 65;
  --red600: 211, 61, 68;
  --red500: 220, 100, 106;
  --red400: 227, 131, 136;
  --red300: 234, 162, 165;
  --red200: 241, 193, 195;
  --red100: 248, 224, 225;
  --red50: 252, 239, 240;
  --pink1100: 73, 54, 68;
  --pink1000: 105, 61, 84;
  --pink900: 136, 69, 100;
  --pink800: 167, 77, 117;
  --pink700: 199, 84, 133;
  --pink600: 238, 94, 153;
  --pink500: 241, 126, 173;
  --pink400: 244, 152, 190;
  --pink300: 247, 178, 206;
  --pink200: 250, 204, 222;
  --pink100: 252, 229, 239;
  --pink50: 254, 242, 247;
  --violet1100: 64, 54, 80;
  --violet1000: 87, 62, 107;
  --violet900: 109, 70, 135;
  --violet800: 132, 78, 162;
  --violet700: 154, 86, 190;
  --violet600: 182, 96, 224;
  --violet500: 197, 128, 230;
  --violet400: 208, 153, 235;
  --violet300: 220, 179, 240;
  --violet200: 232, 204, 245;
  --violet100: 243, 230, 250;
  --violet50: 249, 242, 253;
  --coolGrey1000: #090c12;
  --coolGrey1000rgb: 9, 12, 18;
  --coolGrey900: #21242c;
  --coolGrey900rgb: 33, 36, 44;
  --coolGrey900_alpha05: rgba(33,36,44,.5);
  --coolGrey900_alpha02: rgba(33,36,44,.2);
  --coolGrey850: #2b2e36;
  --coolGrey850rgb: 43, 46, 54;
  --coolGrey850_alpha01: rgba(43,46,54,.1);
  --coolGrey800: #3d424e;
  --coolGrey800rgb: 61, 66, 78;
  --coolGrey800_alpha02: rgba(61,66,78,.2);
  --coolGrey800_alpha05: rgba(61,66,78,.5);
  --coolGrey700: #4d525d;
  --coolGrey700rgb: 77, 82, 93;
  --coolGrey600: #606671;
  --coolGrey600rgb: 96, 102, 113;
  --coolGrey500: #717885;
  --coolGrey500rgb: 113, 120, 133;
  --coolGrey400: #848c9a;
  --coolGrey400rgb: 132, 140, 154;
  --coolGrey400_alpha05: rgba(132,140,154,.5);
  --coolGrey200: #bec9d9;
  --coolGrey200rgb: 190, 201, 217;
  --coolGrey100: #d8dfeb;
  --coolGrey100rgb: 216, 223, 235;
  --coolGrey100_alpha75: rgba(216,223,235,.75);
  --coolGrey100_alpha05: rgba(216,223,235,.5);
  --coolGrey100_alpha25: rgba(216,223,235,.25);
  --coolGrey50: #f0f3f9;
  --coolGrey50rgb: 240, 243, 249;
  --coolGrey50_alpha75: rgba(240, 243, 249, 0.75);
  --coolGrey50_alpha50: rgba(240, 243, 249, 0.5);
  --coolGrey50_alpha25: rgba(240, 243, 249, 0.25);
  --coolGrey37: #f6f8fa;
  --coolGrey37rgb: 246, 248, 250;
  --coolGrey25: #fcfdfe;
  --coolGrey25rgb: 252, 253, 254;
  --bg-dark-2: #292E34;
}
body {
  font-family: var(--bs-font-poppins);
  font-size: 0.875rem;
}

input, button, textarea {
    outline: none;
    border: none;
    background: transparent;
}
a, a:focus, a:active, select, button, button:active, button:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus, input {
    outline: none;
    text-decoration: none;
}
textarea {
    resize: vertical;
}
a {
    -webkit-transition: all .1s;
    transition: all .1s;
}
 a:hover {
    color: rgb(var(--z-blue-500),1);
}
input[type='file'] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 746px;
    height: 538px;
    outline: none;
    cursor: pointer;
    font-size: 0px;
}
input[type='file'].regular-upload {
    opacity: 1;
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--bs-body-color);
}
input[type='image'] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 746px;
    height: 538px;
    outline: none;
    cursor: pointer;
    font-size: 0px;
}
svg#Layer_1 {
  width: 32px;
  height: 32px;
}
#gradient-canvas {
  width:100%;
  height:100%;
/*  --gradient-color-1: #c3e4ff; */
  --gradient-color-1: #ff91f6; 
/*  --gradient-color-2: #6ec3f4;*/
/*  --gradient-color-2: #ff91f6;*/
  --gradient-color-2: #25f5d2;
/*  --gradient-color-3: #b9beff;*/
  --gradient-color-3: #082fbf;
/*  --gradient-color-4: #002391;*/
  --gradient-color-4: #090c12;
  /*--gradient-color-4: #001eff; */ 
}
#gradient-canvas-blk {
  width:100%;
  height:100%;
/*  --gradient-color-1: #c3e4ff; */
  --gradient-color-1: #000421; 
/*  --gradient-color-2: #6ec3f4;*/
/*  --gradient-color-2: #ff91f6;*/
  --gradient-color-2: #171717;
/*  --gradient-color-3: #b9beff;*/
  --gradient-color-3: #202020;
/*  --gradient-color-4: #002391;*/
  --gradient-color-4: #292E34;
  /*--gradient-color-4: #001eff; */ 
}
.text-white-secondary {
  color: rgba(var(--coolGrey25rgb),1) !important;
}
/*.text-body-secondary {
  color: rgba(var(--coolGrey300rgb),1);
}*/
.bg-dark {
  background: #444 !important;
  color: #FFF;
}
.bg-dark-2 {
  background: #292E34 !important;
  color: #FFF;
}
.bg-dark-3 {
  background: #202020 !important;
  color: #FFF;
}
.icon-3xs {
  width: 14px;
  height: 14px;
}

.icon-3xs i {
  top: -4px;
  font-size: .5rem;
}
.form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: #495057;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #d2d6da;
  border-radius: 0.6rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.navbar,
.shadow-coolGrey100-65 {
  box-shadow: 0 1px 8px 0 rgba(216,223,235,.65);
}
.form-select:focus {
  border-color: rgba(37,196,242,0.1) !important;
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.border-radius-3xl {
  border-radius: 3rem;
}
.border-transparent {
  border-color: transparent !important;
}

.border-none {
  border: none !important;
}

.form-control {
  border-radius: 0.6rem !important;
}
.form-control:focus {
  border-color: rgba(37,196,242,0.1) !important;
  -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.form-control:focus.border-shadow-success {
/*  border-color: rgba(37,196,242,0.4) !important;*/
  -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4) !important;
}
.input-group .form-control {
  /*border-left: 1px solid rgba(37,196,242,0.3) !important;
  border-right: 1px solid rgba(37,196,242,0.3)  !important;*/
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid transparent !important;
}
.input-group .form-control:focus {
  border-left: 1px solid rgba(37,196,242,0.1) !important;
  border-right: 1px solid transparent !important;
}
.focused {
    border-color: rgba(37,196,242,0.1) !important;
    -webkit-box-shadow: 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.input-group .input-group-text {
  border-left: none;
  border-right: 1px solid #d2d6da;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  clip-path: inset(-8px -8px -8px 0);
}
.focused .input-group-append+.input-group-text {
  border-color: rgba(37,196,242,0.1) !important;
  border-left: 1px solid transparent !important;
  border-right: 1px solid rgba(37,196,242,0.1) !important;
  -webkit-box-shadow: 0 0 0.125rem rgba(37,196,242,0.8) !important;
    -moz-box-shadow: 0 0 0.125rem rgba(37,196,242,0.8) !important;
    -ms-box-shadow: 0 0 0.125rem rgba(37,196,242,0.8) !important;
    -o-box-shadow: 0 0 0.125rem rgba(37,196,242,0.8) !important;
    box-shadow: 0 0 0.125rem rgba(37,196,242,0.8) !important;
}
.focused .input-group-append {
  border-top-right-radius: 0.6rem !important;
  border-bottom-right-radius: 0.6rem !important;
  border-color: rgba(37,196,242,0.1) !important;
  -webkit-box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.4) !important;
}
.focused .input-group-text {
  border-color: rgba(37,196,242,0.1) !important;
  border-left: 1px solid transparent !important;
  /*border-top: 1px solid rgba(37,196,242,0.1);
  border-right: 1px solid rgba(37,196,242,0.1);
  border-bottom: 1px solid rgba(37,196,242,0.1);
  clip-path: inset(-8px -8px -8px 0);*/
  -webkit-box-shadow: 0 0 0.25rem rgba(37,196,242,1) !important;
    -moz-box-shadow: 0 0 0.25rem rgba(37,196,242,1) !important;
    -ms-box-shadow: 0 0 0.25rem rgba(37,196,242,1) !important;
    -o-box-shadow: 0 0 0.25rem rgba(37,196,242,1) !important;
    box-shadow: 0 0 0.25rem rgba(37,196,242,1) !important;
}
.navbar-vertical .navbar-nav&gt;.nav-item .nav-link.active .icon {
/*  background-image: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);*/
    background-image: linear-gradient(310deg, rgba(var(--z-dark-200), 1) 0%, rgba(var(--z-dark-100), 1) 100%);
}
.navbar-vertical .navbar-nav&gt;.nav-item .nav-link.active.active-success .icon {
  background-image: linear-gradient(310deg, rgba(24,182,155,1)  0%, rgba(37, 245, 210,1) 100%);
}
.bg-darker-hover-gradient-info {
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
  &amp;:hover {
    background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);
  }
}
.bg-darker-hover-gradient-success {
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
  &amp;:hover {
    background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%);
  }
}
.bg-darker-hover-gradient-pink {
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
  &amp;:hover {
    background-image: linear-gradient(310deg, rgba(219, 94, 206, 1) 0%, rgba(255, 158, 244, 1) 100%);
  }
}
.bg-gradient-info {
  background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);
}
.bg-gradient-info-2 {
  background-image: linear-gradient(310deg, #032499 0%, #21d4fd 100%);
}
.bg-gradient-info-3 {
  background-image: linear-gradient(310deg, #0939e8 0%, #21d4fd 100%);
}
.bg-gradient-info-4 {
  background-image: linear-gradient(310deg, rgba(255, 158, 244, 1) 0%, #21d4fd 100%);
}
.bg-gradient-info-5 {
  background-image: linear-gradient(310deg, rgba(var(--z-blue-500), 1) 0%, rgba(var(--z-blue-400), 1) 100%);
}
.bg-info-5 {
  background-color: rgb(var(--z-blue-500), 1);
}
.bg-gradient-danger-2 {
  background-image: linear-gradient(310deg, rgba(222, 10, 38,1) 0%, rgba(252, 106, 125,0.7) 100%);
}
.bg-gradient-success-2 {
  background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%);
}
.bg-gradient-pink {
  background-image: linear-gradient(310deg, rgba(219, 94, 206, 1) 0%, rgba(255, 158, 244, 1) 100%);
}
.bg-gradient-pink-2 {
  background-image: linear-gradient(310deg, rgba(238, 42, 124, 0.8) 0%, rgba(255, 125, 184, 1) 100%);
}
.bg-gradient-purple {
  background-image: linear-gradient(310deg, rgba(var(--purple600), 1) 0%, rgba(var(--purple400), 1) 100%);
}
.bg-gradient-dark-2 {
/*  background-color: rgba(var(--z-dark-200), 1);*/
  background-image: linear-gradient(310deg, rgba(var(--z-dark-200), 1) 0%, rgba(var(--z-dark-100), 1) 100%);
/*  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);*/
}
.bg-gradient-darker {
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
}
.text-gradient.text-success-2 {
  background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%);
}
.text-gradient.text-pink {
  background-image: linear-gradient(310deg, rgba(219, 94, 206, 1) 0%, rgba(255, 158, 244, 1) 100%);
}
.text-gradient.text-purple {
  background-image: linear-gradient(310deg, rgba(var(--purple600), 1) 0%, rgba(var(--purple400), 1) 100%);
}
.text-gradient.text-violet {
  background-image: linear-gradient(310deg, rgba(238, 42, 124, 1) 0%, rgba(255, 125, 184, 1) 100%);
}
.text-darker {
  color: #1f2b40 !important;
}
.text-coolGrey50 {
  color: var(--coolGrey50) !important;
}
.text-coolGrey100 {
  color: var(--coolGrey100) !important;
}
.text-coolGrey200 {
  color: var(--coolGrey200) !important;
}
.text-coolGrey400 {
  color: var(--coolGrey400) !important;
}
.text-coolGrey500 {
  color: var(--coolGrey500) !important;
}
.border-gradient-info {
  border: 1px solid transparent; 
  background: linear-gradient(#fff,hsla(0,0%,100%,0)) padding-box,linear-gradient(310deg,#2152ff 0%,#21d4fd 100%) border-box;
}
.border-gradient-success {
  border: 1px solid transparent; 
  background: linear-gradient(#fff,hsla(0,0%,100%,0)) padding-box,linear-gradient(310deg,#18b69c 0%,#25f5d2 100%) border-box;
}
.border-gradient-pink {
  border: 1px solid transparent; 
  background: linear-gradient(#fff,hsla(0,0%,100%,0)) padding-box,linear-gradient(310deg,#db5ece 0%,#ff9ef4 100%) border-box;
}
.shadow-info {
  -webkit-box-shadow: 0 10px 40px 25px rgba(33, 212, 253, 0.1) !important;
  -moz-box-shadow: 0 10px 40px 25px rgba(33, 212, 253, 0.1) !important;
  -ms-box-shadow: 0 10px 40px 25px rgba(33, 212, 253, 0.1) !important;
  -o-box-shadow: 0 10px 40px 25px rgba(33, 212, 253, 0.1) !important;
  box-shadow: 0 10px 40px 25px rgba(33, 212, 253, 0.1) !important;
}
.shadow-success {
  -webkit-box-shadow: 0 10px 40px 25px rgba(37, 245, 210, 0.1) !important;
  -moz-box-shadow: 0 10px 40px 25px rgba(37, 245, 210, 0.1) !important;
  -ms-box-shadow: 0 10px 40px 25px rgba(37, 245, 210, 0.1) !important;
  -o-box-shadow: 0 10px 40px 25px rgba(37, 245, 210, 0.1) !important;
  box-shadow: 0 10px 40px 25px rgba(37, 245, 210, 0.1) !important;
}
.shadow-pink {
  -webkit-box-shadow: 0 10px 40px 25px rgba(255, 158, 244, 0.1) !important;
  -moz-box-shadow: 0 10px 40px 25px rgba(255, 158, 244, 0.1) !important;
  -ms-box-shadow: 0 10px 40px 25px rgba(255, 158, 244, 0.1) !important;
  -o-box-shadow: 0 10px 40px 25px rgba(255, 158, 244, 0.1) !important;
  box-shadow: 0 10px 40px 25px rgba(255, 158, 244, 0.1) !important;
}
.shadow-lg-pink {
  -webkit-box-shadow: 0 8px 26px -4px rgba(255, 158, 244, 0.15), 0 8px 9px -5px rgba(255, 158, 244, 0.06) !important;
  -moz-box-shadow: 0 8px 26px -4px rgba(255, 158, 244, 0.15), 0 8px 9px -5px rgba(255, 158, 244, 0.06) !important;
  -ms-box-shadow: 0 8px 26px -4px rgba(255, 158, 244, 0.15), 0 8px 9px -5px rgba(255, 158, 244, 0.06) !important;
  -o-box-shadow: 0 8px 26px -4px rgba(255, 158, 244, 0.15), 0 8px 9px -5px rgba(255, 158, 244, 0.06) !important;
  box-shadow: 0 8px 26px -4px rgba(255, 158, 244, 0.15), 0 8px 9px -5px rgba(255, 158, 244, 0.06) !important;
}
.shadow-coolGrey25 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey25);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey25);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey25);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey25);
  box-shadow: 0 1px 2px 0 var(--coolGrey25);
}
.shadow-coolGrey37 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey37);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey37);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey37);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey37);
  box-shadow: 0 1px 2px 0 var(--coolGrey37);
}
.shadow-coolGrey50 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  box-shadow: 0 1px 2px 0 var(--coolGrey50);
}
.shadow-coolGrey100 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  box-shadow: 0 1px 2px 0 var(--coolGrey100);
}
.shadow-coolGrey200 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  box-shadow: 0 1px 2px 0 var(--coolGrey200);
}
.shadow-gradient-warning:before {
  content:"";
  position: absolute;
  inset: 0;
  transform: translate3d(0,0,-1px);
  background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
  filter: blur(10px);
  clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);
}
.bg-success-2 {
  background-color: rgba(24,182,155,0.9);
}
.text-pink {
  color: rgba(255, 158, 244, 1);
}
.alert-btn {
  position: absolute;
  top: 3px;
  right: 3px;
}
.bg-coolGrey25-01 {
  background-color: rgb(var(--coolGrey25rgb), 0.1) !important;
}
.bg-coolGrey25 {
  background-color: var(--coolGrey25) !important;
}
.bg-coolGrey37 {
  background-color: var(--coolGrey37) !important;
}
.bg-coolGrey50 {
  background-color: var(--coolGrey50) !important;
}
.bg-coolGrey100-75 {
  background-color: var(--coolGrey100_alpha75) !important;
}
.bg-coolGrey100-05 {
  background-color: var(--coolGrey100_alpha05) !important;
}
.bg-coolGrey100-25 {
  background-color: var(--coolGrey100_alpha25) !important;
}
.bg-coolGrey100 {
  background-color: var(--coolGrey100) !important;
}
.bg-coolGrey1000 {
  background-color: var(--coolGrey1000) !important;
}
.bg-coolGrey1000-01 {
  background-color: rgb(var(--coolGrey1000rgb), 0.1) !important;
}
.bg-coolGrey1000-025 {
  background-color: rgb(var(--coolGrey1000rgb), 0.25) !important;
}
.bg-coolGrey1000-05 {
  background-color: rgb(var(--coolGrey1000rgb), 0.5) !important;
}
.bg-coolGrey1000-075 {
  background-color: rgb(var(--coolGrey1000rgb), 0.75) !important;
}
.border-coolGrey25-01 {
  border-color: rgb(var(--coolGrey25rgb), 0.1) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey25 {
  border-color: var(--coolGrey25rgb) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey50-01 {
  border-color: rgb(var(--coolGrey50rgb), 0.1) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey50 {
  border-color: var(--coolGrey50) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey100-75 {
  border-color: var(--coolGrey100_alpha75) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey100-05 {
  border-color: var(--coolGrey100_alpha05) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey100-25 {
  border-color: var(--coolGrey100_alpha25) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.border-coolGrey100 {
  border-color: var(--coolGrey100) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.shadow-coolGrey50 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  box-shadow: 0 1px 2px 0 var(--coolGrey50);
}
.shadow-coolGrey100 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
  box-shadow: 0 1px 2px 0 var(--coolGrey100);
}
.shadow-coolGrey200 {
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey200);
  box-shadow: 0 1px 2px 0 var(--coolGrey200);
}
.screen-border {
  border: 1px solid hsla(0, 0%, 100%, .5);
  background-image: linear-gradient(199deg, #edeff3 11.23%, #e4e7ec 87.61%);
  --tw-shadow: 0px 10px 30px -4px rgba(28,40,64,.1), 0px 8px 8px -8px rgba(28,40,64,.1), 0px 4px 4px -6px rgba(28,40,64,.14), 0px 0px 0px 1px #edeff3;
  --coolGrey50: 0px 10px 30px -4px var(--coolGrey50), 0px 8px 8px -8px var(--coolGrey50), 0px 4px 4px -6px var(--coolGrey50), 0px 0px 0px 1px var(--coolGrey50);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.screen-border.coolGrey100 {
  background-image: linear-gradient(199deg, var(--coolGrey100_alpha05) 11.23%, var(--coolGrey100) 87.61%);
}
.screen-border-thin {
  border: 1px solid hsla(0, 0%, 100%, .5);
  background-image: linear-gradient(199deg, #edeff3 11.23%, #e4e7ec 87.61%);
  --tw-shadow: 0px 10px 30px -4px rgba(28,40,64,.1), 0px 8px 8px -8px rgba(28,40,64,.1), 0px 4px 4px -6px rgba(28,40,64,.14), 0px 0px 0px 1px #edeff3;
  --coolGrey50: 0px 10px 30px -4px var(--coolGrey50), 0px 8px 8px -8px var(--coolGrey50), 0px 4px 4px -6px var(--coolGrey50), 0px 0px 0px 1px var(--coolGrey50);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.screen-border-thin.coolGrey100 {
  background-image: linear-gradient(199deg, var(--coolGrey100_alpha05) 11.23%, var(--coolGrey100) 87.61%);
}
.blur {
  box-shadow: inset 0px 0px 2px #fefefed1;
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
  background-color: rgba(255, 255, 255, 0.8) !important;
}
.blur.saturation-less {
  -webkit-backdrop-filter: saturate(20%) blur(30px);
  backdrop-filter: saturate(20%) blur(30px);
}
.blur.blur-rounded {
  border-radius: 40px;
}
.blur.blur-light {
  backdrop-filter: saturate(200%) blur(15px);
  background-color: rgba(255, 255, 255, 0.4) !important;
}
.blur.blur-very-light {
  backdrop-filter: saturate(200%) blur(5px);
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.blur.blur-very-light-100-saturation {
  backdrop-filter: saturate(100%) blur(5px);
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.blur.blur-dark {
  background-color: rgba(0, 0, 0, 0.3);
}
.shadow-blur {
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9), 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}
.btn.bg-coolGrey50:hover {
  background-color: var(--coolGrey100) !important;
}
.btn.bg-coolGrey100:hover {
  background-color: var(--coolGrey100) !important;
}
.btn.bg-info-5 {
  color: #fff;
  &amp;:hover {
    background-color: rgb(var(--z-blue-500), 1);
  }
}
.btn-success-2.focus,
.btn-success-2:focus,
.btn.bg-gradient-success-2.focus,
.btn.bg-gradient-success-2:focus,
.btn.bg-gradient-pink,
.btn.bg-gradient-pink.focus,
.btn.bg-gradient-pink:focus,
.btn.bg-gradient-pink:hover,
.btn.bg-gradient-pink-2,
.btn.bg-gradient-pink-2.focus,
.btn.bg-gradient-pink-2:focus,
.btn.bg-gradient-pink-2:hover,
.btn.bg-gradient-purple,
.btn.bg-gradient-purple.focus,
.btn.bg-gradient-purple:focus,
.btn.bg-gradient-purple:hover {
  color: #fff;
}
.btn-danger-2.focus,
.btn-danger-2:focus,
.btn.bg-gradient-danger-2.focus,
.btn.bg-gradient-danger-2:focus {
  color: #fff;
}
.btn-success-2,
.btn.bg-gradient-success-2 {
  color: #fff;
}
.btn-success-2:hover,
.btn.bg-gradient-success-2:hover {
  color: #fff;
}
.btn-danger-2,
.btn.bg-gradient-danger-2 {
  color: #fff;
}
.btn-danger-2:hover,
.btn.bg-gradient-danger-2:hover {
  color: #fff;
}
.btn-flat-hover-info {
  background-color: transparent;
  box-shadow: none;
}
.btn-flat-hover-info:hover {
  color: rgba(13, 110, 253, 0.8) !important;
  background-color: rgba(13, 110, 253, 0.1) !important;
  box-shadow: none !important;
}
.bg-dark-2 {
   color: rgba(var(--coolGrey25rgb), 1) !important;
   position: relative;
   /*margin-left: auto;
   margin-right: auto;*/
   border: 1px solid rgb(var(--coolGrey800rgb), 1);
   border-color: rgb(var(--coolGrey800rgb), 1) !important;
   border-width: 1px !important;
   border-style: solid !important;
   border-radius: 0.6rem;
   background-color: #24272b;
/*   transition: all 0.1s ease-in-out;*/
   background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
   -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
   -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
   -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
   -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
   box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important!;
}
.bg-dark-2.success {
  &amp;:hover {
      color:rgb(var(--z-green50), 0.7) !important;
      border-color: rgb(var(--z-green50), 0.7) !important;
      -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    }
  }
  .bg-dark-2.info {
    &amp;:hover {
      color:rgb(var(--z-blue-500), 0.7) !important;
      border-color: rgb(var(--z-blue-500), 0.7) !important;
      -webkit-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.2) !important;
      -moz-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.2) !important;
      -ms-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.2) !important;
      -o-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.2) !important;
      box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.2) !important;
    }
  }
.features-content {
  &amp; h2,h3,h4,h5 {
    color: #1f2b40 !important;
  }
  &amp; img {
    width: 100%;
    max-width: 100%;
  }
  &amp; p {
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
  }
  &amp; ul&gt;li&gt;p {
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.75;
  }
  &amp; a {
    font-weight: 500;
    color: rgb(var(--z-blue-500), 1);
    &amp;:hover {
      color: rgb(var(--z-blue-500), 0.7);
    }
  }
}
svg.text-success .color-foreground {
  fill: #25F5D2;
}

svg.text-success .color-background {
  fill: #18B69B;
}
.text-success-2 {
  color: rgba(24,182,155,0.9);
}
.text-success-3 {
  color: rgba(37, 245, 210,1);
}
.text-link {
  font-weight: 500;
  color: rgb(var(--z-blue-500), 1);
  &amp;:hover {
    color: rgb(var(--z-blue-500), 0.8);
  }
}
.table&gt;:not(:last-child)&gt;:last-child&gt;* {
    border-bottom-color: none !important;
}
.dataTable-table&gt;thead&gt;tr&gt;th {
    border-bottom: none !important;
    white-space: nowrap;
}
.dataTable-table&gt;tbody&gt;tr&gt;td {
  white-space: nowrap;
}
.table&gt;:not(caption)&gt;*&gt;* {
    border-bottom: none !important;
}
.width-72-px {
  width: 72px;
}
.width-84-px {
  width: 84px;
}
.width-96-px {
  width: 96px;
}
.width-110-px {
  width: 110px;
}
.width-130-px {
  width: 140px;
}
.width-150-px {
  width: 150px;
}
.bg-size-10 {
  background-size: 10%;
}
.bg-size-15 {
  background-size: 15%;
}
.bg-size-20 {
  background-size: 20%;
}
.bg-size-25 {
  background-size: 25%;
}
.bg-size-30 {
  background-size: 30%;
}
.bg-size-35 {
  background-size: 35%;
}
.bg-size-40 {
  background-size: 40%;
}
.bg-size-45 {
  background-size: 45%;
}
.bg-size-50 {
  background-size: 50%;
}
.bg-size-55 {
  background-size: 55%;
}
.bg-size-60 {
  background-size: 60%;
}
.bg-size-65 {
  background-size: 65%;
}
.bg-size-70 {
  background-size: 70%;
}
.bg-size-75 {
  background-size: 75%;
}
.bg-size-80 {
  background-size: 80%;
}
.editable-container.editable-inline {
  width: 100% !important;
}
.editable-buttons {
  margin-top: 5px;
  display: inherit !important;
}
.no-shadow {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.modal {
  --bs-modal-zindex: 1050;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: #fff;
  --bs-modal-border-color: rgba(0, 0, 0, 0.2);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 1rem;
  --bs-modal-box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(20, 20, 20, 0.12), 0 0.125rem 0.25rem -0.0625rem rgba(20, 20, 20, 0.07);
  --bs-modal-inner-border-radius: calc(0.75rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: #dee2e6;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: #dee2e6;
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.btn .dropdown-toggle:hover {
  transform: none;
}

.fixed-plugin .fixed-plugin-button {
    background: #fff;
    border-radius: 50%;
    bottom: 80px;
    right: 20px;
    font-size: 1.25rem;
    z-index: 990;
    box-shadow: 0 2px 12px 0rgba(0,0,0,.16);
    cursor: pointer;
}
.db-edit-column-container {
  background: var(--bs-gray-200);
  border-radius: 0.7rem;
}
.kanban-container {
  overflow: auto !important;
  padding-bottom: 0.1rem;
}
.kanban-board {
    position: relative;
    float: left;
    background: #fff;
    transition: all .3s cubic-bezier(.23,1,.32,1);
    border-radius: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: 0 1px 1px 1px hsl(0deg 0% 8% / 5%), 0 4px 5px -5px hsl(0deg 0% 8% / 6%);
    cursor: grab;
}
.kanban-board::first-child {
  border-top-left-radius: 0.75;
  border-bottom-left-radius: 0.75rem;
}
.kanban-board::last-child {
  border-top-right-radius: 0.75;
  border-bottom-right-radius: 0.75rem;
}
.kanban-board-header {
  background-color: var(--bs-gray-100);
  /*border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;*/
  min-height: 65px;
  max-height: 65px;
  max-width: 100%;
  overflow: hidden;
}
.kanban-board header .kanban-title-board {
  white-space: nowrap;
  cursor: text;
}
.kanban-column-title {
  font-weight: 600 !important;
  margin: -10px !important;
  padding: 0.5rem 0.55rem !important;
  display: inline;
  font-size: 16px;
  color: var(--bs-heading-color) !important;
}
.kanban-board .kanban-drag {
    min-height: auto;
    padding: 20px;
    max-height: 950px;
    overflow-y: auto;
}
.kanban-item {
    background: var(--bs-gray-100);
    padding: 0.5rem 0.75rem;
    margin-bottom: 20px;
    transition: all .3s cubic-bezier(.23,1,.32,1);
    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.column-visibility-icon {
  position: absolute;
  top: 20px;
  right: 0;
  background-color: var(--bs-gray-100);
}
.column-visibility-icon:hover {
  z-index: 2;
}
.column-action-icon {
  position: absolute;
  top: 20px;
  right: 30px;
  background-color: var(--bs-gray-100);
}
.column-action-icon:hover {
  z-index: 2;
}
.btn-faq {
  right: 0 !important;
  margin-right: 1.5rem;
  padding-top: 0.25rem !important;
  position: absolute;
}
.popover {
  color: rgba(var(--coolGrey25rgb), 1);
  background-image: linear-gradient(310deg, rgba(var(--z-dark-200), 1) 0%, rgba(var(--z-dark-100), 1) 100%);
/*  border: 1px solid var(--coolGrey100);*/
  padding: 0px;
  z-index: 9999;
  box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(132,140,154, 0.75), 0 0.125rem 0.25rem -0.0625rem rgba(132,140,154, 0.75);
  &amp; .popover-header {
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
    padding-top: 1rem;
    margin-bottom: 0;
    font-size: var(--bs-popover-header-font-size);
    color: rgba(var(--coolGrey25rgb), 1);
    background-color: #fff;
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius);
  }
  &amp; .popover-body {
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
    padding-bottom: 1rem;
    color: rgba(var(--coolGrey25rgb), 1);
  }
}
.accordion {
  --bs-accordion-color: #fff;
  --bs-accordion-bg: #fff;
  --bs-accordion-transition: all 0.15s ease-in, border-radius 0.15s ease;
  --bs-accordion-border-color: rgba(0, 0, 0, 0.125);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0.8rem !important;
  --bs-accordion-inner-border-radius: 0.8rem !important;
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-btn-color: #67748e;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-icon-width: 1rem;
  --bs-accordion-btn-icon-transform: rotate(180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-focus-border-color: #e293d3;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1.5rem;
  --bs-accordion-body-padding-y: 1.5rem;
  --bs-accordion-active-color: #344767;
  --bs-accordion-active-bg: transparent;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 2rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}

.accordion-button:hover {
  z-index: 2;
}

.accordion-button:focus {
  z-index: 3;
  border-color: var(--bs-accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-header {
  margin-bottom: 0;
  font-size: calc(1.275rem + 0.3vw);
  font-weight: 800;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: none !important;
  border-radius: var(--bs-accordion-border-radius);
  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
}

.accordion-item:first-of-type {
  border-radius: var(--bs-accordion-border-radius) !important;
  /*border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);*/
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-item:last-of-type {
  border-radius: var(--bs-accordion-border-radius) !important;
  /*border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);*/
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  color: var(--bs-body-color);
  font-size: 1.15rem;
  font-weight: 600;
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}

.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
  border-top: 0;
}

.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}

.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}
.apps-list {
    display: flex !important;
}
@media (max-width: 991.98px){
  .dropdown.nav-item .dropdown-menu-animation.show {
    height: auto !important;
    /*max-height: 300px;*/
  }
  .navbar-expand.navbar-expand-lg .dropdown.nav-item .dropdown-menu-animation.show{
    top: 37px;
    overflow-y: auto;
    max-height: calc(100vh - 51px);
  }
  .apps-list {
    box-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !important;
    cursor: pointer;
  }
  :not(.navbar) .dropdown:not(.dropdown-hover) .dropdown-menu.apps-list {
      margin-top: 50px !important;
    margin-left: auto;
    margin-right: auto !important;
    right: -5px !important;
  }
}
@media (max-width: 991.98px) and (min-width: 769px){
.navbar-expand.navbar-expand-lg .dropdown.nav-item .dropdown-menu-animation.show{
    left: -100px;
  }
  .navbar-expand.navbar-expand-lg .dropdown.nav-item .dropdown-menu-animation.show:before{
    right: 58px;
    left: auto;
  }
}
/***************************
 * Index Header
 * *************************
 */
.index-header {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/aniket-deole-294646-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header2 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/panoramic-1920s-oil-rigs.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header3 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/oil-well-clouds-dawn.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header4 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/rob-bye-20143-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header5 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/dino-reichmuth-84359-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header6 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/oil-dark-sun-pumpjack.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header7 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/pixpoetry-803552-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header8 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/sam-ekpil-522518-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header9 {
  /*padding-top: 140px !important;*/
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/david-emrich-800498-unsplash.jpg') no-repeat center center #D1D1D1;
  background-size: cover;
  position: relative;
}
.index-header10 {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/rawpixel-645297-unsplash.jpg') no-repeat center center / cover;
  height: 150px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .8)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}
.index-header11:before {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/aaron-burden-202486-unsplash.jpg') no-repeat center center / cover;
  height: 250px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}
.index-header12:before {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/anchor-lee-181406-unsplash.jpg') no-repeat center center / cover;
  height: 250px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}
.index-header13:before {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/pietro-jeng-266016-unsplash.jpg') no-repeat center center / cover;
  height: 550px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}
.index-header14:before {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/tim-mossholder-621524-unsplash.jpg') no-repeat center center / cover;
  height: 350px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}
.index-header15:before {
  /*padding-top: 140px !important;*/
  content: '';
  top: 0;
  left: 0;
  background: url('https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/rawpixel-745956-unsplash.jpg') no-repeat center center / cover;
  height: 150px;
  width: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 50px;
  z-index: -1;
}

/*******************
 * General
 * *****************
 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-moz-scrollbar {
  width: 6px;
  height: 6px;
}
::-ms-scrollbar {
  width: 6px;
  height: 6px;
}
::-o-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track-piece:start {
  background: transparent !important;
}
::-webkit-scrollbar-track-piece:end {
  background: transparent !important;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-moz-scrollbar-track {
  background-color: transparent;
}
::-ms-scrollbar-track {
  background-color: transparent;
}
::-o-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
::-moz-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
::-ms-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
::-o-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
::-moz-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
::-ms-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
::-o-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--bs-placeholder-color);
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--bs-placeholder-color);
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: var(--bs-placeholder-color);
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: var(--bs-placeholder-color);
  }
  ::placeholder {
    color: var(--bs-placeholder-color);
  }
 .content-wrapper {
    overflow: hidden;
    min-height: 100vh;
}
.column-max-w {
  overflow-x: auto;
  max-width: 400px; 
}
.bg-light-pink {
  background-color: rgba(255, 158, 244, 0.05);
}
.bg-light-blue {
  background-color: rgba(0,123,255,0.05);
}
.bg-light-green {
  background-color: rgba(24, 182, 156,0.05);
}
.bg-dots {
    background-image:url('/img/backgrounds/bg-dots.svg');
    background-repeat: repeat;
}
.bg-grid-coolGrey50 {
    background-image:url('/img/backgrounds/bg-grid-coolGrey50.svg');
    background-repeat: repeat;
}
.bg-hexagon-grid-coolGrey50 {
    background-image:url('/img/backgrounds/bg-hexagon-grid-coolGrey50.svg');
    background-repeat: repeat;
}
.bg-cubed-lines {
    background-image:url('/img/backgrounds/cubed-lines.svg');
    background-repeat: repeat;
}
.bg-cubed-coolGrey50 {
    background-image:url('/img/backgrounds/bg-cubed-coolGrey50.svg');
    background-repeat: repeat;
}
.bg-wave-lines-coolGrey50 {
    background-image:url('/img/backgrounds/bg-wave-lines-coolGrey50.svg');
    background-repeat: repeat;
}
.bg-gray-waves {
    background-image:url('/css/soft-ui/img/shapes/waves-gray.svg');
    background-repeat: repeat;
}
.bg-wave-up {
    background-image:url('/css/soft-ui/img/shapes/wave-up.svg');
    background-repeat: repeat;
}
.bg-wave-down {
    background-image:url('/css/soft-ui/img/shapes/wave-down.svg');
    background-repeat: repeat;
}
.bg-pattern-lines {
    background-image:url('/css/soft-ui/img/shapes/pattern-lines.svg');
    background-repeat: repeat;
}
.bg-h-logo {
    background-image:url('/img/backgrounds/h-logo-coolgrey50.jpg');
    background-repeat: repeat;
}
.bg-gradient-white {
  background-image: linear-gradient(310deg, rgba(245, 245, 245, 0.1) 0%, var(--coolGrey50_alpha50) 100%);
}
.bg-hover-white {
  &amp;:hover {
    background-color: #fff !important;
  }
}
.border-avatar-profile {
    border: 5px solid rgba(255, 255, 255, 0.3);
}
.profile-avatar {
    background: transparent;
    border: none;
}
.profile-image {
  width: 200px !important;
  height: 200px !important;
  font-size: 3rem !important;
}
.popover-btn {
    color: inherit;
}
.popover-btn:hover {
    color: #0676CE;
}
 .h-nav {
    margin-left: auto;
    float: right;
 }
 .logo {
    height: 100%;
    max-height: 40px;
    width: auto;
    padding: 3px;
    margin-right: auto;
    margin-left: auto;
    z-index:99;
}
.logo:hover {
    opacity: 0.8;
}
.btn {
    margin-bottom: 0;
 }
.g-icon {
  vertical-align: middle;
}
.vertical-align-middle {
  vertical-align: middle;
}
.z-index-4 {
  z-index: 4 !important;
}
.z-index-5 {
  z-index: 5 !important;
}
/*.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #333 !important;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 50%;
  opacity: 0.5;
}

.btn-close:hover {
  color: #333 !important;
  text-decoration: none;
  opacity: 0.75;
}

.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(203, 12, 159, 0.25);
  opacity: 1;
}

.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}*/
.btn-nav {
    margin: 0rem;
/*    margin-top: 0.5rem;*/
    display: flex;
    background: transparent;
    border-radius: 2rem;
    width: 32px;
    height: 32px;
}
.btn-nav:hover {
    background: var(--coolGrey100_alpha05);
    i {
      color: rgba(0, 123, 255, 0.7);
    }
}
.btn-nav.pink:hover {
    background: var(--coolGrey100_alpha05);
    i {
      color: rgba(255, 158, 244, 1);
    }
}
.btn-nav.success:hover {
    background: var(--coolGrey100_alpha05);
    i {
      color: rgba(37, 245, 210,1);
    }
}
.btn-nav:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-nav .pulse {
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(37, 245, 210, 1) !important;
  background-color: rgba(37, 245, 210, 0.8);
  height: 100%;
  width: 100%;
  border-radius: 100%;
  opacity: 0.8;
  transform: scale(0.75);
  animation: pulsing 2s ease-out infinite;

  &amp;:nth-of-type(1) {
    animation-delay: -0.5s;
  }
  &amp;:nth-of-type(2) {
    animation-delay: -1s;
  }
  &amp;:nth-of-type(3) {
    animation-delay: -1.5s;
  }
  &amp;:i {
    color: rgba(37, 245, 210, 1) !important;
  }
  &amp;:hover {
    background-color: rgba(37, 245, 210,1);
    animation-play-state: paused;
  }
}

@keyframes pulsing {
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
/*.btn-nav.pulse:before {
  background: rgba(37, 245, 210,0.3);
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -1;
  background-position: 0px 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-x: 50px;
  border-radius: 50%;
  animation: bg-wave 2s ease-out infinite;
}
.btn-nav.pulse:hover:before {
  animation-play-state: paused;
}
@keyframes bg-wave {
  0% {
    background-size: 50%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    background-size: 100%;
    opacity: 0;
  }
}*/

.btn-block {
    display: block;
}
.btn-navy {
    background: #041FC9;
    border: 1px solid #00A8FF !important;
    color: #FFF !important;
    background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%);
}
.btn-navy:hover {
    background: #002391;
    border-color: #0088FF !important;
    background-image: linear-gradient(to bottom, #002391 0%, #3656BA 100%);
}
.btn-round {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  color: inherit;
  line-height: 1;
  font-size:1rem;
  height: 40px;
  width: 40px;
  padding: 0;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1) !important;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.btn-round:hover,
.btn-round:focus,
.btn-round:active {
  color: rgba(0, 123, 255, 0.7);
  background: rgba(255,255,255,0.5);
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-round.disabled,
.btn-round.disabled:hover {
  color: var(--bs-body-color);
  background: rgba(255,255,255,0.5);
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  cursor: default;
}
.btn-square {
  vertical-align: middle;
  color: inherit;
  line-height: 1;
  padding: 0.5rem;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1) !important;
  border-radius: 0.5rem;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.btn-square:hover,
.btn-square:focus,
.btn-square:active {
  color: rgba(0, 123, 255, 0.7);
  background: rgba(255,255,255,0.5);
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-profile-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background-color: transparent;
  border-radius: 2rem;
/*  padding:0.5rem 0.5rem;*/
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.btn-profile-delete:hover {
  background-color: var(--coolGrey50);
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-profile-delete:focus {
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-number-delete {
  display: flex;
  color: inherit;
  background-color: transparent;
  border-radius: 2rem;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
}
.btn-number-delete:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-number-delete:focus {
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-file &gt; input[type="file"] {
    background-color: #fff;
    cursor: inherit;
    display: block;
    font-size: 100px;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    outline: none;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
.btn.btn-file {
    overflow: hidden;
    position: relative;
}
.btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-body-color);
  background-color: transparent;
  border-radius: 2rem;
  padding:0.4rem;
  height: 30px;
  width: 30px;
}
.btn-row:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: rgba(0, 123, 255, 0.7);
}
.btn-row:focus {
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-db {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
    border-radius: 2rem;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color);
}
.btn-db:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(0, 123, 255, 0.7);
}
.btn-db:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-esign {
  display: inline-flex;
  background: transparent;
    border-radius: 2rem;
    padding: 0.5rem;
    height: 32px;
    width: 32px;
    color: var(--bs-body-color);
    justify-content: center;
    vertical-align: middle;
    align-items: center;
}
.btn-esign:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(0, 123, 255, 0.7);
}
.btn-esign:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-esign.red:hover {
  color: rgba(255, 17, 0, 0.7);
}
.btn-dnd {
  display: grid;
  width: 30px;
  height: 30px;
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.btn-dnd:hover {
  background: rgba(0,0,0,0.06);
}
.btn-dnd-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--bs-body-color);
}
.btn-dnd:hover .btn-dnd-delete {
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-db-delete {
  display: flex;
  background: transparent;
  justify-content: center;
  align-items: center;
    border-radius: 2rem;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color);
    cursor: pointer;
}
.btn-db-delete:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-db-delete:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-db-stop {
  display: flex;
  background: transparent;
  justify-content: center;
  align-items: center;
    border-radius: 2rem;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color);
    cursor: pointer;
}
.btn-db-stop:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-db-stop:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.support-btn {
  display: inline-flex;
}
.btn-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: transparent;
    border-radius: 2rem;
    height: 35px;
    width: 35px;
    color: inherit;
    cursor: pointer;
}
.btn-ticket:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(0, 123, 255, 0.7);
}
.btn-ticket:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-ticket-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: transparent;
    border-radius: 2rem;
    height: 35px;
    width: 35px;
    color: inherit;
    cursor: pointer;
}
.btn-ticket-delete:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(255, 17, 0, 0.7) !important;
}
.btn-ticket-delete:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-barge-in-call {
  color: rgba(88,101,112,0.7);
  background-color: transparent;
  border-radius: 2rem;
  padding:0.4rem 0.4rem 0.6rem;
  height: 20px;
  width: 20px;
}
.btn-barge-in-call:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: rgba(0, 123, 255, 0.7);
}
.btn-barge-in-call:focus {
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-comment {
  position: absolute;
  right: 30px;
  bottom: 30px;
}
.btn-profile {
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  background-color: transparent;
  border-radius: 50%;
/*  padding:0.5rem;*/
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.btn-profile:hover {
  background-color: var(--coolGrey50);
  color: rgba(0, 123, 255, 0.7);
}
.btn-profile:focus {
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.table-canvas-console {
  overflow: auto;
  width: 100%;
  background-color: var(--coolGrey50_alpha25);
  border-radius: 0;
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    thead {
      font-size: 0.75rem;
      color: var(--bs-heading-color);
      border-bottom: 1px solid var(--coolGrey100) !important;
      background: transparent !important;
      background-color: var(--coolGrey37) !important;
      tr th:first-child {
        border-top-left-radius: 0.0rem;
        border-bottom-left-radius: 0.0rem;
      }
      tr th:last-child {
        border-top-right-radius: 0.0rem;
        border-bottom-right-radius: 0.0rem;
      }
    }
    tbody {
      color: var(--bs-heading-color);
    }
    tr td:first-child {
        border-top-left-radius: 0.0rem;
        border-bottom-left-radius: 0.0rem;
    }
    tr td:last-child {
        border-top-right-radius: 0.0rem;
        border-bottom-right-radius: 0.0rem;
    }
    tr:hover {
      background-color: var(--coolGrey25) !important;
    }
    thead tr:hover {
      background-color: transparent !important;
    }
  }
  table.dt-p1-5&gt;tbody&gt;tr&gt;td {
    padding: 0.25rem 0.5rem;
  }
  table&gt;tbody&gt;tr {
    border-bottom: 1px solid var(--coolGrey50);
  }
}
.console-user-asset-delete {
    vertical-align: middle;
    position: relative;
    color: inherit !important;
    margin-left: auto;
    margin-right: 20px;
    width: 1em;
    max-width: 1em;
    /* overflow: hidden; */
    cursor: pointer;
    display: block;
    margin-top: -30px;
    float: right;
}
.console-user-asset-delete:hover {
    color: red !important;
}
.g-sidenav-pinned {
  &amp; .card-upgrade {
    opacity: 1;
    transition: opacity 3s ease;
  }
}
.g-sidenav-hidden {
  &amp; .card-upgrade {
    opacity: 0;
  }
}
.g-icon-file-download {
    vertical-align: middle !important;
    color: inherit !important;
}
.nav-user {
    padding: 2px 0 0 3px !important;
}
.img-circle {
    border-radius: 50% !important;
}
.branding-logo-wrapper {
  position: relative;
  margin-right: auto;
    margin-left: auto;
}
.branding-pre-logo {
    border-radius: 0.6rem;
    width: 100%;
    padding: 3rem 6rem;
    height: auto;
    border: 2px dashed rgba(206, 212, 218,1);
}
.branding-pre-logo {
  color: rgba(206, 212, 218,1) !important;
}
.branding-pre-logo:hover,
h6 .branding-pre-logo:hover {
    border: 2px dashed rgba(128, 189, 255, 1);
    color: rgba(128, 189, 255, 1) !important;
}
.grecaptcha-badge {
  z-index: -1px !important;
  display: none;
}
.branding-logo {
    border-radius: 0;
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 6rem;
    /*border: 2px solid rgba(0,0,0,0.1);*/
}
/*.phone-settings-switch {
    display: inline-flex;
    float: right;
    font-size: 1.5rem;
    margin-right: -10px;
}*/
.upload-vm-btn {
    margin-right: 0px;
    margin-left: auto;
    float:right;
}
.upload-vm-input {
    height: 40px !important;
    width: 40px !important;
    border-radius: 50%;
}
.upload-asset-btn {
    padding:0rem !important;
    border-radius:0.4rem !important;
    width: 34px !important;
    height: 34px !important;
    position: relative;
    overflow: hidden;
}
.upload-asset-input {
    height: 34px !important;
    max-height: 34px;
    width: 34px !important;
    min-width: 34px;
    max-width: 34px;
    border-radius: 0.4rem;
    position: absolute;
    /* overflow: hidden; */
    top: 0px !important;
    right: 0px !important;
    z-index: 1;
}
.upload-asset-icon {
/*  margin: -4px;*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropdown-icon {
    padding:0.37rem;
}
.fw-400 {
    font-weight: 400 !important;
}
.fw-500 {
    font-weight: 500 !important;
}
.fw-600 {
    font-weight: 600 !important;
}
.fw-700 {
    font-weight: 700 !important;
}
.fw-800 {
    font-weight: 800 !important;
}
.fw-900 {
    font-weight: 900 !important;
}
.float-right {
    float:right !important;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.status-add-btn {
  background:none;
  border-radius:3rem;
  padding:0.5rem;
}
.icon-md {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.status-add-btn:hover {
  background: #ddd;
}

.status-tab-form {
  background: transparent;
  border: 2px solid transparent;
  height: 30px !important;
  width: 85px;
  border-radius: 0.6em !important;
  color: inherit;
  font-size:0.9rem;
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
}
.status-tab-form:focus, .status-tab-form:hover {
  width: 150px;
  background: #fff;
}
.status-tab-form::placeholder {
  color: var(--bs-body-color);
  font-weight: 600;
}
.status-tabs-title {
  font-size: 1rem;
  font-weight: 700;
}
/*.status-info {
  background-color: rgba(233,243,252,0.8);
    border-radius: 0.7rem;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    color: inherit;
    display: inline-flex;
    width: 100%;
    height: auto;
    line-height: 1.25;
}
.blue-icon-color {
  color:rgba(34,139,230,1);
}*/
/*.custom-field-edit-icon {
  position: relative;
  top: -1px;
  background-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  padding-bottom: 0.1em;
  color: var(--bs-body-color);
}
.custom-field-edit-icon:hover {
  color: var(--bs-link-hover-color);
  background-color: var(--bs-gray-300);
}*/
.btn-add-p-e {
  float: right;
  position: relative;
  display: block;
  padding: 0.05rem 0.05rem;
  margin-right: 5px;
  margin-top: -35px;
  line-height: 0.5;
  height: 25px;
  width: 25px;
  color: var(--bs-body-color);
  cursor: pointer;
  &amp;:hover {
    background-color: var(--coolGrey100);
    color: rgba(0,123,255,0.8);
  }
}
.status-info-text {
  margin-left: 20px;
  margin-bottom: 0;
  line-height: 1.3;
  font-size: 0.875rem;
}
.status-tab-edit-form {
  margin:-10px;
  background: transparent;
  border: 2px solid transparent;
  height: 30px !important;
  width: 85px;
  border-radius: 0.6em !important;
  color: inherit;
  font-size:1rem;
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
}
.status-tab-edit-form:focus{
  width: 150px;
  background: #fff;
  border: 2px solid #80bdff !important;
  border-color: #80bdff !important;
}
.form-control-db-contact {
    border-radius: 0.6rem;
    border: 0.10rem solid transparent;
    background: #fff;
    color: #1E1E1E;
    border-color: transparent;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    padding:5px;
    font-size: 14px;
    font-weight: 300;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -webkit-inset: none;
    -moz-inset: none;
    -o-inset: none;
    inset: none;
}
.form-control-db-contact:focus {
    border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
 .form-control-db-contact::placeholder {
    color: var(--bs-body-color);
 }
 .phone-column-wrapper-db-edit {
    max-height:158px;
    width:100%;
    min-width:100%;
    overflow-y:auto;
    padding: 4px 2px 1px 2px;
}
.phone-column-db-edit {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:1px;
    -moz-column-gap:1px;
    -ms-column-gap:1px;
    -o-column-gap:1px;
    column-gap:1px;
    column-fill: auto;
}
.email-column-wrapper-db-edit {
    max-height:158px;
    width:100%;
    min-width:100%;
    /*max-width:300px;*/
    overflow-y:auto;
    padding: 4px 2px 1px 2px;
}
.email-column-db-edit {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:1px;
    -moz-column-gap:1px;
    -ms-column-gap:1px;
    -o-column-gap:1px;
    column-gap:1px;
    column-fill: auto;
}
.database-items-list {
  list-style: none;
    margin: 0;
    padding: 3px;
    overflow-x: auto;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    white-space: nowrap;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 4px;
    -moz-column-gap: 4px;
    -ms-column-gap: 4px;
    -o-column-gap: 4px;
    column-gap: 4px;
    column-fill: inherit;
}
.database-items-list li {
    margin-bottom: 5px;
    margin-left: 2px;
    display: flex;
}
.database-item input {
  color: var(--bs-body-color);
}
.custom-field-dropdown {
    left: -137px !important;
    padding: 0.5rem !important;
    -webkit-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -o-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
}
.custom-field-dropdown .dropdown-item {
  border-radius: 0.5rem !important;
  cursor: pointer;
}
.no-hover:hover {
  color: #344767 !important;
}
.btn-round-transparent-sm {
  vertical-align: middle;
  padding: 0.4rem;
  border-radius: 2rem;
  width: 30px;
  height: 30px;
}
.btn-round-transparent-sm:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(0, 123, 255, 0.7) !important;
}
.btn-visibility-icon {
  margin-top: -5px;
}
.btn-db-column {
  --bs-btn-padding-x: 1rem !important;
  --bs-btn-padding-y: 0.75rem !important;
  background: #fff !important;
}

.db-templates {
  margin-top: 15px;
  margin-bottom: 15px;
  padding:5px;
  height: auto;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}
.db-template-select {
  /*color:rgba(24,182,155,.9) !important;
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(24,182,155,.3);
  -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(24,182,155,.3);
  -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(24,182,155,.3);
  -o-box-shadow: 0 0 0.125rem 0.25rem rgba(24,182,155,.3);
  box-shadow: 0 0 0.125rem 0.25rem rgba(24,182,155,.3);
  background: rgba(24,182,155,.08) !important;*/
  
  /*color:rgba(77,162,255,1) !important;
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(128,189,255,.5);
  -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(128,189,255,.5);
  -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(128,189,255,.5);
  -o-box-shadow: 0 0 0.125rem 0.25rem rgba(128,189,255,.5);
  box-shadow: 0 0 0.125rem 0.25rem rgba(128,189,255,.5);
  background: rgba(128,189,255,.1) !important;*/
  width: 100%;
}
.db-field-delete {
    background: transparent;
    border-radius: 0px;
    top: 0px;
    right: -12px;
    float: right;
    display: block;
    position: relative;
    color: inherit;
    padding: 0.1rem;
    line-height: 1;
    transition: all ease 0.5s;
}
.db-field-delete:hover {
    background: #e9ecef;
    border-radius: 50%;
    color: rgba(0, 123, 255, 0.7) !important;
}
.db-field-edit {
    background: transparent;
    border-radius: 0px;
    top: 0px;
    right: -12px;
    float: right;
    display: block;
    position: relative;
    color: inherit;
    padding: 0.1rem;
    line-height: 1;
    transition: all ease 0.5s;
}
.db-field-edit:hover {
    background: #e9ecef;
    border-radius: 50%;
    color: rgba(0, 123, 255, 0.7) !important;
}
.db-field-delete-2 {
    background: transparent;
    border-radius: 0px;
    top: -24px;
    right: -12px;
    float: right;
    display: block;
    position: relative;
    color: inherit;
    padding: 0.1rem;
    line-height: 1;
    transition: all ease 0.5s;
}
.db-field-delete-2:hover {
    background: #e9ecef;
    border-radius: 50%;
    color: rgba(0, 123, 255, 0.7) !important;
}
.db-field-edit-2 {
    background: transparent;
    border-radius: 0px;
    top: -24px;
    right: -12px;
    float: right;
    display: block;
    position: relative;
    color: inherit;
    padding: 0.1rem;
    line-height: 1;
    transition: all ease 0.5s;
}
.db-field-edit-2:hover {
    background: #e9ecef;
    border-radius: 50%;
    color: rgba(0, 123, 255, 0.7) !important;
}
.template-selected {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(23, 235, 192,.4) !important;
  -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(23, 235, 192,.4) !important;
  -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(23, 235, 192,.4) !important;
  -o-box-shadow: 0 0 0.125rem 0.25rem rgba(23, 235, 192,.4) !important;
  box-shadow: 0 0 0 0.1875rem rgba(23, 235, 192,0.8) !important;
  /*background: rgba(23, 235, 192,.1) !important;*/
}
.db-template-demo-vid-wrapper {
  border-radius: 0.7rem;
  margin: -85px -16px -24px;
}
.small-box {
  border-radius: 0.6rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.small-box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: inherit;
}

.small-box &gt; .inner {
  padding: 10px;
}

.small-box-header {
  height: 210px;
  text-align: center;
  margin: -10px -10px 0 -10px;
  background: rgba(233, 236, 239,1);
  overflow: hidden;
}
.small-thumbnail {
  position: relative;
  width: auto;
  max-height: 100%;
}
.small-box-footer {
  overflow: hidden;
}

.small-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .col-xl-2 .small-box h3,
  .col-lg-2 .small-box h3,
  .col-md-2 .small-box h3 {
    font-size: 1.6rem;
  }
  .col-xl-3 .small-box h3,
  .col-lg-3 .small-box h3,
  .col-md-3 .small-box h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1200px) {
  .col-xl-2 .small-box h3,
  .col-lg-2 .small-box h3,
  .col-md-2 .small-box h3 {
    font-size: 2.2rem;
  }
  .col-xl-3 .small-box h3,
  .col-lg-3 .small-box h3,
  .col-md-3 .small-box h3 {
    font-size: 2.2rem;
  }
}

.small-box p {
  font-size: 1rem;
}

.small-box p &gt; small {
  color: #f8f9fa;
  display: block;
  font-size: .9rem;
  margin-top: 5px;
}

.small-box h3,
.small-box p {
  z-index: 5;
}

.small-box .icon {
  color: inherit;
  z-index: 0;
}

.small-box .icon &gt; i {
  font-size: 100px;
  position: absolute;
  right: 55px;
  top: 55px;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.small-box .icon &gt; i.fa, .small-box .icon &gt; i.fas, .small-box .icon &gt; i.far, .small-box .icon &gt; i.fab, .small-box .icon &gt; i.fal, .small-box .icon &gt; i.fad, .small-box .icon &gt; i.ion {
  font-size: 100px;
  /*top: 20px;*/
}

.small-box .icon svg {
  font-size: 70px;
  /*position: absolute;*/
  right: 15px;
  top: 15px;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.small-box:hover {
  text-decoration: none;
}

.small-box:hover .icon &gt; i, .small-box:hover .icon &gt; i.fa, .small-box:hover .icon &gt; i.fas, .small-box:hover .icon &gt; i.far, .small-box:hover .icon &gt; i.fab, .small-box:hover .icon &gt; i.fal, .small-box:hover .icon &gt; i.fad, .small-box:hover .icon &gt; i.ion {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
    color: rgba(0, 102, 255, 0.9);
    transition: transform 0.1s linear;
}

.small-box:hover .icon &gt; svg {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (max-width: 767.98px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon &gt; i.ion {
    font-size: 60px;
}
  .small-box p {
    font-size: 12px;
  }
.small-box .view-temp {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}
.small-box:focus {
  border: 2px solid green;
}
}
.small-box .view-temp &gt; a {
  vertical-align: middle;
  font-size: 0.7rem;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.btn-view-temp {
  vertical-align: middle;
  line-height: 0.5;
  color: rgba(88, 101, 112, 0.7);
  font-size:1.5rem;
  padding: 0.4rem;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1);
  border-radius: 2rem;
  margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;
  float:right !important;
  webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.btn-view-temp:hover {
  color: blue !important;
  background: rgba(255,255,255,0.5);
  webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-barge-in {
  padding: 0.4rem 0.8rem;
  background: transparent;
  vertical-align: middle;
}
.btn-barge-in:hover {
  background-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  color: white !important;
  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07) !important;
}
.btn-barge-out {
  padding: 0.4rem 0.8rem;
  background: transparent;
  vertical-align: middle;
}
.btn-barge-out:hover {
  background-image: linear-gradient(310deg, #ea0606 0%, #ff667c 100%);
  color: white !important;
  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07) !important;
}
.console-user-asset-canvas {
    height: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: nowrap;
    list-style: none;
    padding: 0.4rem 1rem;
}
.console-user-asset-list {
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    position: relative;
    vertical-align: middle;
    text-overflow: ellipsis;
    max-width: 95%;
    &amp; a {
      font-size: 0.875rem;
    }
}
.console-user-asset {
    display: inline-block;
    width: auto;
    max-width: 225px;
    overflow-x: auto;
    white-space: nowrap;
}
.console-user-asset:hover {
    color: rgba(0, 123, 255, 0.7) !important;
}
.mailbox-read-time {
    color: #67748e;
    font-size: 0.75rem;
    margin-bottom: 0;
    line-height: 30px;
}
.card-title {
  float: left;
}
.form-control-gray {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: #495057;
  background: #f2f4f5 !important;
  height: 40px !important;
  border-radius: 0.7rem !important;
  border: none;
}
.switch-icon {
  margin: -5px;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .form-control-gray {
    transition: none;
  }
}

.form-control-gray[type="file"] {
  overflow: hidden;
}

.form-control-gray[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control-gray:focus {
  color: #495057;
  background-color: #fff !important;
  border-color: #e293d3;
  outline: 0;
  box-shadow: 0 0 0 2px #80bdff;
}

.form-control-gray::-webkit-date-and-time-value {
  height: 1.4rem;
}

.form-control-gray::placeholder {
  color: var(--bs-placeholder-color);
  opacity: 1;
}

.form-control-gray:disabled,
.form-control-gray[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

.form-control-gray::file-selector-button {
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: #495057;
  background-color: #fff;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: all 0.15s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .form-control-gray::file-selector-button {
    transition: none;
  }
}

.form-control-gray:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #f2f2f2;
}
.wrap-center {
    position: relative;
    max-width: 650px;
}
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.pill-block {
    display: inline-flex;
    position: relative;
    vertical-align: middle !important;
}

@media screen and (max-width: 767px)  {
    .phone-column-wrapper-db-edit {
      max-height:158px;
      width:100%;
      min-width:100%;
      overflow-y:auto;
      padding: 2px 2px 2px 16px;
    }
    .phone-column-db-edit {
        -webkit-column-count:2;
        -moz-column-count:2;
        -ms-column-count:2;
        -o-column-count:2;
        column-count:2;
        -webkit-column-gap:1px;
        -moz-column-gap:1px;
        -ms-column-gap:1px;
        -o-column-gap:1px;
        column-gap:1px;
        column-fill: auto;
    }
    .email-column-wrapper-db-edit {
        max-height:158px;
        width:100%;
        min-width:100%;
        /*max-width:300px;*/
        overflow-y:auto;
        padding: 2px 4px 2px 2px;
    }
    .email-column-db-edit {
        -webkit-column-count:2;
        -moz-column-count:2;
        -ms-column-count:2;
        -o-column-count:2;
        column-count:2;
        -webkit-column-gap:1px;
        -moz-column-gap:1px;
        -ms-column-gap:1px;
        -o-column-gap:1px;
        column-gap:1px;
        column-fill: auto;
    }
}
@media screen and (max-width: 576px)  {
    .phone-column-wrapper-db-edit {
      max-height:158px;
      width:100%;
      min-width:100%;
      overflow-y:auto;
      padding: 2px 2px 2px 16px;
    }
    .phone-column-db-edit {
        -webkit-column-count:2;
        -moz-column-count:2;
        -ms-column-count:2;
        -o-column-count:2;
        column-count:2;
        -webkit-column-gap:1px;
        -moz-column-gap:1px;
        -ms-column-gap:1px;
        -o-column-gap:1px;
        column-gap:1px;
        column-fill: auto;
    }
    .email-column-wrapper-db-edit {
        max-height:158px;
        width:100%;
        min-width:100%;
        /*max-width:300px;*/
        overflow-y:auto;
        padding: 2px 4px 2px 2px;
    }
    .email-column-db-edit {
        -webkit-column-count:1;
        -moz-column-count:1;
        -ms-column-count:1;
        -o-column-count:1;
        column-count:1;
        -webkit-column-gap:1px;
        -moz-column-gap:1px;
        -ms-column-gap:1px;
        -o-column-gap:1px;
        column-gap:1px;
        column-fill: auto;
    }
}

/*********************
--- App Icons Svg ---
*********************/
.calendar-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/calendar-blk-h-bg-coolGrey100.svg'); 
}
.chat-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/chat-blk-h-bg-coolGrey100.svg'); 
}
.contacts-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/contacts-blk-h-bg-coolGrey100.svg'); 
}
.crm-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/crm-blk-h-bg-coolGrey100.svg'); 
}
.data-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/data-blk-h-bg-coolGrey100.svg'); 
}
.docs-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/docs-blk-h-bg-coolGrey100.svg'); 
}
.email-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/email-blk-h-bg-coolGrey100.svg'); 
}
.esign-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/esign-blk-h-bg-coolGrey100.svg'); 
}
.forms-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/forms-blk-h-bg-coolGrey100.svg'); 
}
.hr-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/hr-blk-h-bg-coolGrey100.svg'); 
}
.maps-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/maps-blk-h-bg-coolGrey100.svg'); 
}
.payroll-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/payroll-blk-h-bg-coolGrey100.svg'); 
}
.phone-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/phone-blk-h-bg-coolGrey100.svg'); 
}
.product-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/product-blk-h-bg-coolGrey100.svg'); 
}
.projects-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/projects-blk-h-bg-coolGrey100.svg'); 
}
.relations-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/relations-blk-h-bg-coolGrey100.svg'); 
}
.remote-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/remote-blk-h-bg-coolGrey100.svg'); 
}
.sales-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/sales-blk-h-bg-coolGrey100.svg'); 
}
.sites-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/sites-blk-h-bg-coolGrey100.svg'); 
}
.tasks-app-blk {
  height: 40px;
  width: 40px;
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/icons/h-apps/tasks-blk-h-bg-coolGrey100.svg'); 
}
.bg-h-logo {
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/img/backgrounds/h-logo-coolGrey50-vertical.svg'); 
}

/*********************
--- Welcome Page---
*********************/
.welcome-title-container {
    display: webkit-box;
    display: webkit-flex;
    display: ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.highlight-container {
    display: webkit-box;
    display: webkit-flex;
    display: ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.welcome-image-container {
    display: webkit-box;
    display: webkit-flex;
    display: ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    max-width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
/*.welcome-title-container h1 {
    font-size: 40px;
}*/
.footer .nav-item .nav-link.footer-text {
  font-weight: 600 !important;
  color: #fff !important;
  &amp;:hover {
    color: #25F5D2 !important;
  }
}
.welcome-helio-img {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-top: -1.5rem;
}
.welcome-title {
  font-family: var(--bs-font-poppins);
    font-size: 55px !important;
    color: #fff;
    font-weight: 700;
    white-space: normal;
}
.welcome-subtitle {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    white-space: normal;
    color: var(--bs-body-color);
}
.sign-up-title {
    font-size: 50px;
    color:inherit !important;
    font-weight: 800;
    white-space: normal;
}
.how-it-works-text {
    color: #101010;
    font-size: 35px !important;
    font-weight: 800;
    white-space: normal;
}
.reveal-from-right{
  position: relative;
  transform: translateX(600px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-from-bottom{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-from-left{
  position: relative;
  transform: translateX(-600px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-from-right.active{
  transform: translateY(0);
  opacity: 1;
}
.reveal-from-bottom.active{
  transform: translateX(0);
  opacity: 1;
}
.reveal-from-left.active{
  transform: translateX(0);
  opacity: 1;
}
.text-sm-dropdown {
  white-space: break-spaces;
  line-height: 1 !important;
  font-size: 0.875rem !important;
}
.dropdown-item:hover .text-primary-hover{
  color: #FF0080 !important;
}
.dropdown-item:hover .text-info-hover{
  color: #21d4fd !important;
}
.dropdown-item-info:hover .text-info-hover{
  color: #21d4fd !important;
}
.dropdown-item:hover .text-success-hover,{
  color: #98ec2d !important;
}
.dropdown-item-info:hover .text-success-hover{
  color: #98ec2d !important;
}
.dropdown-item:hover .text-success-hover-2{
  color: #25F5D2 !important;
}
.dropdown-item-info:hover .text-success-hover-2{
  color: #25F5D2 !important;
}
.dropdown-item:hover .text-pink-hover{
  color: rgba(255, 158, 244, 1) !important;
}
.dropdown-item-info:hover .text-pink-hover{
  color: rgba(255, 158, 244, 1) !important;
}
.dropdown-item .app-hover-show {
  display: none;
}
.dropdown-item:hover .app-hover-show {
  display: block;
}
ul.dropdown-menu-labels {
  width: 100%;
/*  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);*/
  max-height: 200px;
  overflow-y: auto;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius:0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
  border-radius: 0.6rem;
  box-shadow: 0 8px 26px -4px hsl(0deg 0% 8% / 15%), 0 8px 9px -5px hsl(0deg 0% 8% / 6%) !important;
}
/*.dropdown-menu-labels .dropdown ul {
  height: 300px;
  overflow: hidden;
  overflow-y: scroll;
}*/
.btn-login {
    display: block !important;
    color: white !important;
    background-color: rgb(255 254 255 / 10%) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.btn-login:hover {
  background-color: rgb(255 254 255 / 30%) !important;
}
.btn-login-2 {
    display: block !important;
    color: var(--bs-heading-color);
    background-color: rgb(255 254 255 / 10%) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.btn-login-2:hover {
  color: rgba(var(--z-blue-500),1) !important;
  background-color: rgb(0 0 0 / 5%) !important;
}
.btn-text-white:hover,
a.btn-text-white:hover {
  color: white !important;
}
.btn-trans-white {
  color: #ffffff !important;
}
.btn-trans-white:hover {
/*  color: var(--bs-body-color) !important;*/
color: rgba(0, 123, 255, 1) !important;
}
.bg-trans-outline-white {
  border-color: hsla(0, 0%, 100%, .75) !important;
  background: hsla(0, 0%, 100%, .1) !important;
  &amp;:hover {
    opacity: 1 !important;
    background: #fff;
    background-color: #fff !important;
    color: #000421 !important;
  }
}
.nav-login-signup {
  float: right ;
  margin-left: auto;
}
.card-signup {
    border:none;
    padding: 1rem;
    background-color: #fff ;
    border-radius: 0.7rem;
    max-width: 500px;
  }
  .input-signup {
    padding-right: 5rem;
    background-color: var(--coolGrey50);
    border: 1px solid var(--coolGrey50) !important;
    font-size: 0.95rem;
    color: var(--bs-heading-color);
    border-radius: 0.5rem !important;
    height: 35px;
  }
  .input-signup::placeholder {
    color: var(--bs-gray-500);
  }
  .btn-cal-signup {
    position: absolute;
    top: 16px; 
    right:17px; 
    border: none;
    border-radius: 0.5rem; 
    color: #fff; 
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
  }
  .btn-cal-signup:hover {
    color: #fff;
  }
.showcase-slide {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
.showcase-dialpad {
  margin: 10rem;
}
/*.showcase-item {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}*/
.showcase-bg-gradient-success {
  background: rgba(37, 245, 210,0.1);
  border-radius: 3rem;
  /*background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);*/
  /*background: rgba(255,255,255,0.5);*/
}
.showcase-bg-gradient-darker {
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
  border-radius: 3rem;
  /*background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);*/
  /*background: rgba(255,255,255,0.5);*/
}
.showcase-bg-gradient-info {
  background: rgba(5, 201, 245,0.15);
  border-radius: 3rem;
  /*background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);*/
  /*background: rgba(255,255,255,0.5);*/
}
.showcase-bg-gradient-pink {
  background: rgba(255, 158, 244, 0.1);
  border-radius: 3rem;
  /*background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);*/
  /*background: rgba(255,255,255,0.5);*/
}
/*.showcase-bg-gradient-info:before {
  content: "";
  background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%) !important;
  opacity: 0.5 !important;
}*/
.showcase-nav-pill {
      width: 75% !important;
      white-space: nowrap;
    }
.showcase-nav-pill-2 {
      width: 50% !important;
      white-space: nowrap;
  }
.showcase-nav-pill-3 {
    width: 100% !important;
    /*white-space: nowrap;*/
}
video.demo-video{
  border-radius: 0.7rem;
  box-shadow: 0 5px 10px 5px rgb(0, 0, 0, 0.1);
}
.demo-video video{
  border-radius: 0.7rem;
  box-shadow: 0 5px 10px 5px rgb(0, 0, 0, 0.1);
}
.demo-main-video video {
  border-radius: 1rem;
  box-shadow: 0 23px 45px -11px rgb(20 20 20 / 25%);
}
.video-js {
  background-color: transparent !important;
}
.computer-screen {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    -webkit-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -o-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    box-shadow: 0 0.3125rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.maxwidth-600{
  max-width: 600px;
}
.img-shadow {
    -webkit-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    -o-box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
    box-shadow: 0 0.3125rem 3rem 0 rgb(0 0 0 / 15%);
}
.halsell-icon-rocket-user {
    /*background-image: url("../vectors/rocket_takeoff_person.png") !important;*/
    background: center;
    background: no-repeat;
    width: 150px;
    height: auto;
    color: #333;
}
.how-works-icons {
    width: 250px;
    height: auto;
}
.how-works-text {
    color: #111 !important;
    margin-top:10px;
    font-weight: 700;
}
.highlight-vectors {
    width: 100%;
    height: auto;
    /*box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.3);*/
}
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
#hero {
    opacity: 0.6;
}
.main-hero-banner{
  opacity: 1 !important;
  position: relative;
}
.main-hero-banner:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 500px;
/*  background: linear-gradient(to right, #343a64, #1d2137);*/
  z-index: -1;
}
.blue-wavvy-bg{
  overflow: hidden;
  max-height: 800px;
}
.blue-wavvy-bg &gt; .page-header{
  height: 800px;
}
@media screen and (max-width: 480px) {
  .blue-wavvy-bg,
  .blue-wavvy-bg &gt; .page-header{
    max-height: 550px;
  }
  .main-hero-banner:before{
    min-height: 450px;
  }
}
#hero-svg {
      -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    font-family: GT America;
    color: #2c2f33;
    -webkit-font-smoothing: antialiased;
    box-sizing: inherit;
    border: 0 solid #a1aebb;
    display: block;
    vertical-align: middle;
    height: 800px;
    position: absolute;
    margin: 0 auto;
    top: 0;
    right: 0;
    /*bottom: 0;
    left: 0;*/
    width: 100% !important;
    visibility: visible;
}
.logo-center {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    align-content: center;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.showcase-apps-pill {
  display: block !important;
  height: 45px;
  text-align: center;
  margin-right: auto !important;
  margin-left: auto !important;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}
.showcase-apps-text {
  line-height: 1;
  font-size: 1.125rem;
}
.showcase-nav-pill-helio {
  width: 100%;
  white-space: nowrap;
}
.showcase-helio-btn-hover {
  /*padding: 1rem;
  border-radius: 0.7rem;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(310deg, #2152FF, #21D4FD);*/
  position: relative;
  display: block;
  text-align: center;
  color: var(--bs-gray-100);
  border: 3px solid var(--bs-gray-100);
  border-radius: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.1rem;
  padding: 0.25rem 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  font-size: 1.125rem !important;
  transition: all 0.1s ease-in-out;
/*  animation: 0.5s ease;*/
}
.showcase-helio-btn-hover.active {
/*  background-color: #fff;*/
  border: 3px solid rgba(0, 123, 255, 1) !important;
  color: rgba(0, 123, 255, 1) !important;
/*  box-shadow: 0 1px 3px 1px rgb(0, 0, 0, 0.1);*/
}
.showcase-helio-btn-hover:hover {
/*  background-color: #fff;*/
  border: 3px solid rgba(0, 123, 255, 1) !important;
  color: rgba(0, 123, 255, 1) !important;
}
.showcase-btn-hover {
  /*padding: 1rem;
  border-radius: 0.7rem;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(310deg, #2152FF, #21D4FD);*/
  margin-top: 0;
  margin-bottom: 0.1rem;
  padding-bottom: 0.25rem;
  font-weight: 400;
  line-height: 1.2;
  font-size: 1.125rem !important;
  transition: all 0.1s ease-in-out;
}
.showcase-btn-hover.highlight-info.active {
  border-bottom: 3px solid rgba(0, 123, 255, 0.7) !important;
  color: rgba(0, 123, 255, 0.7) !important;
}
.showcase-btn-hover.highlight-info:hover {
  color: rgba(0, 123, 255, 0.7);
}
.showcase-app-btn-hover.highlight-info.active {
  border-bottom: 3px solid rgba(0, 123, 255, 0.7) !important;
  color: rgba(0, 123, 255, 0.7) !important;
}
.showcase-app-btn-hover.highlight-info:hover {
  color: rgba(0, 123, 255, 0.7);
}
.showcase-app-btn-hover.highlight-pink.active {
  border-bottom: 3px solid rgba(255, 158, 244, 1) !important;
  color: rgba(255, 158, 244, 1) !important;
}
.showcase-app-btn-hover.highlight-pink:hover {
  color: rgba(0, 123, 255, 0.7);
}
.showcase-btn-hover.highlight-success.active {
  border-bottom: 3px solid rgba(37, 245, 210, 0.7) !important;
  color: rgba(37, 245, 210, 1) !important;
}
.showcase-btn-hover.highlight-success:hover {
  color: rgba(37, 245, 210, 0.7);
}
.showcase-app-btn-hover.highlight-success.active {
  border-bottom: 3px solid rgba(37, 245, 210, 0.7) !important;
  color: rgba(37, 245, 210, 1) !important;
}
.showcase-app-btn-hover.highlight-success:hover {
  color: rgba(37, 245, 210, 0.7);
}
.showcase-btn-howto {
  /*padding: 1rem;
  border-radius: 0.7rem;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(310deg, #2152FF, #21D4FD);*/
  border-left: 6px solid rgba(103, 116, 142, 0.25);
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  font-weight: 600;
  line-height: 1.2;
  font-size: 1.125rem !important;
  transition: all 0.1s ease-in-out;
  color: #1f2b40;
}
.showcase-btn-howto.highlight-info.active {
  border-left: 6px solid rgba(0, 123, 255, 0.7) !important;
  color: rgba(0, 123, 255, 0.7) !important;
}
.showcase-btn-howto.highlight-info:hover {
  color: rgba(0, 123, 255, 0.7);
}
.showcase-btn-howto.highlight-success.active {
  border-left: 6px solid rgba(37, 245, 210, 0.7) !important;
  color: rgba(37, 245, 210, 0.7) !important;
}
.showcase-btn-howto.highlight-success:hover {
  color: rgba(37, 245, 210, 0.7);
}
.howto-text {
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--bs-body-color);
  display: none;
}
.showcase-btn-howto.active .howto-text {
  display: block;
}
/*.showcase-btn-hover.active {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #3A416F;
  background: transparent;
  background-image: linear-gradient(310deg, #2152FF, #21D4FD);
}*/
.showcase-text {
  line-height: 1 !important;
  font-size: 1.125rem !important;
}
.accordion.welcome-showcase .accordion-item {
  box-shadow: none;
}
.accordion.welcome-showcase .accordion-item.highlight-info {
  background-color: rgba(0,123,255,0.1);
} 
.accordion.welcome-showcase .accordion-item.highlight-success {
  background-color: rgba(37, 245, 210,0.1);
} 
.accordion.welcome-showcase .accordion-item.highlight-pink {
  background-color: rgba(255, 158, 244, 0.1);
} 
.accordion.welcome-showcase .accordion-item.bg-coolGrey37 {
  background-color: var(--coolGrey37);
  border: 1px solid var(--coolGrey50) !important;
} 
/*.accordion-collapse.show {
  background-color: rgba(0,123,255,0.1);
}*/
@media screen and (max-width: 1199px) {
  .showcase-nav-pill {
      width: 100% !important;
    }
    .showcase-nav-pill-2 {
      width: 75% !important;
    }
    .showcase-dialpad {
      margin: 5rem;
    }
  }
@media screen and (max-width: 991px) {
    .welcome-title {
        font-size: 48px !important;
    }
    .btn-sm-d-none {
      display: none !important;
    }
    .btn-login {
      margin: 5px auto 5px 0 !important;
      color: var(--bs-heading-color) !important;
    }
    a.btn-login:hover,
    .btn-login:hover {
      color: rgba(37,196,242,1) !important;
      background-color: transparent !important;
      /*background-color: rgb(0 0 0 / 5%) !important;*/
    }
    .nav-login-signup {
      float: none;
      /*margin: 0 0.5rem 0.5rem 0.5rem !important;*/
    }
    .profile-image {
      width: 150px !important;
      height: 150px !important;
      font-size: 2rem !important;
    }
    .showcase-slide {
      position: relative;
      margin-top: 1rem;
      margin-bottom: 5rem;
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 2rem !important;
      padding-right: 2rem !important;
    }
    .showcase-text {
      font-size: 0.8rem !important;
    }
    .showcase-apps-text {
      font-size: 0.8rem;
    }
    .showcase-dialpad {
      margin-left: 10rem;
      margin-right: 10rem;
      margin-top: 5rem;
      margin-bottom: 0rem;
    }
    .welcome-helio-img {
      margin-top: 0;
    }
}
@media screen and (max-width: 767px) {
    .welcome-title {
        font-size: 36px !important;
    }
    .welcome-subtitle {
    font-size: 1.2rem;
    }
    .welcome-title-container h1 {
    font-size: 30px;
    }
    .showcase-text {
      font-size: 1.2rem !important;
    }
    .showcase-apps-text {
      font-size: 0.75rem;
    }
    .showcase-dialpad {
      margin-left: 5rem;
      margin-right: 5rem;
      margin-top: 5rem;
      margin-bottom: 0rem;
    }
    .showcase-slide {
      margin-bottom: 1rem;
    }
}
@media screen and (max-width: 557px) {
    .showcase-text {
      font-size: 1.0rem !important;
    }
    .showcase-apps-text {
      font-size: 0.75rem;
    }
}
@media screen and (max-width: 557px) {
    .welcome-title {
        font-size: 36px !important;
        font-weight: 700 !important;
    }
    .showcase-slide {
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding-top: 0.3rem;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    .showcase-dialpad {
      margin-left: 3rem;
      margin-right: 3rem;
      margin-top: 3rem;
      margin-bottom: 0rem;
    }
    .welcome-showcase .accordion-button{
      padding-right: 2.5rem;
    }
    #globe canvas{
      width: 100% !important;
    }
  }
@media screen and (max-width: 511px) {
    .welcome-title {
        font-size: 34px !important;
        font-weight: 700 !important;
    }
  }
@media screen and (max-width: 484px) {
    .welcome-title {
        font-size: 32px !important;
        font-weight: 700 !important;
    }
    .welcome-subtitle {
        font-size: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
  }
@media screen and (max-width: 456px) {
    .welcome-title {
        font-size: 30px !important;
        font-weight: 700 !important;
    }
  }
@media screen and (max-width: 431px) {
    .welcome-title {
        font-size: 28px !important;
        font-weight: 700 !important;
    }
    .showcase-dialpad {
      margin-left: 2rem;
      margin-right: 2rem;
      margin-top: 2rem;
      margin-bottom: 0rem;
    }
  }
@media screen and (max-width: 408px) {
    .welcome-title {
        font-size: 26px !important;
        font-weight: 700 !important;
    }
    /*.logo {
      max-width: 135px;
    }*/
  }
@media screen and (max-width: 376px) {
    .welcome-title {
        font-size: 24px !important;
        font-weight: 700 !important;
    }
    .showcase-dialpad {
      margin-left: 1rem;
      margin-right: 1rem;
      margin-top: 1rem;
      margin-bottom: 0rem;
    }
  }
@media screen and (max-width: 350px) {
    .welcome-title {
        font-size: 22px !important;
        font-weight: 700 !important;
    }
  }
/***************************
 ----- Auth Pages --------
* ************************/
.auth-page ::-webkit-scrollbar {
  display: none !important;
}
.card-auth {
  max-width: 450px;
  min-width: 400px;
  margin-top: 0;
  padding: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.card-register {
  top: 50px;
}
   .oblique {
    transform: skewX(16deg);
    overflow: hidden;
    width: 60%;
    right: -40rem;
    border-bottom-left-radius: 10rem;
    border-top-left-radius: 10rem;
}
.oblique .oblique-image {
  transform: skewX(0deg);
}
.oblique2 {
    transform: skewX(337deg);
    overflow: hidden;
    width: 60%;
    right: -40rem;
    border-bottom-left-radius: 20rem;
    border-top-left-radius: 10rem;
}
.oblique2 .oblique2-image {
  transform: skewX(0deg);
}
@media screen and (min-width: 1399px) {
  .oblique {
      right: -25rem;
    }
    .oblique2 {
      right: -25rem;
    }
  }
@media screen and (max-width: 1398px) {
  .oblique {
      right: -15rem;
    }
    .oblique2 {
      right: -15rem;
    }
  }
@media screen and (max-width: 400px) {
  .card-auth {
    min-width: 300px;
    margin: 20px auto !important;
  }
  .auth-overflow {
    overflow-x: auto;
  }
}
/******************************
 * Select2
 *****************************
 */

.select2-container--default:focus {
  border: 0.10rem solid rgba(37,196,242,0.3) !important;
  /*border-color: rgba(37,196,242,0.1) !important;*/
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.select2-container .select2-selection--multiple {
  min-height: 40px;
  /*background: var(--bs-gray-200);
  border-color: var(--bs-gray-200) !important;*/
}
.select2-selection--multiple {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  padding: 2px 5px;
  color: inherit !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--coolGrey100);
  cursor: default;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--coolGrey100_alpha05);
    border-color: var(--coolGrey100_alpha05);
    border-width: 0.07rem;
    border-radius: 0.6rem;
    font-family: inherit;
    font-weight: 400;
/*    font-size: 15px;*/
    font-size: 0.875rem;
    color: inherit !important;
    padding-bottom: 2px;
    -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    box-shadow: 0 1px 2px 0 var(--coolGrey100);
    /*height: 40px;
    max-height: 100px;
    /*overflow-y: auto;
    /*box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);*/
}
.select2-container--default .select2-selection--single {
    border-color: var(--coolGrey100_alpha05);
    /*border-color: rgba(225,225,225,0.5);*/
    border-width: 0.07rem;
    border-radius: 0.6rem;
    font-family: inherit;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 6px 2px;
    color: inherit !important;
    background-image: linear-gradient(to bottom, rgba(245, 245, 245, 0.1) 0%, var(--coolGrey50_alpha50) 100%);
    -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    box-shadow: 0 1px 2px 0 var(--coolGrey100);
}
.select2-selection--multiple--custom.select2-selection--custom {
    border: transparent !important;
    height: auto;
    max-height: 150px;
    overflow-y: auto;
    background: transparent;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    max-height: 100px;
    overflow-y: auto;
    border: 0.10rem solid rgba(37,196,242,0.3) !important;
    border-width: 0.07rem !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: 25px;
    padding-left: none;
    padding-right: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left:none;
    padding-right:none;
}
.select2-container .select2-search--inline .select2-search__field {
    /*padding: 2px;*/
    width: 100% !important;
    margin-top: 4px;
    padding-bottom: 1px;
    /*margin-bottom: -3px;*/
}
.select2-container .select2-selection--single {
    height: 40px;
    cursor: pointer;
    font-color: inherit;
    color: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    border-style: none;
    border-width: 0;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    /*opacity: 0;*/
    border: none;
    background-repeat: no-repeat;
    background-position: 99.5% 50% !important;
    background-image: url(/img/svg/expand_more_gray_24dp.svg) !important;
    /*background-image: url("https://fonts.gstatic.com/s/i/materialiconsoutlined/expand_more/v12/24px.svg") !important;*/
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}
.select2-container--default.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    font-size: 0.875rem;
    position: absolute;
    top: 7px;
    right: 8px;
    width: 26px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    margin-bottom: -3px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
    width: 95%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #FFF;
    background-image: linear-gradient(to bottom, rgba(245, 245, 245, 0.1) 0%, var(--coolGrey50_alpha50) 100%);
    border: 1px solid var(--coolGrey50_alpha50);
    border-radius: 0.4rem;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 3px;
    padding: 2px 10px;
    color: inherit;
    -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    box-shadow: 0 1px 2px 0 var(--coolGrey100);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #E9ECEF;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}
.select2-search--dropdown {
  padding: 0;
}
.select2-container--open .select2-dropdown--below {
    border: 1px solid #F0F0F0;
    margin-top: 5px;
    border-radius: 0.6rem;
    padding: 5px;
    font-size: 0.875rem;
    -webkit-box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    -moz-box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    z-index:9999 !important;
    /* border-top-left-radius: 0; */
    /* border-top-right-radius: 0; */
}
.select2-container--open .select2-dropdown--above {
    border: 1px solid #F0F0F0;
    margin-top: 0;
    border-radius: 0.6rem;
    padding: 5px;
    font-size: 0.875rem;
    z-index:9999 !important;
    -webkit-box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    -moz-box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    box-shadow: 0px 5px 10px 1px rgb(0,0,0,0.07);
    /* border-top-left-radius: 0; */
    /* border-top-right-radius: 0; */
}
.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.select2-results__option {
    padding: 6px;
    border-radius: 0.6rem;
    color: inherit;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #F2F5F7;
    color: inherit !important;
}
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 0;
    position: relative;
    vertical-align: middle;
    width: 100% !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
    display:none;
    visibility: hidden;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: -1px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    display: none;
}
/* Custom Select2 */

.custom-field-select2 {
  width: 100%;
  display: block;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4rem;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.6rem;
  appearance: none;
}
.custom-field-select2 .select2-search {
  margin: 0.1rem;
}
.custom-field-select2 .select2-search .select2-search__field {
  padding: 0.2rem 0.3rem;
  border: 1px solid rgba(213, 219, 224, 0.8);
  border-radius: 0.5rem;
}
.custom-field-select2 .select2-search .select2-search__field:focus {
  border-color: rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.1rem rgba(37,196,242,0.3) !important;
    -moz-box-shadow: 0 0 0 0.1rem rgba(37,196,242,0.3) !important;
    -ms-box-shadow: 0 0 0 0.1rem rgba(37,196,242,0.3) !important;
    -o-box-shadow: 0 0 0 0.1rem rgba(37,196,242,0.3) !important;
    box-shadow: 0 0 0 0.1rem rgba(37,196,242,0.3) !important;
}
.custom-field-select2 .select2-results__option--highlighted {

}
.custom-field-select2 .new-options {
    pointer-events:stroke !important;
    z-index: 9999;
}
.custom-field-select2 .select2-results__options {
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
}
.custom-field-select2 .select2-results__option {
    padding: 0.3rem;
}
.custom-field-select2 .select2-results__option:hover {
    background: rgba(213, 219, 224, 0.4) !important;
}
.delete-opt {
    background: transparent;
    vertical-align: middle;
    border-radius: 0px;
    float: right;
    display: block;
    position: relative;
    color: inherit;
    padding: 0.1rem;
    line-height: 1;
    transition: all ease 0.3s;
}
.delete-opt:hover {
  background: #ffffff;
  color: rgba(255, 0, 0, 0.8);
  border-radius: 50%;
}
.add-lead-name-address-column .select2.select2-container {
  margin-bottom: 0.25rem;
}
/***********************
* Lead Search Engine
***********************/
.main-search {
  background-color: rgba(var(--coolGrey1000rgb), 0.1);
  border: 1px solid rgba(var(--coolGrey25rgb), 0.1);
  border-radius: 0.5rem;
  input::placeholder {
    font-weight: 600;
  }
}
.main-search .input-group-btn {
  background-color: rgba(var(--coolGrey1000rgb), 0.1);
  .btn-search-filter {
      display: flex;
      font-family: "Ionicons" !important;
      content: "\f2d7";
      padding: 0.5rem 0.6rem;
      font-size: 20px;
      height: 42px;
      width: 42px;
      max-height: 42px;
      max-width: 42px;
      background-color: transparent;
      border-radius: 0.5rem;
      color: inherit !important;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      margin-right: 4px;
      margin-top: 2px;
      cursor: pointer;
  }
  .btn-search-filter:after {
      font-size: 20px;
      content: "\f2d7";
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      color: inherit !important;
  }
  .btn-search-filter:hover {
      background-color: rgb(var(--coolGrey25rgb),0.1);
      color: var(--bs-link-color) !important;
  }
  .btn-search-filter:focus {
       outline: 0;
        -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
      -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
      -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
      -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
      box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
        opacity: 1;
  }
  .btn-search-filter.collapsed:after {
      content: '\f4a6';
      font-size: 20px;
      color: inherit !important;
  }
}
.main-search.bg-white {
  background-color: rgba(var(--coolGrey37rgb), 1) !important;
  border: 1px solid rgba(var(--coolGrey100rgb), 0.50) !important;
  &amp; .input-group-btn {
    background-color: rgba(var(--coolGrey37rgb), 1) !important;
    .btn-search-filter {
      &amp;:hover {
        background-color: rgb(var(--coolGrey100rgb),0.5);
      }
    }
  }
}
.main-search .form-holder {
  padding-top: 3px;
}
.main-search .form-control {
  background: inherit;
  border: 0;
  padding-left: 20px;
}
.main-search .form-control:focus {
  border: 0 !important;
}
.main-search .dropdown-holder {
  position: absolute;
  top: 5px;
  right: 170px;
}
.main-search .btn-holder {
  position: absolute;
  top: 0;
  right: 0;
  width: 170px;
}
.main-search .btn-holder .btn {
  padding-top: 13px;
  padding-bottom: 13px;
}
.main-search .dropdown-toggle {
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 0.75rem;
  user-select: none;
  color: var(--bs-body-color);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  letter-spacing:0;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  border-radius: 0.5rem;
  background-color: transparent;
  cursor: pointer;
  transform: scale(1) !important;
  transition: all 0.15s ease-in;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
.main-search.bg-white .dropdown-toggle {
  &amp;:hover {
    background-color: rgb(var(--coolGrey100rgb),0.5);
  }
}
.main-search .btn-dropdown {
  background: none;
  font-size: 12px;
  text-transform: capitalize;
  position: relative;
  padding-left: 10px;
  padding-right: 15px;
}
.main-search .btn-dropdown:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  width: 1px;
  height: 17px;
  background: transparent;
  background-color: rgba(var(--coolGrey25rgb), 0.1);
}
.main-search .dropdown-menu {
  margin: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.main-search .dropdown-menu li {
  font-size: 12px;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  background-color: transparent;
  border-radius: 0.4rem;
}
.main-search .dropdown-menu li:hover {
  background-color: rgba(var(--coolGrey50rgb), 1);
}
.main-search .dropdown-menu li:hover a {
  color: rgba(0, 123, 255, 0.8);
}
.btn-search-expand {
  padding: 0.2em 0.6em;
  margin: 0.25em 0.5em 0 0;
}
.search-results-header {
    text-align: center;
    margin-left: 20%;
}
.leads-search-table {
  overflow-x: auto;
  font-size: 0.875rem;
}
.search-refine-wrapper  {
  margin-top: 0;
  transition: all 0.2s ease-in-out;
}
.search-refine-wrapper .collapse {
/*  margin-top: 20px;*/
  transition: all 0.1s ease-in-out;
}
.btn-search-pref {
    border-radius: 50%;
    padding: 0.6rem;
}
.btn-search-pref:hover {
  background: var(--coolGrey37);
  color: var(--bs-link-color);
  cursor: pointer;
}
.btn-search-pref:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    opacity: 1;
}
.text-blur {
  color: transparent;
  text-shadow: 0 0 8px var(--bs-heading-color);
}
.btn-search-assign {
  position: relative;
  display: flex;
/*  top: 1px;*/
    font-family: "FontAwesome" !important;
    content: "\f077";
    font-size: 16px;
    color: inherit !important;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}
.btn-search-assign:after {
    content: "\f077";
    color: inherit !important;
}
.btn-search-assign:hover {
    background: #f2f5f7;
    color: var(--bs-link-color) !important;
    cursor: pointer;
}
.btn-search-assign:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    opacity: 1;
}
.btn-search-assign.collapsed:after {
    content: '\f078';
    color: inherit !important;
}
.btn-crm-search-filters {
    position: relative;
    display: inline-flex;
    top: -2px;
    font-family: "FontAwesome" !important;
    content: "\f077";
    font-size: 16px;
    color: inherit !important;
    border-radius: 0.5rem;
    height: 34px;
    width: 35px;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}
.btn-crm-search-filters:after {
    content: "\f077";
    color: inherit !important;
}
.btn-crm-search-filters:hover {
    background: #fff;
    color: var(--bs-link-color) !important;
    cursor: pointer;
}
.btn-crm-search-filters:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    opacity: 1;
}
.btn-crm-search-filters.collapsed:after {
    content: '\f078';
    color: inherit !important;
}
.btn-crm-filters {
    position: relative;
    display: inline-flex;
    top: -2px;
    color: inherit !important;
    padding: 0.3rem;
    height: 34px;
    width: 35px;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}
.btn-crm-filters:hover {
    background: #fff;
    color: var(--bs-link-color) !important;
    cursor: pointer;
}
.btn-crm-filters:focus {
   outline: 0;
   -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
   -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
   -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
   -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
   box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
   opacity: 1;
}
.owner-search-drop {
  display: flex;
  vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*height: 42px;
    width: 42px;
    /*max-height: 42px;
    max-width: 42px;*/
    border-radius: 0.5rem !important;
   /* margin-right: 4px;
    margin-top: 2px;*/
    margin: 2px;
}
.owner-search-drop:hover {
  background: #f2f5f7;
    color: var(--bs-link-color) !important;
}

/***********************
 * Dropzone
 ***********************/

/*.dropzone {
  min-height: 150px;
    border: 2px solid rgba(0,0,0,0.3);
    background: white;
    padding: 20px 20px;
}
.dropzone:hover {
  border-color: #002391;
}*/
.dropzone {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 20px;
  /*color: #8d9499;*/
  color: #97A1A8;
  cursor: pointer;
  background: #fff;
  border: 2px dashed rgba(103, 116, 142,0.7);
    border-radius: 0.5em;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  -webkit-transition: box-shadow 0.3s,  border-color 0.3s;
  -moz-transition: box-shadow 0.3s,  border-color 0.3s;
  transition: box-shadow 0.3s,  border-color 0.3s;
  overflow: hidden;
}
.dropzone:hover, .hoverClass {
  border-color: #80bdff;
}
.dropzone .dropzone-icon {
  background: none;
    color: inherit;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: inherit;
  
  font-size: 50px;
  margin-bottom: -40px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.dropzone .dropzone-icon:hover, .hoverClass {
  border-color: #0676CE;
}
.filer.dragged .filer-input-dragDrop {
  border-color: #aaa;
  box-shadow: inset 0 0 20px rgba(0,0,0,.08);
}
.filer.dragged .filer-input-dragDrop * {
  pointer-events: none;
}
.filer.dragged .filer-input-icon {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.filer.dragged .filer-input-text, .filer.dragged .filer-input-choose-btn {
  filter: alpha(opacity=30);
  opacity: 0.3;
}
.filer-input-text h3 {
  margin: 0;
  font-size: 18px;
}
.filer-input-text span {
  font-size: 12px;
}
.filer-input-choose-btn {
  display: inline-block;
  padding: 8px 14px;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  color: #8d9496;
  border-radius: 3px;
  border: 1px solid #c6c6c6;
  vertical-align: middle;
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.filer-input-choose-btn:hover, .filer-input-choose-btn:active {
  color: inherit;
}
.filer-input-choose-btn:active {
  background-color: #f5f5f5;
}
#previewImage {
  margin-right: 5px;
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background-size: cover;
  background-position: center center;
}
.previewPhoto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  /*background-image: url('http://localhost/gostock/public/uploads/16.jpg');*/
  display: none;
  cursor: default;
}
.dropzone.dz-clickable {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition:all 0.3s;
}
.dropzone.dz-clickable:hover {
    color: #80bdff;
}
/**************************
----Nav Pills Nav Link----
**************************/
/*.nav.nav-pills .nav-link {
    z-index: 1;
    color: #344767;
    border-radius: 0.5rem;
    background-color: inherit;
}
.nav-link {
  display: block;
  padding: 0.6rem 1rem;
  color: #3B57AF;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}*/
.nav-link-account {
    margin-top:4px;
    color: inherit !important;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -o-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    background: #fff !important;
    border: 0.15em solid transparent !important;
    border-radius: 0.7em !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.nav-link-account:hover {
    background: #F8F8F8 !important;
    color: #0676CE !important;
}
.nav-link-account.active {
    color: #FFF !important;
    /*background-color: transparent !important; 
    background-image: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%) !important;*/
    background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.15em solid #0676CE !important;*/
}
.nav-link-history {
    margin-top: 4px;
    color: inherit !important;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -o-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    background: #fff !important;
    /*border: 0.15em solid transparent !important;*/
    border-radius: 0.7em !important;
    max-height: 50px;
    /*padding: 0.2rem 1rem !important;*/
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.nav-link-history:hover {
    background: #F8F8F8 !important;
    color: #0676CE !important;
}
.nav-link-history.active {
    color: #FFF !important;
    background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.15em solid #0676CE !important;*/
}
.nav-link-success {
    margin-top: 4px;
    color: inherit !important;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -o-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    background: #fff !important;
    /*border: 0.15em solid transparent !important;*/
    border-radius: 0.7em !important;
    max-height: 50px;
    /*padding: 0.2rem 1rem !important;*/
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.nav-link-success:hover {
    background: #F8F8F8 !important;
    color: #17ad37 !important;
}
.nav-link-success-2:hover {
    background: #F8F8F8 !important;
    color: rgba(24,182,155,1) !important;
}
.nav-link-pink:hover {
    background: #F8F8F8 !important;
    color: rgba(219, 94, 206, 1) !important;
}
.nav-link-success.active {
    color: #FFF !important;
    background-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.15em solid #0676CE !important;*/
}
.nav-link-success-2.active {
    color: #FFF !important;
    background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.15em solid #0676CE !important;*/
}
.nav-link-pink.active {
    color: #FFF !important;
    background-image: linear-gradient(310deg, rgba(219, 94, 206, 1) 0%, rgba(255, 158, 244, 1) 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.15em solid #0676CE !important;*/
}
.nav-link-dealboard {
    margin-top: 4px;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -o-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    background: #fff !important;
    border: 0.1em solid transparent !important;
    border-radius: 0.7em !important;
    max-height: 45px !important;
    min-width: 150px !important;
    padding: 0.2rem 1rem !important;
    overflow: hidden;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.btn-invite {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.25rem;
    height: 32px;
    line-height: 1.4;
    padding: 0 0.7rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    color: var(--bs-body-color);
    background-color: transparent;
    border-radius: 0.5rem;
    box-shadow: none;
    &amp;:hover {
        background-color: var(--coolGrey100_alpha05);
        color: rgba(0, 123, 255, 0.7) !important;
    }
}
.nav-link-dealboard:hover {
    background: #F0F0F0 !important;
    color: #0676CE !important;
}
.nav-link-dealboard.active {
    color: #FFF !important;
    background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.1em solid #0676CE !important;
}
.nav-link-dealboard-text {
    vertical-align: middle !important;
    display: inline-flex;
    font-size: 14px;
    padding: 6px;
}
@media screen and (max-width: 991px) {
    .nav-link-dealboard-text p {
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    .nav-link-dealboard-text p {
        font-size:14px;
    }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  /*color: #0a58ca;*/
/*  color: #63B3ED;*/
color: var(--z-blue-500);
}
/*.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}*/
.nav.nav-pills {
    background: transparent;
    /*background: #f8f9fa;*/
    border-radius: 0.75rem;
    position: relative;
    z-index: 1;
}
.nav-pills &gt; li + li {
  margin-left: 2px;
}
/*.nav-pills &gt; li.active &gt; a,
.nav-pills &gt; li.active &gt; a:hover,
.nav-pills &gt; li.active &gt; a:focus {
  color: #ffffff;
  background-color: #337ab7;
}

/*.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.25rem;
}
/*.nav-pills .nav-link.active,
.nav-pills .show &gt; .nav-link {
  color: #fff;
  background-color: #0d6efd;
}*/

.nav-fill &gt; .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified &gt; .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-pill-text p {
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 0.7em 0.7em;
    margin-bottom: -0.5em;
    font-size: 15px;
}
.nav-pill-p-text {
    margin-top: -0.4rem !important;
    font-weight: 600;
}
.nav-account-g-icon {
    vertical-align: middle !important;
    /*padding: 0.2em 0 0 0 !important;*/
}
.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}
.switch-md {
    height: 1.5em !important;
    width: 3em !important;
}
.switch-lg {
    height: 2em !important;
    width: 4em !important;
}
.table&gt;:not(:first-child) {
    border-top: none !important;
}
/*********************************
------Activity/User Sidebar------
**********************************/

.fixed-plugin-profile .fixed-plugin-profile-button {
  background: #fff;
  border-radius: 50%;
  bottom: 20px;
  right: 20px;
  height: 54px;
  width: 54px;
  font-size: 1.25rem;
  z-index: 990;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.fixed-plugin-profile .fixed-plugin-profile-button i {
  pointer-events: none;
}

.fixed-plugin-profile .card {
  position: fixed !important;
  right: -500px;
  top: 0;
  left: auto !important;
  transform: unset !important;
  width: 425px;
  border-radius: 0;
  padding: 0 10px;
  transition: .2s ease;
  z-index: 1020;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.fixed-plugin-profile .card .card-body {
  overflow: scroll;
}

.fixed-plugin-profile .badge {
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 23px;
  margin-right: 5px;
  position: relative;
  width: 23px;
  transition: all 0.2s ease-in-out;
}

.fixed-plugin-profile .badge:hover,
.fixed-plugin-profile .badge.active {
  border-color: #344767;
}


.rtl .fixed-plugin-profile .fixed-plugin-profile-button {
  left: 30px;
  right: auto;
}
.rtl .fixed-plugin-profile .card {
  left: -360px !important;
  right: auto;
}
.rtl .fixed-plugin-profile.show .card {
  right: auto;
  left: 0 !important;
}

.dark-version .fixed-plugin-profile .btn.bg-gradient-dark,
.dark-version .fixed-plugin-profile .btn.btn-outline-dark {
  color: #fff !important;
  border: 1px solid #fff !important;
}


.dark-version h1,
.dark-version .h1,
.dark-version .h1,
.dark-version h2,
.dark-version .h2,
.dark-version .h2,
.dark-version h3,
.dark-version .h3,
.dark-version .h3,
.dark-version h4,
.dark-version .h4,
.dark-version .h4,
.dark-version h5,
.dark-version .h5,
.dark-version .h5,
.dark-version h6:not(.font-weight-bolder),
.dark-version .h6:not(.font-weight-bolder),
.dark-version .h6,
.dark-version a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-profile-button):not(.opacity-5),
.dark-version .table thead tr th,
.dark-version .kanban-title-board {
  color: #fff !important;
}

@media screen and (max-width: 450px) {
    .fixed-plugin-profile .card {
      right: -500px;
      width: 100%;
    }
}

.fixed-plugin-profile .btn.bg-gradient-primary:not(:disabled):not(.disabled) {
  border: 1px solid transparent;
}

.fixed-plugin-profile .btn.bg-gradient-primary:not(:disabled):not(.disabled):not(.active) {
  background-color: transparent;
  background-image: none;
  border: 1px solid #cb0c9f;
  color: #cb0c9f;
}

.fixed-plugin-profile.show .card {
  right: 0;
}
.dropdown.activity-dropdown .dropdown-menu:before {
    font-family: "FontAwesome";
    content: "\f0d8";
    position: absolute;
/*    top: 0;*/
    left: 153px;
    right: auto;
    font-size: 22px;
    color: #fff;
    transition: top 0.35s ease;
}

.user-profile-sidebar {
      /*bottom: calc(3.5rem + 1px);
      position: absolute;
      top: calc(3.5rem + 1px);
      z-index: 1031;
    margin-right: 400px;*/
    
    position: fixed;/* need to use abolute here but it skips */
    display: block;
    top: 0;
    right: 0;
    background-color: #f4f6f9;
    width: 100%;
    max-width: 400px;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 1;
    /*border-top: 1px solid #dee2e6;*/
    border-left: 1px solid #dee2e6;
    -webkit-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -ms-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

/*.activity-sidebar, .activity-sidebar:before {
    bottom: calc(3.5rem + 1px);
    display: none;
    right: -400px;
    width: 400px;
    -webkit-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -ms-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
}*/
.user-profile-title {
    font-weight: 700;
    text-align: center;
    margin-left: 120px;
}
.user-profile-header {
    display: inline-flex;
    margin-top: 10px;
    margin-bottom: 10px;
}
.user-profile-body {
    overflow: auto;
    height: auto;
    max-height: 100%;
}
.user-profile-close-btn {
    margin-left: 10px;
}
.user-profile-icon {
    font-size: 16px !important;
}

/*.timeline {
  margin: 0 0 45px;
  padding: 0;
  position: relative;
}

.timeline::before {
  border-radius: 0.25rem;
  background-color: #dee2e6;
  bottom: 0;
  content: "";
  left: 31px;
  margin: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.timeline &gt; div {
  margin-bottom: 15px;
  margin-right: 10px;
  position: relative;
}

.timeline &gt; div::before, .timeline &gt; div::after {
  content: "";
  display: table;
}

.timeline &gt; div &gt; .timeline-item {
  box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
  border-radius: 0.6rem;
  background-color: #fff;
  
  margin-left: 60px;
  margin-right: 15px;
  margin-top: 0;
  width: 100%;
  padding: 5px;
  position: relative;
}

.timeline &gt; div &gt; .timeline-item &gt; .time {
  
  float: right;
  font-size: 0.65rem;
  padding: 10px;
}

.timeline &gt; div &gt; .timeline-item &gt; .time &gt; i {
  margin-right: 5px;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-header {
  
  font-size: 16px;
  line-height: 1.1;
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-header &gt; a {
  font-weight: 700;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-body &gt; a {
  color: var(--bs-heading-color);
  font-weight: 600;
  cursor: pointer;
  &amp;:hover {
    color: rgba(var(--brightBlue300), 1);
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-body,
.timeline &gt; div &gt; .timeline-item &gt; .timeline-footer {
  padding: 10px;
  line-height: 1.3;
  font-size: 0.875rem;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-body &gt; img {
  margin: 10px;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-body &gt; dl,
.timeline &gt; div &gt; .timeline-item &gt; .timeline-body ol,
.timeline &gt; div &gt; .timeline-item &gt; .timeline-body ul {
  margin: 0;
}

.timeline &gt; div &gt; .timeline-item &gt; .timeline-footer &gt; a {
  color: #fff;
}

.timeline &gt; div &gt; .fa,
.timeline &gt; div &gt; .fas,
.timeline &gt; div &gt; .far,
.timeline &gt; div &gt; .fab,
.timeline &gt; div &gt; .fal,
.timeline &gt; div &gt; .fad,
.timeline &gt; div &gt; .svg-inline--fa,
.timeline &gt; div &gt; .ion,
.timeline &gt; div &gt; .g-icon {
  background-color: #fff;
  border-radius: 50%;
  font-size: 18px;
  height: 30px;
  width: 30px;
  left: 18px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
  -moz-box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
  -o-box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
}

.timeline &gt; div &gt; .svg-inline--fa {
  padding: 7px;
}

.timeline &gt; .time-label &gt; span {
  border-radius: 0.5rem;
    background-color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 7px;
    box-shadow: 0 1px 15px rgb(0 0 0 / 5%);
}*/
@media screen and (max-width: 991px) {
    .user-profile-sidebar {
        top: 58px;
    }
}
.editable-field-user-profile,
.editable-field-user-profile select {
  color: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  width: 100%;
  min-width: 100px;
  max-width: 178px;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  border: none;
  background-color: transparent;
  overflow: hidden;
  cursor: text;
  &amp;:hover {
    background-color: var(--coolGrey100);
  }
  &amp;:focus {
    background-color: var(--coolGrey100);
  }
}
.editable-field-user-profile.no-hover {
  cursor: default;
  &amp;:hover {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
  }
}
.user-profile-tabs {
  border-bottom: 1px solid var(--coolGrey50);
  &amp; .nav-item {
    &amp; .nav-link {
      color: var(--bs-heading-color);
      font-weight: 600;
      font-size: 0.875rem;
      border: 2px solid transparent;
      &amp;:hover {
        border: 2px solid transparent;
        border-top-color: transparent !important;
        border-right-color: transparent !important;
        border-left-color: transparent !important;
        border-bottom-color: rgba(0,123,255,0.8);
/*      border-color: rgba(0,123,255,0.8);*/
        color: rgba(0,123,255,0.8);
      }
    }
    &amp; .nav-link.active {
      color: rgba(0,123,255,0.8);
      background-color: transparent;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-left-color: transparent !important;
      border-color: rgba(0,123,255,0.8);
    }
    &amp; .noty-badge {
      display: inline-flex;
      position: relative;
      /*top: 0px;
      right: 0px;*/
      align-items: center;
      justify-content: center;
      --bs-badge-padding-x: 0.25rem;
      --bs-badge-padding-y: 0.3rem;
      --bs-badge-font-size: 0.75em;
      --bs-badge-font-weight: 700;
      --bs-badge-color: #fff;
      padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
      margin-left: 0.25rem;
      font-size: var(--bs-badge-font-size);
      font-weight: var(--bs-badge-font-weight);
      line-height: 0.5;
      min-width: 15px;
      height: 15px;
      color: var(--bs-badge-color);
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.3rem;
      z-index: 5;
    }
    &amp; .noty-badge.badge-pink {
      background-color: rgba(238, 94, 153, 0.8);
    }
  }
}
.user-profile-cal-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0.15rem 1.25rem;
    width: 100%;
/*    height: 30px;*/
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--bs-heading-color);
    background-color: var(--coolGrey50);
    border-radius: 0.4rem;
    &amp;:hover,
    &amp;:focus,
    &amp;:active {
      color: rgba(0,123,255, 0.8);
      background-color: rgba(0,123,255, 0.1);
    }
}
.btn-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent;
  &amp;:hover {
    color: rgba(0,123,255, 0.8);
    background-color: rgba(0,123,255, 0.1);
  }
}
.user-profile-footer {
  display: flex;
  &amp; .user-profile-footer-list {
    width: 100%;
    margin-right: 2px;
    &amp;:last-child {
      margin-right: 0px;
    }
    &amp; .user-profile-footer-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      padding: 0.25rem;
      width: 100%;
      height: 30px;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      background-color: var(--coolGrey50);
      border-radius: 0.4rem;
      &amp;:hover,
      &amp;:focus,
      &amp;:active {
        background-color: rgba(0,123,255, 0.1);
      }
    }
  }
}

/**************************
------Activity Sidebar------
**************************/

.fixed-plugin-activity .fixed-plugin-activity-button,.fixed-plugin-stat .fixed-plugin-stat-button {
  background: #fff;
  border-radius: 50%;
  bottom: 20px;
  right: 20px;
  height: 54px;
  width: 54px;
  font-size: 1.25rem;
  z-index: 990;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.fixed-plugin-activity .fixed-plugin-activity-button i,.fixed-plugin-stat .fixed-plugin-stat-button i {
  pointer-events: none;
}

.fixed-plugin-activity .card,.fixed-plugin-stat .card {
  position: fixed !important;
  right: -600px;
  /*top: 48px;*/
  top: 0px;
  left: auto !important;
  transform: unset !important;
  width: 600px;
  /*border-radius: 3rem 0 0;*/
  border-radius: 0rem;
  padding: 0 10px;
  padding-left: 0;
  padding-right: 0;
  transition: .2s ease;
  z-index: 1020;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  box-shadow: none !important;
    .card-header {
      height: 100%; 
      max-height: 190px;
      transition: all 0.3s ease;
    }
    .card-body {
      .tab-content {
        .activity-tab-pane {
          .timeline {
          /*  margin: 0 0 45px;*/
            padding: 0;
            position: relative;
            &amp;::before {
              border-radius: 0.25rem;
              background-color: var(--coolGrey50);
              bottom: 0;
              content: "";
              left: 15px;
              margin: 0;
              position: absolute;
              top: 0;
              width: 4px;
              height: 100%;
              border: 2px solid var(--coolGrey50);
              border-right: 2px solid var(--coolGrey50);
            }
            .time-label
            {
              margin-top: 20px;
              margin-bottom: 10px;
              margin-right: 10px;
              position: relative;
              span {
                position: relative;
                background-color: var(--coolGrey50);
                border-radius: 0.4rem;
                padding: 0.25rem 0.5rem;
                font-size: 0.875rem;
                font-weight: 700;
                color: var(--bs-heading-color);
              }
            }
            .timeline-item {
              color: var(--bs-body-color);
              margin: 0;
              width: 100%;
              position: relative;
              overflow: hidden;
              box-shadow: none;
              background-color: transparent;
              padding-left: 0 !important;
              .timeline-header {
                color: var(--bs-heading-color);
                font-size: 16px;
                line-height: 1.1;
                margin: 0;
                padding: 10px;
                padding-bottom: 0;
                padding-left: 5px;
                svg {
                  background-color: rgba(255, 255, 255, 0.5);
          /*        backdrop-filter: saturate(200%) blur(30px);*/
                }
              }
              .timeline-body {
                font-weight: 600;
                color: var(--bs-heading-color);
                line-height: 1.4;
                font-size: 0.875rem;
                margin-bottom: 0;
                margin-left: 28px;
                padding: 10px;
                .label {
                  display: table;
                  align-items: center;
                  justify-content: center;
                  margin-top: 0.5rem;
                  padding: 0.25rem 0.5rem;
                  border-radius: 0.4rem;
                  color: #fff;
                  line-height: 1.4;
                  font-weight: 500;
                  min-height: 28px;
                  min-width: 80px;
                }
                a {
                  margin-bottom: 0;
                  line-height: 1.4;
                  color: var(--bs-heading-color);
                  font-size: 0.875rem;
                  font-weight: 600;
                  cursor: pointer;
                  &amp;:hover {
                    color: rgba(var(--brightBlue300), 0.7);
                  }
                  span {
                    p {
                      line-height: 1.4;
                      font-size: 0.875rem;
                      margin-bottom: 0;
                    }
                  } 
                  p {
                    line-height: 1.4;
                    font-size: 0.875rem;
                    margin-bottom: 0;
                  }
                  img.attachment-file {
                    width: auto;
                    max-height: 200px;
                    max-width: 100%;
                    margin: 10px;
                    border-radius: 0.4rem;
                    box-shadow: 0 2px 8px -4px rgba(20, 20, 20, 0.15), 0 1px 1px -5px rgba(20, 20, 20, 0.06) !important;
                  }
                }

                span,
                p {
                    p {
                      line-height: 1.4;
                      font-size: 0.875rem;
                      margin-bottom: 0;
                    }
                  }
                img.attachment-file {
                  width: auto;
                  max-height: 200px;
                  max-width: 100%;
                  margin: 10px;
                  border-radius: 0.4rem;
                  box-shadow: 0 2px 8px -4px rgba(20, 20, 20, 0.15), 0 1px 1px -5px rgba(20, 20, 20, 0.06) !important;
                }
                dl,ol,ul {
                  margin: 0;
                }
              }
            }
          }
        }
        .my-work-tab-pane {
          .accordion {
            .accordion-item {
              background-color: transparent;
              box-shadow: none;
              .accordion-header {
                .accordion-button.collapsed {
                  color: var(--bs-heading-color);
                  &amp;:hover {
                    color: rgba(0,123,255,0.8);
                  }
                }
                .accordion-button {
                  color: rgba(0,123,255,0.8);
                }
                .accordion-button::after {
                  flex-shrink: 0;
                  width: 18px;
                  height: 18px;
                  margin-left: auto;
                  content: "";
                  background-image: url(/img/svg/expand_more_gray_24dp.svg) !important;
                  background-repeat: no-repeat;
                  background-size: 18px;
                  transition: all 0.3s ease;
                }
              }
            }
          }
        }
        .calendar-tab-pane {
          .calendar-select {
            height: 32px;
            cursor: pointer;
            border-color: var(--coolGrey100);
            border-width: 1px;
            border-radius: 0.5rem;
            font-family: inherit;
            font-weight: 400;
            font-size: 14px;
            color: inherit!important;
            background-color: #fff;
            padding: 0.2rem 0.5rem;
            border: 1px solid var(--coolGrey100);
            background-image: linear-gradient(to bottom,rgba(245,245,245,.1) 0%,rgba(229,231,235,.5) 100%);
            -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
            -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
            -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
            -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
            box-shadow: 0 1px 2px 0 var(--coolGrey100);
          }
          .fc .fc-daygrid-day.fc-day-today,
          .fc .fc-timegrid-col.fc-day-today {
            background-color: transparent;
          }
          .fc-col-header {
            display: none;
          }
          .fc-event-title {
            color: #fff;
          }
          .fc-v-event {
            border: 1px solid rgba(0,123,255,1);
            background-color: rgba(0,123,255,1);
          }
        }
      }
    }
  }

.fixed-plugin-activity .card .card-body .tab-content .tab-pane .tab-body,.fixed-plugin-stat .card .card-body .tab-content .tab-pane .tab-body {
  flex: 1 1 auto;
  padding: 0.25rem;
  padding-bottom: 42px;
  overflow-x: hidden;
  overflow-y: auto;
}

.fixed-plugin-activity .badge,.fixed-plugin-stat .badge{
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 23px;
  margin-right: 5px;
  position: relative;
  width: 23px;
  transition: all 0.2s ease-in-out;
}

.fixed-plugin-activity .badge:hover,
.fixed-plugin-activity .badge.active,.fixed-plugin-stat .badge:hover,.fixed-plugin-stat .badge.active {
  border-color: #344767;
}


.rtl .fixed-plugin-activity .fixed-plugin-activity-button,.rtl .fixed-plugin-stat .fixed-plugin-stat-button  {
  left: 30px;
  right: auto;
}
.rtl .fixed-plugin-activity .card,.rtl .fixed-plugin-stat .card {
  left: -360px !important;
  right: auto;
}
.rtl .fixed-plugin-activity.show .card,.rtl .fixed-plugin-stat.show .card {
  right: auto;
  left: 0 !important;
}

.dark-version .fixed-plugin-activity .btn.bg-gradient-dark,
.dark-version .fixed-plugin-activity .btn.btn-outline-dark {
  color: #fff !important;
  border: 1px solid #fff !important;
}


.dark-version h1,
.dark-version .h1,
.dark-version .h1,
.dark-version h2,
.dark-version .h2,
.dark-version .h2,
.dark-version h3,
.dark-version .h3,
.dark-version .h3,
.dark-version h4,
.dark-version .h4,
.dark-version .h4,
.dark-version h5,
.dark-version .h5,
.dark-version .h5,
.dark-version h6:not(.font-weight-bolder),
.dark-version .h6:not(.font-weight-bolder),
.dark-version .h6,
.dark-version a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-activity-button):not(.opacity-5),
.dark-version .table thead tr th,
.dark-version .kanban-title-board {
  color: #fff !important;
}
/*
@media screen and (max-width: 450px) {
    .fixed-plugin-activity .card {
      right: -600px;
      width: 100%;
    }
    .fixed-plugin-stat .card {
      right: -600px;
      width: 100%;
    }
}*/

.fixed-plugin-activity .btn.bg-gradient-primary:not(:disabled):not(.disabled) {
  border: 1px solid transparent;
}
.fixed-plugin-stat .btn.bg-gradient-primary:not(:disabled):not(.disabled) {
  border: 1px solid transparent;
}

.fixed-plugin-activity .btn.bg-gradient-primary:not(:disabled):not(.disabled):not(.active) {
  background-color: transparent;
  background-image: none;
  border: 1px solid #cb0c9f;
  color: #cb0c9f;
}

.fixed-plugin-stat .btn.bg-gradient-primary:not(:disabled):not(.disabled):not(.active) {
  background-color: transparent;
  background-image: none;
  border: 1px solid #cb0c9f;
  color: #cb0c9f;
}
.fixed-plugin-activity.show .card .card-header {
  .user-profile-close {
    position:absolute;
    left:0px;
    top: 5px;
    background-color:#fff;
    border: 1px solid var(--coolGrey50);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
  }
  .user-profile-close {
    left: -16px;
  }
}

.fixed-plugin-activity.show .card{
  right: 0;
  box-shadow: 0 0.3125rem 3.625rem 0 rgb(84, 86, 112, .15) !important;
/*  box-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !important;*/
}
.fixed-plugin-stat.show .card{
  right: 0;
}
/*.activity-sidebar {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    background-color: #f4f6f9;
    width: 100%;
    max-width: 400px;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 1;
    border-left: 1px solid #dee2e6;
    -webkit-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -ms-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    animation-duration: 0.3s;
}*/

/*.activity-sidebar, .activity-sidebar:before {
    bottom: calc(3.5rem + 1px);
    display: none;
    right: -400px;
    width: 400px;
    -webkit-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -ms-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
}*/


/*.timeline &gt; div &gt; div {
  margin-bottom: 10px;
  margin-right: 10px;
  position: relative;
}*/


.timeline &gt; div &gt; div::before, .timeline &gt; div &gt; div::after {
  content: "";
  display: table;
}
@media screen and (max-width: 768px) {
  .fixed-plugin-activity .card {
      .card-header {
        max-height: 230px;
    }
  }
}
@media screen and (max-width: 600px) {
    .fixed-plugin-activity.show .card {
        width: 100%;
        .card-header {
          .user-profile-close {
            left: 5px;
          }
        }
        .card-body {
          .tab-content {
            .tab-pane {
              .tab-body {
                padding-bottom: 42px;
              }
            }
          }
        }
    }
}
.timeline-app-icon {
  position: absolute;
  display: flex;
  width: 32px;
  height: 32px;
  margin-right: auto;
  margin-left: auto;
  padding: 0.25rem;
  line-height: 1;
  background-color: #fff;
  border-radius: 0.35rem;
  box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.07) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 991px) {
    .activity-sidebar {
        top: 58px;
    }
}
/******************************
 * Mineral Valuation Model
 ******************************/
.valuation-model {
  position: relative;
  width: 100%;
  max-width: 700px;
  table {
    thead {
      background-color: transparent !important;
      border-bottom: 1px solid var(--coolGrey50) !important;
    }
    thead tr {
      border-bottom: 1px solid var(--coolGrey50) !important;
      background: transparent !important;
      background-color: transparent !important;
    }
    tbody {
      color: var(--bs-heading-color);
      tr {
        &amp;:hover {
          background-color: var(--coolGrey25) !important;
        }
      }
    }
    tr th:first-child, tr td:first-child {
      border-top-left-radius: 0.0rem;
      border-bottom-left-radius: 0.0rem;
    } 
    tr th:last-child, tr td:last-child {
      border-top-right-radius: 0.0rem;
      border-bottom-right-radius: 0.0rem;
    } 
  }
}
.valuation-model input:hover {
}

.metric-border .profit-measures .content {
  overflow: hidden;
}
.metric-border .profit-measures .content table {
  overflow-x: auto;
  display: inline-table;
}
.profit-measures table caption {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
.profit-row-left {
    border-radius: 5px 0 0 5px;
    padding:5px;
}
.profit-row-right {
    border-radius: 0 5px 5px 0;
    padding:5px;
}
.profit-row-mid {
    padding:5px;
}
.parameter-inputs {
    margin-top: 20px;
}
.parameter-inputs table {
    min-width: 180px;
    padding: 5px;
}
.parameter-inputs table tbody tr:hover {
    background:none;
}
.parameter-inputs table caption {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.valuation-table thead tr {
/*    background: #F1F1F1;*/
    font-size: 14px;
}
.valuation-table tbody tr {
    font-size: 14px;
}
.valuation-title {
    font-weight:700;
    font-size: 16px;
}
.valuation-main-title {
    font-weight: 700;
}
.parameter-head-border-left {
    border-radius: 5px 0 0 5px;
    width: 100px;
    padding:5px;
}
.parameter-head-border-right {
    border-radius: 0 5px 5px 0;
    width: 100px;
    padding:5px;
}
.profit-head-border-left {
    border-radius: 5px 0 0 5px;
    padding:5px;
}
.profit-head-border-right {
    border-radius: 0 5px 5px 0;
    padding:5px;
}
.profit-head-border-mid {
    padding:5px;
}
.metric-border {
    background: #fff;
    color: var(--bs-heading-color);
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}
.assign-btn-border {
    background: #fff;
    border: solid 1px #F1F1F1;
    border-radius: 10px;
    padding: 20px;
    /* margin: auto; */
    width: auto;
    max-width: 500px;
    display: flex;
}
.input-modal {
    border-radius: 0.5rem;
    color: var(--bs-heading-color);
/*    box-shadow: 1 1;*/
    border: solid 1px #fff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    padding: 0.25rem 0.4rem;
    font-size: 14px;
    font-weight: 400;
    background-color: var(--coolGrey25);
    border: solid 1px var(--coolGrey50);
}
.input-modal:focus {
    background-color: var(--coolGrey37);
    border: solid 1px rgba(33, 212, 253, 0.3);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.valuation-results {
    margin-top: 15px;
}
.valuation-results table {
    width: 100%;
    font-size: 14px;
}
.valuation-results thead tr {
/*    background: #F1F1F1;*/
    font-size: 14px;
}
.valuation-results .metric-border .content {
    overflow: hidden;
}
.valuation-results .metric-border .content table {
  overflow: auto;
  display: inline-table;
}
.data-head-border-left {
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding:5px;
}
.data-head-border-right {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding:5px;
}
.data-head-border-mid {
    padding:5px;
}
.data-row-left {
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding:5px;
}
.data-row-right {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding:5px;
}
.data-row-mid {
    padding:5px;
}
/*.data-row-mid-phone {
    padding:5px;
    min-width: 200px;
}*/
.parameter-buttons {
    display: inline;
    float:right;
    margin: 10px 0 10px 0;
    position: relative;
}
.results-label {
    font-weight:700;
    margin: 10px 0 0 0;
}
.parameter-label {
    font-weight:700;
}
/************************************
 * GridLex
 * http://gridlex.devlint.fr/index.html
 ************************************/

[class*=GridLex-grid] {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0
}
.GridLex-col, [class*=GridLex-col-] {
    box-sizing: border-box;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0;
}
.GridLex-col {
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0
}
.GridLex-grid.GridLex-col, .GridLex-grid[class*=GridLex-col-] {
    margin: 0;
    padding: 0
}
[class*=GridLex-grid-][class*=-noGutter] {
    margin: 0
}
[class*=GridLex-grid-][class*=-noGutter]&gt;[class*=GridLex-col] {
    padding: 0
}
[class*=GridLex-grid-][class*=-center] {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}
[class*=GridLex-grid-][class*=-right] {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-left: auto
}
[class*=GridLex-grid-][class*=-top] {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}
[class*=GridLex-grid-][class*=-middle] {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}
[class*=GridLex-grid-][class*=-bottom] {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}
[class*=GridLex-grid-][class*=-reverse] {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}
[class*=GridLex-grid-][class*=-column] {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}
[class*=GridLex-grid-][class*=-column-reverse] {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}
[class*=GridLex-grid-][class*=-spaceBetween] {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}
[class*=GridLex-grid-][class*=-spaceAround] {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}
[class*=GridLex-grid-][class*=-equalHeight]&gt;[class*=GridLex-col] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
[class*=GridLex-col-][class*=-top] {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}
[class*=GridLex-col-][class*=-middle] {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}
[class*=GridLex-col-][class*=-bottom] {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}
[class*=GridLex-col-][class*=-first] {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1
}
[class*=GridLex-col-][class*=-last] {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}
[class*=GridLex-grid-1]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid-2]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid-3]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid-4]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid-5]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%
}
[class*=GridLex-grid-6]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid-7]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%
}
[class*=GridLex-grid-8]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%
}
[class*=GridLex-grid-9]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%
}
[class*=GridLex-grid-10]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%
}
[class*=GridLex-grid-11]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%
}
[class*=GridLex-grid-12]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}

@media screen and (max-width:80em) {
[class*=_lg-1]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=_lg-2]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=_lg-3]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=_lg-4]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=_lg-5]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%
}
[class*=_lg-6]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=_lg-7]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%
}
[class*=_lg-8]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%
}
[class*=_lg-9]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%
}
[class*=_lg-10]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%
}
[class*=_lg-11]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%
}
[class*=_lg-12]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
}

@media screen and (max-width:64em) {
[class*=_md-1]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=_md-2]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=_md-3]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=_md-4]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=_md-5]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%
}
[class*=_md-6]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=_md-7]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%
}
[class*=_md-8]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%
}
[class*=_md-9]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%
}
[class*=_md-10]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%
}
[class*=_md-11]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%
}
[class*=_md-12]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
}

@media screen and (max-width:48em) {
[class*=_sm-1]&gt;[class*=col] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=_sm-2]&gt;[class*=col] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=_sm-3]&gt;[class*=col] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=_sm-4]&gt;[class*=col] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=_sm-5]&gt;[class*=col] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%
}
[class*=_sm-6]&gt;[class*=col] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=_sm-7]&gt;[class*=col] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%
}
[class*=_sm-8]&gt;[class*=col] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%
}
[class*=_sm-9]&gt;[class*=col] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%
}
[class*=_sm-10]&gt;[class*=col] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%
}
[class*=_sm-11]&gt;[class*=col] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%
}
[class*=_sm-12]&gt;[class*=col] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
}

@media screen and (max-width:35.5em) {
[class*=_xs-1]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=_xs-2]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=_xs-3]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=_xs-4]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=_xs-5]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%
}
[class*=_xs-6]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=_xs-7]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%
}
[class*=_xs-8]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%
}
[class*=_xs-9]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%
}
[class*=_xs-10]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%
}
[class*=_xs-11]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%
}
[class*=_xs-12]&gt;[class*=GridLex-col] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=GridLex-col-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=off-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=off-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=off-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=off-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=off-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=off-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=off-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=off-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=off-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=off-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=off-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=off-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=off-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=off-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=off-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=off-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=off-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=off-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=off-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=off-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=off-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=off-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=off-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=off-11] {
    margin-right: 91.66666667%
}

@media screen and (max-width:80em) {
[class*=GridLex-grid]&gt;[class*=_lg-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_lg-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_lg-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_lg-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_lg-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_lg-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_lg-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_lg-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_lg-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_lg-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_lg-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_lg-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_lg-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_lg-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_lg-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_lg-11] {
    margin-right: 91.66666667%
}
}

@media screen and (max-width:64em) {
[class*=GridLex-grid]&gt;[class*=_md-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_md-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_md-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_md-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_md-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_md-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_md-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_md-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_md-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_md-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_md-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_md-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_md-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_md-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_md-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_md-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_md-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_md-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_md-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_md-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_md-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_md-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_md-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_md-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_md-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_md-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_md-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_md-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_md-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_md-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_md-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_md-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_md-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_md-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_md-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_md-11] {
    margin-right: 91.66666667%
}
}

@media only screen and (max-width: 1199px) {
[class*=GridLex-grid]&gt;[class*=_mdd-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_mdd-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_mdd-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_mdd-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_mdd-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_mdd-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_mdd-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_mdd-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_mdd-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_mdd-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_mdd-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_mdd-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_mdd-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_mdd-11] {
    margin-right: 91.66666667%
}
}

@media only screen and (max-width: 991px) {
[class*=GridLex-grid]&gt;[class*=_sm-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_sm-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_sm-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_sm-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_sm-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_sm-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_sm-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_sm-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_sm-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_sm-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_sm-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_sm-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_sm-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_sm-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_sm-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_sm-11] {
    margin-right: 91.66666667%
}
}

@media only screen and (max-width: 767px) {
[class*=GridLex-grid]&gt;[class*=_xs-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xs-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xs-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_xs-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xs-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xs-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_xs-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xs-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xs-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_xs-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xs-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xs-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_xs-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xs-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_xs-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xs-11] {
    margin-right: 91.66666667%
}
}

@media (max-width: 479px) {
[class*=GridLex-grid]&gt;[class*=_xss-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xss-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xss-3] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%
}
[class*=GridLex-grid]&gt;[class*=_xss-4] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xss-5] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xss-6] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%
}
[class*=GridLex-grid]&gt;[class*=_xss-7] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xss-8] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xss-9] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%
}
[class*=GridLex-grid]&gt;[class*=_xss-10] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}
[class*=GridLex-grid]&gt;[class*=_xss-11] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}
[class*=GridLex-grid]&gt;[class*=_xss-12] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-0] {
    margin-left: 0
}
[class*=GridLex-grid]&gt;[push-left*=_xss-1] {
    margin-left: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-2] {
    margin-left: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-3] {
    margin-left: 25%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-4] {
    margin-left: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-5] {
    margin-left: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-6] {
    margin-left: 50%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-7] {
    margin-left: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-8] {
    margin-left: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-9] {
    margin-left: 75%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-10] {
    margin-left: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-left*=_xss-11] {
    margin-left: 91.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-0] {
    margin-right: 0
}
[class*=GridLex-grid]&gt;[push-right*=_xss-1] {
    margin-right: 8.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-2] {
    margin-right: 16.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-3] {
    margin-right: 25%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-4] {
    margin-right: 33.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-5] {
    margin-right: 41.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-6] {
    margin-right: 50%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-7] {
    margin-right: 58.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-8] {
    margin-right: 66.66666667%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-9] {
    margin-right: 75%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-10] {
    margin-right: 83.33333333%
}
[class*=GridLex-grid]&gt;[push-right*=_xss-11] {
    margin-right: 91.66666667%
}
}
.GridLex-gap-center {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -30px;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
}
.GridLex-gap-center &gt; div &gt; div &gt; div {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    -ms-align-items: center;
    align-items: center;
    align-content: center;
}
.GridLex-gap-1 {
    margin-left: -1px;
    margin-right: 0;
    margin-bottom: -1px;
}
.GridLex-gap-1 &gt; div &gt; div &gt; div {
    margin-left: 1px;
    margin-right: 0;
    margin-bottom: 1px;
}
.GridLex-gap-2 {
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -2px;
}
.GridLex-gap-2 &gt; div &gt; div &gt; div {
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 2px;
}
.GridLex-gap-5 {
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -10px;
}
.GridLex-gap-5 &gt; div &gt; div &gt; div {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.GridLex-gap-10 {
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -10px;
}
.GridLex-gap-10 &gt; div &gt; div &gt; div {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.GridLex-gap-20 {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -20px;
}
.GridLex-gap-20 &gt; div &gt; div &gt; div {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
.GridLex-gap-30 {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
}
.GridLex-gap-30 &gt; div &gt; div &gt; div {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
}
.GridLex-gap-40 {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -40px;
}
.GridLex-gap-40 &gt; div &gt; div &gt; div {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
}
.GridLex-gap-50 {
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: -50px;
}
.GridLex-gap-50 &gt; div &gt; div &gt; div {
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 50px;
}
.GridLex-gap-10.no-mb, .GridLex-gap-20.no-mb, .GridLex-gap-30.no-mb {
    margin-bottom: 0;
}
.GridLex-gap-10.no-mb &gt; div &gt; div &gt; div, .GridLex-gap-20.no-mb &gt; div &gt; div &gt; div, .GridLex-gap-30.no-mb &gt; div &gt; div &gt; div {
    margin-bottom: 0;
}
/************************
-----Team Documents------
************************/

.docs-box {
  border-radius: 0.6rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
  width: 200px;
  height: 285px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.docs-box:hover {
  transform: scale(1.02);
  cursor: inherit;
}

.docs-box &gt; .inner {
  padding: 10px;
}

.docs-box-header {
  height: 210px;
  text-align: center;
  margin: -10px -10px 0 -10px;
  background: rgba(233, 236, 239,1);
  overflow: hidden;
}
.doc-thumb-container {
  display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    margin: auto;
    height: 100%;
}
.docs-thumbnail {
  position: relative;
  width: auto;
  max-height: 100%;
}
.docs-box-footer {
  overflow: hidden;
}

.docs-box &gt; .docs-box-footer {
  background-color: rgba(0, 102, 255, 0.7);
  color: #fff;
  font-weight: 700;
  display: block;
  width:100%;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  z-index: 10;
}

.docs-box &gt; .docs-box-footer:hover {
  background-color: rgba(0, 102, 255, 1);
  color: #fff;
}

.docs-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0;
  white-space: nowrap;
}

.inner.team-docs {
  margin-bottom: -25px;
}

.btn-team-doc {
    position: absolute;
    right: 7px;
    float: right;
}
.btn-team-doc-more {
    border: none;
    height: 32px;
    width: 32px;
    z-index:2;
    position: absolute;
    right: 7px;
    top: 3px;
    margin-top: 2px;
    padding: 0.1rem;
    float: right;
    color: var(--bs-body-color);
    border-radius: 50%;
}
.btn-team-doc-more:hover {
    background-color: rgba(0,0,0,0.08);
    color: rgba(255,255,255,0.8);
    /*border: 2px solid #D9D9D9;*/
}
.btn-team-doc-more:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.docs-box-pop {
  min-width: 120px;
  padding: 0.5rem;
  -webkit-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -o-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
}
.docs-box-pop .dropdown-item {
  border-radius: 0.5rem;
}
.docs-box-pop .dropdown-item:hover {
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  .col-xl-2 .docs-box h3,
  .col-lg-2 .docs-box h3,
  .col-md-2 .docs-box h3 {
    font-size: 1.6rem;
  }
  .col-xl-3 .docs-box h3,
  .col-lg-3 .docs-box h3,
  .col-md-3 .docs-box h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1200px) {
  .col-xl-2 .docs-box h3,
  .col-lg-2 .docs-box h3,
  .col-md-2 .docs-box h3 {
    font-size: 2.2rem;
  }
  .col-xl-3 .docs-box h3,
  .col-lg-3 .docs-box h3,
  .col-md-3 .docs-box h3 {
    font-size: 2.2rem;
  }
}

.docs-box p {
  font-size: 1rem;
}

.docs-box p &gt; small {
  color: #f8f9fa;
  display: block;
  font-size: .9rem;
  margin-top: 5px;
}

.docs-box h3,
.docs-box p {
  z-index: 5;
}

.docs-box .icon {
  color: inherit;
  z-index: 0;
}

.docs-box .icon &gt; i {
  font-size: 80px;
  /*position: absolute;
  right: 55px;
  top: 55px;*/
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.docs-box .icon &gt; i.fa, .docs-box .icon &gt; i.fas, .docs-box .icon &gt; i.far, .docs-box .icon &gt; i.fab, .docs-box .icon &gt; i.fal, .docs-box .icon &gt; i.fad, .docs-box .icon &gt; i.ion {
  font-size: 80px;
  /*top: 20px;*/
}

.docs-box .icon svg {
  font-size: 70px;
  /*position: absolute;*/
  /*right: 15px;
  top: 15px;*/
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.docs-box:hover {
  text-decoration: none;
}

.docs-box:hover .icon &gt; i, .docs-box:hover .icon &gt; i.fa, .docs-box:hover .icon &gt; i.fas, .docs-box:hover .icon &gt; i.far, .docs-box:hover .icon &gt; i.fab, .docs-box:hover .icon &gt; i.fal, .docs-box:hover .icon &gt; i.fad, .docs-box:hover .icon &gt; i.ion {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
    color: rgba(0, 102, 255, 0.9);
    transition: transform 0.1s linear;
}
.docs-box:hover .doc-upload-text {
  color: rgba(0, 102, 255, 0.9);
}

.docs-box:hover .icon &gt; svg {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (max-width: 767.98px) {
  .docs-box {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .docs-box .icon &gt; i.ion {
    font-size: 80px;
    /* top: 20px; */
}
  .docs-box p {
    font-size: 12px;
  }
.edit-in-place-input {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    align-items: center;
    align-content: center;
    text-align: center;
    }
}
.edit-in-place-input {
    margin-top: 0;
    color: inherit;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    /*padding: 0.3rem;
    padding-top: 0;*/
    border-radius: 0.4rem;
    border: 1px solid transparent;
    width: 100%;
}
.edit-in-place-input.sm-text {
    color: inherit;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    font-size: 0.875rem !important;
    /*padding: 0.3rem;*/
    border: 1px solid transparent;
}
.edit-in-place-input::placeholder {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.edit-in-place-input.sm-text::placeholder {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.edit-in-place-input:focus::placeholder {
    color: var(--bs-placeholder-color);
}
.edit-in-place-input:focus {
    border: 1px solid #f1f1f1;
    background: #e9ecef;
}
.edit-in-place-input-submit {
  padding: 0.25rem 0.4rem;
  margin-top: 0;
  color: inherit;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  width: 100%;
}
.edit-in-place-input-submit:focus {
    border: 1px solid #f1f1f1;
    background: #e9ecef;
}
.edit-in-place-input-submit::placeholder {
    font-weight: 700 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.edit-in-place-input-submit.sm-text {
  color: inherit;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    font-size: 0.875rem !important;
    /*padding: 0.3rem;*/
    border: 1px solid transparent;
}
.edit-in-place-input-submit.sm-text::placeholder {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.docs-box input[type='file'] {
  width: 100%;
  height: 210px;
  position: absolute;
  opacity: 0;
  outline: none;
  cursor: pointer;
  font-size: 0px;
}
.team-docs-title {
    color: var(--bs-heading-color);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1 !important;
    margin-top: 0.4rem;
    margin-bottom: 0.0rem;
    padding: 0.1rem;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    appearance: none;
    text-overflow: ellipsis;
    inset: none;
    border: 1px solid transparent;
    border-radius: 0.3rem;
}
.team-docs-title-edit {
    margin-top: 0.4rem;
    margin-bottom: 0.0rem;
    padding: 0.1rem;
    color: var(--bs-heading-color);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1 !important;
    border-radius: 0.3rem;
    border: 1px solid transparent;
    width: 100%;
    inset: none;
    white-space: nowrap;
    appearance: none;
    &amp;:focus {
      border: 1px solid var(--bs-gray-200);
      background-color: var(--bs-gray-200);
    }
}
.team-docs-subtitle {
    color: var(--bs-body-color);
    font-weight: 400;
    font-size: 0.875rem !important;
    line-height: 1.1 !important;
    margin-top: 0rem;
    margin-bottom: 0.4rem;
    padding: 0.1rem;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    appearance: none;
    text-overflow: ellipsis;
    inset: none;
    border: 1px solid transparent;
    border-radius: 0.3rem;
}
.team-docs-subtitle-edit {
    margin-top: 0rem;
    margin-bottom: 0.4rem;
    padding: 0.1rem !important;
    color: var(--bs-body-color);
    font-weight: 400;
    font-size: 0.875rem !important;
    line-height: 1.1 !important;
    border-radius: 0.3rem;
    border: 1px solid transparent;
    width: 100%;
    inset: none;
    white-space: nowrap;
    appearance: none;
    &amp;:focus {
      border: 1px solid var(--bs-gray-200);
      background-color: var(--bs-gray-200);
    }
}
.team-docs-date {
  position: absolute;
  display: block;
  bottom: 5px;
  font-size: 0.75rem;
  padding-left: 0.15rem;
}
.docs-box-submit {
  background-color: rgba(0, 102, 255, 0.7);
  color: #fff;
  font-weight: 700;
  display: block;
  width:100%;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  /*border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;*/
  z-index: 10;
  top: -29px;
}

.docs-box-submit:hover {
  background-color: rgba(0, 102, 255, 1);
  color: #fff;
}
.doc-image-preview {
    max-width: 100%;
}
.doc-filename {
  position: absolute;
  color: #fff;
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
    &amp; .doc-filename-text {
      padding: 0.1rem 0.5rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {

    .edit-in-place-input {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 528px) and (max-width: 767px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (min-width: 428px) and (max-width: 527px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (min-width: 328px) and (max-width: 427px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (max-width: 327px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (min-width: 1400px) {
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}

/**********************
---Company Directory---
**********************/
.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media-body {
  width: 10000px;
  padding-bottom: 0.5rem;
}
.media-object {
  display: block;
}
.media-object.img-thumbnail {
  max-width: none;
}
.media-right,
.media &gt; .pull-right {
  padding-left: 10px;
}
.media-left,
.media &gt; .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: middle;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.media-list {
  padding-left: 0;
  list-style: none;
    max-height: calc(100% - 80px);
    overflow-y: scroll;
    overflow-x: visible;
}
.media-list.replies-list {
  max-height: 500px;
}
.media-list::-webkit-scrollbar {
  width: 6px !important;
  position: relative !important;
}
.media-list::-moz-scrollbar {
  width: 6px !important;
  position: relative !important;
}
.media-list::-ms-scrollbar {
  width: 6px !important;
  position: relative !important;
}
.media-list::-o-scrollbar {
  width: 6px !important;
  position: relative !important;
}
.media-list::-webkit-scrollbar-track-piece:start {
  background: transparent !important;
  background-color: transparent !important;
}
.media-list::-webkit-scrollbar-track-piece:end {
  background: transparent !important;
  background-color: transparent !important;
}
.media-list::-webkit-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.media-list::-moz-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.media-list::-ms-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.media-list::-o-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.media-list::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.media-list::-moz-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.media-list::-ms-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.media-list::-o-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.media-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.media-list::-moz-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.media-list::-ms-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.media-list::-o-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.company-directory-filters {
    display: inline;
}
.directory-search-filters {
    display: inline-block;
    width: 250px;
}
.container-user {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 0.7em;
    border: none;
    padding: 30px 15px 30px 30px;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.avatar-user {
    width: 100px !important;
    height: 100px !important;
    display: inline-flex !important;
    margin-right: 15px;
    font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  .avatar-user{
    margin-right: auto;
    margin-left: auto;
  } 
  .media-left {
    padding-right: 0;
  }
}
.avatar-online-status.online {
  position: absolute;
  display: block;
  height: 12px;
  width: 12px;
  top: 25px;
  left: 25px;
  border: 2px solid #fff;
  background-color: rgba(37, 245, 210,1);
  border-radius: 50%;
}
.avatar-online-status.offline {
  position: absolute;
  display: block;
  height: 12px;
  width: 12px;
  top: 25px;
  left: 25px;
  border: 2px solid #fff;
  background-color: var(--bs-gray-500);
  border-radius: 50%;
}
.avatar-directory-online-status.online {
  position: absolute;
  display: block;
  height: 14px;
  width: 14px;
  bottom: 78px;
  left: 105px;
  border: 2px solid #fff;
  background-color: rgba(37, 245, 210,1);
  border-radius: 50%;
}
.avatar-directory-online-status.offline {
  position: absolute;
  display: block;
  height: 14px;
  width: 14px;
  bottom: 78px;
  left: 105px;
  border: 2px solid #fff;
  background-color: var(--bs-gray-500);
  border-radius: 50%;
}
.avatar-initials {
    background-color: rgba(0, 123, 255, 0.1);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: inherit;
    letter-spacing: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    font-family: inherit;
    color: rgba(0, 123, 255, 1);
    border-radius: 50%;
    top: -2px;
    cursor: pointer;
}
.avatar-initials:hover {
    background-color: var(--bs-gray-200);
    color: rgba(0, 123, 255, 0.7);
}
.avatar-initials-crm {
    background-color: rgba(207, 230, 255, 1);
    border: 2px solid var(--bs-gray-100) !important;
    width: 36px;
    height: 36px;
    position: relative;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: inherit;
    letter-spacing: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(0, 123, 255, 1);
    border-radius: 50%;
    padding: 0.5rem;
    white-space: nowrap;
    top: -11px;
    cursor: pointer;
    overflow: hidden;
}
.avatar-initials-crm:hover {
    background-color: var(--bs-gray-200);
    color: rgba(0, 123, 255, 0.7);
}
.avatar-sm {
    width: 32px !important;
    height: 32px !important;
    letter-spacing: -1px;
    font-size: 0.7rem;
}
.avatar-md {
    width: 65px !important;
    height: 65px !important;
    letter-spacing: -1px;
    font-size: 0.7rem;
}
.avatar-lg {
    width: 100px !important;
    height: 100px !important;
    letter-spacing: inherit;
    font-size: 1.5rem;
}
.member-avatar {
  display: flex;
  margin-left: 0.25rem;
  justify-content: center; 
  align-items: center; 
  vertical-align: middle;
}
.avatar-online {
  height:10px; 
  width: 10px; 
  background-color: rgba(37, 245, 210,1);
  position:absolute;
  border-radius: 50%;
  left:47px;
  top: 52px;
}
.avatar-offline {
  height:10px; 
  width: 10px; 
  background-color: #8392AB;
  position:absolute;
  border-radius: 50%;
  left:47px;
  top: 52px;
}
.user-profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn-activity-title {
  display: flex;
  margin-top: auto;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: transparent;
  color: var(--bs-heading-color);
  cursor: pointer;
}
.btn-activity-title:hover {
  background-color: rgba(0, 123, 255, 0.1);
}
.btn-activity-items {
  display: flex;
  margin-left: auto;
  align-items: end;
  border-radius: 50%;
  padding: 0.5rem;
  background-color: transparent;
  color: var(--bs-heading-color);
  cursor: pointer;
}
.btn-activity-items:hover {
  background-color: rgba(0, 123, 255, 0.1);
}
.btn-activity-items:hover a,
.btn-activity-items:hover i {
  color: rgba(0, 123, 255, 0.7);
}
.list-data-user li, .list-data-user li a {
  margin-bottom: 3px;
  font-size: 0.875rem;
}
.wrap-loader {
  color: rgba(24,182,155,.9);
}
.text-green {
  color: rgba(24,182,155,.9) !important;
}
/******** Version 1.3 ***********/
/* MAX 767 */
@media screen and (max-width:767px) {
    .container-user .media-left {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
    .container-user .media-right {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
    .container-user .media-body {
        width: 100%;
        display: block;
        text-align: center;
    }
    .list-data-user {
        text-align: center;
    }
}
/**********************
 ---- Call History ----
 **********************/
.dnd-header {
    display: inline-block;
    margin-top: 26px;
    margin-bottom: 4px;
    margin-left: 24px;
    margin-right: -6px;
 }
 .history-header {
    display: inline-block;
    margin-bottom: 0px;
    margin-left: -6px;
    margin-right: -6px;
 }
 .call-history-filters{
    display: inline;
}
.user-select-filter{
    width: 170px !important;
    max-width: 170px !important;
    margin-right: 2px !important;
    margin-left: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}
/*.user-select-filter:focus {
    border: 0.11em solid #0676CE !important;
}*/
.start-date-filter{
    width: 170px !important;
    max-width: 170px !important;
    margin-right: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}
.start-date-filter:focus {
    border: 0.11em solid #0676CE !important;
}
.end-date-filter{
    width: 170px !important;
    max-width: 170px !important;
    margin-right: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}

.daterange-filter {
    width: 190px !important;
    max-width: 190px !important;
    margin-right: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}

.call-from-filter{
    width: 170px !important;
    max-width: 170px !important;
    margin-right: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}

.call-to-filter{
    width: 170px !important;
    max-width: 170px !important;
    margin-right: 2px !important;
    color: inherit;
    display: inline;
    /*background-color: #e9ecef !important;
    border: 0.11em solid #e9ecef !important;*/
    border-radius: 0.7em !important;
}

.text-message-filters {
    display: block !important;
    margin: 0px 15px !important;
    padding: 15px 0px 5px 0px !important;
}
.text-compose-to {
  position: relative;
    display: block;
  background: none;
  background-color: rgba(0, 123, 255, 0.15);
  color: var(--bs-heading-color);
    border: none;
    width: 115px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.8rem !important;
    font-weight: 600;
    font-size: 0.875rem;
}
h6.text-compose-to-label {
  position: relative;
  display: flex;
  line-height: 1.4;
  justify-content: center;
  align-items: center;
  margin-bottom: 0 !important;
  margin-right: 10px;
  font-size: 1rem;
  font-weight: 600;
}
.btn-compose-text {
    float: right;
    width: 150px;
    border-radius: 0.8em;
    margin-left: auto;
}
.search-messages-filter{
    width: 170px !important;
    max-width: 170px !important;
    color: inherit;
    display: inline-block !important;
    background-color: #e9ecef !important;
    border: 0.11em solid transparent !important;
    border-radius: 0.7em !important;
}
.text-message-table {
    position: relative;
    overflow: auto;
    margin: 0;
}
.text-message-td {
    max-width: 500px;
    margin-right: 10px !important;
    overflow-x: auto;
}
/***************************
------ Account Billing -----
***************************/
.payment-method {
    display: inline-block;
}
.payment-card {
    display: inline-block;
    font-size: 0.875rem;
}
.btn-payment-card-delete {
    vertical-align: middle;
    color: rgba(88,101,112,0.7);
    background-color: transparent;
    border-radius: 50% !important;
    font-size: 28px !important;
    padding: 0rem 0.2rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.btn-payment-card-delete:hover {
    /*background-color: rgba(0, 0, 0, 0.04);*/
    color: rgba(255,0,0,0.7) !important;
}
.btn-payment-card-delete:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-default-payment {
    vertical-align: middle;
    color: rgba(88,101,112,0.7) !important;
    background-color: transparent;
    border-radius: 50% !important;
    font-size: 28px !important;
    padding: 0rem 0.2rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.btn-default-payment:hover {
    /*background-color: rgba(0, 0, 0, 0.04);*/
    color:rgba(24,182,155,.9) !important;
}
.btn-default-payment:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-default-payment-active {
    vertical-align: middle;
    color:rgba(24,182,155,.9) !important;
    background-color: transparent;
    border-radius: 50% !important;
    font-size: 28px !important;
    padding: 0rem 0.2rem;
    width: 30px;
    height: 30px;
    cursor: default;
}
.receipt-table {
    background: #fff;
    border: solid 1px #F1F1F1;
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    max-height: 600px;
    overflow: auto;
}
.receipt-table table {
    width: 100%;
}
.add-funds-table {
    width: 350px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--bs-heading-color);
}
.add-funds-info {
    margin-left: 10px;
    font-size: 14px;
    color:#656B7A;
}
.total-bg-success {
    background: #1AB188 !important;
    color: #FFF !important;
}
.total-bg-success:hover {
    background: #1AB188 !important;
    color: #FFF !important;
}
.billing-text {
    font-size: 0.9rem !important;
}
/******************
-- Account Assets --
********************/
.user-assets-filename {
    padding: 0 0 1.1em 0 !important;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    max-width: 95%;
}
.current-sub {
  border: 2px solid rgba(37, 245, 210 ,1) !important;
  box-shadow: 0 20px 27px 0 rgba(37, 245, 210, 0.3) !important;
}
/**************
--Automation--
***************/
select.hourselect, select.minuteselect, select.secondselect, select.ampmselect {
    background-repeat: no-repeat !important; 
    border-radius: 0.4rem;
}
.automation-bg {
    height: 100% !important;   
}
.date-container {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}
.select-bot-mode label {
            font-size:10px;
            box-shadow: none;
            color:grey;
}
.select-bot-mode label.active {
           font-weight: bold;
           color:black;
}
.tui-full-calendar-floating-layer {
            bottom: 0px;
            top:auto !important;
}
.mode-select-title {
    position: relative;
    display: inline-flex;
}
.automation-event-date {
    position: relative;
    display: inline-block;
    min-width: 200px;
    padding-top: 14px;
}
.automation-event-job-percent {
    position: relative;
    display: inline-block;
}
.automation-event-destination {
    position: relative;
    display: inline-block;
    min-width: 200px;
    padding-top: 14px;
}
.progress-percent-chart-text {
    font-weight: 700;
    text-align: center;
}
.modal-section-title {
    font-size: 16px;
    font-weight: 700;
}
.btn-event {
    display: inline-flex;
    max-height: 40px;
    /*font-weight: 700;*/
}
.btn-event-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 3px;
}
/*.btn-create {
    border-radius: 0.6rem !important;
    font-size: 14px;
    font-weight: 400;
    padding: 3px 15px 3px;
    letter-spacing: 1px;
    height: 35px;
}*/
.progress-text {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0 !important;
}
.progress-percent {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0 !important;
}
.auto-progress-header {
    display: inline-block;
}
.auto-progress-switch {
    display: inline-block;
    float: right;
    /*font-size: 24px;*/
}
.automation-header-row {
    display: table;
}
.automation-header {
    display: table-cell;
}
.automation-header-title {
    font-weight: 700;
    color: inherit;
    text-align: left;
}
.select-mode-wrapper {
    width: 100%;
    margin-bottom: 20px;
}
.date-label {
    position: relative;
    display: inline-flex;
    margin-left:5px;
}
.start-date-wrapper {
    position: relative;
    display: inline-grid;
    width: 100% !important;
}
.end-date-wrapper {
    position: relative;
    display: inline-grid;
    width: 100% !important;
}
.select-audio-wrapper {
    margin: 20px 0 !important;
    display: flex;
}
.select-sms-data {
    margin: 5px 0 !important;
    display: flex;
}
.select-speed-wrapper {
    margin: 20px 0 !important;
}
.test-output-wrapper {
    margin: 0 0 20px 0;
}
.sms-message-wrapper {
    margin: 0 0 20px 0;
}
.test-number-wrapper {
    display: flex;
}
.multiple-number-input {
    width: 100%;
}
.tui-datepicker {
    left: 0;
    z-index: 999;
    border-color: #F0F0F0 !important;
    border-radius: 0.6rem !important;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 10%);
    -moz-appearance: 0 5px 15px 2px rgb(0 0 0 / 10%);
    -o-appearance: 0 5px 15px 2px rgb(0 0 0 / 10%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 10%);
}
.tui-datepicker:before {
    border-box: none !important;
}
.tui-datepicker:after {
    border-box: none !important;
}
.tui-calendar .tui-calendar-header {
    position: relative;
    border-bottom: 1px solid #efefef;
    border-top-left-radius: 0.6rem !important;
    border-top-right-radius: 0.6rem !important;
}
.tui-calendar .tui-calendar-header-inner {
    padding: 17px 50px 15px;
    height: 50px;
    border-radius: 0.7em !important;
}
.tui-timepicker .tui-timepicker-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: auto;
    border-radius: 0.6em !important;
}
.tui-full-calendar-week-container {
    width: 100%;
    height: inherit;
    display: inline-block;
    font-size: 10px;
    min-height: 600px;
    background: white;
    border-radius: 0.7em;
}
.tui-full-calendar-dayname-container {
    overflow-y: scroll;
    border-top: none !important;
    border-bottom: 1px solid rgb(229, 229, 229);
    height: 45px !important;
    background-color: inherit;
    text-align: left;
}
.tui-datepicker-footer .tui-timepicker {
    border-top: 1px solid #eee;
    border-bottom-left-radius: 0.6rem !important;
    border-bottom-right-radius: 0.6rem !important;
}
.tui-datepicker-input.tui-has-focus {
    color: #1E1E1E;
    background: #fff;
    border-color: rgba(225,225,225,0.8) !important;
    border-radius: 0.6rem !important;
    /*padding: 0.8rem 0 0.8rem 0;*/
    height: 40px;
    width: auto;
    margin: 5px;
    font-size: 15px;
    font-family: "Nunito";
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
}
.tui-datepicker-input &gt; input {
    width: 100%;
    height: 100%;
    padding: 12px 10px 12px 10px;
    font-size: 16px;
    line-height: 40px;
    vertical-align: top;
    border: 0;
    color: #333;
}
.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 350px;
  overflow: visible;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 6.8;
}

.circle {
  fill: none;
  stroke-width: 4.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: rgba(252,157,3,0.7);
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: rgba(13,109,253,1);
}

.circular-chart.red .circle {
  stroke: rgba(252,3,3,0.6);
}

.percentage {
  fill: #67748e;
  font-family: "Nunito";
  font-size: 0.5em;
    font-weight: 700;
  text-anchor: middle;
}

.status-info {
  background-color: rgba(233,243,252,0.8);
    border-radius: 0.7rem;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    color: inherit;
    display: inline-flex;
    width: 100%;
    height: auto;
    line-height: 1.25;
}
.blue-icon-color {
  color:rgba(34,139,230,1);
}

.status-info-text {
  margin-left: 20px;
  margin-bottom: 0;
}
.status-success {
  background-color: rgba(37, 245, 210, 0.2);
    border-radius: 0.7rem;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    color: inherit;
    display: inline-flex;
    width: 100%;
    height: auto;
    line-height: 1.25;
}
.icon-color-success {
  color:rgba(37, 245, 210, 1);
}
.status-pink {
  background-color: rgba(255, 158, 244, 0.2);
    border-radius: 0.7rem;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    color: inherit;
    display: inline-flex;
    width: 100%;
    height: auto;
    line-height: 1.25;
}
.icon-color-pink {
  color:rgba(255, 158, 244, 1);
}
.status-warning {
  background-color: rgba(251, 207, 51, 0.2);
    border-radius: 0.7rem;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: 20px;
    color: inherit;
    display: inline-flex;
    width: 100%;
    height: auto;
    line-height: 1.25;
}
.icon-color-warning {
  color:rgba(251, 207, 51, 1);
}
.callback-actions-wrapper {
    width: 100%;
    display: inline-flex;
}
.callback-text {
  font-size: 12ppx;
  margin-bottom: 0;
}
.audio-file-canvas {
    font-size: 0.9rem;
    height:150px;
    padding: 0.3rem;
    border: solid 1px #ebebeb; 
    border-radius: 0.6rem; 
    width: 100%; 
    margin-bottom: 15px;
    overflow-y: auto;
    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
}
.audio-greeting-canvas {
    font-size: 0.9rem;
    height:74px;
    padding: 0.3rem;
    border: solid 1px #ebebeb; 
    border-radius: 0.6rem; 
    width: 100%; 
    margin-bottom: 0px;
    overflow-y: auto;
    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%);
}
.audio-play-icon {
    color: rgba(88,101,112,0.7);
    background-color: transparent;
    border-radius: 0rem;
    padding: 0.1rem;
    height: 25px;
    width: 25px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
}
.audio-play-icon:hover {
    color: rgba(0,123,255,0.7);
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
}
.audio-delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right:1px;
    color: rgba(88,101,112,0.7);
    background-color: transparent;
    border-radius: 0rem;
    padding: 0.35rem;
    height: 30px;
    width: 30px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
}
.audio-delete-icon:hover {
    color: rgba(255,0,0,0.7);
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
}

@media screen and (max-width: 1099px) {
    .automation-event-job-percent {
        margin-top: 15px;
    }
    .select-audio-wrapper {
        display:block;
    }
}
@media screen and (max-width: 576px) {
    .callback-actions-wrapper {
        display: block;
    }
}
/***********************
 * Sidebar
 **********************/

.sidebar-inner {
}
.sidebar-module + .sidebar-module, .sidebar-module + .clear {
    margin-top: 50px;
}
.sidebar-module + .clear:last-child {
    margin-top: 0;
}
.sidebar-box {
    padding: 40px 0 0;
}
.sidebar-title {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1;
    margin-bottom: 25px;
}
.sidebar-header {
    clear: both;
}
.sidebar-header h3 {
    float: left;
}
.sidebar-reset-filter {
    float: right;
}
ul.sidebar-category, ul.sidebar-archives {
    margin-bottom: -10px;
}
ul.sidebar-category li a, ul.sidebar-archives li a {
    color: #868686;
    line-height: 1.2;
    margin-bottom: 10px;
    display: block;
    position: relative;
    padding-left: 15px;
}
ul.sidebar-category li a:before, ul.sidebar-archives li a:before {
    content: "";
    width: 6px;
    height: 6px;
    border: 1px solid #002391;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
ul.sidebar-category li a:hover, ul.sidebar-archives li a:hover {
    color: #002391;
}
ul.sidebar-category li a:hover::before, ul.sidebar-archives li a:hover::before {
    background: #002391;
}
ul.sidebar-post li {
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
ul.sidebar-post li h3 {
    font-size: 15px;
    line-height: 22px;
    margin: -3px 0 5px;
    letter-spacing: 0.7px;
    font-weight: 600;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
ul.sidebar-post li .image {
    width: 80px;
    float: left;
}
ul.sidebar-post li .image img {
    display: block;
}
ul.sidebar-post li .content {
    margin-left: 95px;
}
ul.sidebar-post li .sidebar-post-meta {
    margin: 0;
    color: #A1A1A1;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-style: italic;
}
ul.sidebar-post li a:hover h3 {
    color: #002391;
}
ul.sidebar-post.no-image li .content {
    margin-left: 0;
}
.tag-cloud span {
    display: block;
    float: left;
    line-height: 1;
    padding: 5px 7px;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 5px
}
.tag-cloud a {
    border: 1px solid #EFEFEF;
    line-height: 1;
    font-size: 12px;
    padding: 5px;
    margin-left: 3px;
    margin-bottom: 5px;
    display: block;
    float: left;
    color: #777;
}
.tag-cloud a:hover {
    background: #002391;
    color: #FFF;
    border-color: #002391;
}
.tag-cloud-wrapper {
    border-top: 1px solid #EFEFEF;
    position: relative;
    margin: 20px 0 0;
    padding: 20px 0 0;
}
.tag-cloud-wrapper .tag-cloud-heading {
    float: left;
}
.tag-cloud-wrapper .tag-cloud {
    margin-left: 50px;
    margin-top: 5px;
}
.sidebar-text-widget ul {
    margin: 0;
    margin-left: 25px;
    padding: 0;
}
.sidebar-text-widget ul li {
    list-style: circle;
}
ul.sidebar-menu {
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 0;
    padding-left: 0;
    /*border: 1px solid #D6D6D6;*/
    background-color: none;
    font-weight: 500;
    font-size: 20px;
}
.scrollspy-sidebar .nav &gt; li {
    margin-top: -2px;
}
ul.sidebar-menu li &gt; a {
    display: block;
    color: inherit;
    padding: 14px 20px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    line-height: 1;
    background: none;
    border-radius: 0.7rem;
    /*border-right: 1px solid #D6D6D6;
    border-left: 1px solid #F2F2F2;
    border-bottom: 1px solid #D6D6D6;*/
    margin-right: -1px;
    margin-left: -1px;
    margin-bottom: 1px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
ul.sidebar-menu &gt; li &gt; h4 {
    text-transform: uppercase;
    line-height: 1;
    /*border-bottom: 1px solid #E8E8E8;*/
    margin: 0;
    margin-left: -1px;
    padding: 14px 20px;
}
ul.sidebar-menu &gt; li &gt; a:hover {
    background: #fff;
    color: #0676CE;
    /*border-right: 2px solid #002391;
    border-bottom: 1px solid #002391;*/
}
ul.sidebar-menu &gt; li &gt; a:focus {
    background: none;
    /*color: blue;
    /*border-color: #EEE;
    border-bottom: 1px solid #E8E8E8;*/
}
ul.sidebar-menu .active &gt; a, ul.sidebar-menu .active:hover &gt; a, ul.sidebar-menu &gt; .active:focus &gt; a {
    font-weight: 600;
    color: #0676CE;
    background: #fff;
    /*border-right: 1px solid #002391;
    border-bottom: 1px solid #E8E8E8;*/
}
ul.sidebar-menu &gt; li:last-child &gt; a {
    border-bottom: 0;
}
ul.sidebar-menu &gt; li &gt; ul {
    border-bottom: 1px solid #E8E8E8;
    margin-top: 15px;
    padding-bottom: 15px;
}
ul.sidebar-menu &gt; li &gt; ul &gt; li &gt; a {
    border: 0;
    padding: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    font-size: 90%;
    border-bottom: 0 !important;
}

@media only screen and (max-width: 767px) {
.sidebar {
    margin-bottom: 30px
}
}
/*****************************
------ Authentication --------
*****************************/
.logo-center {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    align-content: center;
}
.forgot-password {
    display: inline-block;
    margin-bottom: 0px !important;
    float: right;
    vertical-align: bottom;
}
/************************
 * Contact Us
 ************************/

.contact-form-wrapper .help-block {
    line-height: 1.2;
    font-size: 12px;
}
.contact-form-container {
    display: webkit-box;
    display: webkit-flex;
    display: ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.contact-text-featured-item h5 {
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.contact-text-featured-item .content p {
    font-weight: 300;
}
.contact-social a {
    margin-right: 5px;
}
.social-links {
  color: inherit;
}
.social-links:hover {
  color: var(--bs-link-color);
}
/************************
 * Footer
 ************************/
.footer-main {
    float: left;
    width: 100%;
    background-color: #FFF;
    padding: 30px 0;
    border-top: 1px solid #F0F0F0;
}
.subfooter {
    background-color: #FFF;
    color: inherit;
    float: left;
    width: 100%;
}
.subfooter-text {
    font-size: 14px !important;
}
.footer-slogan {
    font-size: 14px;
    color: inherit;
}
.ico-social {
    font-size: 24px;
    color: inherit;
    margin-right:10px;
}
/************************
 ---- Support Panel ----
 ************************/
.featured-icon .icon {
    font-size: 70px;
    line-height: 1;
    margin: 0 0 10px;
    -ms-align-items: center;
    align-items: center;
    color: #002392;
}
.featured-icon h5 {
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.2;
    color: #181818;
}
.featured-icon p {
    color: #484848;
    font-size: 16px;
}
.featured-icon a {
    color: #fff;
}
.featured-icon a:hover {
    color: #0272E9;
}
.support-ticket-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  margin-left: 0.15rem;
  font-size: 0.7rem;
  color: var(--bs-heading-color);
  background-color: rgba(255, 158, 244, 1);
  border-radius: 50%;
}

/*************************
 ---- Pricing ----
 *************************/
.pricing-table {
    background: #fff;
    /*border: solid 1px #F1F1F1;*/
    border-radius: 10px;
    padding: 20px;
    font-size: 14px;
    overflow-x: auto;
    -webkit-box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    -moz-box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    -ms-box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    -o-box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
}
.pricing-table table {
    width: 100%;
}
.features-table {
    border-radius: 10px;
    padding: 0;
    font-size: 14px;
/*    overflow-x: auto;*/
}
.features-table table {
    width: 100%;
    text-align: left ;
    position: relative ;
    border-collapse: collapse ; 
}
.features-table table tr th {
    height: 70px;
    font-size: 1.5rem;
    color: var(--bs-heading-color);
    background: #fff;
    border-bottom: 1px solid var(--bs-gray-200);
    border-top: 1px solid var(--bs-gray-200);
    border-radius: 0;
}
.features-table table tr th {
  border-top: none !important;
}
.features-table table tr td {
  padding: 0.75rem;
  text-align: center;
  border-radius: 0;
}
.features-table table tr td:first-child {
    text-align: left !important;
    padding-left: 1.65rem;
}
/*.features-table table thead {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 20%);
}
*/
.features-table table th {
  position: sticky !important;
  top: 0; /* Don't forget this, required for the stickiness */
/*  box-shadow: 0 20px 27px 0 rgb(0, 0, 0, 0.4);*/
}
.price-card-wrapper {
  flex: 0 0 auto;
  width: 324px !important;
}
.card-wrapper {
  flex: 0 0 auto;
}
.price-card {
  border-bottom: 3px solid transparent;
}
.border-bottom-dark {
  border-color: var(--bs-heading-color);
}
.border-bottom-success {
  border-color: rgba(37, 245, 210, 1);
}
.border-bottom-info {
  border-color: rgba(33, 81, 255, 0.8);
}
.border-bottom-pink {
  border-color: rgba(255, 125, 184, 1);
}
.border-bottom-purple {
  border-color: rgba(var(--purple500), 1);
}
.fs-price {
  font-size: calc(3rem + 2.5vh) !important;
  font-weight: 700 !important;
}
.pricing-item {
  margin-left: 1rem !important;
  padding: 0.25rem 0.5rem !important;
}
.price-font-h1 {
  font-size: calc(1.725rem + 2.1vw) !important;
  text-align: center !important;
}
.price-font-h2 {
  font-size: calc(1.425rem + 2.1vw) !important;
  text-align: center !important;
}
.features-wrapper {
  padding-left: 2rem;
  padding-right: 2rem;
}
.btn-pricing-features {
  border-radius: 0.6rem;
}
.btn-pricing-features .icon-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    vertical-align: middle;
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.btn-pricing-features .icon-rotate-180::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (min-width: 992px) {
  .price-card-wrapper {
    width: 324px !important;
  }
  .pricing-item {
  margin-left: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .price-card-wrapper {
    width: 324px !important;
  }
  .pricing-item {
  margin-left: 0rem !important;
  }
}
@media (min-width: 1400px) {
  .price-card-wrapper {
    width: 324px !important;
  }
  .pricing-item {
  margin-left: 1rem !important;
  }
}
@media (max-width: 767px) {
  .features-table {
    overflow-x: auto;
  }
}
@media (max-width: 440px) {
  .pricing-item {
    margin-left: 0rem !important;
  }
}
/*********************************
 ---- Marketing ----
 *********************************/
.competitive-table {
    border-radius: 10px;
    padding: 0;
    font-size: 14px;
/*    overflow-x: auto;*/
}
.competitive-table table {
    width: 100%;
    text-align: left ;
    position: relative ;
    border-collapse: collapse ; 
/*    overflow-x: auto;*/
}
.competitive-table thead,
.competitive-table thead tr,
.competitive-table thead:hover,
.competitive-table thead tr:hover {
    background: transparent !important;
    background-color: transparent !important;
}
.competitive-table table tr th,
.competitive-table table tr th:hover {
    height: 70px;
    font-size: 1.5rem;
    color: var(--bs-heading-color);
    background: transparent !important;
    border-bottom: transparent !important;
    border-top: transparent !important;
    border-radius: 0;
}
.competitive-table table tr td {
  padding: 0.75rem;
  text-align: center;
}
.competitive-table table tr td:first-child {
    text-align: left !important;
    padding-left: 1.65rem;
}
.competitive-table tbody tr td:first-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-heading-color);
}
.competitive-table tbody tr,
.competitive-table tbody tr {
    border-radius: 1rem;
}
.competitive-table tbody tr:hover {
  background-color: var(--coolGrey50) !important;
}
.competitive-table tr:nth-child(even) {
    background-color: var(--coolGrey50);
}
.competitive-table tr:nth-child(odd),
.competitive-table tr:hover
 {
    background-color: transparent !important;
}
/*.features-table table thead {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 20%);
}
*/
.competitive-table table th {
  position: -webkit-sticky;
  position: sticky !important;
  top: 0; /* Don't forget this, required for the stickiness */
/*  box-shadow: 0 20px 27px 0 rgb(0, 0, 0, 0.4);*/
}
.compare-icon {
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  vertical-align: middle; 
  margin: auto;
  bottom: -8px !important;
}
.competitor-box {
  background: white;
  border-radius: 0.75rem;
  text-align: center;
  padding: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  -webkit-box-shadow: 0 5px 20px rgb(20 20 20 / 15%) !important;
  -moz-box-shadow: 0 5px 20px rgb(20 20 20 / 15%) !important;
  -ms-box-shadow: 0 5px 20px rgb(20 20 20 / 15%) !important;
  -o-box-shadow: 0 5px 20px rgb(20 20 20 / 15%) !important;
  box-shadow: 0 5px 20px rgb(20 20 20 / 15%) !important;
}
.feature-card {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:1.5rem;
  height: 320px; 
  width: 320px;
  border: 1px solid rgb(var(--coolGrey100rgb), 1) !important; 
  background-color: var(--coolGrey37);
  text-transform: none;
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  box-shadow: 0 1px 2px 0 var(--coolGrey50);
  &amp; .more-info {
    position: absolute;
    padding: 0.3rem 0.5rem;
    bottom: 10px;
    right: 10px;
    border-color: var(--coolGrey100_alpha75);
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0.5rem;
    background-color: #fff;
    transition: all 0.1s ease-in-out;
  }
  &amp;:hover {
    background-color: var(--coolGrey37);
    border-color: rgb(var(--z-blue-500), 0.4) !important;
    -webkit-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.1) !important;
    -moz-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.1) !important;
    -ms-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.1) !important;
    -o-box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.1) !important;
    box-shadow: 0 0px 2px 4px rgb(var(--z-blue-500), 0.1) !important;
    &amp; .more-info {
      border-color: rgb(var(--z-blue-500), 0.4);
      .text-body {
        color: rgb(var(--z-blue-500), 0.8) !important;
      }
    }
  }
}
.feature-card h3 {
  font-size: 1.5rem;
  margin-top: 2rem !important;
}
.ai-tools-card {
  color: inherit;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:1.5rem;
  height: 220px; 
  width: 520px;
  text-transform: none;
  transition: all 0.1s ease-in-out;
  &amp; h3 {
    color: rgba(var(--coolGrey25rgb),1) !important;
    transition: all 0.1s ease-in-out;
  }
  &amp; .more-info {
    position: absolute;
    padding: 0.3rem 0.5rem;
    bottom: 10px;
    right: 10px;
    border-color: var(--coolGrey100_alpha75);
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0.5rem;
    transition: all 0.1s ease-in-out;
  }
  &amp;:hover {
    &amp; h3 {
      color: rgb(var(--z-blue-500), 0.8) !important;
    }
    &amp; .more-info {
      border-color: rgb(var(--z-blue-500), 0.4);
      .text-body {
        color: rgb(var(--z-blue-500), 0.8) !important;
      }
    }
  }
}
.feature-card h3 {
  font-size: 1.5rem;
  margin-top: 2rem !important;
}
@media (max-width: 767px) {
  .competitive-table {
    overflow-x: auto;
  }
}
/*************************
 ------ CRM Deal Board ------
 *************************/
.dropdown-menu-labels::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #fff;
    border-top: 1px solid var(--bs-gray-200);
    border-bottom: 1px solid var(--bs-gray-200);
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.md-10 {
    font-size: 10px !important;
 }
.md-12 {
    font-size: 12px !important;
 }
.md-14 {
    font-size: 14px !important;
}
.md-16 {
    font-size: 16px !important;
}
.md-18 {
    font-size: 18px !important;
 }
.md-24 {
    font-size: 24px !important;
 }
 .md-26 {
    font-size: 26px !important;
 }
 .md-28 {
    font-size: 28px !important;
 }
 .md-32 {
    font-size: 32px !important;
 }
 .md-36 {
    font-size: 36px !important;
 }
 .md-48 {
    font-size: 48px !important;
 }
 .md-64 {
    font-size: 64px !important;
 }
 .crm-canvas {
    position: relative;
    display: block;
    top: 0;
    bottom: 0;
    padding-top: 0px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    min-height: 100vh;
    max-height: 100vh;
 }
 .crm-dealboard {
    box-shadow: 0 10px 10px 0 rgb(0, 0, 0, 5%);
    position: absolute;
/*    left: 50%;*/
    bottom: 0;
    top: -36px; 
/*    transform: translate(-50%);*/
    padding: 0;
    margin: 48px 0 55px;
    font-size: 0.875rem;
    width: calc(100vw - 20px);
    height: calc(100% - 72px);
/*    max-width: 1500px;*/
/*    color: #344767;*/
    border-radius: 0.7rem;
    /*transition: all 0.2s ease-in-out;
    transition: width 0s;
    transition: height 0s;*/
/*  overflow: hidden;*/
}
/*.crm-dealboard-table {
  max-height: 69vh;
  overflow: auto;
}*/
.crm-navbar-search {
  background-color: var(--coolGrey100_alpha05);
    border-style: solid;
    border-width: 1px;
    border-color: var(--coolGrey100_alpha05);
    width: 400px;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    height: 32px;
    line-height: 1.4;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    color: var(--bs-body-color);
    &amp;:hover {
      background-color: #fff;
    }
    &amp;:focus {
      background-color: #fff;
      border-color: rgba(37, 196, 242, 0.5);
      -webkit-box-shadow: 0 0 0 0.25rem rgba(37, 196, 242, 0.5) !important;
      -moz-box-shadow: 0 0 0 0.25rem rgba(37, 196, 242, 0.5) !important;
      -ms-box-shadow: 0 0 0 0.25rem rgba(37, 196, 242, 0.5) !important;
      -o-box-shadow: 0 0 0 0.25rem rgba(37, 196, 242, 0.5) !important;
      box-shadow: 0 0 0 0.125rem rgba(37, 196, 242, 0.5) !important;
    }
}
.table-container {
  overflow: hidden;
}
.table-scroll {
/*  overflow-x: auto;*/
}
.crm-table {
  width: 100% !important;
/*  overflow-x: auto;*/
  -webkit-overflow-scrolling: touch;
/*  display: table;*/
  margin-bottom: 0 !important;
}
/*table.crm-table-2 {
  width: 100%;
}*/

.crm-tbody-2 {
  display: block; 
  width: 100%; 
  max-height: 200px;
  overflow-y: scroll;
}
.crm-table-2 th, .crm-table-2 td {
/*  width: 33.33%;*/
  word-break: break-all;
}
.crm-table-2 tr {
  display: table;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.crm-table thead {
  border-radius: 0.6rem;
  font-weight: 600;
  display: table; 
  width: 100%;
  color: var(--bs-heading-color);
}
.crm-table-2 thead {
  border-radius: 0.6rem;
  font-weight: 600;
  display: table; 
  width: 100%;
  color: var(--bs-heading-color);
}
.crm-table tbody tr {
  border-radius: 0.6rem !important;
}
.crm-table-2 tbody tr {
  border-radius: 0.6rem !important;
}
.crm-table tr th:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
.crm-table tr th:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
.crm-table tr td:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
.crm-table tr td:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
.crm-table::-webkit-scrollbar {
  display: none !important;
}
.crm-table-2 tr th:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
.crm-table-2 tr th:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
.crm-table-2 tr td:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
.crm-table-2 tr td:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
.crm-table-2::-webkit-scrollbar {
  display: none !important;
}
/*.crm-dealboard-table::-webkit-scrollbar {
  display: none !important;
}*/

/*.crm-tbody::-webkit-scrollbar {
  position: fixed;
  display: block;
  overflow: overlay !important;
}*/
.main-details::-webkit-scrollbar {
  display: none;
}
.draggable-table {
  position: relative;
  top: 0px;
  /*left: 20%;
  width: 60%;
  height: 50%;
  border-collapse: collapse;
  background: white;  
  -webkit-box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);  */
}
.draggable-table .draggable-table__drag {
  /*font-size: .95em;
  font-weight: lighter;
  text-transform: capitalize; */   
  position: absolute;
  width: 100%;
/*  text-indent: 50px;    */
  border: 1px solid #f1f1f1;
  border-radius: 0.5rem;
  z-index: 10;
  cursor: grabbing;
  background: var(--bs-gray-400);
  -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25); 
  opacity: 1;
}  

.draggable-table thead th {
  /*height: 25px;
  font-weight: bold;
  text-transform: capitalize;
  padding: 10px;
  user-select: none;*/
}

.draggable-table tbody tr td:first-child {
  cursor: grabbing;
}
.draggable-table tbody td {
  /*font-size: .95em;
  font-weight: lighter;
  text-transform: capitalize;
  text-indent: 50px;
  padding: 10px;  
  user-select: none;
  border-top: 1px solid whitesmoke;*/
} 

.draggable-table tbody tr.is-dragging {
  background-color: rgba(0, 123, 255, 0.05);
}
.draggable-table tbody tr.is-dragging td {
/*  color: #ffe683;*/
}
.nav-wrapper.status-tabs {
  border-radius: 0.7rem;
}
.nav-wrapper.status-tabs .nav.nav-pills {
  background: var(--bs-gray-200);
}
.nav-wrapper.status-tabs .nav.nav-pills .nav-item .nav-link {
  color: var(--bs-body-color);
}
.nav-wrapper.status-tabs .nav.nav-pills .nav-item .nav-link.active {
  color: rgba(0, 123, 255, 0.7);
}
/*@media (max-height: 1200px) {
  .crm-tbody {
    max-height: 74vh;
  }
}
@media (max-height: 992px) {
  .crm-tbody {
    max-height: 59vh;
  }
}
@media (max-height: 767px) {
  .crm-tbody {
    max-height: 46vh;
  }
}
@media (max-height: 587px) {
  .crm-tbody {
    max-height: 35vh;
  }
}*/
/*.sidenav-toggle-hover {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
}
.sidenav-toggle-hover:hover {
  background-color: var(--bs-gray-200);
}*/
.sidenav-relative {
  top: 60px !important;
  right: -350px !important;
  width: 350px !important;
  max-width: 350px !important;
}
.sidenav-relative.show {
  right: 10px !important;
}
/*.sidenav-header {
  height: 3.075rem;
}*/
@media (min-width: 1200px) {

  /*.sidenav.fixed-start~.main-content {
    margin-left: 22.125rem;
  }*/

  /*.sidenav.phone-widget.show~.main-content {
    margin-right: 22.525rem;
  }*/
  .sidenav.phone-widget.show~.main-content {
    margin-right: 23.725rem;
    overflow: initial;
/*    transition: all 0.2s ease-in-out;*/
  }
  .sidenav.phone-widget.show~.main-content .content .card.crm-dealboard {
    /*position: relative !important;
    margin-right: 22.525rem !important;
    height: calc(100% - 51px) !important;*/
    width: 100% !important;
    /*left: 0;
    transform: translate(10px, 0px);*/
    /*top: -46px !important;*/
/*    transition: all 0.2s ease-in-out;*/
  }
}
.dealboard-columns {
  height: 300px;
  width: 200px;
}
.dealboard-column-field {
  margin-top: 10px;
  height: 243px;
}
.db-column-text {
  height: 100% !important;
  background: transparent !important;
  border-color: transparent !important;
}
.db-column-text:focus {
  background: #fff !important;
  border-color: #80bdff !important;
}
.status-tab-add-btn {
    vertical-align: middle;
  color: var(--bs-body-color);
  cursor: pointer;
}
.status-tab-add-icon {
  vertical-align: middle;
  padding: 0.15rem;
  border-radius: 50%;
}
.status-tab-add-icon:hover {
  background-color: rgb(229,231,235,1);
  color: rgba(0, 123, 255, 0.7);
}
.add-phone-email-icon {
  vertical-align: middle;
  padding: 0.15rem;
  border-radius: 50%;
}
.add-phone-email-icon:hover {
  background-color: rgb(255,255,255,0.5);
  color: rgba(0, 123, 255, 0.7);
}
.status-tab-icon {
  vertical-align: middle;
  line-height: 0.8;
  font-size:1.5rem;
  padding-bottom: 0.1em;
}
.name-tab {
  padding-top: 7px !important;
    padding-bottom: 8px !important;
    padding-left: 6px !important;
    margin-bottom: 2px !important;
}
.custom-field-add-btn {
  vertical-align: middle;
  color: inherit;
  line-height: 1;
  font-size:1.5rem;
  padding: 0.4rem;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1);
  border-radius: 2rem;
  /*margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;*/
  float:right !important;
  webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.custom-field-add-btn:hover,
.custom-field-add-btn:focus,
.custom-field-add-btn:active {
  color: rgba(0, 123, 255, 0.7);
  background: rgba(255,255,255,0.5);
  webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.custom-field-delete-btn {
  vertical-align: middle;
  color: inherit;
  line-height: 1;
  font-size:1.5rem;
  padding: 0.5rem;
  height: 40px;
  width: 42px;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1);
  border-radius: 0.6rem;
  /*margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;*/
  float:right !important;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.custom-field-delete-btn:hover {
  background: rgba(255,255,255,0.5);
  color: rgba(255,0,0,0.6);
  webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.custom-fields-delete-btn {
  padding: 0.5rem;
    margin: 0.25rem;
}
.custom-fields-title {
  width: 100%;
}
.db-custom-section {
  display:inline-block;
  position:relative;
  white-space:nowrap;
  width:100%;
  max-width:100%;
}
/*.db-field-wrapper {
  background: #e9ecef;
  padding: 10px;
  border-radius: 0.7rem;
  margin-bottom: 5px;
}*/
.form-control-transparent {
  color: var(--bs-heading-color);
  display:inline;
  width: auto;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  background: transparent;
  background-clip: padding-box;
  border: none;
  border-radius: 0.7rem;
  appearance: none;
  box-shadow: none;
  cursor: text;
  transition: all ease 0.3s;
}
.form-control-transparent:focus {
  border: rgba(37,196,242,0.3) !important;
  border-color: rgba(37,196,242,0.3) !important;
  background: #fff;
}
.form-control-properties {
  padding: 0.1rem 0.4rem;
  font-size: 0.6rem;
  border: none !important;
  border-radius: 0.3rem !important;
}
.form-control-properties:focus {
  border-radius: 0.4rem;
  padding: 0.1rem 0.4rem;
  min-width: 80px;
  font-size: 0.6rem;
  color: var(--bs-heading-color);
}
.btn-add-property {
  float: right !important;
  padding: 0.4rem 0.9rem;
}
.oil-property-input {
  background-color: var(--bs-gray-200);
  border: 0.10rem solid transparent;
  border-radius: 0.4rem;
  margin: 0.2rem;
  padding: 0.25rem 0.5rem;
  color: var(--bs-heading-color);
  font-size: 0.8rem;
  font-weight: 500;
  width: 156px;
  -webkit-box-shadow: 0 0 0 0.25rem transparent;
    -moz-box-shadow: 0 0 0 0.25rem transparent;
    -ms-box-shadow: 0 0 0 0.25rem transparent;
    -o-box-shadow: 0 0 0 0.25rem transparent;
    box-shadow: 0 0 0 0.125rem transparent;
}
.oil-property-input:focus {
  border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.directory-input {
  background-color: var(--bs-gray-200);
  border: 0.10rem solid transparent;
  border-radius: 0.4rem;
  margin: 0.2rem;
  padding: 0.325rem 0.5rem;
  color: var(--bs-heading-color);
  font-size: 0.8rem;
  font-weight: 500;
  width: 150px;
  -webkit-box-shadow: 0 0 0 0.25rem transparent;
    -moz-box-shadow: 0 0 0 0.25rem transparent;
    -ms-box-shadow: 0 0 0 0.25rem transparent;
    -o-box-shadow: 0 0 0 0.25rem transparent;
    box-shadow: 0 0 0 0.125rem transparent;
}
.directory-input:focus {
  border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.oil-property-select {
  background-color: var(--bs-gray-200);
  /*background: url('img/arrow.png') no-repeat right var(--bs-gray-200);*/
  border: 0.10rem solid transparent;
  border-radius: 0.4rem;
  margin: 0.2rem;
  padding: 0.25rem 0.5rem;
  color: var(--bs-heading-color);
  font-size: 0.8rem;
  font-weight: 500;
  width: 156px;
  -webkit-box-shadow: 0 0 0 0.25rem transparent;
  -moz-box-shadow: 0 0 0 0.25rem transparent;
  -ms-box-shadow: 0 0 0 0.25rem transparent;
  -o-box-shadow: 0 0 0 0.25rem transparent;
  box-shadow: 0 0 0 0.125rem transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.oil-property-select:focus {
  border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.btn-xs,
.btn-group-xs&gt;.btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem !important;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: 0.5rem;
}
.btn-xxs {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem !important;
  --bs-btn-font-size: 0.7rem;
  --bs-btn-border-radius: 0.4rem;
}
.import-table-wrapper {
  margin: 1.5rem;
}
.import-table {
  width: 100%;
/*  max-width: 600px;*/
  margin: auto;
/*  margin-bottom: 1rem;*/
  padding: 0.25rem;
/*  border: 1px solid var(--bs-gray-300);*/
  border-radius: 0.6rem;
}
.import-table table tbody tr td:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.import-table table tbody tr td:nth-of-type(1) {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.import-table table tbody tr td:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }
/*.import-table tr:hover {
    background-color: transparent !important;
}*/
/*thead {
    background-color: #e9ecef !important;
}
tr:hover {
    background-color: #f2f5f7 !important;
}
tr th:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
tr th:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
tr input td:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
tr td:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}*/
.todo-list .handle-h {
  cursor: move;
  display: inline-block;
  margin: 0;
}
.todo-list {
    list-style: none;
    margin: 0;
    padding: 3px;
    overflow-x: auto;
    position: initial;
    width: 100%;
    max-width: 100%;
    /*height: 55px;
    /*display: inline-block;*/
    white-space: nowrap;
}

.todo-list &gt; li {
  border-radius: 0.7rem;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.35) 100%);
  border: 1px solid rgb(229,231,235,1);
  /*border-right: 2px solid #e9ecef;*/
  color: inherit;
  margin-bottom: 2px;
  padding: 10px;
  display: inline-block;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
}
.todo-list::placeholder {
  background: green;
}

.todo-list &gt; li:last-of-type {
  margin-bottom: 0;
}

.todo-list &gt; li &gt; input[type="checkbox"] {
  margin: 0 10px 0 5px;
}

.todo-list &gt; li .text {
  display: inline-block;
  font-weight: 600;
  /*margin-left: 5px;*/
  margin-right: 5px;
  font-size: 0.9rem;
  color: inherit;
}

.todo-list &gt; li .badge {
  font-size: .7rem;
  margin-left: 10px;
}

.todo-list &gt; li .tools {
  color: inherit;
  display: none;
  margin-left: 8px;
  float: right;
}

.todo-list &gt; li .tools &gt; .fa,
.todo-list &gt; li .tools &gt; .fas,
.todo-list &gt; li .tools &gt; .far,
.todo-list &gt; li .tools &gt; .fab,
.todo-list &gt; li .tools &gt; .fal,
.todo-list &gt; li .tools &gt; .fad,
.todo-list &gt; li .tools &gt; .svg-inline--fa,
.todo-list &gt; li .tools &gt; .ion {
  cursor: pointer;
  margin-right: 5px;
}
.todo-list &gt; li .tools &gt; .material-icons-outlined {
  cursor: pointer;
  margin-right:2px;
}
.todo-list &gt; li .tools &gt; .fa:hover,
.todo-list &gt; li .tools &gt; .fas:hover,
.todo-list &gt; li .tools &gt; .far:hover,
.todo-list &gt; li .tools &gt; .fab:hover,
.todo-list &gt; li .tools &gt; .fal:hover,
.todo-list &gt; li .tools &gt; .fad:hover,
.todo-list &gt; li .tools &gt; .svg-inline--fa:hover,
.todo-list &gt; li .tools &gt; .ion:hover,
.todo-list &gt; li .tools &gt; .material-icons-outlined:hover {
  opacity: 0.7;
    color: red;
}

.todo-list &gt; li:hover .tools {
  display: inline-block;
}

.todo-list &gt; li.done {
  color: #697582;
}

.todo-list &gt; li.done .text {
  font-weight: 500;
  text-decoration: line-through;
}

.todo-list &gt; li.done .badge {
  background-color: #adb5bd !important;
}

.todo-list .primary {
  border-left-color: #007bff;
}

.todo-list .secondary {
  border-left-color: #6c757d;
}

.todo-list .success {
  border-left-color: #28a745;
}

.todo-list .info {
  border-left-color: #17a2b8;
}

.todo-list .warning {
  border-left-color: #ffc107;
}

.todo-list .danger {
  border-left-color: #dc3545;
}

.todo-list .light {
  border-left-color: #f8f9fa;
}

.todo-list .dark {
  border-left-color: #343a40;
}

.todo-list .lightblue {
  border-left-color: #3c8dbc;
}

.todo-list .navy {
  border-left-color: #001f3f;
}

.todo-list .olive {
  border-left-color: #3d9970;
}

.todo-list .lime {
  border-left-color: #01ff70;
}

.todo-list .fuchsia {
  border-left-color: #f012be;
}

.todo-list .maroon {
  border-left-color: #d81b60;
}

.todo-list .blue {
  border-left-color: #007bff;
}

.todo-list .indigo {
  border-left-color: #6610f2;
}

.todo-list .purple {
  border-left-color: #6f42c1;
}

.todo-list .pink {
  border-left-color: #e83e8c;
}

.todo-list .red {
  border-left-color: #dc3545;
}

.todo-list .orange {
  border-left-color: #fd7e14;
}

.todo-list .yellow {
  border-left-color: #ffc107;
}

.todo-list .green {
  border-left-color: #28a745;
}

.todo-list .teal {
  border-left-color: #20c997;
}

.todo-list .cyan {
  border-left-color: #17a2b8;
}

.todo-list .white {
  border-left-color: #fff;
}

.todo-list .gray {
  border-left-color: #6c757d;
}

.todo-list .gray-dark {
  border-left-color: #343a40;
}

.todo-list .handle {
  cursor: move;
  display: inline-block;
  margin: 0 2px;
  color:#495057;
}
.dark-mode .todo-list &gt; li {
  background-color: #3f474e;
  border-color: #454d55;
  color: #fff;
}

.dark-mode .todo-list .primary {
  border-left-color: #3f6791;
}

.dark-mode .todo-list .secondary {
  border-left-color: #6c757d;
}

.dark-mode .todo-list .success {
  border-left-color: #00bc8c;
}

.dark-mode .todo-list .info {
  border-left-color: #3498db;
}

.dark-mode .todo-list .warning {
  border-left-color: #f39c12;
}

.dark-mode .todo-list .danger {
  border-left-color: #e74c3c;
}

.dark-mode .todo-list .light {
  border-left-color: #f8f9fa;
}

.dark-mode .todo-list .dark {
  border-left-color: #343a40;
}

.dark-mode .todo-list .lightblue {
  border-left-color: #86bad8;
}

.dark-mode .todo-list .navy {
  border-left-color: #002c59;
}

.dark-mode .todo-list .olive {
  border-left-color: #74c8a3;
}

.dark-mode .todo-list .lime {
  border-left-color: #67ffa9;
}

.dark-mode .todo-list .fuchsia {
  border-left-color: #f672d8;
}

.dark-mode .todo-list .maroon {
  border-left-color: #ed6c9b;
}

.dark-mode .todo-list .blue {
  border-left-color: #3f6791;
}

.dark-mode .todo-list .indigo {
  border-left-color: #6610f2;
}

.dark-mode .todo-list .purple {
  border-left-color: #6f42c1;
}

.dark-mode .todo-list .pink {
  border-left-color: #e83e8c;
}

.dark-mode .todo-list .red {
  border-left-color: #e74c3c;
}

.dark-mode .todo-list .orange {
  border-left-color: #fd7e14;
}

.dark-mode .todo-list .yellow {
  border-left-color: #f39c12;
}

.dark-mode .todo-list .green {
  border-left-color: #00bc8c;
}

.dark-mode .todo-list .teal {
  border-left-color: #20c997;
}

.dark-mode .todo-list .cyan {
  border-left-color: #3498db;
}

.dark-mode .todo-list .white {
  border-left-color: #fff;
}

.dark-mode .todo-list .gray {
  border-left-color: #6c757d;
}

.dark-mode .todo-list .gray-dark {
  border-left-color: #343a40;
}
.main-details .checklist-todo p{
  margin-bottom: 0px;
}
.calls-progress-canvas {
    min-height: 200px;
    height: auto;
    max-height: 544px;
    overflow-y: auto;
}
.card.card-tabs .card-tools {
  margin: .3rem .5rem;
}
.card.card-outline-tabs .card-tools {
  margin: .5rem .5rem .3rem;
}
.card-header &gt; .card-tools {
  float: right;
  margin-right: -0.625rem;
}

.card-header &gt; .card-tools .input-group,
.card-header &gt; .card-tools .nav,
.card-header &gt; .card-tools .pagination {
  margin-bottom: -0.3rem;
  margin-top: -0.3rem;
}

.card-header &gt; .card-tools [data-toggle="tooltip"] {
  position: relative;
}
.call-history-chart-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  width: 115px;
  height: 24px;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background-color: transparent;
}
.call-history-chart-btn-primary:hover {
  background-color: var(--coolGrey37);
  box-shadow: 0 0 0 2px rgba(203, 12, 158,0.6);
}
.switcher-call-history.active {
  .call-history-chart-btn-primary {
    box-shadow: 0 0 0 2px rgba(203, 12, 158,0.6);
  }
}
.switcher-sms.active {
  .call-history-chart-btn-primary {
    box-shadow: 0 0 0 2px rgba(203, 12, 158,0.6);
  }
}
.call-history-chart-btn-secondary {
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: transparent;
}
.call-history-chart-btn-secondary:hover {
  background: rgba(216, 228, 237,0.4);
  box-shadow: 0 0 0 2px rgba(58, 65, 111, 0.2);
}
.call-history-chart-btn-info{
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: transparent;
}
.call-history-chart-btn-info:hover {
  background: rgba(216, 228, 237,0.4);
  box-shadow: 0 0 0 2px rgba(23, 194, 232, 0.2);
}
/* .form-control-modal {
    border-radius: 0.6rem;
    border: 0.10rem solid transparent;
    background: var(--coolGrey50);
    color: var(--bs-heading-color);
    border-color: transparent;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    padding:6px 8px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -webkit-inset: none;
    -moz-inset: none;
    -o-inset: none;
    inset: none;
}
.form-control-modal:focus {
    border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
 .form-control-modal::placeholder {
    color: var(--bs-placeholder-color);
 }*/
.btn-cs-view {
    display: inline-flex; 
    color: inherit;
    background-color: transparent;
    border-radius: 50% !important;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    /*width: 20px;
    height: 20px;*/
}
.btn-cs-view:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 123, 255, 0.7);
}
.btn-cs-view:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-cs-phone {
    color: inherit;
    background-color: transparent;
    border-radius: 50% !important;
    padding: 0.01rem 0.1rem;
    cursor: pointer;
    /*width: 20px;
    height: 20px;*/
}
.btn-cs-phone:hover {
    /*background-color: rgba(0, 0, 0, 0.04);*/
    color: rgba(0, 123, 255, 0.7);
}
.btn-cs-phone:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}

.btn-cs-flag {
    background-color: transparent;
    border-radius: 50% !important;
    padding: 0.05rem 0.3rem;
    cursor: pointer;
    /*width: 20px;
    height: 20px;*/
}
.btn-cs-flag:hover {
    /*background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 123, 255, 0.7);*/
}
.btn-cs-flag:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-cs-comments {
    display: inline-flex;
    line-height: 1.2;
    color: inherit;
    background-color: transparent;
    border-radius: 0.6rem !important;
    padding: 0.5rem;
}
.btn-cs-comments:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 123, 255, 0.7);
}
.g-icon-launch {
    vertical-align: middle;
}
.g-icon-chat {
    vertical-align: middle;
    padding-left: 4px; 
    padding-right: 4px;
}
.modal-actions-column {
    height: auto;
    /*max-height: 153px;*/
    min-width: 100%;
    /*width: 153px;
    /*overflow-y: auto;
    overflow-x:hidden;*/
}
.textarea-comments {
    border: none;
    height: 3em !important;
    padding: 0.7em !important; 
    background-color: var(--bs-gray-200);
}
.textarea-comments:focus {
    height: 6em !important; 
    background-color: #ffffff;
}
.textarea-comments::placeholder {
    color: var(--bs-placeholder-color);
}
.tagged-user {
  color: var(--bs-heading-color);
  font-weight: 700;
}
.property-action {
    display: flex;
    min-width: 52px;
    vertical-align: middle;
    padding: 0.2rem 0.2rem 0.2rem 0.5rem !important;
}

.dataTables_empty {
    align-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.875rem;
}
.dataTables_processing {
    text-align: center !important;
    border: 0;
    box-shadow: none !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
}
.dataTables_info {
  font-size: 0.75rem;
}
.modal-wrapper {
    background: none;
}
thead {
    background-color: var(--coolGrey50) !important;
}
tr:hover {
    background-color: var(--coolGrey50) !important;
}
tr th:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
tr th:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
tr td:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
tr td:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
/*table.table&gt;tbody&gt;tr.child:hover {
    background:#f5f5f5 !important
}*/
.properties-header {
    background-color: var(--coolGrey50);
    height: 35px;
    font-size: 10px;
    white-space: nowrap;
    color: var(--bs-body-color);
    /*border-bottom: 1px solid #AFAFAF;*/
}
.properties-rows {
    background-color: #FFF;
}

.lead-rows {
    background-color: #FFF;
}

.properties-rows:hover {
    background-color: #F5F5F5;
}

.lead-rows:hover {
    background-color: #F5F5F5;
}

.properties-summary {
    background-color: var(--coolGrey50);
    font-weight: 700;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    height: 35px;
    /*border-top: 1px solid #AFAFAF;*/
}
tr.properties-header, tr.properties-rows {
    color: var(--bs-body-color);
    font-size: 10px;
    white-space: nowrap;
}
tr.properties-header td {
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.btn-previous-page {
  display: flex;
  margin: 0px auto 0px 0px;
  text-align: left;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 30px;
  border-radius: 0.6rem;
  border: 1px solid var(--coolGrey100);
  color: var(--bs-body-color);
  background-color: transparent;
  cursor: pointer;
  i {
    position: relative;
    display: flex;
    align-items: center;
    left: -5px;
  }
  span {
    position: relative;
    display: flex;
    align-items: center;
    right: 5px;
    white-space: nowrap;
  }
}
.btn-previous-page:hover {
  color: rgba(0, 123, 255, 0.8);
  background-color: var(--coolGrey50);
}
.signup-banner {
  display: flex;
  padding: 1.5rem;
/*  border-radius: 0.5rem;*/
/*  background-color: rgba(0, 123, 255, 0.1);*/
}
.owner-results-show-text {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.search-owner-results {
  overflow: auto;
  font-size: 0.875rem;
  background-color: rgba(255,255,255,0.5);
}
.search-owner-results-l {
    padding:0.20rem;
    border-radius: 0.5rem 0 0 0.5rem;
}
.search-owner-results-r {
    padding:0.20rem;
    border-radius: 0 0.5rem 0.5rem 0;
}
.table-canvas-white {
  overflow: auto;
  width: 100%;
  background-color: var(--coolGrey50_alpha25);
/*  border-radius: 0.75rem;*/
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    thead {
      color: var(--bs-heading-color);
      border-bottom: 1px solid var(--coolGrey50) !important;
      background: transparent !important;
      background-color: transparent !important;
      tr th:first-child {
        border-top-left-radius: 0.0rem;
        border-bottom-left-radius: 0.0rem;
      }
      tr th:last-child {
        border-top-right-radius: 0.0rem;
        border-bottom-right-radius: 0.0rem;
      }
    }
    tbody {
      color: var(--bs-heading-color);
    }
    tr td:first-child {
        border-top-left-radius: 0.0rem;
        border-bottom-left-radius: 0.0rem;
    }
    tr td:last-child {
        border-top-right-radius: 0.0rem;
        border-bottom-right-radius: 0.0rem;
    }
    tr:hover {
      background-color: var(--coolGrey25) !important;
    }
    thead tr:hover {
      background-color: transparent !important;
    }
  }
  table.dt-p1-5&gt;tbody&gt;tr&gt;td {
    padding: 0.25rem 0.5rem;
  }
}

.editing .editable-field .property-input{
  padding-left:0;
}

.editable-field .property-input {
  width: 100%;
  color: var(--bs-body-color);
  border-radius: 0.2rem;
}
.editable-field .property-input:focus {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0.1rem 0.15rem rgba(37,196,242,0.3);
  -moz-box-shadow: 0 0 0.1rem 0.15rem rgba(37,196,242,0.3);
  -ms-box-shadow: 0 0 0.1rem 0.15rem rgba(37,196,242,0.3);
  -o-box-shadow: 0 0 0.1rem 0.15rem rgba(37,196,242,0.3);
  box-shadow: 0 0 0.1rem 0.15rem rgba(37,196,242,0.3);
}
/*.properties-rows .editing {
  width: 100%;
}*/
.property-action .form-check {
  padding-left: 1rem;
}
.property-action .form-check .form-check-input.select-property {
  width: 16px;
  height: 16px;
  border-radius: 0.2rem;
}
.modal-content {
  border: none;
}
.modal-content.model-content-leads {
  overflow: visible;
}
.modal-header.leads-modal-header {
    padding: 25px;
    margin: auto;
    /*width: 100%;*/
    /* background-image: linear-gradient(to bottom, #3656BA 0%, #00BEFF 100%) !important; */
    /*background: #fff !important;
    min-height: 1.42857143px;*/
    border-radius: 1rem 1rem 0 0;
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
    overflow: hidden;
}
/*.leads-modal-title {
    margin: 0 0 0 100px;
    line-height: 1.42857143;
    font-weight: 700;
    text-align: center;
}*/
.dropdown-menu.leads-datepicker {
/*    width: 500px;*/
/*    width: auto;*/
}
.due-date-column {
  cursor: auto;
}
/*.leads-datepicker .due-date-column {
    width: 500px;
}*/
.leads-datepicker .due-date-column .daterangepicker {
  box-shadow: none !important;
  overflow: hidden;
}
.datepicker-subfooter {
  padding: 0.5rem;
/*  overflow: auto;*/
  height: 280px;
}
.due-date-column .daterangepicker .drp-buttons {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
}
.due-date-column .daterangepicker .drp-buttons .drp-selected {
  display: none;
}
.due-date-column .daterangepicker .drp-buttons .btn {
  padding: 5px 10px;
  border-radius: 0.4rem;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid var(--bs-body-color);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
}
.dropdown .dropdown-menu.leads-datepicker.show:before {
  left: 220px;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    width: 50px;
    margin: 0 auto;
    background: var(--coolGrey50);
    border: 1px solid var(--coolGrey50);
    padding: 2px;
    outline: 0;
    font-size: 12px;
    color: inherit;
    border-radius: 0.3rem;
}
select.leads-timeselect {
    width: 50px;
/*    margin: 0 2px;*/
    background: var(--coolGrey50);
    border: 1px solid var(--coolGrey50);
    padding: 0.1rem 0.2rem !important;
    height: 28px;
    outline: 0;
    font-size: 14px;
    color: inherit;
    border-radius: 0.3rem;
}
.datepickerinputs {
  padding: 0.1rem 0.4rem;
    width: auto;
    margin-right: 5px;
    font-size: 14px;
  color: inherit;
  border-radius: 0.3rem !important;
  background: var(--coolGrey50) !important;
  border: 1px solid var(--coolGrey50) !important;
}
@media (max-width: 991.98px) {
  :not(.navbar) .dropdown .dropdown-menu {
    transform: none !important;
  }
  .dropdown .dropdown-menu.leads-datepicker.show:before {
    left: 230px;
  }
  .dropdown-menu.leads-datepicker {
    width: 100%;
    max-width: 500px;
  }
}
.tribute-input.comments {
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0 !important;
  border: 1px solid transparent;
}
.tribute-input:focus {
    padding: 0.45rem 0.66rem;
    border: 0.10rem solid rgba(37,196,242,0.3) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    background-color: #ffffff !important;
}

.leads-modal-title {
    line-height: 1.42857143;
    font-weight: 700;
    margin-bottom: 0;
}
.leads-email {
    margin-bottom:0.25rem;
    width:100%;
    /*max-width:146px;*/
}
.leads-phone {
    margin-bottom:0.25rem;
    min-width:100%;
    width:100%;
    /*max-width:146px;*/
}
.due-dates {
  display: inline-flex;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  margin-bottom: 10px;
  background-color: rgba(211, 227, 253, 0.6);
}
.btn-add-member {
  background: transparent;
    border-radius: 2rem;
    padding: 0.35rem;
    position: relative;
    color: inherit;
    top: -10px;
    cursor: pointer;
    background-color: rgba(218, 225, 235, 0.7);
}
.btn-add-member:hover {
  color: rgba(0, 123, 255, 0.7);
  background-color: rgba(218, 225, 235, 1);
}
.btn-add-member-icon {
  position: relative;
  top:6px;
  left:-1px;
}
.btn-checked-items {
  position: relative;
  top: 2px;
  margin-left: 0rem;
  outline: 0;
  color: inherit;
  border-radius: 2rem;
  height: 23px;
  width: 23px;
}
.btn-checked-items:focus {
  -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-checked-items-icon {
  border-radius: 2rem;
  background-color: transparent;
  padding: 0.25rem;
  position: relative;
  top: -2px;
  left: -7px;
}
.btn-checked-items-icon:hover {
  color: rgba(0, 123, 255, 0.7);
  background-color: rgba(218, 225, 235, 0.6);
}
.btn-leads-expand {
    margin-left: -0.2rem;
    outline: 0;
    color: inherit;
}
.btn-leads-expand-icon {
  border-radius: 2rem;
  background-color: transparent;
}
.btn-leads-expand-icon:hover {
  color: rgba(0, 123, 255, 0.7);
  background-color: rgba(218, 225, 235, 0.6);
}
.btn-leads-expand.collapsed .icon-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    border-radius: 25px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.btn-leads-expand:focus .icon-rotate-180 {
    border-radius: 25px;
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.g-icon-edit-comments {
    margin: 0 0 0 0.4em;
    opacity: 1.0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.g-icon-edit-comments:hover {
    color: rgba(0, 123, 255, 0.7);
}
.g-icon-delete-comments {
    margin: 0 0 0 0.2em;
    opacity: 1.0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.g-icon-delete-comments:hover {
    color: rgba(255, 0, 0, 0.7);
}
.g-icon-delete-property {
    position: relative;
    display: flex;
    top: -1px;
    padding-left: 0.25rem;
    opacity: 1.0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    align-items: center;
}
.g-icon-delete-property:hover {
    opacity: 0.7;
    color: red;
}
.g-icon-owner-file-delete {
    vertical-align: middle;
    position: relative;
    color: inherit;
    margin-left: 0.1em;
    max-width: 1em;
    overflow: hidden;
    cursor: pointer;
}
.g-icon-owner-file-delete:hover {
    color: red !important;
}
.g-icon-offer-letter {
    /*display: inline-flex !important;
    margin: 0.25em;*/
    position: relative;
}
.g-icon-esign {
    display: inline-flex !important;
    margin: 0.2em 0.3em 0.3em 0;
    position: relative;
}
/*select.select-year {
    display: inline-block;
    margin-bottom:5px;
    margin-right: 3px;
    padding: 0rem 0.5rem;
    max-width:80px;
    height: 30px;
    border-radius: 0.5rem !important;
    vertical-align: middle;
    line-height: 1.3;
    font-size: 12px;
    color: var(--bs-body-color);
    background-color: rgba(255,255,255,1) !important;
    background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%) !important;
    background-repeat:no-repeat;
    border: 1px solid rgb(229,231,235,1) !important;
    webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
}
.select-year:hover {
    color: rgba(0, 123, 255, 0.7);
    background: rgba(255,255,255,0.5);
    background-repeat:no-repeat;
    webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}*/
/*.btn-offer-pref {
    display: inline;
    font-size: 0.7em;
    margin-bottom: 5px;
    margin-left: 3px;
    max-width: 30px;
    height: 30px;
    border-radius: 0.5rem !important;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    color: var(--bs-body-color);
    background-color: rgba(255,255,255,1);
    background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
    background-repeat:no-repeat;
    border: 1px solid rgb(229,231,235,1) !important;
    webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-offer-pref:hover {
    color: rgba(0, 123, 255, 0.7);
    background: rgba(255,255,255,0.5);
    background-repeat:no-repeat;
    webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}*/
/*.btn-offer {
    display: inline-flex;
    font-size: 0.7em;
    margin-bottom:5px;
    padding: 0.1rem;
    max-width:150px;
    height: 30px;
    width: 30px;
    border-radius: 0.5rem !important;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    color: var(--bs-body-color);
    background-color: rgba(255,255,255,1);
    background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
    background-repeat:no-repeat;
    border: 1px solid rgb(229,231,235,1) !important;
    webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-offer:hover {
    color: rgba(0, 123, 255, 0.7);
    background: rgba(255,255,255,0.5);
    background-repeat:no-repeat;
    webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}*/
.owner-attachments {
    border-radius: 6px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    /*font-size: 14px;*/
    letter-spacing: 1.5px;
    max-width: 100% !important;
    font-weight: 700;
    /*padding: 9px 25px 9px;*/
    margin-bottom: 0.1em;
    line-height: 1.42857143;
    height: 2.75em;
    font-family: 'Nunito';
    text-decoration: none;
    overflow: hidden;
    box-shadow: none !important;
}
.attachment-list-item {
    list-style: none;
    margin-left: -1em;
    white-space: nowrap;
}
.owner-file-download-icon {
    margin-right:0.3em;
}
.owner-attachment-filename {
    padding: 0 1rem 1rem 0 !important;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.leads-modal-city {
    padding-right:4px !important;
}
.leads-modal-state {
    padding-right:4px !important;
}
.leads-modal-county {
    padding-right: 4px !important;
}
.leads-modal-country {
    padding-right: 4px !important;
}
/*.leads-modal-zip {
    padding-left:4px !important;
}*/
/*.contact-columns {
  display: flex;
  column-gap: 4px;
}*/
/*.contact-container {
    height: auto;
   max-height: 400px;
    width: auto;
    max-width: 100%;
    overflow-y: auto;
    overflow-x:hidden;
}*/
.checklist-container {
    height: auto;
    width: auto;
    max-width: 100%;
    overflow-y: auto;
    overflow-x:hidden;
}
.description-wrapper {
    /*min-height: 224px;*/
    /*max-height: 400px;*/
    width: auto;
    max-width: 100%;
    /*margin-top: -15px;*/
    padding: 2px;
    /*overflow-y: auto;
    overflow-x:hidden;*/
}
/*.name-address-column {
    padding: 2px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x:hidden;
}
.phone-column-wrapper {
    padding: 2px;
    max-height:400px;
    width:100%;
    min-width:100%;
    overflow-y:auto;
}*/
/*.phone-column {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:4px;
    -moz-column-gap:4px;
    -ms-column-gap:4px;
    -o-column-gap:4px;
    column-gap:4px;
    column-fill: balance;
}*/
.phone-column input[type=number]::-webkit-inner-spin-button, 
.phone-column input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*.email-column-wrapper {
    padding: 2px;
    max-height:400px;
    width:100%;
    min-width:100%;
    max-width:300px;
    overflow-y:auto;
}
.email-column {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:4px;
    -moz-column-gap:4px;
    -ms-column-gap:4px;
    -o-column-gap:4px;
    column-gap:4px;
    column-fill: balance;
}*/
.add-lead-name-address-wrapper {
    height: auto;
    max-height:404px;
    width:100%;
    min-width:100%;
    /*max-width:300px;*/
    overflow-y:auto;
}
.add-lead-name-address-column {
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:4px;
    -moz-column-gap:4px;
    -ms-column-gap:4px;
    -o-column-gap:4px;
    column-gap:4px;
    column-fill: balance;
    padding: 2px;
}
/*.col-block-one {
    padding-right:0px !important;
    margin-left: auto;
    margin-right: auto;
}
.col-block-two {
    padding-left:0px !important;
    padding-right: 1px !important;
    margin-left: auto;
    margin-right: auto;
}
.col-block-three {
    padding-left:0px !important;
    margin-right:auto;
    margin-left:auto;
}*/
.contact-info-footer {
    padding: 15px;
    text-align: right;
}
.btn-highlight {
    padding: 0.4rem 0.8rem;
    vertical-align: middle;
    border-radius: 0.6rem;
    display: inline-block;
    background: white;
    border: 2px solid #F5F5F5;
    color: inherit;
    transition: all .15s ease-in;
}
.btn-highlight:hover {
    background: transparent;
    border: 2px solid #3693FF;
    color: #3693FF !important;
}
.btn-toggle.btn-refine {
    font-family: "Ionicons";
    content: "\f2d7";
    position: relative;
    display: inline-block;
    padding: 0.1em;
    font-size: 20px;
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    color: inherit;
}
.btn-toggle.btn-refine:after {
    font-size: 20px;
    content: "\f2d7";
}
.btn-toggle.btn-refine:hover {
    background-color: #d7ddde;
    color: inherit;
}
.btn-toggle.btn-refine:focus {
     outline: 0;
      -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
      opacity: 1;
}
.btn-toggle.btn-refine.collapsed:after {
    content: '\f4a6';
    font-size: 20px;
}
.btn-leads-modal-actions {
  vertical-align: middle;
  line-height: 1.3;
  height: 36px;
  max-height: 36px;
  width:100%;
  color: inherit;
  /*color: rgba(88, 101, 112, 0.7);*/
  padding: 0.3rem;
  margin-bottom: 0.2rem;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(229,231,235,1);
  border-radius: 0.6rem;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
}
.btn-leads-modal-actions:hover {
  color: rgba(0, 123, 255, 0.7) !important;
  background: rgba(255,255,255,0.5);
  -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}
a.btn-leads-modal-actions:hover {
  color: rgba(0, 123, 255, 0.7) !important;
  font-color: rgba(0, 123, 255, 0.7) !important;
}
.btn-labels-refine {
  vertical-align: middle;
  line-height: 1.3;
  height: 40px;
  max-height: 40px;
  width:100%;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  text-align: left;
  /*color: rgba(88, 101, 112, 0.7);*/
  padding: 0.6rem;
  margin-bottom: 0.2rem;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
  border: 1px solid rgb(210,214,215,1) !important;
  border-radius: 0.6rem;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%) !important;
}
.btn-labels-refine:hover {
  
  /*background: rgba(255,255,255,0.5);
  -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;*/
    transform: none !important;
}
@media (max-width: 991.98px) {
  .dropdown.valuation-modal-download.dropdown-hover:hover&gt;.dropdown-menu, .dropdown.valuation-modal-download .dropdown-menu.show {
    transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 33px, 5px) !important;
  }
  :not(.navbar) .dropdown.valuation-modal-download .dropdown-menu.show:before {
    left: 16px;
  }
}
@media (min-width: 992px) {
  .dropdown.valuation-modal-download.dropdown-hover:hover&gt;.dropdown-menu, .dropdown.valuation-modal-download .dropdown-menu.show {
    transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 33px, 5px) !important;
  }
  .dropdown.valuation-modal-download .dropdown-menu:before {
    left: 16px;
  }
}
.dropdown.valuation-modal-download .dropdown-menu li {
  padding: 0 0.3rem;
}
.dropdown.valuation-modal-download .dropdown-menu li a {
  cursor: pointer;
}
.dropdown.valuation-modal-download .dropdown-menu li a:hover {
  color: rgba(0, 123, 255, 0.7);
}
.dropdown.valuation-modal-download .dropdown-menu li .dropdown-item {
  border-radius: 0.5rem;
}
.dropdown .zeb-dropdown-toggle.dropdown-toggle:after,
  .dropup .zeb-dropdown-toggle.dropdown-toggle:after {
    background-repeat: no-repeat !important;
    background-position: 99.5% 50% !important;
    background-image: url(/img/svg/expand_more_gray_24dp.svg) !important;
    height: 25px !important;
    width: 25px !important;
    right: 8px !important;
    position: absolute;
    margin-top: -3px !important;
    content: "" !important;
  }
@media screen and (max-width: 991px) {
    .dropdown .zeb-dropdown-toggle.dropdown-toggle:after,
  .dropup .zeb-dropdown-toggle.dropdown-toggle:after {
    background-repeat: no-repeat !important;
    background-position: 99.5% 50% !important;
    background-image: url(/img/svg/expand_more_gray_24dp.svg) !important;
    height: 25px !important;
    width: 25px !important;
    right: 8px !important;
    position: absolute !important;
    margin-top: -3px !important;
    content: "" !important;
  }
  .dropdown-toggle::after {
    /* display: inline-block; */
    /* margin-left: 0.255em; */
    /* vertical-align: 0.255em; */
    /* content: ""; */
     border-top: none !important; 
     border-right: none !important; 
     border-bottom: none !important; 
     border-left: none !important; 
}
}
.modal-xlg {
    max-width: 1400px !important;
    margin: 30px auto !important;
}
.media-body-comments {
    padding: 15px 20px;
    background: #FFF;
    border-radius: 3px;
    box-shadow: 1px 2px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 1px 2px rgba(0, 0, 0, 0.07);
}
.media-body-comments:before {
    content: "";
    position: absolute;
    left: 42px;
    top: 17px;
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-right: 10px solid #ffffff;
    border-right-color: #fff;
}
.comments-wrapper {
    padding: 1em 4em;
}
.comments-body {
    background: var(--bs-gray-200);
    border-radius: 0.5em;
    margin-top:0.5em;
    margin-bottom: 0.2rem;
    padding: 1.2em;
    font-size: 0.875rem;
}
.comments-body:focus-within {
  background: #ffffff;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
[contenteditable="true"]:active,
[contenteditable="true"]:focus {
  border: none;
  outline:none;
}
.comments-p {
    line-height: 17px;
    font-size: 14px;
    color: #525252;
    margin: 0;
}
.comments-p a {
    color: #F40808;
}
.crm-comments-modal {
  overflow: hidden;
}
.crm-comments-modal .modal-content {
  overflow: hidden;
  height: 100%;
  max-height: calc(100vh - 15px);
}
.crm-comments-modal .modal-body {
  overflow-y: auto;
}
.crm-comments-modal .modal-footer {
  /*position: absolute;
  bottom: 0 !important;*/
  background-color: #fff;
  width: 100%;
  border-top: none;

}
.comments-modal-list {
  padding-left: 0;
  padding-right: 0;
  list-style: none;
/*  overflow-y: scroll;*/
  overflow-x: visible;
}
.crm-comments-modal .modal-body::scrollbar {
  width: 6px !important;
  position: relative !important;
  overflow: scroll !important;
  overflow-x: hidden !important;
  overflow-y: overlay !important;
}
.crm-comments-modal .modal-body::-webkit-scrollbar {
  width: 6px !important;
  position: relative !important;
  overflow: scroll !important;
  overflow-x: hidden !important;
  overflow-y: overlay !important;
}
.crm-comments-modal .modal-body::-moz-scrollbar {
  width: 6px !important;
  position: relative !important;
  overflow: scroll !important;
  overflow-x: hidden !important;
  overflow-y: overlay !important;
}
.crm-comments-modal .modal-body::-ms-scrollbar {
  width: 6px !important;
  position: relative !important;
  overflow: scroll !important;
  overflow-x: hidden !important;
  overflow-y: overlay !important;
}
.crm-comments-modal .modal-body::-o-scrollbar {
  width: 6px !important;
  position: relative !important;
  overflow: scroll !important;
  overflow-x: hidden !important;
  overflow-y: overlay !important;
}
.crm-comments-modal .modal-body::-webkit-scrollbar-track-piece:start {
  background: transparent !important;
  background-color: transparent !important;
}
.crm-comments-modal .modal-body::-webkit-scrollbar-track-piece:end {
  background: transparent !important;
  background-color: transparent !important;
}
.crm-comments-modal .modal-body::-webkit-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.crm-comments-modal .modal-body::-moz-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.crm-comments-modal .modal-body::-ms-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.crm-comments-modal .modal-body::-o-scrollbar-track {
  background-color: var(--bs-gray-100);
}
.crm-comments-modal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.crm-comments-modal .modal-body::-moz-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.crm-comments-modal .modal-body::-ms-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.crm-comments-modal .modal-body::-o-scrollbar-thumb {
  background-color: var(--bs-gray-200) !important;
  border-radius: 0.5rem !important;
  width: 4px;
  margin-left: -1rem !important;
}
.crm-comments-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.crm-comments-modal .modal-body::-moz-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.crm-comments-modal .modal-body::-ms-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.crm-comments-modal .modal-body::-o-scrollbar-thumb:hover {
  background-color: var(--bs-gray-300) !important;
}
.editable-input {
    width: 100% !important;
}
.editable-clear-x {
  display: none !important;
}
.nav-link-dealboard {
    margin-top: 4px;
    margin-right: 3px;
    -webkit-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    -o-box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    box-shadow: 0 5px 15px 2px rgb(0 0 0 / 5%);
    background: #fff !important;
    border: 0.1em solid transparent !important;
    border-radius: 0.7em !important;
    max-height: 45px !important;
    min-width: 150px !important;
    padding: 0.2rem 1rem !important;
    overflow: hidden;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.nav-link-dealboard:hover {
    background: #F0F0F0 !important;
    color: #0676CE !important;
}
.nav-link-dealboard.active {
    color: #FFF !important;
    background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%) !important;
    border: none !important;
    /*background-image: linear-gradient(to bottom, #3656BA 0%, #001A6C 100%) !important;
    border: 0.1em solid #0676CE !important;*/
}
.nav-link-dealboard-text {
    vertical-align: middle !important;
    display: inline-flex;
    font-size: 14px;
    padding: 6px;
}
@media screen and (max-width: 991px) {
    .nav-link-dealboard-text p {
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    .nav-link-dealboard-text p {
        font-size:14px;
    }
}
.dropdown.dropdown-hover .dropdown-menu.dropdown-menu-labels,
  .dropdown .dropdown-menu.dropdown-menu-labels {
/*    display: block;*/
    opacity: 0;
    top: 0;
    transform-origin: 50% 0;
    pointer-events: none;
    transform: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
  }
.dropdown.dropdown-hover:hover&gt;.dropdown-menu.dropdown-menu-labels,
.dropdown .dropdown-menu.dropdown-menu-labels.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: none !important;
}
.dropdown.dropdown-hover:hover&gt;.dropdown-menu.dropdown-menu-labels:before,
  .dropdown .dropdown-menu.dropdown-menu-labels.show:before {
    top: -20px;
  }

/*.dropdown.dropdown-hover:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -24px;
  width: 100%;
  height: 100%;
}*/

.dropdown:not(.dropdown-hover) .dropdown-menu.dropdown-menu-labels {
    margin-top: 45px !important;
}
.leads-carousel {
    /*margin-left: -17px;
    margin-right: -17px;
    margin-top: -78px;*/
    margin: -25px;
    margin-bottom: -25px !important;
}
.leads-carousel-inner {
    /*border-top-right-radius: 0.75rem !important;
    border-top-left-radius: 0.75rem !important;*/
    min-width: 100% !important;
    max-height: 700px !important;
}
.btn-close {
    border: 2px solid transparent;
    z-index:2;
    background: transparent !important;
}
.btn-close:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
    border-radius: 50%;
    /*border: 2px solid #D9D9D9;*/
}
.btn-close:focus {
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.btn-modal-close {
    /*margin-right: 10px !important;
    margin-top: 5px !important;*/
    position: absolute;
    top: 15px;
    right: 14px;
    padding: 0.5rem !important;
    z-index: 3;
    border-radius: 50%;
    background: transparent;
}
.btn-modal-close:hover {
    background: #dee2e6;
    color: #69748e;
}
.btn-modal-edit {
    /*margin-right: 10px !important;
    margin-top: 5px !important;*/
    position: absolute;
    top: 15px;
    right: 50px;
    padding: 0.5rem !important;
    z-index: 3;
    border-radius: 50%;
    background: transparent;
}
.btn-modal-edit:hover {
    background: #dee2e6;
    color: #69748e;
}
.close-icon {
    color: var(--bs-heading-color) !important;
    margin: -4px;
}

@media  (min-width: 1099px) {
    .leads-city-state-zip-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    /*margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));*/
}
}
@media screen and (max-width: 1099px) {
    .leads-modal-city {
        padding-right: 0px !important;
    }
    .leads-modal-zip {
        padding: 0px !important;
    }
    .modal-actions-column {
        padding-right:15px;
    }

}
@media screen and (max-width: 991px) {
    .modal-actions-column {
        padding-right:0px;
    }

}
@media screen and (max-width: 767px) {
    .col-block-one {
      padding-right: 12px !important;
    }
    .col-block-two {
      padding-left: 4px;
    }
    .name-address-column {
        width: 100%;
    }
    .phone-column-wrapper {
        padding-left: 15px;
        min-width:100%;
    }
    .phone-column  {
        column-width: 0px;
    }
    .leads-modal-title {
    margin: 0 0 0 50px;
    }
    .lead-modal-city {
        margin-left:auto;
        margin-right:auto;
    }
    .leads-modal-state {
        margin-left:auto;
        margin-right:auto;
    }
    .leads-modal-zip {
        margin-left:auto;
        margin-right:auto;
    }
}
@media screen and (max-width: 576px) {
  .col-block-one {
      padding-right: 12px !important;
    }
    .col-block-two {
      padding-left:10px !important;
      padding-right:10px !important;
    }
    .col-block-three {
      padding-left:10px !important;
      padding-right:10px !important;
    }
    .leads-modal-title {
    margin: 0 0 0 25px;
    }
    .phone-column-wrapper {
        padding: 2px 4px;
    }
    .email-column-wrapper {
        padding: 2px 4px;
    }
    .modal-actions-column {
        margin-top:5px;
    }
    .add-lead-name-address-column {
    -webkit-column-count:1;
    -moz-column-count:1;
    -ms-column-count:1;
    -o-column-count:1;
    column-count:1;
    -webkit-column-gap:4px;
    -moz-column-gap:4px;
    -ms-column-gap:4px;
    -o-column-gap:4px;
    column-gap:4px;
    column-fill: auto;
    padding: 2px;
}
}
@media screen and (max-width: 376px) {
    .leads-modal-title {
    margin: 0;
    text-align:left;
    }
}
/*************************
 ------ Pagination ------
 *************************/
.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.5rem !important;
  margin-bottom: 0;
}
.page-link {
  position: relative;
  display: block;
  padding: 0.4rem 0.8rem !important;
  margin-left: 5px;
  line-height: 1.25;
  color: var(--bs-body-color);
  background-color: var(--coolGrey50);
  border: none;
  border-radius: 0.5rem !important;
}

.page-link:hover {
  z-index: 2;
  color: rgba(37,196,242,1);
  text-decoration: none;
  background-color: var(--coolGrey100);
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.page-item .page-link,
.page-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 2px !important;
  min-width: 26px;
  height: 26px;
  max-height: 26px;
  width: auto;
  font-size: 0.875rem;
}
.pagination-sm .page-item .page-link, .pagination-sm .page-item span {
  min-width: 26px;
  width: auto !important;
}
.page-item .page-link {
    border-radius: 0.4rem !important;
}
.page-item:first-child .page-link {
  margin-left: 5px;
  border-radius: 0.4rem !important;
}

.page-item:not(:first-child) .page-link {
    margin-left: 4px;
}

.page-item:last-child .page-link {
  border-radius: 0.4rem !important;
}

.page-item.active .page-link {
  z-index: 1;
  color: var(--bs-body-color);
  background-color: #fff;
  border-color: var(--coolGrey100_alpha05) !important;
  border-width: 1px !important;
  border-style: solid !important;
  background-image: linear-gradient(to bottom, rgba(245, 245, 245, 0.1) 0%, var(--coolGrey50_alpha50) 100%) !important;
    -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    box-shadow: 0 1px 2px 0 var(--coolGrey100);
  border-radius: 0.4rem !important;
}
.page-item.active .page-link:hover {
/*  background-color: rgba(37,196,242,0.9) !important;*/
/*  box-shadow: 0 0 0.125rem 0.125rem rgba(37,196,242,0.5) !important;*/
}

.page-item.disabled .page-link {
  color: inherit;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-radius: 0.4rem !important;
}
.page-item.disabled {
  background-color: transparent !important;
}
.page-link.next {
  padding: 0.75rem 1.5rem;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.4rem !important;
}

.pagination-lg .page-item:first-child .page-link {
  border-radius: 0.5rem !important;
}

.pagination-lg .page-item:last-child .page-link {
  border-radius: 0.5rem !important;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.5rem !important;
}

.pagination-sm .page-item:first-child .page-link {
  border-radius: 0.5rem !important;
}

.pagination-sm .page-item:last-child .page-link {
  border-radius: 0.5rem !important;
}
/************************
 * Footer Tray
 ************************/
.todo-list.footer-tray .handle-h {
  cursor: move;
  display: inline-block;
  margin: 0;
}
.todo-list.footer-tray::placeholder {
  background: green;
}

.todo-list.footer-tray &gt; li:last-of-type {
  margin-bottom: 0;
}

.todo-list.footer-tray &gt; li &gt; input[type="checkbox"] {
  margin: 0 10px 0 5px;
}

.todo-list.footer-tray &gt; li .text {
  display: inline-block;
  font-weight: 600;
  /*margin-left: 5px;*/
  margin-right: 5px;
  font-size: 0.9rem;
  color: inherit;
}

.todo-list.footer-tray &gt; li .badge {
  font-size: .7rem;
  margin-left: 10px;
}

.todo-list.footer-tray &gt; li .tools {
  color: inherit;
  display: none;
  margin-left: 8px;
  float: right;
}

.todo-list.footer-tray &gt; li .tools &gt; .fa,
.todo-list.footer-tray &gt; li .tools &gt; .fas,
.todo-list.footer-tray &gt; li .tools &gt; .far,
.todo-list.footer-tray &gt; li .tools &gt; .fab,
.todo-list.footer-tray &gt; li .tools &gt; .fal,
.todo-list.footer-tray &gt; li .tools &gt; .fad,
.todo-list.footer-tray &gt; li .tools &gt; .svg-inline--fa,
.todo-list.footer-tray &gt; li .tools &gt; .ion {
  cursor: pointer;
  margin-right: 5px;
}
.todo-list.footer-tray &gt; li .tools &gt; .material-icons-outlined {
  cursor: pointer;
  margin-right:2px;
}
.todo-list.footer-tray &gt; li .tools &gt; .fa:hover,
.todo-list.footer-tray &gt; li .tools &gt; .fas:hover,
.todo-list.footer-tray &gt; li .tools &gt; .far:hover,
.todo-list.footer-tray &gt; li .tools &gt; .fab:hover,
.todo-list.footer-tray &gt; li .tools &gt; .fal:hover,
.todo-list.footer-tray &gt; li .tools &gt; .fad:hover,
.todo-list.footer-tray &gt; li .tools &gt; .svg-inline--fa:hover,
.todo-list.footer-tray &gt; li .tools &gt; .ion:hover,
.todo-list.footer-tray &gt; li .tools &gt; .material-icons-outlined:hover {
  opacity: 0.7;
    color: red;
}

.todo-list.footer-tray &gt; li:hover .tools {
  display: inline-block;
}

.todo-list.footer-tray &gt; li.done {
  color: #697582;
}

.todo-list.footer-tray &gt; li.done .text {
  font-weight: 500;
  text-decoration: line-through;
}

.todo-list.footer-tray &gt; li.done .badge {
  background-color: #adb5bd !important;
}

.todo-list.footer-tray .primary {
  border-left-color: #007bff;
}

.todo-list.footer-tray .secondary {
  border-left-color: #6c757d;
}

.todo-list.footer-tray .success {
  border-left-color: #28a745;
}

.todo-list.footer-tray .info {
  border-left-color: #17a2b8;
}

.todo-list.footer-tray .warning {
  border-left-color: #ffc107;
}

.todo-list.footer-tray .danger {
  border-left-color: #dc3545;
}

.todo-list.footer-tray .light {
  border-left-color: #f8f9fa;
}

.todo-list.footer-tray .dark {
  border-left-color: #343a40;
}

.todo-list.footer-tray .lightblue {
  border-left-color: #3c8dbc;
}

.todo-list.footer-tray .navy {
  border-left-color: #001f3f;
}

.todo-list.footer-tray .olive {
  border-left-color: #3d9970;
}

.todo-list.footer-tray .lime {
  border-left-color: #01ff70;
}

.todo-list.footer-tray .fuchsia {
  border-left-color: #f012be;
}

.todo-list.footer-tray .maroon {
  border-left-color: #d81b60;
}

.todo-list.footer-tray .blue {
  border-left-color: #007bff;
}

.todo-list.footer-tray .indigo {
  border-left-color: #6610f2;
}

.todo-list.footer-tray .purple {
  border-left-color: #6f42c1;
}

.todo-list.footer-tray .pink {
  border-left-color: #e83e8c;
}

.todo-list.footer-tray .red {
  border-left-color: #dc3545;
}

.todo-list.footer-tray .orange {
  border-left-color: #fd7e14;
}

.todo-list.footer-tray .yellow {
  border-left-color: #ffc107;
}

.todo-list.footer-tray .green {
  border-left-color: #28a745;
}

.todo-list.footer-tray .teal {
  border-left-color: #20c997;
}

.todo-list.footer-tray .cyan {
  border-left-color: #17a2b8;
}

.todo-list.footer-tray .white {
  border-left-color: #fff;
}

.todo-list.footer-tray .gray {
  border-left-color: #6c757d;
}

.todo-list.footer-tray .gray-dark {
  border-left-color: #343a40;
}

.dark-mode .todo-list.footer-tray &gt; li {
  background-color: #3f474e;
  border-color: #454d55;
  color: #fff;
}

.dark-mode .todo-list.footer-tray .primary {
  border-left-color: #3f6791;
}

.dark-mode .todo-list.footer-tray .secondary {
  border-left-color: #6c757d;
}

.dark-mode .todo-list.footer-tray .success {
  border-left-color: #00bc8c;
}

.dark-mode .todo-list.footer-tray .info {
  border-left-color: #3498db;
}

.dark-mode .todo-list.footer-tray .warning {
  border-left-color: #f39c12;
}

.dark-mode .todo-list.footer-tray .danger {
  border-left-color: #e74c3c;
}

.dark-mode .todo-list.footer-tray .light {
  border-left-color: #f8f9fa;
}

.dark-mode .todo-list.footer-tray .dark {
  border-left-color: #343a40;
}

.dark-mode .todo-list.footer-tray .lightblue {
  border-left-color: #86bad8;
}

.dark-mode .todo-list.footer-tray .navy {
  border-left-color: #002c59;
}

.dark-mode .todo-list.footer-tray .olive {
  border-left-color: #74c8a3;
}

.dark-mode .todo-list.footer-tray .lime {
  border-left-color: #67ffa9;
}

.dark-mode .todo-list.footer-tray .fuchsia {
  border-left-color: #f672d8;
}

.dark-mode .todo-list.footer-tray .maroon {
  border-left-color: #ed6c9b;
}

.dark-mode .todo-list.footer-tray .blue {
  border-left-color: #3f6791;
}

.dark-mode .todo-list.footer-tray .indigo {
  border-left-color: #6610f2;
}

.dark-mode .todo-list.footer-tray .purple {
  border-left-color: #6f42c1;
}

.dark-mode .todo-list.footer-tray .pink {
  border-left-color: #e83e8c;
}

.dark-mode .todo-list.footer-tray .red {
  border-left-color: #e74c3c;
}

.dark-mode .todo-list.footer-tray .orange {
  border-left-color: #fd7e14;
}

.dark-mode .todo-list.footer-tray .yellow {
  border-left-color: #f39c12;
}

.dark-mode .todo-list.footer-tray .green {
  border-left-color: #00bc8c;
}

.dark-mode .todo-list.footer-tray .teal {
  border-left-color: #20c997;
}

.dark-mode .todo-list.footer-tray .cyan {
  border-left-color: #3498db;
}

.dark-mode .todo-list.footer-tray .white {
  border-left-color: #fff;
}

.dark-mode .todo-list.footer-tray .gray {
  border-left-color: #6c757d;
}

.dark-mode .todo-list.footer-tray .gray-dark {
  border-left-color: #343a40;
}
.footer-tray {
  right: 10px;
  max-width: calc(100vw - 20px); 
  position: fixed; 
  bottom: 1px; 
  display: flex; 
  min-width: 0; 
  width: auto;
  height: 40px; 
  margin: 0;
  padding: 0.4rem;
  align-items: center; 
  background-color: #fff; 
  border: 0px solid var(--bs-gray-200);
  border-radius: 0.4rem;
  list-style: none;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.0);
  overflow-y: visible;
  overflow-x: auto;
}

.footer-tray.transparent{
  background: transparent;
}
.footer-tray.transparent.white{
  background: #fff;
}
li.tray-item {
  position: relative;
  border-radius: 0.3rem;
  border: 1px solid var(--bs-gray-200);
  padding: 0.15rem 0.5rem 0.15rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 100px;
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0.1rem;
  color: var(--bs-heading-color);
  cursor: pointer;
  background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.35) 100%);
  box-shadow: 0 2px 3px #00478a1f, 1px 0 5px #00478a1a !important;
}
.footer-tray:after {
  background: black;
  background-color: black;
}
.footer-tray::after {
  background: black;
  background-color: black;
}
/*.tray-item:hover {
  color: rgba(0, 123, 255, 0.7);
}*/
.tray-item:hover .btn-tray-item-remove {
  opacity: 1;
}
.todo-list.footer-tray .handle {
  cursor: grab;
  display: inline-block;
  margin: 0 2px;
  color: var(--bs-body-color);
  opacity: 0.7;
}
.tray-item a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1;
  margin-left: -2px;
}
.tray-item a:hover {
  color: rgba(0, 123, 255, 0.7);
}
.tray-item .chat-badge {
  position: relative;
  display: inline-flex;
  margin-left: -4px;
  margin-right: 3px;
}
.tray-item .btn-tray-item-remove {
  position: absolute;
  display: inline;
  right: 2px;
  padding-top: 1px;
/*  vertical-align: middle;*/
  color: var(--bs-body-color);
  cursor: pointer;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 6;
}
.tray-item .btn-tray-item-remove:hover {
  color: rgba(255,17,0,0.8);
}
/*********************
    Phone Widget
*********************/
.offcanvas.offcanvas-end.phone-widget {
  width: 350px;
  border-left: 1px solid transparent;
}
.phone-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}
.phone-widget-body {
  flex-grow: 1;
  padding: 1rem 1rem;
/*  overflow-y: auto;*/
  overflow: hidden;
}
.phone-widget-body #call-controls{
  overflow: hidden;
}
.nav-wrapper.phone-widget {
  border-radius: 0.7rem;
}
.nav-wrapper.phone-widget .nav.nav-pills {
/*  background: var(--bs-gray-200);*/
  background: var(--coolGrey50);
  align-items: center;
}
.nav-wrapper.phone-widget .nav.nav-pills .nav-item .nav-link.active {
  color: rgba(0, 123, 255, 0.7);
}
.multi-select {
    width: 100% !important;
    height: 90px !important;
    border-radius: 0.6rem;
/*    background-color: #e9ecef !important;*/
    background-color: var(--coolGrey50) !important;
    border: 1px solid transparent;
    /*border: 1px solid rgba(103, 116, 142, 0.2);*/
    background: no-repeat;
    font-size: 0.7rem;
    color: inherit;
    appearance: none;
}
.multi-select option {
  border-radius: 0.4rem;
    padding: 0.2rem;
    margin: 0.2rem;
}
.multi-select option:checked,
.multi-select option:focus,
.multi-select option:active {
  background: #fff !important;
  color: var(--bs-heading-color);
  box-shadow: 0 1px 1px 1px hsl(0deg 0% 8% / 5%), 0 4px 5px -5px hsl(0deg 0% 8% / 6%);
}
/*select:focus.multi-select {
  background: #fff !important;
  color: var(--bs-heading-color);
  box-shadow: 0 1px 1px 1px hsl(0deg 0% 8% / 5%), 0 4px 5px -5px hsl(0deg 0% 8% / 6%);
}*/
.dialpad-container {
    display:absolute;
    position:relative;
    margin-top: 10px;
}
.dialpad-row {
    display: inline-flex;
    margin-left: -5px;
    margin-right: -5px;
}
.dialpad-btn {
    margin: 0.3rem;
    border-radius: 0.6rem !important;
    width: 95px;
    height: 45px;
    font-size: 18px !important;
    padding: 6px !important;
}
.dialpad-alpha {
    position: relative;
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    top: -2px;
    letter-spacing: .2rem;
}
.btn-dialer {
  margin-right: 2px;
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 0.5rem !important;
  --bs-btn-font-size: 0.65rem;
  --bs-btn-border-radius: 0.5rem;
/*  border: 1px solid var(--bs-gray-300) !important;*/
  border: 1px solid var(--coolGrey100_alpha05) !important;
}
.btn-dialer:hover {
  color: rgba(0, 123, 255, 0.7) !important;
}
.form-control.phone-widget {
  color: var(--bs-heading-color);
  font-weight: 500;
  border: 1px solid transparent;
/*  background: var(--bs-gray-200);*/
/*  background-color: var(--bs-gray-200) !important;*/
  background: var(--coolGrey50);
  background-color: var(--coolGrey50) !important;
}
.inbound-number-pulse {
  background-color: transparent;
  color: #67748e;
  font-weight: 600;
  animation-name: pulsingNumber;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.inbound-call-pulse {
  border-radius: 2rem;
  background-color: transparent;
  animation-name: pulsingCall;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.widget-call-history-wrapper {
  position: relative;
  display: block;
  height: 100%;
  max-height: 100vh;
  background-color: var(--coolGrey50);
  border-radius: 0.5rem;
/*  bottom: 0;*/
  flex: 1 1 auto;
/*  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);*/
  color: var(--bs-card-color);
  overflow-y: auto;
  overflow-x: hidden;
}
.widget-call-history-item {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  margin: 0.1rem;
  gap: 1rem;
  border-radius: 0.4rem;
  cursor: pointer;
  &amp;.missed {
/*    color: red;*/
  }
  &amp;.unread {
    font-weight: 600;
    color: var(--bs-heading-color);
  }
  &amp;:hover {
    background-color: var(--coolGrey100);
    color: rgba(0,123,255,0.8);
  }
}
@keyframes pulsingCall {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(33, 213, 253,0.35);
  }
  100% {
    background-color: transparent;
  }
}
@keyframes pulsingNumber {
  0% {
    color: #67748e;
  }
  50% {
    color: rgba(0, 123, 255, 0.8);
  }
  100% {
    color: #67748e;
  }
}
/*********************
    Twilio Block
*********************/

.stickyFooter {
     position: fixed;
     bottom: 0px;
     width: 100%;
     max-width: 210px;
     overflow: auto;
     z-index: 99;
     padding-top: 1px;
     padding-bottom: 3px;
     background: var(--bs-gray-500);
     border-top: solid var(--bs-heading-color) 2px;
     border-left: solid var(--bs-heading-color) 2px;
     border-right: solid var(--bs-heading-color) 2px;
     /*background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%) !important;*/
     border-radius: 0.9em;
     -webkit-box-shadow: 0px 10px 25px 20px rgb(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 10px 25px 20px rgb(0, 0, 0, 0.1);
     -ms-box-shadow: 0px 10px 25px 20px rgb(0, 0, 0, 0.1);
     -o-box-shadow: 0px 10px 25px 20px rgb(0, 0, 0, 0.1);
     box-shadow: 0px 10px 25px 20px rgb(0, 0, 0, 0.1);
     height: auto;
     max-height: 400px;
}
/*label {
  text-align: left;
  font-family: Helvetica, sans-serif;
  font-size: 1.25em;
  color: #777776;
  display: block;
}*/
.invalid{
  color:red;
}
.valid{
  color:rgba(24,182,155,0.9);
}
.dnd {
  color: rgba(251, 207, 51,1);
}
div#controls {
  padding: 0.25em;
  /*max-width: 1200px;*/
  margin: 0 auto;
}

  div#controls div {
    float: left;
  }

    div#controls div#call-controls,
    div#controls div#info{
      width: 150px;
      margin: 1rem 1.25rem 0.5rem 1.25rem;
      text-align: center;
    }
    div#controls div#auto-settings{
      width: 400px;
      margin: 1em 0.5em;
      text-align: center;
    }
      div#controls div#info div#output-selection {
        display: block;
          width: 100%;
      }

      div#controls div#info a {
        font-size: 1.1em;
        color: khaki;
        text-decoration: underline;
        cursor: pointer;
      }

      div#controls div#info select {
        width: 160px;
        height: 60px;
        margin-bottom: 0.2em;
      }
        div#controls div#auto-settings select {
        width: auto;
        height: auto;
        margin-bottom: 0.2em;
      }
        div#controls div#auto-settings span {
        display: inline-block;
      }

      div#controls div#info label {
        width: 200px;
      }

      div#controls div#call-controls div#volume-indicators {
        display: none;
        padding: 5px;
        margin-top: 20px;
        width: 200px;
        text-align: left;
      }

        div#controls div#call-controls div#volume-indicators &gt; div {
          display: block;
          height: 10px;
          width: 0;
        }

  div#controls p.instructions {
    text-align: left;
    font-family: "Nunito";
    font-style: oblique;
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    color: white;
  }
  input#phone-number{
    background-color:white;
  }

  div#controls div#info #client-name {
    text-align: left;
    margin-bottom: 1em;
    font-family: "Nunito";
    font-size: 1.1em;
    color: #777776;
  }

  div#controls button {
    width: 3em;
    height: 2.5em;
    border-radius: 0.6rem;
    font-family: "Nunito";
    font-size: 1em;
    font-weight: 300;
    padding: 5px;
  }

    div#controls button:active {
      position: relative;
      top: 1px;
    }

  div#controls div#call-controls {
    display: none;
  }

    div#controls div#call-controls input {
        font-family: "Nunito";
        font-style: oblique;
        font-size: 0.8em;
        width: 150px;
        height: 2rem;
        padding: 0.4em;
        border: 2px solid #E6E6E6;
        border-radius: 0.6rem;
        display: block;
    }

    div#controls div#call-controls button {
      color: #fff;
      font-family: "Nunito";
      font-size: 1em;
      font-weight: 300;
      padding: 5px;
      margin-top:5px;
    }

      div#controls div#call-controls button#button-hangup {
        display: none;
      }

  div#controls div#log {
    border: 1px solid #686865;
    width: 35%;
    height: 9.5em;
    margin-top: 0.75em;
    text-align: left;
    padding: 1.5em;
    float: right;
    overflow-y: scroll;
  }

    div#controls div#log p {
      color: #686865;
      font-family: "Nunito";
      font-size: 1.25em;
      line-height: 1.25em;
      margin-left: 1em;
      text-indent: -1.25em;
      width: 90%;
    }
.phone-btns-container {
    display:absolute;
    position:relative;
    margin-top: 10px;
    width: 150px;
    height: 200px;
}
.phone-btns-row {
    display: inline-flex;
}
.phone-btn {
    margin: 0.3rem;
    border-radius: 4rem !important;
    width: 40px;
    height: 40px;
    font-size: 18px !important;
    padding: 6px;
}
.mic-settings-select {
    width: 100% !important;
    height: 90px !important;
    border-radius: 0.6rem;
    background-color: #f5f5f5 !important;
    background:no-repeat;
    font-size: 0.7rem;
    color: inherit;
}
.speaker-settings-select {
    width: 100% !important;
    height: 90px !important;
    max-width:350px;
    border-radius:0.6rem;
    background-color: #f5f5f5 !important;
    background:no-repeat;
    font-size: 0.7rem;
    color: inherit;
}
.volume-mic-indicators {
    display: inline-flex;
    height: 20px;
    width: 100%;
    margin-top: 10px;
}
.mic-indicator {
    width: 50%;
}
.volume-indicator {
    width: 50%;
}
.volume-icon {
    color: #fff;
}
.mic-icon {
    color: #fff;
}

@media screen and (max-width: 1099px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 584px) {

}

@media screen and (max-width: 479px) {
    .stickyFooter {
         width: 100%;
         max-width: 370px;
         height: auto;
         max-height: 400px;
    }
    div#controls button {
        width: 5em;
    }
    div#controls div#call-controls, div#controls div#info {
        width: 150px;
        margin: 0.8rem 0.5rem 0.5rem 1rem;
        text-align: center;
    }
}

@media screen and (max-width: 389px) {
    .stickyFooter {
         width: 100%;
         max-width: 210px;
         height: auto;
         max-height: 400px;
    }
    div#controls button {
        width: 3em;
    }
}
/******************************
 * Priority Label
 *****************************
 */
.priority-label-wrap {
  border-radius: 0.6rem;
  max-width: 100%;
  max-height: 100%;
  padding: 5px;
  overflow: hidden;
}
.priority-label-red {
    background-color: rgba(255,0,0,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #F8494A;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-orange {
    background-color: rgba(255,165,0,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #FCB54B;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-green {
    background-color: rgba(0,160,115,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #00A011;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-neon_green {
    background-color: rgba(0,255,40,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #00A40E;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-yellow {
    background-color: rgba(255,255,0,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #969900;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-pink {
    background-color: rgba(255,66,250,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #F780E2;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-purple {
    background-color: rgba(106,90,205,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #8A2A83;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-black {
    background-color: rgba(0,0,0,0.5);
    border-radius: 0.7em;
    color:#FFF;
    /*border: solid 1px #3D3D3D;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-grey {
    background-color: rgba(120,120,120,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #BDBDBD;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-blue {
    background-color: rgba(0,0,255,0.7);
    color:#FFF;
    border-radius: 0.7em;
    /*border: solid 1px #2356F8;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-light_blue {
    background-color: rgba(0,190,255,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #004E7B;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-turquoise {
    background-color: rgba(0,255,255,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #004E7B;*/
    max-width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
}
.priority-label-none {
    /*border-radius: 0.7em;
    /*width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-red {
    background-color: rgba(255,0,0,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #F8494A;
    max-width: 50px;
    max-height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-orange {
    background-color: rgba(255,165,0,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #FCB54B;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-green {
    background-color: rgba(0,160,115,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #00A011;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-neon_green {
    background-color: rgba(0,255,40,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #00A40E;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-yellow {
    background-color: rgba(255,255,0,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #969900;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-pink {
    background-color: rgba(255,66,250,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #F780E2;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-purple {
    background-color: rgba(106,90,205,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #8A2A83;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-black {
    background-color: rgba(0,0,0,0.5);
    border-radius: 0.7em;
    color:#FFF;
    /*border: solid 1px #3D3D3D;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-grey {
    background-color: rgba(120,120,120,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #BDBDBD;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-blue {
    background-color: rgba(0,0,255,0.7);
    color:#FFF;
    border-radius: 0.7em;
    /*border: solid 1px #2356F8;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-light_blue {
    background-color: rgba(0,190,255,0.5);
    border-radius: 0.7em;
    /*border: solid 1px #004E7B;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-turquoise {
    background-color: rgba(0,255,255,0.7);
    border-radius: 0.7em;
    /*border: solid 1px #004E7B;
    width: 50px;
    height: 50px;*/
    overflow: hidden;
}
select option.select-priority-label-none {
    border-radius: 0.7em;
    /*width: 50px;
    height: 50px;*/
    overflow: hidden;
}
.bg-priority-light_green {
  background-color: rgba(183, 221, 176, 1);
}
.bg-priority-green {
  background-color: rgba(123, 200, 108, 1);
}
.bg-priority-dark_green {
  background-color: rgba(91, 172, 68, 1);
}
.bg-priority-light_lime {
  background-color: rgba(179, 241, 208, 1);
}
.bg-priority-lime {
  background-color: rgba(109, 236, 169, 1);
}
.bg-priority-dark_lime {
  background-color: rgba(78, 213, 132, 1);
}
.bg-priority-light_teal {
  background-color: rgba(143, 223, 235, 1);
}
.bg-priority-teal {
  background-color: rgba(41, 204, 229, 1);
}
.bg-priority-dark_teal {
  background-color: rgba(0, 173, 204, 1);
}
.bg-priority-light_blue {
  background-color: rgba(139, 188, 217, 1);
}
.bg-priority-blue {
  background-color: rgba(91, 164, 207, 1);
}
.bg-priority-dark_blue {
  background-color: rgba(2, 106, 167, 1);
}
.bg-priority-light_pink {
  background-color: rgba(249, 194, 228, 1);
}
.bg-priority-pink {
  background-color: rgba(255, 142, 212, 1);
}
.bg-priority-dark_pink {
  background-color: rgba(229, 104, 175, 1);
}
.bg-priority-light_purple {
  background-color: rgba(223, 192, 235, 1);
}
.bg-priority-purple {
  background-color: rgba(206, 141, 229, 1);
}
.bg-priority-dark_purple {
  background-color: rgba(168, 108, 193, 1);
}
.bg-priority-light_red {
  background-color: rgba(239, 179, 171, 1);
}
.bg-priority-red {
  background-color: rgba(239, 117, 100, 1);
}
.bg-priority-dark_ed {
  background-color: rgba(207, 80, 61, 1);
}
.bg-priority-light_orange {
  background-color: rgba(250, 209, 156, 1);
}
.bg-priority-orange {
  background-color: rgba(255, 175, 63, 1);
}
.bg-priority-dark_orange {
  background-color: rgba(231, 146, 23, 1);
}
.bg-priority-light_yellow {
  background-color: rgba(245, 233, 146, 1);
}
.bg-priority-yellow {
  background-color: rgba(245, 221, 41, 1);
}
.bg-priority-dark_yellow {
  background-color: rgba(230, 197, 13, 1);
}
.bg-priority-light_gray {
  background-color: rgba(80, 95, 121, 1);
}
.bg-priority-gray {
  background-color: rgba(52, 69, 99, 1);
}
.bg-priority-dark_gray {
  background-color: rgba(9, 30, 66, 1);
}

.fs-7 {
  font-size: 0.875rem !important;
}

.fs-8 {
  font-size: 0.75rem !important;
}

.fs-9 {
  font-size: 0.625rem !important;
}

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

/***********************
--------- Blog ---------
***********************/
 .blog-logo {
    width: 180px;
    padding: 3px;
    /*margin-top: 10%;*/
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    z-index:99;
}
.blog-logo:hover {
    opacity: 0.8;
}
.blog-content {
  p {
      font-weight: 400;
      font-size: 1.125rem;
      line-height: 1.75;
  }
  h4 {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.375;
  }
  h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.375;
  }
  img {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06)!important;
  }
  a {
    color: rgba(0,123,255,1);
    &amp;:hover {
      color: rgba(0,123,255,0.5);
    }
  }
  strong {
    color: var(--bs-heading-color);
  }
}
.img-height-fixed {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.max-read-text {
  font-weight: 600;
  font-size: 13px;
}
.author-text {
  font-weight: 600;
}
.card.card-background:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(0, 0, 0, 0) !important;
  border-radius: 1rem;
}
.card.card-background .full-background {
  background-position: 50%;
  background-size: cover;
  margin-bottom: 30px;
  width: 100%;
  height: 100% !important;
  position: absolute;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card.card-background .half-background {
  background-position: 50%;
  background-size: cover;
  margin-bottom: 30px;
  width: 100%;
  height: 60% !important;
  position: absolute;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card.card-article {
  /*width: 300px;
  height: 400px !important;*/
  position: relative;
  border-radius: 1rem !important;
}
.card-article-header {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card-article-background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
    width: auto;
}
.card-article-body {
  position: relative;
  height: 250px;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}
.card-article-footer {
  bottom: 10px;
  position: absolute;
  width: 100%;
}
.card.card-blog {
  /*width: 300px;
  height: 400px !important;*/
  position: relative;
  border-radius: 1rem !important;
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -moz-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -ms-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    -o-box-shadow: 0 1px 2px 0 var(--coolGrey100);
    box-shadow: 0 1px 2px 0 var(--coolGrey100);
    &amp;:hover {
      -webkit-box-shadow: 0 10px 20px 0 var(--coolGrey100);
      -moz-box-shadow: 0 10px 20px 0 var(--coolGrey100);
      -ms-box-shadow: 0 10px 20px 0 var(--coolGrey100);
      -o-box-shadow: 0 10px 20px 0 var(--coolGrey100);
      box-shadow: 0 10px 20px 0 var(--coolGrey100);
    }
}
.card-blog-header {
  height: 180px;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card-blog-background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 180px;
    min-height: 180px;
    max-height: 180px;
    overflow: hidden;
    width: auto;
}
.card-blog-body {
  padding: 1rem !important;
  position: relative;
  height: 180px;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}
.card-blog-footer {
  bottom: 10px;
  position: absolute;
  width: 100%;
}
.carousel-control-next.blog-carousel, .carousel-control-prev.blog-carousel {
    width: 50px;
    height: 50px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: black;
    border: 1px solid rgba(var(--coolGrey100rgb), 0.8);
    border-radius: 0.6rem;
    box-shadow: 0 20px 27px 0 rgba(var(--coolGrey400rgb), 0.7);
    opacity: 0.7;
    .carousel-control-next-icon, .carousel-control-prev-icon {
      width: 1.5rem;
      height: 1.5rem;
    }
    &amp;:hover {
      opacity: 1;
    }
  }
/*************************
 ----- Halsell Toast -----
 *************************/
:root {
  --halsell-toast-dark: #34495e;
  --halsell-toast-light: #ffffff;
  --halsell-toast-success: #0abf30;
  --halsell-toast-error: #e24d4c;
  --halsell-toast-warning: #e9bd0c;
  --halsell-toast-info: #3498db;
}
.halsell-toast-notifications {
  position: fixed;
  top: 50px;
  right: 0px;
  z-index: 999999;
}
.halsell-toast-notifications :where(.halsell-toast-container, .column) {
  display: flex;
  align-items: center;
}
.halsell-toast-notifications .halsell-toast-container {
  display: flex;
  width: 300px;
  position: relative;
  overflow: hidden;
  list-style: none;
  font-size: 0.875rem;
  border-radius: 0.8rem;
  /*padding: 16px 17px;*/
  margin-bottom: 10px;
  background: var(--halsell-toast-light);
  box-shadow: 0 0.3125rem 3.625rem 0 rgb(84, 86, 112, .5) !important;
  justify-content: space-between;
  animation: show_toast 0.3s ease forwards;
}
@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
.halsell-toast-notifications .halsell-toast-container.hide {
  animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.halsell-toast-container::before {
  position: absolute;
  content: '';
  height: 3px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  animation: progress 5s linear forwards;
}
@keyframes progress {
  100% {
    width: 0%;
  }
}
.halsell-toast-container.success::before,
.btn#success {
  background: var(--halsell-toast-success);
}
.halsell-toast-container.error::before,
.btn#error {
  background: var(--halsell-toast-error);
}
.halsell-toast-container.warning::before,
.btn#warning {
  background: var(--halsell-toast-warning);
}
.halsell-toast-container.info::before,
.btn#info {
  background: var(--halsell-toast-info);
}
.halsell-toast-container .column i {
  font-size: 1.75rem;
}
.halsell-toast-container.success .column i {
  color: var(--halsell-toast-success);
}
.halsell-toast-container.error .column i {
  color: var(--halsell-toast-error);
}
.halsell-toast-container.warning .column i {
  color: var(--halsell-toast-warning);
}
.halsell-toast-container.info .column i {
  color: var(--halsell-toast-info);
}
.halsell-toast-container .column span {
  font-size: 1.07rem;
  margin-left: 12px;
}
.halsell-toast-container i:last-child {
  color: #aeb0d7;
  cursor: pointer;
}
.halsell-toast-container i:last-child:hover {
  color: var(--halsell-toast-dark);
}

@media screen and (max-width: 530px) {
  .halsell-toast-notifications {
    width: 95%;
  }
  .halsell-toast-notifications .halsell-toast-container {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
}
.toast-message-container {
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  width: 100%;
  &amp; .toast-message-header {
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: var(--coolGrey25);
    border-bottom: 1px solid var(--coolGrey100);
    height: 40px;
    padding: 0.5rem;
    &amp; .toast-header-app {
      display: flex;
      height: 28px;
      width: 28px;
      svg {
        position: relative;
      }
    }
    &amp; .toast-header-title {
      display: flex;
      align-items: center;
      justify-content: start;
      font-weight: 600;
      padding-left: 0.25rem;
      max-width: 225px;

    }
    &amp; .toast-header-time-ago {
      position: relative;
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      font-weight: 400;
      margin-left: auto;
      padding-right: 0.25rem;
    }
  }
  &amp; .toast-messsage-body {
    display: block; 
    padding: 0.7rem 1rem;
    line-height: 1.2;
    font-size: 0.875rem;
    color: var(--bs-heading-color);
    background-color: var(--coolGrey50);
    &amp; .toast-messsage-body-text {
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.25;
    }
  }
}
.toast-phone-container {
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  width: 100%;
  &amp; .toast-phone-header {
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: var(--coolGrey50);
    height: 40px;
    padding: 0.5rem;
    &amp; .toast-header-app {
      display: flex;
      height: 28px;
      width: 28px;
      svg {
        position: relative;
      }
    }
    &amp; .toast-header-title {
      display: flex;
      align-items: center;
      justify-content: start;
      font-weight: 600;
      padding-left: 0.25rem;
      max-width: 225px;

    }
    &amp; .toast-header-time-ago {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      font-weight: 400;
      margin-left: auto;
      padding-right: 0.25rem;
    }
  }
  &amp; .toast-phone-body {
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    line-height: 1.2;
    font-size: 0.875rem;
    padding: 0.5rem;
    &amp; .toast-phone-number {
      padding: 0.5rem;
      padding-bottom: 1rem;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--bs-heading-color);
    }
    &amp; .toast-phone-answer { 
      width: 80px;
      color: #fff; 
    }
    &amp; .toast-phone-deny {
      width: 80px;
      color: #fff; 
    }
  }
}
/*******************
 ----- Payroll -----
 *******************/
.invoice-bg {
    position: relative;
    border-radius: 0.7rem;
    background: #fff;
    margin: 20px 0;
    width: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    padding: 20px;
}
.create-invoice {
    float:right;
    margin-bottom:10px;
}
.create-invoice-btn {
    padding: 0.5em 1em !important;
    border-radius: 0.7em !important;
}
.invoice-table {
    border-radius: 0.7em;
    background: #FFF;
    font-size: 14px;
}
.invoice-table-head {
    border-radius: 0.7em;
}
.invoice-table-head-tr {
    border-radius: 0.7em;
}
.billing-dates {
    display: inline-flex;
    margin-bottom:10px;
}
.billing-start-date {
    margin-right:10px;
    width: 200px;
}
.billing-start-end {
    width: 200px;
}
.invoice-save-submit-btns {
    text-align: right;
}
.btn-invoice {
    padding: 0.5em 1.2em !important;
    border-radius: 0.7em !important;
    font-weight: 700 !important;
}
/***********************
------Esignature--------
***********************/
.esign-field {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--bs-heading-color);
  font-size: 0.6rem;
  background-color: rgba(23,235,192,1);
  padding: 0.1rem 0.35rem;
  font-weight: 600 !important;
  line-height: 1.4;
}
.esign-initial-field {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--bs-heading-color);
  font-size: 0.6rem;
  background-color: rgba(23,235,192,1);
  padding: 0.1rem 0.35rem;
  font-weight: 600 !important;
  line-height: 1.4;
  max-width: 36px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.sidenav-esign {
  top: 52px !important;
  left: -370px !important;
  width: 350px !important;
  max-width: 350px !important;
  border-right: 1px solid var(--coolGrey50);
  border-radius: 0;
}
.card.sidenav-esign.show {
  left: -5px !important;
/*  height: 100%;*/
  overflow: hidden !important;
}
@media (min-width: 1200px) {

  /*.sidenav.fixed-start~.main-content {
    margin-left: 22.125rem;
  }*/

  .sidenav.sidenav-esign.show~.main-content {
    margin-left: 22.6rem;
  }
}
.esign-canvas {
  position: relative;
    display: block;
    top: 0;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    min-height: 100vh;
    max-height: 100vh;
}
.main-esign-wrapper {
  position: absolute;
  width: auto;
  top: 15px;
  bottom: 67px;
  left: 10px;
  right: 10px;
  border-radius: 0.7rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
/*  border: 1px solid var(--coolGrey50);*/
  box-shadow: none !important; 
  /* height: 90vh; */
  overflow: hidden;
}
.main-esign-body {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.btn.esign-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding: 0;
  background-color: var(--bs-gray-200);
  color: var(--bs-body-color);
  box-shadow: none;
  &amp;:hover {
    background-color: var(--bs-gray-300);
    color: rgba(255, 158, 244, 1);
    box-shadow: none;
  }
}
.btn.esign-pagination.left {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn.esign-pagination.right {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
select.esign-pagination {
  position: relative;
  width: 40px;
  height: 30px;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  border: none;
  background: none;
  background-color: var(--bs-gray-200);
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 500;
  justify-content: center;
  text-align-last:center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.esign-doc-container {
  position:relative;
  display: flex;
  margin:auto;
  text-align:center;
  justify-content: center;
  width: 100%; 
  height: auto;
}
.esign-doc-img-canvas {
  display: block;
  text-align: center;
  width: 100%;
  border-radius: 1rem;
  border: transparent;
  box-shadow: 0 1px 2px 1px rgba(var(--coolGrey100rgb), 0.5);
  overflow: hidden;
  &amp; .esign-doc-img {
    text-align: center;
    width: 100%;
    border-radius: 0;
    border: transparent;
    box-shadow: 0 1px 2px 1px rgb(0 0 0 / 0.25);
    overflow: hidden;
  }
}
.btn-field-cancel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 158, 244, 1);;
  border-radius: 25%;
  top: -5px;
  right: -5px;
  padding: 1px;
  line-height:0.7;
  height: 12px;
  width: 12px;
  font-size: 0.875rem;
  opacity: 0;
}
.resize-drag {
  min-width: 100px;
  min-height: 30px;
  border-radius: 0.2rem;
  background-color: rgb(23,235,192,0.3) !important;
  border: 2px solid rgb(23,235,192,1) !important;
  color: var(--bs-heading-color) !important;
  touch-action: none;
  box-sizing: border-box;
  &amp;:hover {
    .btn-field-cancel {
      opacity: 1;
    }
  }
}
.resize-drag-text {
  min-height: 30px;
  min-width: 60px;
  border-radius: 0.2rem;
  background-color: rgb(23,235,192,0.3) !important;
  border: 2px solid rgb(23,235,192,1) !important;
  color: var(--bs-heading-color) !important;
  touch-action: none;
  box-sizing: border-box;
}
.footer.bg-dark {
  background: rgba(0,0,0,0.6) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.3);
  bottom:0;
}
.footer.sign-locations {
  bottom:0;
}
.footer.sign-locations.bg-dark {
  background: rgba(0,0,0,0.6) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.3);
}
.btn-add-signatory {
    height: 40px;
    width: 40px;
    padding: 0.4rem;
    border-radius: 0.6rem;
    border: 0.07rem solid #d2d6da !important;
}
.input-esign {
  color: var(--bs-heading-color);
  cursor: text;
  font-size: 0.875rem;
}
.esign-head tr th {
  font-size: 0.875rem;
}
.user-card-container {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid var(--coolGrey50);
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
/*  padding: 2rem;*/
  /*-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  -moz-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  -ms-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  -o-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);*/
  box-shadow: none;
}
.user-card-foot {
  text-align: center;
  padding: 0.7rem !important;
  background-color: #fff;
/*  border-top: 1px solid var(--bs-gray-300);*/
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}
.user-card-foot p {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-body-color);
}
/***********************
---Products Dropdown----
***********************/
.w-200px {
  width: 200px !important;
}
/***********************
-----Sweet Alerts------
***********************/
.swal2-title {
  font-size: 1rem !important;
  color: var(--bs-heading-color) !important;
/*  padding: 0.8em 3em 0 !important;*/
}
.swal2-popup.swal2-toast .swal2-title {
  padding: 0;
}
.swal2-popup {
  border-radius: 0.5rem !important;
}
/*.swal2-popup.swal2-toast {
  background: inherit;
  background-color: rgba(0, 123, 255, 0.1) !important;
}*/
.swal2-styled {
  padding: 0.325em 1em !important;
}
.swal2-styled.swal2-confirm {
    padding: 0.4rem 1rem !important;
    color: rgba(var(--coolGrey25rgb), 1) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
     position: relative;
     /*margin-left: auto;
     margin-right: auto;*/
     border: 1px solid rgb(var(--coolGrey800rgb), 1);
     border-color: rgb(var(--coolGrey800rgb), 1) !important;
     border-width: 1px !important;
     border-style: solid !important;
     border-radius: 0.6rem !important;
     background-color: #24272b !important;
  /*   transition: all 0.1s ease-in-out;*/
     background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
     -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important!;
}
.swal2-styled.swal2-confirm:hover,
.swal2-confirm:hover,
.swal2-confirm:focus,
.swal2-styled.swal2-confirm:focus {
      color:rgb(var(--z-green50), 0.7) !important;
      border-color: rgb(var(--z-green50), 0.7) !important;
      background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
      -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
}
.swal2-styled.swal2-deny {
    padding: 0.4rem 1rem !important;
    color: rgba(var(--coolGrey25rgb), 1) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
     position: relative;
     /*margin-left: auto;
     margin-right: auto;*/
     border: 1px solid rgb(var(--coolGrey800rgb), 1);
     border-color: rgb(var(--coolGrey800rgb), 1) !important;
     border-width: 1px !important;
     border-style: solid !important;
     border-radius: 0.6rem !important;
     background-color: #24272b !important;
  /*   transition: all 0.1s ease-in-out;*/
     background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
     -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important!;
}
.swal2-styled.swal2-deny:hover,
.swal2-styled.swal2-deny:focus {
      color:rgb(var(--z-green50), 0.7) !important;
      border-color: rgb(var(--z-green50), 0.7) !important;
      background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
      -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
}
.swal2-styled.swal2-cancel {
    padding: 0.4rem 1rem !important;
    color: rgba(var(--coolGrey25rgb), 1) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
     position: relative;
     /*margin-left: auto;
     margin-right: auto;*/
     border: 1px solid rgb(var(--coolGrey800rgb), 1);
     border-color: rgb(var(--coolGrey800rgb), 1) !important;
     border-width: 1px !important;
     border-style: solid !important;
     border-radius: 0.6rem !important;
     background-color: #24272b !important;
  /*   transition: all 0.1s ease-in-out;*/
     background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
     -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
     box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important!;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:focus {
      color:rgb(var(--z-green50), 0.7) !important;
      border-color: rgb(var(--z-green50), 0.7) !important;
      background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529) !important;
      -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
      box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
}
.sa-incoming-call-icon {
  background-image: url('../icons/app-icons/svg/32x32/phone.svg') !important;
}

/***********************
-----Marketing Learn------
***********************/
.card.card-background:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(0, 0, 0, 0) !important;
  border-radius: 1rem;
}
.card.card-background .full-background {
  background-position: 50%;
  background-size: cover;
  margin-bottom: 30px;
  width: 100%;
  height: 100% !important;
  position: absolute;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card.card-background .half-background {
  background-position: 50%;
  background-size: cover;
  margin-bottom: 30px;
  width: 100%;
  height: 60% !important;
  position: absolute;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card.card-learn {
  /*width: 300px;
  height: 400px !important;*/
  position: relative;
  border-radius: 1rem !important;
}
.card-learn-header {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}
.card-learn-background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
    width: auto;
}
.card-learn-body {
  position: relative;
  height: 100px;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}
.card-learn-footer {
  bottom: 10px;
  position: absolute;
  width: 100%;
}
.tut-hover-lift {
  padding: 0;
  text-decoration: none !important;
  text-transform: none !important;
  -webkit-transition: all 0.3s ease-in, border-radius 0.15s ease;
  transition: all 0.3s ease-in, border-radius 0.15s ease;
}
.tut-hover-lift h3,.tut-hover-lift p {
  color: var(--bs-heading-color);
}
.tut-hover-lift:hover {
  box-shadow: var(--bs-btn-focus-box-shadow) !important;
  background-color: transparent !important;
  background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);
}
.tut-hover-lift:hover .icon {
  background-image: white !important;
  background: white !important;
  background-color: white !important;
}
.tut-hover-lift:hover .icon .ni {
  color: #0985eb;
}
.tut-hover-lift:hover p, .tut-hover-lift:hover h4 {
  color: white !important;
}
.tutorial-vid {
  border-radius: 1rem;
}


/*********************
  ---- navbar -------
*********************/
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--coolGrey50);
    .h-app {
      background-color: #fff !important;
      border-color: var(--coolGrey100) !important;
    }
}
.nav-item-info-hover a {
  color: #FFFFFF;
  -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
.nav-item-info-hover:hover a,
.nav-item-info-hover:active a,
.nav-item-info-hover:focus a,
.nav-item-info-hover:hover .nav-expand-icon,
.nav-item-info-hover:hover .nav-expand-icon2 {
/*  color: #17c1e8 !important;*/
  color: rgba(var(--z-blue-500),1) !important;
  -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
.dropdown-item-sm-text a,
.dropdown-item-sm-text:hover a {
  color: var(--bs-body-color) !important;
}

.dropdown-item-info:hover,
.dropdown-item-info:focus {
/*  color: rgba(0, 123, 255, 0.8) !important;*/
  background-color: var(--coolGrey37) !important;
}
.dropdown-item-info {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item-info:hover,
.dropdown-item-info:focus {
  color: rgba(0, 123, 255, 0.8) !important;
  background-color: rgba(0, 123, 255, 0.1);
}

.dropdown-item-info.active,
.dropdown-item-info:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}

.dropdown-item-info.disabled,
.dropdown-item-info:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}
.dropdown-item.highlight-info:hover {
  background-color: rgba(0, 123, 255, 0.1);
}
.dropdown-item.highlight-success:hover {
  background-color: rgba(37, 245, 210, 0.2);;
}
.dropdown-item.highlight-danger:hover {
  background-color: rgba(255, 0, 72, 0.1);
}
.dropdown-item.highlight-warning:hover {
  background-color: rgba(255, 255, 72, 0.2);
}
.dropdown-item.highlight-power:hover {
  background-color: rgba(98, 24, 249, 0.1);
}
.dropdown-item.highlight-hot:hover {
  background-color: rgba(247, 105, 186, 0.1);
}
/* Yellow Gradient: #feff48 rgba(255,255,72,1) to #f4c41a rgba(244, 197, 26, 1)*/
/* Purple Gradient: #a27af4 rgba(162, 122, 244,1) to #6218f9 rgba(98, 24, 249, 1)*/
/* Red Gradient: #feff48 rgba(255,255,72,1) to #f4c41a rgba(244, 197, 26, 1)*/
/* Pink Gradient: #ff8cf0 rgba(247, 105, 186,1) to #f70782 rgba(247, 7, 130, 1)*/

.icon-rotate-180 {
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -ms-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
/*.nav-item-info-hover:hover .icon-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;

}*/
.nav-item-info-hover .icon-rotate-180 .dropdown-menu.show {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.nav-expand-icon {
  vertical-align: middle;
  color: #FFFFFF;
  -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}
.nav-expand-icon2 {
  vertical-align: middle;
  color: var(--bs-heading-color) !important;
  -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
}

.dropdown .dropdown-menu.dropdown-menu-end {
    right: 10px!important;
    left: auto!important;
}
.avatar-tenant {
  position: relative; 
  display: flex;
  background-color: rgba(0, 123, 255, 0.2);
  color: rgba(0, 123, 255, 1);
  font-size: 0.75;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50%; 
  height: 30px; 
  width: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  border: 1px solid rgba(0, 123, 255, 0.4);
}
.avatar-tenant.active {
  color: #fff;
  background-color: rgba(0, 123, 255, 1);
  border: 1px solid rgba(0, 123, 255, 1);
}
.avatar-tenant-add {
  position: relative; 
  display: flex;
  background-color: transparent;
  color: rgba(0, 123, 255, 1);
  font-size: 0.75;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50%; 
  height: 30px; 
  width: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  border: 1px dashed rgba(0, 123, 255, 1);
}
@media (min-width: 992px) {
  .dropdown .dropdown-apps:before {
      font-family: FontAwesome;
      content: "\f0d8";
      position: absolute;
      top: 0;
      left: 298px;
      right: auto;
      font-size: 22px;
      color: #fff;
      transition: top .35s ease;
  }
  .dropdown.dropdown-hover .dropdown-apps, .dropdown .dropdown-apps {
    display: block;
    opacity: 0;
    top: 0;
    left: -285px;
    min-width: 100%;
    width: 350px;
    transform-origin: 50% 0;
    pointer-events: none;
    transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0,37px,0)!important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform,box-shadow;
  }
}
@media screen and (max-width: 991px) {
    .nav-expand-icon {
    color: var(--bs-body-color);
  }
}

/***********************************
 * ----- Project Management ------ *
 * *********************************/
 .pm-modal-title {
  font-weight: 700;
  display: block;
  width: 50%;
  color: var(--bs-heading-color);
  margin-bottom: 0;
  padding: 0.25rem 0.5rem;
  background: transparent;
  background-clip: padding-box;
  appearance: none;
  border: none;
  box-shadow: none;
 }
.pm-modal-title:focus {
  border-color: rgba(37,196,242,0.1) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.pm-add-column {
  width: 250px;
  margin-left: 0.25rem;
  padding-right: 5px;
}
.pm-add-column-btn-text {
  vertical-align: middle;
  line-height: 1;
  padding-left: 0.25rem;
}
.checklist-wrapper {
  list-style: none;
    margin: 0;
    padding: 3px;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.checklist-wrapper ul {
  min-width: 100% !important;
  width: 100% !important;
}
.checklist .handle-h {
  cursor: move;
  display: inline-block;
  margin: 0;
}
.checklist {
    list-style: none;
    margin: 0;
    padding: 3px;
    overflow: hidden;
    position: initial;
    width: 100%;
    max-width: 100%;
    display: inline-block;
    white-space: nowrap;
}

.checklist &gt; li {
  border-radius: 0.6rem;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  /*border-right: 2px solid #e9ecef;*/
  color: inherit;
  margin-bottom: 2px;
  padding: 10px;
  display: block;
  -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%) !important;
  -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%) !important;
  -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%) !important;
  -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%) !important;
}

.checklist &gt; li:hover {
  border-radius: 0.6rem;
  background-color: rgba(218, 225, 235, 0.6);
  /*background-color: rgba(255,255,255,1);
  background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.35) 100%);*/
  /*border: 1px solid rgb(229,231,235,1);*/
  /*border-right: 2px solid #e9ecef;*/
  color: inherit;
  margin-bottom: 2px;
  padding: 10px;
  display: block;
  /*-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%) !important;*/
}
.checklist::placeholder {
  background: green;
}

.checklist &gt; li:last-of-type {
  margin-bottom: 0;
}

.checklist &gt; li &gt; input[type="checkbox"] {
  margin: 0 10px 0 5px;
}

.checklist &gt; li .text {
  display: block;
  font-weight: 500;
  /*margin-left: 5px;*/
  margin-right: 5px;
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
  color: inherit;
  white-space: break-spaces;
  border-radius: 0.4rem;
  border: 1px solid transparent;
}

.checklist &gt; li .text:focus {
  border: 1px solid rgba(37,196,242,0.4);
  -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}

.checklist &gt; li .badge {
  font-size: .7rem;
  margin-left: 10px;
}

.checklist &gt; li .tools {
  color: inherit;
  display: none;
  position: absolute;
  right: 16px;
  /*margin-left: auto;
  margin-right: auto;
  float: right;*/
}

.add-checklist {
    border-radius: 0.6rem;
    border: 1px solid transparent;
    background-color: none;
    background-image: none;
    color: inherit;
    font-size: 0.9rem;
    margin-bottom: 2px;
    margin-top: 3px;
    margin-left: 3px;
    width: 100px;
    padding: 0.3rem 0.6rem;
    display: inline-flex;
    background-color: rgba(218, 225, 235, 0.7);
    /*-webkit-box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.05) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.05) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.05) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.05) !important;
    box-shadow: 0 0 0 0.125rem rgba(0,0,0,0.05) !important;*/
}

/*.add-checklist:hover,*/
.add-checklist:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    background-color: rgba(255,255,255,0.6);
    background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.35) 100%);
    border: 1px solid rgba(37,196,242,0.4);
    width: 90%;
    height: auto;
    /* border-right: 2px solid #e9ecef; */
}

.btn-add-checklist-item {
  border-radius: 2rem;
    vertical-align: middle;
    /*padding: 0.18rem;*/
    line-height: 1;
    /*height: 16px;
    width: 16px;*/
    background-color: none;
  color: var (--bs-body-color) !important;
  cursor: pointer;
}
.btn-add-checklist-item:hover {
  vertical-align: middle;
  /*background-color: rgb(229,231,235,1);*/
}
.btn-add-checklist-item-icon {
  vertical-align: middle;
  padding: 0.2em;
  font-size:1.5rem;
  border-radius: 2rem;
  color: var(--bs-body-color);
  background-color: rgba(218, 225, 235, 0.7);
}
.btn-add-checklist-item-icon:hover {
    background-color: rgba(218, 225, 235, 1);
}
.add-checklist-form {
  background: rgb(0,0,0,0.05);
  border: 1px solid transparent;
  min-height: 30px !important;
  height: auto !important;
  width: 90px;
  border-radius: 0.6em !important;
  color: inherit;
  font-size:0.9rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
}
.add-checklist-form:focus, .add-checklist-form:hover {
  width: 100%;
  background: #fff;
}
.add-checklist-form:focus {
  border: 1px solid rgba(37,196,242,0.4) !important;
  border-color: rgba(37,196,242,0.4) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.add-checklist-form::placeholder {
  color: var(--bs-body-color);
  font-weight: 600;
}
.editable-click {
  border-bottom: none !important;
}
.btn-assign-member-board {
  vertical-align: middle;
  color: white;
  line-height: 1;
  font-size:1.5rem;
  padding: 0.4rem;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,1);
  /*background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);*/
  background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);
  border: 1px solid rgb(229,231,235,1);
  border-radius: 2rem;
  /*margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;*/
  float:right !important;
  webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -ms-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    -o-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) !important;
}
.btn-assign-member-board:hover {
  color: white;
  background-image: linear-gradient(310deg, #21d4fd 0%, #082fbf 100%);
  webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.checklist &gt; li .tools &gt; .fa,
.checklist &gt; li .tools &gt; .fas,
.checklist &gt; li .tools &gt; .far,
.checklist &gt; li .tools &gt; .fab,
.checklist &gt; li .tools &gt; .fal,
.checklist &gt; li .tools &gt; .fad,
.checklist &gt; li .tools &gt; .svg-inline--fa,
.checklist &gt; li .tools &gt; .ion {
  cursor: pointer;
  margin-right: 5px;
}
.checklist &gt; li .tools &gt; .material-icons-outlined {
  cursor: pointer;
  margin-right:2px;
}
.checklist &gt; li .tools &gt; .fa:hover,
.checklist &gt; li .tools &gt; .fas:hover,
.checklist &gt; li .tools &gt; .far:hover,
.checklist &gt; li .tools &gt; .fab:hover,
.checklist &gt; li .tools &gt; .fal:hover,
.checklist &gt; li .tools &gt; .fad:hover,
.checklist &gt; li .tools &gt; .svg-inline--fa:hover,
.checklist &gt; li .tools &gt; .ion:hover,
.checklist &gt; li .tools &gt; .material-icons-outlined:hover {
  opacity: 0.7;
    color: red;
}

.checklist &gt; li:hover .tools {
  display: inline-block;
}

.checklist &gt; li.done {
  color: #697582;
}

.checklist &gt; li.done .text {
  font-weight: 500;
  text-decoration: line-through;
}

.checklist &gt; li.done .badge {
  background-color: #adb5bd !important;
}

.checklist .primary {
  border-left-color: #007bff;
}

.checklist .secondary {
  border-left-color: #6c757d;
}

.checklist .success {
  border-left-color: #28a745;
}

.checklist .info {
  border-left-color: #17a2b8;
}

.checklist .warning {
  border-left-color: #ffc107;
}

.checklist .danger {
  border-left-color: #dc3545;
}

.checklist .light {
  border-left-color: #f8f9fa;
}

.checklist .dark {
  border-left-color: #343a40;
}

.checklist .lightblue {
  border-left-color: #3c8dbc;
}

.checklist .navy {
  border-left-color: #001f3f;
}

.checklist .olive {
  border-left-color: #3d9970;
}

.checklist .lime {
  border-left-color: #01ff70;
}

.checklist .fuchsia {
  border-left-color: #f012be;
}

.checklist .maroon {
  border-left-color: #d81b60;
}

.checklist .blue {
  border-left-color: #007bff;
}

.checklist .indigo {
  border-left-color: #6610f2;
}

.checklist .purple {
  border-left-color: #6f42c1;
}

.checklist .pink {
  border-left-color: #e83e8c;
}

.checklist .red {
  border-left-color: #dc3545;
}

.checklist .orange {
  border-left-color: #fd7e14;
}

.checklist .yellow {
  border-left-color: #ffc107;
}

.checklist .green {
  border-left-color: #28a745;
}

.checklist .teal {
  border-left-color: #20c997;
}

.checklist .cyan {
  border-left-color: #17a2b8;
}

.checklist .white {
  border-left-color: #fff;
}

.checklist .gray {
  border-left-color: #6c757d;
}

.checklist .gray-dark {
  border-left-color: #343a40;
}

/*.checklist .handle {
  cursor: move;
  display: inline-block;
  margin: 0 2px;
  color:#495057;
}*/
.dark-mode .checklist &gt; li {
  background-color: #3f474e;
  border-color: #454d55;
  color: #fff;
}

.dark-mode .checklist .primary {
  border-left-color: #3f6791;
}

.dark-mode .checklist .secondary {
  border-left-color: #6c757d;
}

.dark-mode .checklist .success {
  border-left-color: #00bc8c;
}

.dark-mode .checklist .info {
  border-left-color: #3498db;
}

.dark-mode .checklist .warning {
  border-left-color: #f39c12;
}

.dark-mode .checklist .danger {
  border-left-color: #e74c3c;
}

.dark-mode .checklist .light {
  border-left-color: #f8f9fa;
}

.dark-mode .checklist .dark {
  border-left-color: #343a40;
}

.dark-mode .checklist .lightblue {
  border-left-color: #86bad8;
}

.dark-mode .checklist .navy {
  border-left-color: #002c59;
}

.dark-mode .checklist .olive {
  border-left-color: #74c8a3;
}

.dark-mode .checklist .lime {
  border-left-color: #67ffa9;
}

.dark-mode .checklist .fuchsia {
  border-left-color: #f672d8;
}

.dark-mode .checklist .maroon {
  border-left-color: #ed6c9b;
}

.dark-mode .checklist .blue {
  border-left-color: #3f6791;
}

.dark-mode .checklist .indigo {
  border-left-color: #6610f2;
}

.dark-mode .checklist .purple {
  border-left-color: #6f42c1;
}

.dark-mode .checklist .pink {
  border-left-color: #e83e8c;
}

.dark-mode .checklist .red {
  border-left-color: #e74c3c;
}

.dark-mode .checklist .orange {
  border-left-color: #fd7e14;
}

.dark-mode .checklist .yellow {
  border-left-color: #f39c12;
}

.dark-mode .checklist .green {
  border-left-color: #00bc8c;
}

.dark-mode .checklist .teal {
  border-left-color: #20c997;
}

.dark-mode .checklist .cyan {
  border-left-color: #3498db;
}

.dark-mode .checklist .white {
  border-left-color: #fff;
}

.dark-mode .checklist .gray {
  border-left-color: #6c757d;
}

.dark-mode .checklist .gray-dark {
  border-left-color: #343a40;
}
/*******************************
 * ------- Calendar ------------
 * ****************************/
 .sidenav-calendar {
  top: 83px !important;
  left: 10px;
left: -350px !important;
/*  width: 350px !important;*/
  max-width: 350px !important;
}
.sidenav-calendar.show {
  left: 10px !important;
}
.sidenav-header-calendar {
  height: 3.075rem;
  position: relative;
  display: inline;
}
.sidenav-body-calendar {
  /*overflow-x: hidden;
  overflow-y: auto;
  max-height: 880px;*/
}
.sidenav-body-calendar::-webkit-scrollbar {
  background-color: #fff !important;
    border-top-right-radius: 0.6rem !important;
    border-tbottom-right-radius: 0.6rem !important;
}
.sidenav-body-calendar::-webkit-scrollbar-thumb,
.sidenav-body-calendar::-moz-scrollbar-thumb,
.sidenav-body-calendar::-ms-scrollbar-thumb,
.sidenav-body-calendar::-o-scrollbar-thumb {
    background-color: #fff !important;
    border-top-right-radius: 0.6rem !important;
    border-tbottom-right-radius: 0.6rem !important;
}
@media (min-width: 1200px) {

  /*.sidenav.fixed-start~.main-content {
    margin-left: 22.125rem;
  }*/

  .sidenav.calendar.show~.main-content {
    margin-left: 22.525rem;
  }
  .sidenav-calendar {
    box-shadow: none !important;
  }
}
.cal-select-drop {
  background-color: var(--bs-gray-200);
  color: var(--bs-body-color);
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.1s ease-in-out;
}
.cal-select-drop span {
  transition: all 0.1s ease-in-out;
  font-size: 0.75rem;
}
.cal-select-drop:hover,
.cal-select-drop:focus,
.cal-select-drop:active {
  background-color: rgba(0, 123, 255, 0.1) !important;
}
.cal-select-drop:hover,
.cal-select-drop:focus,
.cal-select-drop:active,
.cal-select-drop:hover span,
.cal-select-drop:focus span,
.cal-select-drop:active span  {
  color: rgba(0, 123, 255, 0.8) !important;
}
.dropdown .dropdown-toggle.cal-select-drop:after,
.dropdown .dropdown-toggle.cal-select-drop.show:after {
  position: relative;
  float: right;
  top: 6px;
  margin-right: 3px;
}
.dropdown:not(.dropdown-hover) .dropdown-menu.invite-user {
  left: -80px;
}
.dropdown .dropdown-menu.invite-user:before {
  left: 92px;
}
.dropdown:not(.dropdown-hover) .dropdown-menu.cal-week-drop {
  left: -23px;
}
.dropdown .dropdown-menu.cal-week-drop:before {
  left: 148px;
}
@media (max-width: 991.98px) {
  :not(.navbar) .dropdown .dropdown-menu.invite-user.show,
  :not(.navbar) .dropdown .dropdown-menu.cal-create.show,
  :not(.navbar) .dropdown .dropdown-menu.cal-week-drop.show {
    margin-top: 45px !important;
  }
}
.dropdown .dropdown-toggle.cal-select-drop.show:after, 
.dropdown .dropdown-toggle.cal-select-drop.show:before, 
.dropup .dropdown-toggle.cal-select-drop.show:after, 
.dropup .dropdown-toggle.cal-select-drop.show:before, 
.dropstart .dropdown-toggle.cal-select-drop.show:after, 
.dropstart .dropdown-toggle.cal-select-drop.show:before, 
.dropend .dropdown-toggle.cal-select-drop.show:after, 
.dropend .dropdown-toggle.cal-select-drop.show:before {
    transform: rotate(180deg);
}
.dropdown .dropdown-toggle.cal-select-drop:after, 
.dropup .dropdown-toggle.cal-select-drop:after {
    content: "\f107";
}
.dropdown .dropdown-toggle.cal-select-drop:after, 
.dropdown .dropdown-toggle.cal-select-drop:before, 
.dropup .dropdown-toggle.cal-select-drop:after, 
.dropup .dropdown-toggle.cal-select-drop:before, 
.dropstart .dropdown-toggle.cal-select-drop:after, 
.dropstart .dropdown-toggle.cal-select-drop:before, 
.dropend .dropdown-toggle.cal-select-drop:after, 
.dropend .dropdown-toggle.cal-select-drop:before {
    transition: 0.3s ease;
}
.dropdown .dropdown-toggle.cal-select-drop:after,
.dropdown .dropdown-toggle.cal-select-drop:before, 
.dropup .dropdown-toggle.cal-select-drop:after, 
.dropup .dropdown-toggle.cal-select-drop:before, 
.dropstart .dropdown-toggle.cal-select-drop:after, 
.dropstart .dropdown-toggle.cal-select-drop:before, 
.dropend .dropdown-toggle.cal-select-drop:after, 
.dropend .dropdown-toggle.cal-select-drop:before {
    font: normal normal normal 14px/1 FontAwesome;
    border: none;
    vertical-align: middle;
    font-weight: 600;
}
.btn-clipboard {
  background-color: rgba(0, 123, 255, 0.1);
  border-radius: 0.5rem;
  margin-right: 0.1rem;
  line-height: 1.3;
  width: 30px;
  color: var(--bs-body-color);
}
.btn-clipboard:hover {
  background-color: rgba(0, 123, 255, 0.2);
  color: rgba(0, 123, 255, 0.7) !important;
}
.btn-cal-availability {
    vertical-align: middle;
    background-color: transparent;
    color: var(--bs-body-color);
    border-radius: 50%;
    padding: 0.31rem;
    height: 30px;
    width: 30px;
}
.btn-cal-availability:hover {
    color: rgba(0, 123, 255, 0.7);
    background-color: rgba(0, 123, 255, 0.1);
}
.btn-cal-availability-delete {
    vertical-align: middle;
    background-color: transparent;
    color: var(--bs-body-color);
    border-radius: 50%;
    padding: 0.35rem;
    height: 30px;
    width: 30px;
}
.btn-cal-availability-delete:hover {
    color: rgba(255, 0, 0, 0.7);
    background-color: rgba(0, 123, 255, 0.1);
}
.time-container input {
  font-size: 0.875rem;
}
.aval-wrap {
    background-color: transparent;
    width: auto;
    position: relative;
/*    display: inline-block;*/
    padding: 0.75rem !important;
    border-radius: 0.5rem;
}
.aval-wrap:hover {
    background-color: var(--bs-gray-100);
}
.aval-wrap .time-container button {
    display: none;
}
.aval-wrap:hover .time-container button {
    display: inline;
}
.aval-day-title {
    font-size: 1.0rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #344767;
/*    margin-left: 6.25rem;*/
}
.aval-col {
    width: 33%;
}
.override-wrap {
    margin-bottom: 0.25rem;
    background-color: transparent;
    border-radius: 0.5rem;
    padding: 1rem;
}
.override-wrap:hover {
    background-color: var(--bs-gray-100);
}
.override_container .override-time-container button,
.override_container button {
    display: none;
}
.override_container:hover .override-time-container button,
.override_container:hover button {
    display: inline;
}
.btn-override {
    height: 30px;
    width: 30px;
    padding: 0.3rem;
}
.slot-select {
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.4rem;
    color: var(--bs-body-color);
    padding: 0.1rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    background-image: linear-gradient(to bottom, rgba(245,245,245,.1) 0%, rgba(229,231,235,.5) 100%);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.06);
}
.slot-select option {
    background-color: white;
}
/*.slot-select select {
    display: none;
}*/
.select-selected {
  background-color: DodgerBlue;
}
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: 1px solid var(--bs-gray-200);
}
.select-selected.select-arrow-active:after {
  border-color: 1px solid var(--bs-gray-200);
  top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: var(--bs-body-color);
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--bs-gray-200);
/*  border-color: transparent transparent var(--bs-gray-200) transparent;*/
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
 .choices__inner {
    display: flex;
    align-items: center;
    vertical-align: top;
    width: 100%;
    padding: 0.3rem 0.5rem !important;
    border: 1px solid #d2d6da;
    border-radius: 0.6rem;
    font-size: 14px;
    min-height: 40px;
    overflow: hidden;
}
.is-focused .choices__inner,
.is-open .choices__inner {
    border: 1px solid transparent;
    border-color: rgba(37,196,242,0.1) !important;
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.is-focused .choices__inner .choices__input,
.is-open .choices__inner .choices__input {
    background-color: #fff !important;
}
.choices__list--multiple .choices__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 3.75px;
    margin-bottom: 3px;
    background-color: #3a416f;
    border: 1px solid #3a416f;
    color: #fff;
    word-break: break-all;
    box-sizing: border-box;
}
.choices__input {
    display: inline-block;
    vertical-align: baseline;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 0 !important;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 0px 0px 0px 2px;
/*    padding: 4px 0 4px 2px;*/
}
/*.choices__input:focus {
    background-color: #e9ecef !important;
}*/
.btn-date-nav {
    background: transparent;
    border-radius: 0.6rem;
    padding: 0.5rem 0.7rem;
    margin: -0.5rem;
    font-size: 0.875rem;
}
.btn-date-nav:hover {
    color: rgba(0, 123, 255, 0.7);
    background: var(--bs-gray-200);
}
.btn-date-nav:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.nav-dropdown-select {
    margin-right: 0.2rem;
    background: transparent;
    border-radius: 0.6rem;
    transition: all 0.1s ease-in-out !important;
}
.nav-dropdown-select:hover {
    color: rgba(0, 123, 255, 0.7) !important;
    background: var(--bs-gray-200);
}
.nav-dropdown-select.success:hover {
    color: rgba(37, 245, 210,1) !important;
}
.cal-form-control {
    display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  line-height: 1.4rem;
  color: #495057;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid transparent;
  appearance: none;
  border-radius: 0.7rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cal-form-control:focus {
    border-color: rgba(37,196,242,0.1) !important;
    background-color: #e9ecef !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}
.fc-content {
  font-size: 0.75rem;
  font-weight: 500;
}
.fc-h-event {
    display: block;
    color: var(--bs-heading-color);
    border: 1px solid transparent !important;
    background-color: transparent !important;
}
.fc-h-event:hover {
    color: rgba(0, 123, 255, 0.8) !important;
}
.cal-event-dot {
  position: relative;
  display: inline-block;
  padding: 0.22rem;
  margin: 2px 5px 2px 2px;
  top: 1px;
  border-radius: 50%;
  background: transparent;
  background-color: rgba(0, 123, 255, 1);
}
/*.fc-unthemed td.fc-today {
    background: rgba(33, 213, 253, 0.2);
}*/
.fc-content:hover .event-close {
  opacity: 0.8;
}
.event-close {
    vertical-align: middle;
    background: transparent;
    color: inherit;
    border-radius: 0.5rem;
    opacity: 1;
}
.event-close:hover {
    color: rgba(255, 0, 0, 0.6);
}
.calendar-box {
  border-radius: 0.6rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
  width: 300px;
  height: 100%;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.calendar-box:hover {
  transform: scale(1.02);
  cursor: inherit;
}

.calendar-box &gt; .inner {
  padding: 10px;
}

.calendar-box-header {
  height: 150px;
  text-align: center;
  margin: -10px -10px 0 -10px;
  background: rgba(233, 236, 239,1);
  overflow: hidden;
}
.calendar-thumbnail {
  position: relative;
  width: auto;
  max-height: 100%;
}
.calendar-box-footer {
  overflow: hidden;
}

.calendar-box &gt; .calendar-box-footer {
  background-color: rgba(0, 102, 255, 0.7);
  color: #fff;
  font-weight: 700;
  display: block;
  width:100%;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  z-index: 10;
}

.calendar-box &gt; .calendar-box-footer:hover {
  background-color: rgba(0, 102, 255, 1);
  color: #fff;
}

.calendar-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0;
  white-space: nowrap;
}

.inner.calendar {
  margin-bottom: -25px;
}

.btn-calendar {
    position: absolute;
    right: 7px;
    float: right;
}
.btn-calendar-more {
    border: none;
    height: 32px;
    width: 32px;
    z-index:2;
    position: absolute;
    right: 7px;
    margin-top: 2px;
    padding: 0.1rem;
    float: right;
    color: var(--bs-body-color);
    border-radius: 50%;
}
.btn-calendar-more:hover {
    background-color: rgba(0,0,0,0.08);
    /*border: 2px solid #D9D9D9;*/
}
.btn-calendar-more:focus {
    -webkit-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -moz-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -ms-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    -o-box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
    box-shadow: 0 0 0.125rem 0.25rem rgba(37,196,242,0.3);
}
.calendar-box-pop {
    min-width: 120px;
    width: 120px!important;  
    padding: 0.5rem;
    -webkit-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    -o-box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 15%);
}
.calendar-box-pop .dropdown-item {
  border-radius: 0.5rem;
}
.calendar-box-pop .dropdown-item:hover {
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  .col-xl-2 .calendar-box h3,
  .col-lg-2 .calendar-box h3,
  .col-md-2 .calendar-box h3 {
    font-size: 1.6rem;
  }
  .col-xl-3 .calendar-box h3,
  .col-lg-3 .calendar-box h3,
  .col-md-3 .calendar-box h3 {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1200px) {
  .col-xl-2 .calendar-box h3,
  .col-lg-2 .calendar-box h3,
  .col-md-2 .calendar-box h3 {
    font-size: 2.2rem;
  }
  .col-xl-3 .calendar-box h3,
  .col-lg-3 .calendar-box h3,
  .col-md-3 .calendar-box h3 {
    font-size: 2.2rem;
  }
}

.calendar-box p {
  font-size: 1rem;
}

.calendar-box p &gt; small {
  color: #f8f9fa;
  display: block;
  font-size: .9rem;
  margin-top: 5px;
}

.calendar-box h3,
.calendar-box p {
  z-index: 5;
}

.calendar-box .icon {
  color: inherit;
  z-index: 0;
}

.calendar-box .icon &gt; i {
  font-size: 100px;
  height: 150px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  margin: auto;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.calendar-box .icon &gt; i.fa, .calendar-box .icon &gt; i.fas, .calendar-box .icon &gt; i.far, .calendar-box .icon &gt; i.fab, .calendar-box .icon &gt; i.fal, .calendar-box .icon &gt; i.fad, .calendar-box .icon &gt; i.ion {
  font-size: 80px;
  /*top: 20px;*/
}

.calendar-box .icon svg {
  font-size: 70px;
  /*position: absolute;*/
  right: 15px;
  top: 15px;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.calendar-box:hover {
  text-decoration: none;
}

.calendar-box:hover .icon &gt; i, .calendar-box:hover .icon &gt; i.fa, .calendar-box:hover .icon &gt; i.fas, .calendar-box:hover .icon &gt; i.far, .calendar-box:hover .icon &gt; i.fab, .calendar-box:hover .icon &gt; i.fal, .calendar-box:hover .icon &gt; i.fad, .calendar-box:hover .icon &gt; i.ion {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
    color: rgba(0, 102, 255, 0.9);
    transition: transform 0.1s linear;
}

.calendar-box:hover .icon &gt; svg {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (max-width: 767.98px) {
  .calendar-box {
    text-align: center;
  }
  .calendar-box .icon &gt; i.ion {
    font-size: 60px;
    /* top: 20px; */
}
  .calendar-box p {
    font-size: 12px;
  }
.edit-in-place-input {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    align-items: center;
    align-content: center;
    text-align: center;
    }
}
.edit-in-place-input {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    color: inherit;
    font-weight: 700 !important;
    font-size: 1rem;
    line-height: 1.2 !important;
    /*padding: 0.3rem;
    padding-top: 0;*/
    border-radius: 0.4rem;
    border: 1px solid transparent;
    width: 100%;
}
.edit-in-place-input.sm-text {
    color: inherit;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    font-size: 0.875rem !important;
    /*padding: 0.3rem;*/
    border: 1px solid transparent;
}
.edit-in-place-input::placeholder {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.edit-in-place-input.sm-text::placeholder {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--bs-placeholder-color);
    font-family: inherit;
}
.edit-in-place-input:focus::placeholder {
    color: var(--bs-placeholder-color);
}
.edit-in-place-input:focus {
    border: 1px solid #f1f1f1;
    background: #e9ecef;
}
.calendar-title {
    color: inherit;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.5rem 0.1rem;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto;
/*    height: 35px;*/
    width: 100%;
    white-space: nowrap;
    appearance: none;
    text-overflow: ellipsis;
    inset: none;
}
.calendar-subtitle {
    font-weight: 400;
    color: inherit;
    padding: 0.1rem 0.1rem 0.5rem 0.1rem;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto;
/*    height: 34px;*/
    width: 100%;
    white-space: nowrap;
    appearance: none;
    text-overflow: ellipsis;
    inset: none;
}
.calendar-description {
    font-weight: 400;
    color: inherit;
    padding: 0.1rem 0.1rem 0.25rem 0.1rem;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    overflow: hidden;
/*    height: 34px;*/
    width: 100%;
    white-space: nowrap;
    appearance: none;
    text-overflow: ellipsis;
    inset: none;
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {

    .edit-in-place-input {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}
@media screen and (min-width: 528px) and (max-width: 767px) {

    .edit-in-place-input {
        width: 100%;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (min-width: 428px) and (max-width: 527px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (min-width: 328px) and (max-width: 427px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}
@media screen and (max-width: 327px) {

    .edit-in-place-input {
        width: 100%;
        font-size: 1rem !important;
        overflow-x: auto;
    }
    .edit-in-place-input.sm-text {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input::placeholder {
        font-size: 1rem !important;
    }
    .edit-in-place-input.sm-text::placeholder {
        font-size: 0.8rem !important;
    }
    .edit-in-place-input.sm-text:focus::placeholder {
        font-size: 0.8rem !important;
    }
}

@media screen and (min-width: 1400px) {
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}
/****************************************/
/*          Quill Overrides            */
/****************************************/
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] &gt; li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor &gt; * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol &gt; li,
.ql-editor ul &gt; li {
  list-style-type: none;
}
.ql-editor ul &gt; li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] &gt; li *,
.ql-editor ul[data-checked=false] &gt; li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] &gt; li::before,
.ql-editor ul[data-checked=false] &gt; li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] &gt; li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] &gt; li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: var(--bs-body-color) !important;
/*  color: rgba(0,0,0,0.6);*/
  content: attr(data-placeholder);
  font-style: normal !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
/*.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: rgba(6, 119, 206, 0.7) !important;
  background: rgba(218, 225, 235, 0.5);
  border-radius: 0.3rem;
}*/
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: rgba(6, 119, 206, 0.7) !important;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: rgba(6, 119, 206, 0.7) !important;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: var(--bs-heading-color) !important;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    color: var(--bs-heading-color) !important;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    color: var(--bs-heading-color) !important;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: var(--bs-heading-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: var(--bs-heading-color);
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--bs-heading-color);
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--bs-heading-color);
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: var(--bs-heading-color) !important;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    position: relative;
    vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
/*  display: block;*/
  display: flex !important;
  height: 30px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #344767 !important;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    box-sizing: border-box;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: none !important;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: none !important;
}
.ql-toolbar.ql-snow+.ql-container.ql-snow {
    border-top: 0;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.ql-editor {
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.ql-toolbar {
  border-color: transparent !important;
}
@media (max-width: 991px) {
  .ql-toolbar {
  border-color: transparent !important;
}
}
/*.ql-editor:focus,
.ql-toolbar + .description-editor {
  border: 1px solid transparent;
    border-color: transparent !important;
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}*/
.description-editor p {
  font-size: 0.9rem;
}
.description-editor {
  background: transparent;
  border-radius: 0.6rem;
}
.ql-editor:focus + .description-editor {
  background: #fff !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label, .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-radius: 0.3rem;
    border-color: transparent !important;
}
.template-block-2-editor,
.template-block-1-editor  {
  padding: 10px;
  border-radius: 0.6rem;
  background-color: var(--bs-gray-100);
}
.template-block-1-editor p,
.template-block-2-editor p {
  font-size: 0.875rem;
}
.offer-letter-temp-btns {
  display: flex;
  padding-x: 0.3rem;
}
.offer-letter-temp-btns .btn-close {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  background-color: var(--bs-gray-200);
  width: 20px;
  height: 20px;
  color: var(--bs-body-color);
  border-radius: 0.5rem;
  cursor: pointer;
}
.offer-letter-temp-btns .btn-close:hover {
  
}

/****************************************/
/*    Minerals Home Page Flip Cards     */
/****************************************/
.home-cards {
  display: block;
  width: auto;
  height: auto;
  text-align: center;
  align-content: center;
  margin: auto;
}
.home-cards .section-title {
  z-index: 2;
  position: relative;
}
.home-cards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}

.home-square-flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*border:1px solid #efefef;*/
  position: relative;
  margin: 20px;
  width: 400px;
  height: 400px;
}
.home-square, .home-square2 {
  width: 100%;
  height: 100%;
}
.home-square {
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0.7rem;
}
.home-square-flip .home-square {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.home-square-flip:hover .home-square {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.home-square2 {
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.home-square-flip .home-square2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.home-square-flip:hover .home-square2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
/*Square content*/
.home-square-container {
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(6px) scale(1);
  -ms-transform: translateY(-50%) translateX(6px) scale(1);
  transform: translateY(-50%) translateX(6px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
.front-card {
  width: 100%;
  height: 100%;
}
.home-square-flip:hover .home-square-container {
  -webkit-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  -ms-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform-style: preserve-3d;
}
.home-square-container2 {
  padding: 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
.home-square-flip:hover .home-square-container2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}
/*Style text*/
.home-square-flip h2 {
  color: white;
}
.home-square-flip h3 {
  color: white;
  line-height: 26px;
}
.home-square-flip h4 {
  color: white;
  line-height: 26px;
}
.home-square-flip h5 {
  color: white;
  line-height: 26px;
}
/*Elements*/
.home-flip-overlay {
  display: block;
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  border: solid 2px #379ADB;
  border-radius: 0.7rem;
  top: 0;
}
.home-blue-overlay {
  display: block;
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  border: solid 2px #379ADB;
  border-radius: 0.7rem;
  top: 0;
  opacity: 1.0;
}
.align-center {
  margin: 0 auto;
}
.kallyas-button {
  display: block;
  width: 160px;
  padding: 18px 30px;
  font-family: "Open Sans";
  font-weight: 600;
  color: #fff;
  background: #FF2024;
  margin: 0 auto;
  border-radius: 2px;
  text-decoration: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa067+0,ff2959+49,ff2024+100 */
  background: #ffa067; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa067', endColorstr='#ff2024', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*ADD SHADOWS OPTIONAL*/
.home-square-flip .home-square .boxshadow, .home-square-flip .home-square .textshadow, .home-square-flip .home-square2 .boxshadow, .home-square-flip .home-square2 .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}
.home-square-flip .home-square .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.home-square-flip .home-square .textshadow {
  -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.home-square-flip:hover .home-square .boxshadow, .home-square-flip:hover .home-square .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.home-square-flip .home-square2 .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.home-square-flip .home-square2 .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.home-square-flip:hover .home-square2 .boxshadow, .home-square-flip:hover .home-square2 .textshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.home-flipcard-icon .icon {
  font-size: 100px;
  line-height: 1;
  margin: 0 0 10px;
  color:#3791D8;
}
.home-centerflipcards {
  display: block;
  width: 1330px;
  height: 440px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 200px;
}
.clearfix {
  clear: both;
}
.home-centerflipcards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}
.counting-wrapper {
  padding-top: 30px;
  padding-bottom: 25px;
  background: url('../img/banner/panoramic-1920s-oil-rigs.jpg');
  background-size: cover;
  /*background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);*/
  z-index: 0;
}
.counting-item {
  margin-bottom: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}
.counting-item .h1 {
  font-size: 66px;
  line-height: 1;
}
#blue-overlay {
  position: relative;
  right: 0;
  bottom: 0;
  top: 10;
  width: 100vw;
  height: auto;
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  z-index: 2;
  opacity: 1.0
}
.blue-overlay {
  display: block;
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 1.0;
}
.section-title-special {
  text-align: center;
  font-size: 17px;
  line-height: 23px;
  margin: 0 0 40px;
  z-index: 3;
}
.section-title-special h2 {
  font-size: 38px;
  line-height: 40px;
  margin: 0 0 30px;
}
.section-title-special p {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 1.2px;
  font-weight: 300;
}
.section-title-special-right {
  text-align: right;
  font-size: 17px;
  line-height: 23px;
  margin: 0 0 40px;
  z-index: 3;
}
.section-title-special-right h2 {
  font-size: 38px;
  line-height: 40px;
  margin: 0 0 30px;
}
.section-title-special-right p {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 1.2px;
  font-weight: 300;
}
/***********************
 ******** Maps ********
 **********************/
.map-mineral-list {
        list-style-type: none;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .map-mineral-item {
        flex: 1 1 calc(25% - 10px);
        margin: 5px;
        text-align: left;
    }

    .map-mineral-item a {
        display: block;
        padding: 0px;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    @media (max-width: 768px) {
        .map-mineral-item {
            flex: 1 1 calc(50% - 10px);
            /* Two items per row on medium screens */
        }
    }

    @media (max-width: 480px) {
        .map-mineral-item {
            flex: 1 1 100%;
            /* One item per row on small screens */
        }
    }
/******************************
 * Mineral Valuation Model
 ******************************/
.valuation-model {
  position: relative;
  width: 100%;
  max-width: 700px;
  table {
    thead {
      background-color: transparent !important;
      border-bottom: 1px solid var(--coolGrey50) !important;
    }
    thead tr {
      border-bottom: 1px solid var(--coolGrey50) !important;
      background: transparent !important;
      background-color: transparent !important;
    }
    tbody {
      color: var(--bs-heading-color);
      tr {
        &amp;:hover {
          background-color: var(--coolGrey25) !important;
        }
      }
    }
    tr th:first-child, tr td:first-child {
      border-top-left-radius: 0.0rem;
      border-bottom-left-radius: 0.0rem;
    } 
    tr th:last-child, tr td:last-child {
      border-top-right-radius: 0.0rem;
      border-bottom-right-radius: 0.0rem;
    } 
  }
}
.valuation-model input:hover {
}

.metric-border .profit-measures .content {
  overflow: hidden;
}
.metric-border .profit-measures .content table {
  overflow-x: auto;
  display: inline-table;
}
.profit-measures table caption {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
.profit-row-left {
    border-radius: 5px 0 0 5px;
    padding:5px;
}
.profit-row-right {
    border-radius: 0 5px 5px 0;
    padding:5px;
}
.profit-row-mid {
    padding:5px;
}
.parameter-inputs {
    margin-top: 20px;
}
.parameter-inputs table {
    min-width: 180px;
    padding: 5px;
}
.parameter-inputs table tbody tr:hover {
    background:none;
}
.parameter-inputs table caption {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.valuation-table thead tr {
/*    background: #F1F1F1;*/
    font-size: 14px;
}
.valuation-table tbody tr {
    font-size: 14px;
}
.valuation-title {
    font-weight:700;
    font-size: 16px;
}
.valuation-main-title {
    font-weight: 700;
}
.parameter-head-border-left {
    border-radius: 5px 0 0 5px;
    width: 100px;
    padding:5px;
}
.parameter-head-border-right {
    border-radius: 0 5px 5px 0;
    width: 100px;
    padding:5px;
}
.profit-head-border-left {
    border-radius: 5px 0 0 5px;
    padding:5px;
}
.profit-head-border-right {
    border-radius: 0 5px 5px 0;
    padding:5px;
}
.profit-head-border-mid {
    padding:5px;
}
.metric-border {
    background: #fff;
    color: var(--bs-heading-color);
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}
.assign-btn-border {
    background: #fff;
    border: solid 1px #F1F1F1;
    border-radius: 10px;
    padding: 20px;
    /* margin: auto; */
    width: auto;
    max-width: 500px;
    display: flex;
}
.input-modal {
    border-radius: 0.5rem;
    color: var(--bs-heading-color);
/*    box-shadow: 1 1;*/
    border: solid 1px #fff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    padding: 0.25rem 0.4rem;
    font-size: 14px;
    font-weight: 400;
    background-color: var(--coolGrey25);
    border: solid 1px var(--coolGrey50);
    border-color: var(--coolGrey50);
    border-style: solid;
    border-width: 1px;
    outline: 0;
    &amp;:focus {
      background-color: var(--coolGrey37);
      border-color: rgba(37,196,242,0.1) !important;
      -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
      -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
      -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
      -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
      box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    }
}
.valuation-results {
    margin-top: 15px;
}
.valuation-results table {
    width: 100%;
    font-size: 14px;
}
.valuation-results thead tr {
/*    background: #F1F1F1;*/
    font-size: 14px;
}
.valuation-results .metric-border .content {
    overflow: hidden;
}
.valuation-results .metric-border .content table {
  overflow: auto;
  display: inline-table;
}
.data-head-border-left {
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding:5px;
}
.data-head-border-right {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding:5px;
}
.data-head-border-mid {
    padding:5px;
}
.data-row-left {
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding:5px;
}
.data-row-right {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding:5px;
}
.data-row-mid {
    padding:5px;
}
/*.data-row-mid-phone {
    padding:5px;
    min-width: 200px;
}*/
.parameter-buttons {
    display: inline;
    float:right;
    margin: 10px 0 10px 0;
    position: relative;
}
.results-label {
    font-weight:700;
    margin: 10px 0 0 0;
}
.parameter-label {
    font-weight:700;
}
/***********************
 * Areas of Interest
 **********************/
.areas-of-interest {
  background-image: url(https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/US_map_blue_gradient_permian_basin.jpg);
    background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  position: relative;
    right: 20px;
  height: 500px;
  width: 100%;
  margin: 20px;
}
@media only screen and (max-width: 1199px) {
    .areas-of-interest {
        background-image: url(https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/US_map_blue_gradient_permian_basin.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        position: relative;
        right: 20px;
        height: 500px;
        width: 100%;
        margin: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .areas-of-interest {
        background-image: url(https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/US_map_blue_gradient_permian_basin.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        position: relative;
        right: 20px;
        height: 350px;
        width: 100%;
        margin: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .areas-of-interest {
        background-image: url(https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/US_map_blue_gradient_permian_basin.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        position: relative;
        right: 20px;
        height: 250px;
        width: 100%;
        margin: 20px;
    }
}

@media (max-width: 479px) {
    .areas-of-interest {
        background-image: url(https://halselloil.s3.us-east-2.amazonaws.com/site_img/banner/US_map_blue_gradient_permian_basin.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        position: relative;
        right: 20px;
        height: 200px;
        width: 100%;
        margin: 20px;
    }
}
/*****************************/
/*    Benefits Flip Card     */
/*****************************/
.benefits-cards {
  display: block;
  width: auto;
  height: auto;
  text-align: center;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
.benefits-cards .section-title {
  z-index: 2;
  position: relative;
}
.benefits-cards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}
.square-flip-2 {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*border:1px solid #efefef;*/
  position: relative;
  margin: 20px;
  width: 400px;
  height: 400px;
}
.square-2, .square2-2 {
  width: 100%;
  height: 100%;
}
.square-2 {
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 5px;
}

.square-flip-2 .square-2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.square-flip-2:hover .square-2 {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.square2-2 {
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  border-radius: 5px;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.square-flip-2 .square2-2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.square-flip-2:hover .square2-2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
/*Square content*/
.square-container-2 {
  padding: 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) scale(1);
  transform: translateY(-50%) translateX(0px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
.square-flip-2:hover .square-container-2 {
  -webkit-transform: translateY(-50%) translateX(-650px) scale(.88);
  -ms-transform: translateY(-50%) translateX(-650px) scale(.88);
  transform: translateY(-50%) translateX(-650px) scale(.88);
  transform-style: preserve-3d;
}
.square-container2-2 {
  padding: 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  transform-style: preserve-3d;
  z-index: 2;
}
.square-flip-2:hover .square-container2-2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}
/*Style text*/
.square-flip-2 h2 {
  color: white;
}
.square-flip-2 h3 {
  color: white;
  line-height: 26px;
}
.square-flip-2 h4 {
  color: white;
  line-height: 26px;
}
.square-flip-2 h5 {
  color: white;
  line-height: 26px;
}
/*Elements*/
.flip-overlay-2 {
  display: block;
  background: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  border: solid 2px #379ADB;
  border-radius: 5px;
  top: 0;
}
.blue-overlay-2 {
  display: block;
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  width: 100%;
  height: 100%;
  border: solid 2px #379ADB;
  border-radius: 5px;
  position: absolute;
  top: 0;
  opacity: 1.0;
}
.align-center {
  margin: 0 auto;
}
.kallyas-button-2 {
  display: block;
  width: 160px;
  padding: 18px 30px;
  font-family: "Open Sans";
  font-weight: 600;
  color: #fff;
  background: #FF2024;
  margin: 0 auto;
  border-radius: 2px;
  text-decoration: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa067+0,ff2959+49,ff2024+100 */
  background: #ffa067; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffa067 0%, #ff2959 49%, #ff2024 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa067', endColorstr='#ff2024', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*ADD SHADOWS OPTIONAL*/
.square-flip-2 .square-2 .boxshadow, .square-flip-2 .square-2 .textshadow, .square-flip-2 .square2-2 .boxshadow, .square-flip-2 .square2-2 .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}
.square-flip-2 .square-2 .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.square-flip-2 .square-2 .textshadow {
  -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.square-flip-2:hover .square-2 .boxshadow, .square-flip-2:hover .square-2 .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.square-flip-2 .square2-2 .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.square-flip-2 .square2-2 .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.square-flip-2:hover .square2-2 .boxshadow, .square-flip-2:hover .square2-2 .textshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.operations-icon .icon {
  font-size: 100px;
  line-height: 1;
  margin: 0 0 10px;
  color:#3791D8;
}
/********************
 * About Page
 ********************/
.about-square-flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*border:1px solid #efefef;*/
  position: relative;
  margin: 20px;
  width: 320px;
  height: 320px;
}
.about-square, .about-square2 {
  width: 100%;
  height: 100%;
}
.about-square {
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
}
.about-square-flip .about-square {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.about-square-flip:hover .about-square {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.about-square2 {
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
}
.about-square-flip .about-square2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.about-square-flip:hover .about-square2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
/*Square content*/
.about-square-container {
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(6px) scale(1);
  -ms-transform: translateY(-50%) translateX(6px) scale(1);
  transform: translateY(-50%) translateX(6px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
/*.front-card {
  width: 100%;
  height: 100%;
}*/
.about-square-flip:hover .about-square-container {
  -webkit-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  -ms-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform-style: preserve-3d;
}
.about-square-container2 {
  padding: 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
.about-square-flip:hover .about-square-container2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}
/*Style text*/
.about-square-flip h2 {
  color: var(--bs-heading-color);
}
.about-square-flip h3 {
  color: var(--bs-heading-color);
  margin-top: -22px;
}
.about-square-flip h4 {
  color: var(--bs-heading-color);
  line-height: 26px;
}
.about-square-flip h5 {
  color: var(--bs-heading-color);
  line-height: 26px;
}
/*Elements*/
.about-flip-overlay {
  display: block;
  /*background: rgba(0,0,0,0.6);*/
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
/*  border-left: solid 2px #379ADB;*/
  border-left: 4px solid rgba(0, 110, 255, 0.9) !important;
  border-radius: 1rem;
  top: 0;
}
.about-blue-overlay {
  display: block;
  background: linear-gradient(310deg, #032499 0%, #21d4fd 100%);
  width: 100%;
  height: 100%;
  position: absolute;
/*  border: solid 2px #379ADB;*/
  border-radius: 1rem;
  top: 0;
  opacity: 1.0;
}
/*ADD SHADOWS OPTIONAL*/
.about-square-flip .about-square .boxshadow, .about-square-flip .about-square .textshadow, .about-square-flip .about-square2 .boxshadow, .about-square-flip .about-square2 .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}
/*.about-square-flip .about-square .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip .about-square .textshadow {
  -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip:hover .about-square .boxshadow, .about-square-flip:hover .about-square .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip:hover .about-square2 .boxshadow, .about-square-flip:hover .about-square2 .textshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}*/
.about-flipcard-icon .icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  /*font-size: 100px;
  line-height: 1;
  margin: 0 0 10px;
  color:#3791D8;*/
}
.about-centerflipcards {
  display: block;
  width: 1330px;
  height: 440px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 200px;
}
.about-centerflipcards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}

/***************************
 * Investment Opportunity
 **************************/
.io-square-flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*border:1px solid #efefef;*/
  position: relative;
  margin: 20px;
  width: 300px;
  height: 300px;
}
.io-square, .io-square2 {
  width: 100%;
  height: 100%;
}
.io-square {
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -moz-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -ms-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  -o-box-shadow: 0 1px 2px 0 var(--coolGrey50);
  box-shadow: 0 1px 2px 0 var(--coolGrey50);
  /*-webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;*/
}
.io-square-flip .io-square {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.io-square-flip:hover .io-square {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.io-square2 {
  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
}
.io-square-flip .io-square2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.io-square-flip:hover .io-square2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
/*Square content*/
.io-square-container {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  top: 50%;
  background-color: var(--coolGrey37);
  border-color: var(--coolGrey100_alpha75);
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 1rem;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) scale(1);
  transform: translateY(-50%) translateX(0px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
  &amp; .more-info {
    position: absolute;
    padding: 0.25rem 0.5rem;
    bottom: 10px;
    right: 10px;
    border-color: var(--coolGrey100_alpha75);
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0.6rem;
    background-color: #fff;
    &amp; p {
      margin-bottom: 0;
      font-size: 0.75rem;
      font-weight: 500;
    }
  }
}
/*.front-card {
  width: 100%;
  height: 100%;
}*/
.io-square-flip:hover .io-square-container {
  -webkit-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  -ms-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform-style: preserve-3d;
}
.io-square-container2 {
  padding: 20px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}
.io-square-flip:hover .io-square-container2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}
/*Style text*/
.io-square-flip h2 {
  color: var(--bs-heading-color);
}
.io-square-flip h3 {
  color: var(--bs-heading-color);
  margin-top: -22px;
}
.io-square-flip h4 {
  color: var(--bs-heading-color);
  line-height: 26px;
}
.io-square-flip h5 {
  color: var(--bs-heading-color);
  line-height: 26px;
}
/*Elements*/
.io-flip-overlay {
  display: block;
  /*background: rgba(0,0,0,0.6);*/
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
/*  border-left: solid 2px #379ADB;*/
  /*border-color: var(--coolGrey100_alpha75);
  border-width: 1px !important;
  border-style: solid !important;*/
  border-radius: 1rem;
  top: 0;
}
.io-blue-overlay {
  display: block;
  background: linear-gradient(310deg, #032499 0%, #21d4fd 100%);
  width: 100%;
  height: 100%;
  position: absolute;
/*  border: solid 2px #379ADB;*/
  border-radius: 1rem;
  top: 0;
  opacity: 1.0;
}
.io-black-overlay {
  display: block;
  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);
  width: 100%;
  height: 100%;
  position: absolute;
/*  border: solid 2px #379ADB;*/
  border-radius: 1rem;
  top: 0;
  opacity: 1.0;
}
/*ADD SHADOWS OPTIONAL*/
.io-square-flip .io-square .boxshadow, .io-square-flip .io-square .textshadow, .io-square-flip .io-square2 .boxshadow, .io-square-flip .io-square2 .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}
/*.about-square-flip .about-square .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip .about-square .textshadow {
  -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip:hover .about-square .boxshadow, .about-square-flip:hover .about-square .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip:hover .about-square2 .boxshadow, .about-square-flip:hover .about-square2 .textshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}*/
.io-flipcard-icon .icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  /*font-size: 100px;
  line-height: 1;
  margin: 0 0 10px;
  color:#3791D8;*/
}
.io-centerflipcards {
  display: block;
  width: 1330px;
  height: 440px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 200px;
}
/*.io-centerflipcards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}*/

/***************************
 * Dark Flip Cards
 **************************/
.dark-square-flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /*border:1px solid #efefef;*/
  position: relative;
  margin: 20px;
  width: 300px;
  height: 300px;
}
.dark-square, .dark-square2 {
  width: 100%;
  height: 100%;
}
.dark-square {
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1);
  -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1);
  -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1);
  -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1);
  box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1);
  /*-webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.4) !important;*/
}
.dark-square-flip .dark-square {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.dark-square-flip:hover .dark-square {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
}
.dark-square2 {
/*  background: radial-gradient( #379ADB 0%, #3C7DD1 40%, #001A6C 100%);*/
  background-size: cover;
  background-position: center center;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  /*-webkit-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -moz-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -ms-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  -o-box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;
  box-shadow: 0 23px 45px -11px rgba(20, 20, 20, 0.5) !important;*/
  -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
  -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
  -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
  -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
  box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
}
.dark-square-flip .dark-square2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  z-index: 1;
}
.dark-square-flip:hover .dark-square2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
/*Square content*/
.dark-square-container {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  top: 50%;
/*  background-color: #24272b;*/
  background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
  border-color: rgba(var(--coolGrey800rgb), 1);
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 1rem;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) scale(1);
  transform: translateY(-50%) translateX(0px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
  &amp; .more-info {
    position: absolute;
    padding: 0.25rem 0.5rem;
    bottom: 10px;
    right: 10px;
    border-color: rgb(var(--coolGrey800rgb), 1);
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0.6rem;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    &amp; p {
      margin-bottom: 0;
      font-size: 0.75rem;
      font-weight: 500;
    }
  }
}
/*.front-card {
  width: 100%;
  height: 100%;
}*/
.dark-square-flip:hover .dark-square-container {
  -webkit-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  -ms-transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform: translateY(-50%) translateX(-100px) translateZ(0) scale(1);
  transform-style: preserve-3d;
}
.dark-square-container2 {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
  &amp; .btn-features, .btn:not([class*=btn-outline-]) {
    color: rgba(var(--coolGrey25rgb),1) !important;
    width: 94%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    left:10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    border-color: rgb(var(--coolGrey800rgb), 1);
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0.6rem;
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    -webkit-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
    -moz-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
    -ms-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
    -o-box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
    box-shadow: 0 0px 0px 4px rgb(var(--coolGrey400rgb), 0.1) !important;
    &amp;:hover {
        border-color: rgb(var(--z-green50), 0.7);
        -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
        -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
        -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
        -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
        box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    }
  }
}
.dark-square-flip:hover .dark-square-container2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}
/*Style text*/
.dark-square-flip h2 {
  color: rgb(var(--z-white-rgb),1) !important;
}
.dark-square-flip h3 {
  color: rgb(var(--z-white-rgb),1) !important;
  margin-top: -22px;
}
.dark-square-flip h4 {
  color: rgb(var(--z-white-rgb),1) !important;
  line-height: 26px;
}
.dark-square-flip h5 {
  color: rgb(var(--z-white-rgb),1) !important;
  line-height: 26px;
}
/*Elements*/
.dark-flip-overlay {
  display: block;
  /*background: rgba(0,0,0,0.6);*/
  background: #24272b;
  width: 100%;
  height: 100%;
  position: absolute;
/*  border-left: solid 2px #379ADB;*/
  /*border-color: var(--coolGrey100_alpha75);
  border-width: 1px !important;
  border-style: solid !important;*/
  border-radius: 1rem;
  top: 0;
}
.dark-blue-overlay {
  display: block;
  background: linear-gradient(310deg, #032499 0%, #21d4fd 100%);
  width: 100%;
  height: 100%;
  position: absolute;
/*  border: solid 2px #379ADB;*/
  border-radius: 1rem;
  top: 0;
  opacity: 1.0;
}
.dark-black-overlay {
  display: block;
/*  background-image: linear-gradient(310deg, #000421 0%, #171717 100%);*/
  background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
  width: 100%;
  height: 100%;
  position: absolute;
/*  border-color: rgba(var(--coolGrey800rgb), 1);*/
  border-color: rgb(var(--z-green50), 0.5);
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 1rem;
  top: 0;
  opacity: 1.0;
  -webkit-box-shadow: 0 0px 2px 4px rgb(var(--coolGrey100rgb), 0.1);
  -moz-box-shadow: 0 0px 2px 4px rgb(var(--coolGrey100rgb), 0.1);
  -ms-box-shadow: 0 0px 2px 4px rgb(var(--coolGrey100rgb), 0.1);
  -o-box-shadow: 0 0px 2px 4px rgb(var(--coolGrey100rgb), 0.1);
  box-shadow: 0 0px 2px 4px rgb(var(--coolGrey100rgb), 0.1);
}
/*ADD SHADOWS OPTIONAL*/
.dark-square-flip .dark-square .boxshadow, .dark-square-flip .dark-square .textshadow, .dark-square-flip .dark-square2 .boxshadow, .dark-square-flip .dark-square2 .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}
/*.about-square-flip .about-square .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip .about-square .textshadow {
  -webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}
.about-square-flip:hover .about-square .boxshadow, .about-square-flip:hover .about-square .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip .about-square2 .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
  text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
}
.about-square-flip:hover .about-square2 .boxshadow, .about-square-flip:hover .about-square2 .textshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
  box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
}*/
.dark-flipcard-icon .icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  /*font-size: 100px;
  line-height: 1;
  margin: 0 0 10px;
  color:#3791D8;*/
}
.dark-centerflipcards {
  display: block;
  width: 1330px;
  height: 440px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 200px;
}
/*.dark-centerflipcards p {
  font-family: "Open Sans";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}*/

/*********************
 * Image Background
 *********************/

.image-bg-wrapper {
  position: relative;
  padding: 0px 0 0px;
  background-size: cover;
  background-position: center center;
}
.image-bg-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}
.image-bg-wrapper.overlay-black:before {
  background: rgba(0, 0, 0, 0.7);
}
.image-bg-wrapper.overlay-white:before {
  background: rgba(255, 255, 255, 0.9);
}
.image-bg-wrapper.no-overlay:before {
  display: none;
}
.image-bg-wrapper h1, .image-bg-wrapper h2, .image-bg-wrapper h3, .image-bg-wrapper h4, .image-bg-wrapper h5, .image-bg-wrapper h6 {
}
.image-bg-wrapper-2 {
  position: relative;
  padding: 0px 0 0px;
  position: relative;
  background-size: cover;
  background-position: center center;
}
.image-bg-wrapper-2:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}
.image-bg-wrapper-2.overlay-black:before {
  background: rgba(0, 0, 0, 0.7);
}
.image-bg-wrapper-2.overlay-white:before {
  background: rgba(255, 255, 255, 0.5);
}
.image-bg-wrapper-2.no-overlay:before {
  display: none;
}
.image-bg-wrapper-2 h1, .image-bg-wrapper-2 h2, .image-bg-wrapper-2 h3, .image-bg-wrapper-2 h4, .image-bg-wrapper-2 h5, .image-bg-wrapper-2 h6 {
}
.featured-resources-bg-none {
  padding: 20px;
  background: none;
}
.bg-none {
  background: none !important;
}
.featured-resources-bg {
  width: 300px;
  height: 200px;
  padding: 20px 0px;
  border: solid 2px #002391;
  border-radius: 5px;
  background: rgba(255,255,255,0.5);
}
.featured-resources-bg:hover {
  padding: 20px;
  border: solid 2px #002391;
  border-radius: 5px;
  background: rgba(255,255,255,0.8);
}
.featured-bg {
  position: relative;
  padding: 20px;
  border: solid 2px transparent;
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.5);
}
.featured-bg:hover {
  padding: 20px;
  border: solid 2px #21D4FD;
  background: rgba(255,255,255,1) !important;
}
.featured-item-text {
  margin: 15px 0;
}
.featured-item-text h4 {
  border-bottom: 1px solid #B270B5;
  padding-bottom: 10px;
  margin: 0 0 15px;
  letter-spacing: 2px;
}
.featured-item-01 {
  text-align: center;
  line-height: 22px;
  margin-bottom: 30px;
}
.featured-item-01 .icon {
  font-size: 64px;
}
.featured-item-01 h3 {
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 2px;
  margin: 20px 10px 15px;
  font-weight: 400;
}
.featured-item-01.ph {
  padding: 0 10px;
}
.featured-icon .icon {
  font-size: 70px;
  line-height: 1;
  margin: 0 0 10px;
  -ms-align-items: center;
  align-items: center;
  color: #002392;
}
.featured-icon h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 1.2;
  color: #181818;
}
.featured-icon p {
  font-size: 16px;
  line-height: 1.2;
}
.featured-icon a {
  color: #fff;
}
.featured-icon a:hover {
  color: #0272E9;
}
/****************************
 ------- Product Tour -------
 ****************************/
 .introjs-overlay{
     position:absolute;
    box-sizing:content-box;
    z-index:999999;
    opacity:0;
    transition:all .3s ease-out 
}
 .introjs-showElement{
    z-index:9999999!important
}
tr.introjs-showElement&gt;td{
    z-index:9999999!important;
    position:relative
}
tr.introjs-showElement&gt;th{
    z-index:9999999!important;
    position:relative
}
.introjs-disableInteraction{
    z-index:99999999!important;
    position:absolute;
/*    background-color:#fff;*/
    background-image: linear-gradient(310deg, rgba(var(--z-dark-200), 1) 0%, rgba(var(--z-dark-100), 1) 100%);
    opacity:0
}
.introjs-relativePosition{
    position:relative;
}
.introjs-helperLayer{
    box-sizing:content-box;
    position:absolute;
    z-index:9999998;
    border-radius:4px;
    transition:all .3s ease-out
}
.introjs-helperLayer *{
    box-sizing:content-box
}
.introjs-helperLayer :before{
    box-sizing:content-box
}
.introjs-helperLayer :after{
    box-sizing:content-box
}
.introjs-tooltipReferenceLayer{
    font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;
    box-sizing:content-box;
    position:absolute;
    visibility:hidden;
    z-index:100000000;
    background-color:transparent;
    transition:all .3s ease-out;
}
.introjs-tooltipReferenceLayer *{
    font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;
}
.introjs-helperNumberLayer{
    font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;
    color:rgba(var(--coolGrey25rgb),1);
    text-align:center;
    padding-top:10px;
    padding-bottom:10px
}
.introjs-arrow{
    border:5px solid transparent;
    content:"";
    position:absolute;
}
.introjs-arrow.top{
    top:-10px;
    left:10px;
    border-bottom-color:#24272b;
}
.introjs-arrow.top-right{
    top:-10px;
    right:10px;
    border-bottom-color:#24272b;
}
.introjs-arrow.top-middle{
    top:-10px;
    left:50%;
    margin-left:-5px;
    border-bottom-color:#24272b;
}
.introjs-arrow.right{
    right:-10px;
    top:10px;
    border-left-color:#24272b;
}
.introjs-arrow.right-bottom{
    bottom:10px;
    right:-10px;
    border-left-color:#24272b;
}
.introjs-arrow.bottom{
    bottom:-10px;
    left:10px;
    border-top-color:#24272b;
}
.introjs-arrow.bottom-right{
    bottom:-10px;
    right:10px;
    border-top-color:#24272b;
}
.introjs-arrow.bottom-middle{
    bottom:-10px;
    left:50%;
    margin-left:-5px;
    border-top-color:#24272b;
}
.introjs-arrow.left{
    left:-10px;
    top:10px;
    border-right-color:#24272b;
}
.introjs-arrow.left-bottom{
    left:-10px;
    bottom:10px;
    border-right-color:#24272b;
}
.introjs-tooltip{
    box-sizing:content-box;
    position:absolute;
    visibility:visible;
/*    background-color:#fff;*/
    background-image: linear-gradient(310deg, rgba(var(--z-dark-200), 1) 0%, rgba(var(--z-dark-100), 1) 100%);
    min-width:250px;
    max-width:300px;
    border-radius: 0.5rem !important;
    box-shadow:0 3px 30px rgba(33,33,33,.3);
    transition:opacity .1s ease-out
}
.introjs-tooltiptext{
    padding:20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(var(--coolGrey25rgb),1);
}
.introjs-dontShowAgain{
    padding-left:20px;
    padding-right:20px
}
.introjs-dontShowAgain input{
    padding:0;
    margin:0;
    margin-bottom:2px;
    display:inline;
    width:10px;
    height:10px
}
.introjs-dontShowAgain label{
    font-size:14px;
    display:inline-block;
    font-weight:400;
    margin:0 0 0 5px;
    padding:0;
    background-color: transparent;
    color:rgba(var(--coolGrey25rgb),1);
    -webkit-user-select:none;
    user-select:none
}
.introjs-tooltip-title{
    font-size:18px;
    width:90%;
    min-height:1.5em;
    margin:0;
    padding:0;
    font-weight:700;
    line-height:1.5;
    color: rgba(var(--coolGrey25rgb),1);
}
.introjs-tooltip-header{
    position:relative;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    min-height:1.5em
}
.introjs-tooltipbuttons{
    border-top:1px solid transparent !important;
    padding:10px;
    text-align:right;
    white-space:nowrap
}
.introjs-tooltipbuttons:after{
    content:"";
    visibility:hidden;
    display:block;
    height:0;
    clear:both
}
.introjs-button{
    box-sizing:content-box;
    position:relative;
    overflow:visible;
    padding:.25rem 1rem;
    border:1px solid rgb(var(--coolGrey800rgb), 1) !important;
    text-decoration:none;
    text-shadow: none !important;
    font-size:14px;
    font-weight: 500;
    color: rgba(var(--coolGrey25rgb),1) !important;
    white-space:nowrap;
    cursor:pointer;
    outline:0;
    /*background-color:#f4f4f4;*/
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    border-radius:.5rem !important;
    zoom:1;
    display:inline
}
.introjs-button:focus{
    outline:0;
    text-decoration:none;
    /*background-color:#eee;*/
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    border-color: rgb(var(--z-green50), 0.7);
    -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
/*    border:1px solid #616161;*/
    color: rgba(var(--coolGrey25rgb),1);
}
.introjs-button:hover{
    outline:0;
    text-decoration:none;
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    border-color: rgb(var(--z-green50), 0.7);
    -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    color:rgb(var(--z-green50), 0.7) !important;
}
/*.introjs-button:hover.introjs-disable {
    background-color: var(--bs-gray-100);
}*/
.introjs-button:active{
    outline:0;
    text-decoration:none;
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    border-color: rgb(var(--z-green50), 0.7);
    -webkit-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -moz-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -ms-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    -o-box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    box-shadow: 0 0px 0px 4px rgb(var(--z-green50), 0.1) !important;
    color:rgb(var(--z-green50), 0.7) !important;
}
.introjs-button::-moz-focus-inner{
    padding:0;
    border:0
}
.introjs-skipbutton{
    position:absolute;
    top:0;
    right:0;
    display:inline-block;
    width:45px;
    height:45px;
    line-height:45px;
    color:rgba(var(--coolGrey25rgb),1);
    font-size:22px;
    cursor:pointer;
    font-weight:700;
    text-align:center;
    text-decoration:none
}
.introjs-skipbutton:focus,.introjs-skipbutton:hover{
    color: rgba(var(--coolGrey25rgb),0.7);
    outline:0;
    text-decoration:none
}
.introjs-prevbutton{
    float:left;
}
.introjs-nextbutton{
    float:right;
}
.introjs-disabled{
    color:rgb(var(--coolGrey800rgb), 1) !important;
    border-color:rgb(var(--coolGrey800rgb), 1);
    box-shadow:none;
    cursor:default;
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    text-decoration:none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.introjs-disabled:focus,.introjs-disabled:hover{
    color: rgb(var(--coolGrey800rgb), 1) !important;
    border-color:rgb(var(--coolGrey800rgb), 1);
    box-shadow:none;
    cursor:default;
    background-color: #24272b;
    background-image: linear-gradient(180deg, #26282d, #24272b 53.65%, #232529);
    text-decoration:none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}
.introjs-hidden{
    display:none
}
.introjs-bullets{
    text-align:center;
    padding-top:10px;
    padding-bottom:10px
}
.introjs-bullets ul{
    box-sizing:content-box;
    clear:both;
    margin:0 auto 0;
    padding:0;
    display:inline-block
}
.introjs-bullets ul li{
    box-sizing:content-box;
    list-style:none;
    float:left;
    margin:0 2px
}
.introjs-bullets ul li a{
    transition:width .1s ease-in;
    box-sizing:content-box;
    display:block;
    width:6px;
    height:6px;
    background: transparent !important;
    background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%) !important;
    border-radius:10px;
    text-decoration:none;
    cursor:pointer
}
.introjs-bullets ul li a:focus,.introjs-bullets ul li a:hover{
    width:15px;
    background: transparent !important;
    background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%) !important;
    text-decoration:none;
    outline:0
}
.introjs-bullets ul li a.active{
    width:15px;
    background: transparent !important;
    background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%) !important;
}
.introjs-progress{
    box-sizing:content-box;
    overflow:hidden;
    height:10px;
    margin:10px;
    border-radius:4px;
    background-color:#e0e0e0
}
.introjs-progressbar{
    box-sizing:content-box;
    float:left;
    width:0%;
    height:100%;
    font-size:10px;
    line-height:10px;
    text-align:center;
    background-color:#08c
}
.introjsFloatingElement{
    position:absolute;
    height:0;
    width:0;
    left:50%;
    top:50%
}
.introjs-fixedTooltip{
    position:fixed;
    -webkit-box-shadow: rgb(37,196,242,0.9) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
    -moz-box-shadow: rgb(37,196,242,0.9) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
    -ms-box-shadow: rgb(37,196,242,0.9) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
    -o-box-shadow: rgb(37,196,242,0.9) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
    box-shadow: rgb(37,196,242,0.9) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
}
.introjs-hint{
    box-sizing:content-box;
    position:absolute;
    background:0 0;
    width:20px;
    height:15px;
    cursor:pointer
}
.introjs-hint:focus{
    border:0;
    outline:0
}
.introjs-hint:hover&gt;.introjs-hint-pulse{
    background-color:rgba(60,60,60,.57)
}
.introjs-hidehint{
    display:none
}
.introjs-fixedhint{
    position:fixed
}
@keyframes introjspulse{
    0%{
        transform:scale(.95);
        box-shadow:0 0 0 0 rgba(0,0,0,.7)
    }
    70%{
        transform:scale(1);
        box-shadow:0 0 0 10px transparent
    }
    100%{
        transform:scale(.95);
        box-shadow:0 0 0 0 transparent
    }
}
.introjs-hint-pulse{
    box-sizing:content-box;
    width:15px;
    height:15px;
    border-radius:30px;
    background-color:rgba(136,136,136,.24);
    z-index:10;
    position:absolute;
    transition:all .2s ease-out;
    animation:introjspulse 2s infinite
}
.introjs-hint-no-anim .introjs-hint-pulse{
    animation:none
}
.introjs-hint-dot{
    box-sizing:content-box;
    background:0 0;
    border-radius:60px;
    height:50px;
    width:50px;
    position:absolute;
    top:-18px;
    left:-18px;
    z-index:1;
    opacity:0
}

.highlighted-dt-row{
  background-color: rgba(0, 123, 255, 0.1);
}
@media (max-width: 1200px) {
  .introjs-fixedTooltip {
    opacity: 0 !important;
  }
  .introjs-tooltip {
    display: none !important;
  }
}
/************************
  -- Main Email --
 ***********************/
.sidenav-toggler {
    position: relative;
    background-color: transparent;
    height: 32px;
    width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    &amp;:hover {
      background-color: var(--coolGrey50);
    }
}
.sidenav-email {
  top: 50px !important;
  background-color: #fff !important;
  box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
  /*left: -370px !important;
  width: 350px !important;
  max-width: 350px;*/
  overflow-x: hidden;
}
.sidenav-email .sidenav-header {
  height: 1.25rem;
}
/*.navbar-vertical.sidenav-email .navbar-nav .nav-link.btn-email-compose .icon {
  width: 100%;
  cursor: pointer;
  background-image: linear-gradient(310deg, rgba(219, 94, 206, 1) 0%, rgba(255, 158, 244, 1) 100%);
}*/
.navbar-vertical.sidenav-email .navbar-nav&gt;.nav-item .nav-link.btn-email-compose .icon svg .color-background, 
.navbar-vertical.sidenav-email .navbar-nav&gt;.nav-item .nav-link.btn-email-compose .icon svg .color-foreground {
  fill: #fff;
}
.btn-email-compose-text {
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  margin-left: 0.5rem;
}
.navbar-vertical.sidenav-email .navbar-collapse {
  overflow-x: hidden;
  overflow-y: auto;
}
.sidenav-email.show {
  left: -5px !important;
}
/*.sidenav-header {
  height: 3.075rem;
}*/
@media (min-width: 1200px) {
  /*.sidenav-email {
    max-width: 6rem !important;
  }*/
  .sidenav-email {
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .sidenav.sidenav-email.show~.main-content {
    margin-left: 17.125rem;
  }
  .g-sidenav-hidden .navbar-vertical.sidenav-email .nav-item .nav-link.btn-email-compose .btn-email-compose-text, 
  .g-sidenav-hidden .navbar-vertical.sidenav-email .nav-item .nav-link.btn-email-compose .sidenav-normal {
    display: none;
  }
}

/************************
  -- Chat/Email Widget --
 ***********************/
.main-chat-wrapper {
  position: absolute;
  width: auto;
  top: 11px;
  bottom: 67px;
  left: 10px;
  right: 10px;
/*box-shadow: none !important;*/
/*height: 90vh;*/
  box-shadow: none;
  overflow: hidden;
}
.chat-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
}
.sidenav-chat {
  top: 52px !important;
  left: -370px !important;
  width: 350px !important;
  max-width: 350px !important;
}
.card.sidenav-chat.show {
  left: -5px !important;
/*  height: 100%;*/
  overflow: hidden !important;
}
.sidenav-crm {
  top: 35px !important;
  right: -370px !important;
  width: 350px !important;
  max-width: 350px !important;
}
.card.sidenav-crm.show {
  right: 0px !important;
/*  height: 100%;*/
  overflow: hidden !important;
}
@media (min-width: 1200px) {

  /*.sidenav.fixed-start~.main-content {
    margin-left: 22.125rem;
  }*/

  .sidenav.sidenav-chat.show~.main-content {
    margin-left: 22.6rem;
  }
  .sidenav.sidenav-crm.show~.main-content {
    margin-right: 22.6rem;
  }
}
.card .card-body.sidenav-chat-body {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100% !important;
  width: auto;
  padding: 0;
  padding-bottom: 180px;
/*  margin-right: 0.25rem;*/
}
/*.chat-main-message-body-text {
  --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: fit-content;
    float: right;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
/*    background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    border-radius: 0.75rem;
    box-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !important;
}*/
.chat-main-message-body-doc {
  --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    color: var(--bs-body-color);
    border-radius: 0.75rem;
/*    box-shadow: 0 2px 8px -4px rgba(20, 20, 20, 0.15), 0 1px 1px -5px rgba(20, 20, 20, 0.06) !important;*/
}
.non-auth-user-chat {
  &amp; .chat-main-message-body-text {
    color: var(--bs-heading-color);
  }
}
.chat-main-message-body-doc {

    &amp; .chat-message-doc {
      position: relative;
      z-index: 1;
      min-width: 150px;
      max-width: 200px;
      height: auto;
      max-height: 200px;
      border-radius: 0.7rem;
      background-color: #fff;
      border: 1px solid var(--bs-gray-200);
/*      box-shadow: 0 3px 5px 0 rgb(0, 0, 0, 25%);*/
      cursor: pointer;
/*      max-width: 100%;*/
      text-align: center;
      overflow: hidden;
      &amp; svg {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin: 0.5rem auto;
      }
    }
    &amp; .chat-doc-filename {
      font-size: 0.75rem;
      margin: 0 0.5rem 0.5rem;
      color: var(--bs-body-color);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
}
.chat-attach-delete {
  color: rgba(var(--pink400), 1);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.chat-attach-doc {
  position: relative;
  &amp;:hover {
    .chat-attach-delete {
      cursor: pointer;
      opacity: 1;
    }
  }
}
.chat-attach-img {
  position: relative;
  max-width: 70px;
  max-height: 48px;
  border-radius: 0.5rem;
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.25);
  &amp; img {
    width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
  }
  &amp;:hover {
    .chat-attach-delete {
      cursor: pointer;
      opacity: 1;
    }
  }
}
.chat-media-preview {
  display: flex !important;
  flex-direction: row !important;
  justify-content: end;
  gap: 1rem;
  flex-wrap: wrap;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding: 0 1.5rem 0 1.5rem;
  bottom: 0px;
  z-index: 3;
/*  height: 50px;*/
/*  background-color: #fff;*/
}
.chat-main-message-body-doc img,
.chat-main-message-body-doc video {
  width: 100%;
  max-width: 500px;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px -4px rgba(20, 20, 20, 0.5), 0 1px 1px -5px rgba(20, 20, 20, 0.6) !important;
}
.main_chat_attachment_trigger {
  position: absolute;
  width: 20px;
  height: 20px;
  left:  0px;
  top: 5px;
  margin-top: 3px;
  color: rgba(103, 116, 142, 0.8);
  cursor: pointer;
}
.main_chat_attachment_trigger:hover {
  color: rgba(37, 245, 210,1);
}
.main-chat-multi-select-container .multiselect {
  border-radius: 0.6rem;
  background: var(--coolGrey50);
  border: none;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  &amp; .multiselect-wrapper {
    &amp; .multiselect-tags {
      &amp; .multiselect-tag {
        color: var(--coolGrey25);
        border-radius: 0.4rem;
        background: rgba(41, 46, 52,1);
        /*background-image: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%);*/
        font-weight: 500;
        &amp; .multiselect-tag-remove {
          color: var(--coolGrey25);
          background-color: transparent;
          &amp;:hover {
            color: #fff;
            background-color: rgba(var(--coolGrey25rgb), 0.25);
          }
        }
      }
      &amp; .multiselect-tags-search-wrapper {
        color: var(--bs-body-color);
        &amp; .multiselect-tags-search {
          color: var(--bs-body-color);
          font-weight: 600;
        }
      }
    }
    &amp; .multiselect-clear {
      .multiselect-clear-icon {
        background-color: var(--bs-body-color);
      }
      &amp;:hover {
        .multiselect-clear-icon {
          background-color: rgba(255, 158, 244, 1);
        }
      }
    }
    &amp; .multiselect-caret {
      display: none;
    }
  }
  &amp; .multiselect-dropdown {
    padding: 0.5rem;
    border: none;
    border-radius: 0.6rem;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
    &amp; .multiselect-options {
      &amp; .multiselect-option {
        color: var(--bs-body-color);
        font-size: 0.875rem;
        border-radius: 0.4rem;
        &amp;:hover {
          background-color: var(--coolGrey50);
        }
      }
      &amp; .multiselect-option.is-pointed {
        color: var(--bs-body-color);
        background-color: var(--coolGrey50);
      }
    }
    &amp; .multiselect-no-results {
      font-size: 0.875rem;
      color: var(--bs-body-color);
    }
  }
}
/*.main-chat-multi-select-container .multiselect::placeholder,
.main-chat-multi-select-container .multiselect .multiselect-wrapper::placeholder {
    color: black;
  }*/
.main-chat-multi-select-container .multiselect.is-active,
.main-chat-multi-select-container .multiselect.is-open {
  border:none;
  border-radius: 0.6rem;
}
.main-chat-multi-select-container .multiselect.is-active {
  -webkit-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
  -moz-box-shadow: 0 0 0 0.125rem rrgba(37, 245, 210,0.4);
  -ms-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
  -o-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
  box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
}
/*.sidenav-header {
  height: 3.075rem;
}*/
.messenger-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-end;
  bottom: 0;
}
.main-chat-thread-header {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  padding: 0 !important;
}
.main-chat-active-avatar {
  position: relative;
  display: flex;
}
.main-chat-active-avatar img {
  border-radius: 50%;
}
.main-chat-add-member {
  position: relative;
  display: flex;
  height: 30px;
  width: 30px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-gray-100);
  cursor: pointer;
}
.main-chat-add-member:hover {
  color: rgba(37, 245, 210, 1);
  background-color: rgba(37, 245, 210, 0.2);
}
.btn-add-chat-thread {
  position: relative;
  display: flex;
  height: 30px;
  width: 30px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--coolGrey50);
  color: var(--bs-body-color);
  cursor: pointer;
  &amp;:hover {
    color: rgba(37, 245, 210, 1);
    background-color: var(--coolGrey100);
  }
}
.avatar-name {
  display: flex;
  line-height: 20px;
  padding-left: 10px;
  align-items: center;
}
.chat-canvas {
    position: relative;
    display: block;
    top: 0;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    min-height: 100vh;
    max-height: 100vh;
}
.main-chat-body {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-right-bottom .modal-dialog {
  position: fixed;
  right: 10px;
  bottom:10px;
}
#chat-app-modal .right-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#chat-app-modal .bottom-part {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#chat-app-modal .sticky-bottom {
  height: 100px;
  position: sticky;
  bottom: 0;
  background-color: #f0f0f0; /* Set the desired background color for the sticky part */
}
#chat-app-modal  .top-part {
  max-height: 60vh; /* Set the desired height */
  min-height: 40vh;
  overflow-y: auto;
}
.chat-footer {
  width: calc(100% - 100px);
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: auto;
  flex-wrap: wrap;
}
.modal-backdrop-transparent {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  z-index: 1040;
  background-color: transparent !important;
}
/*
#chat-app-modal .chat-footer {
  width: 60% !important;
  bottom: 50px;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: auto;
  flex-wrap: wrap;
}
*/
.chat-badge {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    align-items: center;
    justify-content: center;
    --bs-badge-padding-x: 0.25rem;
    --bs-badge-padding-y: 0.3rem;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    min-width: 15px;
    height: 15px;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50%;
    z-index: 5;
}
.chat-badge.badge-success-2 {
  color: rgba(20, 150, 129,1);
  background-color: rgba(37, 245, 210, 0.6);
}
.chat-badge.badge-pink {
  background-color: rgba(238, 94, 153, 0.8);
}
.badge.badge-pink {
  background-color: rgba(238, 94, 153, 0.8);
}
.chat-delete {
  display: none;
}
.btn-chat-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  height: 20px;
  width: 20px;
  border-radius: 0.4rem;
  background-color: rgba(var(--pink400), 1);
  color: #fff;
}
.chat-list-item {
  margin: 0;
  background-color: transparent;
  border-radius: 0.6rem;
  min-width:100%;
  border-bottom: 1px solid var(--coolGrey50);
  &amp; .chat-list-item-specs {
    display:flex;
    flex-direction:column;
    text-align: right;
    align-items:end;
  }
  &amp;:hover {
    background-color: var(--coolGrey50);
    &amp; .chat-list-item-specs {
      display: none;
    }
    &amp; .chat-delete {
      display: flex;
    }
  }
}
.main-chat-list-name {
  font-size: 0.9rem;
  max-width: 190px;
  color: var(--bs-body-color);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-chat-list-name.unread {
  color: var(--bs-heading-color);
  font-weight: 700;
}
.main-chat-list-text {
  font-size: 0.75rem;
  max-width: 190px;
  color: var(--bs-body-color);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-chat-list-text.unread {
  color: var(--bs-heading-color);
  font-weight: 600;
}
.main-chat-time {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bs-body-color);
}
.main-chat-time.unread {
  font-weight: 700;
  color: rgba(238, 94, 153, 0.8);
}
.main-chat-count {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    display: flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: transparent;
}
.main-chat-count.unread {
  background-color: rgba(238, 94, 153, 0.8);
}

.btn-main-chat-send {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 2px;
  bottom: 2px;
  color: var(--bs-body-color);
  cursor: pointer;
  height: 30px;
  width: 30px;
  background-color: var(--coolGrey100);
  border-radius: 0.4rem;
}
.btn-main-chat-send:hover {
  color: rgba(0, 123, 255, 0.8);
  background-color: var(--coolGrey200);
}

textarea.chat-textbox {
/*  border: transparent !important;*/
  background-color: var(--coolGrey50);
  padding-right: 32px;
  padding-left: 32px;
  border-color:  var(--coolGrey100);;
  border-radius: 0.6rem !important;
  color: var(--bs-heading-color);
  resize: none;
  &amp;:focus {
    color: var(--bs-heading-color);
    background-color: #fff;
    border-color: rgba(37,196,242,0.1) !important;
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  }
}

.auth-user-chat {
  display: grid;
  float: right;
  width: auto;
  min-width: 40px;
  max-width: 80%;
  position: relative;
  border-radius: 0.6rem;
  margin-bottom: 20px;
/*  padding: 1rem;*/
&amp; .chat-main-message-body-text {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: fit-content;
    float: right;
    margin-left: auto;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    /* background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%); */
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    border-radius: 0.75rem;
    /* box-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !important; */
  }
  &amp; .message-date {
    font-size: 0.625rem !important;
    font-weight: 500;
    margin-left: auto;
    margin-right: 0.5rem;
    padding-top: 0.25rem;
    color: var(--bs-body-color);
  }
}
.non-auth-user-chat {
  display: grid;
  float: left;
  width: auto;
  min-width: 40px;
  max-width: 80%;
  position: relative;
  border-radius: 0.6rem;
  margin-bottom: 20px;
  padding: 0.25rem;
  &amp; .chat-main-message-body-text {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: fit-content;
    float: left;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    /* background-image: linear-gradient(310deg, #082fbf 0%, #21d4fd 100%); */
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    color: var(--bs-heading-color);
    font-size: 0.875rem;
    line-height: 1.4;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    border-radius: 0.75rem;
    /* box-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !important; */
  }
  &amp; .message-date {
    font-size: 0.625rem !important;
    font-weight: 500;
    margin-left: 0.5rem;
    padding-top: 0.25rem;
    color: var(--bs-body-color);
  }
}
.chat-parent-container {
  position: relative;
}
.mask-chat {
  width: 350px;
  height: 600px;
  overflow: hidden;
  position: fixed;
  bottom: 0rem;
  right: 0rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 0px;
/*  animation: appear 1s ease-in 0s;*/
  box-shadow: 0 10px 20px hsla(0, 0%, 0%, .15), 0 3px 6px hsla(0, 0%, 0%, .10);
  transition: height 400ms cubic-bezier(.65,.05,.36,1);
  z-index: 1024;
}

.mask-email-composer {
  width: 600px;
  height: 700px;
  overflow: hidden;
  position: fixed;
  bottom: 0rem;
  right: 2rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
/*  animation: appear 1s ease-in 0s;*/
  box-shadow: 0 10px 20px hsla(0, 0%, 0%, .15), 0 3px 6px hsla(0, 0%, 0%, .10);
  transition: height 400ms cubic-bezier(.65,.05,.36,1);
  z-index: 9;
}

.container-email-composer {
  width: 100%;
  height: 700px;
  /*width: 600px;
  height: 800px;*/
  display: flex;
  flex-direction: row;
}
.email-message-body-wrap {
  border: none;
  padding: 0.5rem 0;
  background-color: transparent;
}

.container-chat {
  width: 350px;
  height: 600px;
  display: flex;
  flex-direction: row;
  transform: translateX(-350px);
  transition: transform 500ms linear;
}

.btn-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 0.6rem;
  transition: all 100ms ease-in-out;
  cursor: pointer;
  z-index:2;
}

.btn-chat:hover, .btn-chat:focus {
  background-color: rgba(242, 245, 250, 1);
}
.btn-chat:hover .btn__icon, .btn-chat:focus .btn__icon {
  color: var(--bs-body-color);
}
/*.btn-chat.btn--close {
  line-height: 1;
  height: 30px;
  width: 30px;
}*/
.btn__icon {
  /*width: 1.25rem;
  height: 1.25rem;*/
  vertical-align: middle;
  color: var(--bs-heading-color);
}
.btn-chat:hover .btn__icon {
  color: rgba(52, 71, 103, 0.6);
}
.btn-chat:hover .btn__send_icon {
  color: rgba(37, 245, 210, 0.7);
}
.btn-chat.btn--send {
  border-radius: 0.6rem;
  position: absolute;
  width: 35px;
  height: 35px;
  line-height: 1;
  margin-left: 0.1rem;
  margin-top: 1px;
  right: 12px;
  color: var(--bs-heading-color);
/*  background-image: linear-gradient(310deg, #0939e8 0%, #21d4fd 100%);*/
  &amp;:hover {
    background-color: rgba(225, 230, 237, 0.6);
  }
}

.form-chat, .list, .conversation {
  width: 350px;
  min-width: 350px;
  height: 600px;
  display: flex;
  flex-direction: column;
}
.form-chat .card {
  border-radius: 0;
  height: 360px;
}
.chat-select {
  &amp; .multiselect {
    border-radius: 0.6rem;
    border: 1px solid var(--bs-gray-200);
    background-color: var(--bs-gray-200);
  }
  &amp; .multiselect.is-open {
    border: none;
    border-radius: 0.6rem;
  }
  &amp; .multiselect.is-active {
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
    -moz-box-shadow: 0 0 0 0.125rem rrgba(37, 245, 210,0.4);
    -ms-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
    -o-box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
    box-shadow: 0 0 0 0.125rem rgba(37, 245, 210,0.4);
  }
  .multiselect-dropdown {
    height: 150px;
    border-radius: 0.6rem;
    border: 1px solid var(--bs-gray-200);
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.15);
  }
  .multiselect-dropdown .multiselect-options {
    padding: 0.4rem;
  }
  .multiselect-dropdown .multiselect-options .multiselect-option {
    border-radius: 0.4rem;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 500;
  }
  .multiselect-dropdown .multiselect-options .multiselect-option:hover {
    background: var(--bs-gray-200);
  }
  .multiselect .multiselect-wrapper .multiselect-tags .multiselect-tag {
    background: linear-gradient(310deg, rgba(24,182,155,1) 0%, rgba(37, 245, 210,1) 100%);
    border-radius: 0.4rem;
  }
}


.header-chat {
  min-height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
/*  margin-bottom: 20px;*/
  border-bottom: 1px solid var(--bs-gray-200);
/*  background-color: linear-gradient(310deg, #0939e8 0%, #21d4fd 100%);*/
/*  background-image: linear-gradient(310deg, #0939e8 0%, #21d4fd 100%);*/
}

.header-email-composer {
  width:100%;
  min-height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  padding-top: 5px;
  border-bottom: 1px solid var(--bs-gray-200);
/*  background-color: linear-gradient(310deg, #0939e8 0%, #21d4fd 100%);*/
/*  background-color: rgba(0, 123, 255, 0.1);*/
}

.header__actions {
  display: flex;
  flex-direction: row;
}
.header_email__actions {
  display: flex;
  flex-direction: row;
}
.header_email__actions .btn-chat .btn__icon {
  color: var(--bs-body-color);
}
.header_email__actions .btn-chat:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

.header__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
/*  flex-grow: 1;*/
  padding-left: 0.5rem;
  max-width: 100%;
  overflow: hidden;
/*  color: hsl(226, 48%, 27%);*/
/*  border-left: 1px solid var(--bs-gray-300);*/
}
.header_email__info {
  display: inline;
  padding-top: 0.2rem;
  padding-left: 0.5rem;
}

.header__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: hsl(97, 81%, 48%);
  margin-right: 0.4rem;
}

.header__name {
  display: flex;
  align-items: center;
  /*justify-content: center;
  vertical-align: middle;*/
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1.0rem;
  padding-left: 0.25rem;
  font-weight: 700;
  color: var(--bs-heading-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.header_email__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bs-heading-color);
}

.messages {
  height: 100%;
  width: 350px;
  min-width: 350px;
  max-width: 350px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.8rem;
  overflow-y: auto;
  overflow-x: hidden;
/*  background-color: #fff;*/
}
.email_composer_body {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0rem 0.5rem 0.5rem 0.5rem;
  overflow: hidden;
/*  background-color: #fff;*/
}

.messages__bubble {
  display: inline-flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
}

.messages__bubble--left {
  position: relative;
  justify-content: start;
}

    /*.messages__bubble--left:before {
      content: '';
      position: absolute;
      z-index: 0;
      bottom: -7px;
      left: 0;
      width: 8px;
      height: 8px;
      border-bottom-right-radius: 10px;
      background-color: #fff;
    }*/
  
.messages__bubble--left .messages__text {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  max-width: 85%;
  color: var(--bs-heading-color);
  line-height: 1.3;
  font-weight: 500;
  font-size: 0.875rem;
  background-color: #fff;
  border-radius: 0.7rem;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 8px 20px 0 #00478a1f, 1px 0 5px #00478a1a;
}
.messages__bubble--left .messages__image {
      position: relative;
      z-index: 1;
      height: auto;
      max-height: 200px;
      border-radius: 0.7rem;
      background-color: #fff;
/*      box-shadow: 0 3px 5px 0 rgb(0, 0, 0, 25%);*/
      box-shadow: 0 2px 8px #00478a1f, 1px 0 5px #00478a1a;
      overflow: hidden;
      &amp; img { 
          cursor: grab;
          width: 100%;
          max-width: 250px;
          height: auto;
          max-height: 250px;
          object-fit: contain;
        }
        &amp; video { 
          cursor: grab;
          width: 100%;
          max-width: 250px;
          height: auto;
          max-height: 250px;
          object-fit: contain;
        }
        &amp; .chat-message-doc {
          position: relative;
          display: block;
          min-width: 150px;
          max-width: 150px;
          cursor: pointer;
          text-align: center; 
          overflow: hidden;
          &amp; svg {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin: 0.5rem auto;
          }
          &amp; .chat-doc-filename {
            font-size: 0.75rem;
            margin: 0 0.5rem 0.5rem;
            color: var(--bs-body-color);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
    }
  
.messages__bubble--right {
  position: relative;
  justify-content: end;
}

    /*.messages__bubble--left:before {
      content: '';
      position: absolute;
      z-index: 0;
      bottom: -7px;
      right: 0;
      width: 8px;
      height: 8px;
      border-bottom-left-radius: 10px;
      background-color: var(--bs-gray-400);
    }*/
  
    .messages__bubble--right .messages__text {
      position: relative;
      display: flex;
      align-items: center;
      z-index: 1;
      max-width: 85%;
      color: #fff;
      line-height: 1.3;
      font-weight: 500;
      font-size: 0.875rem;
      background-image: linear-gradient(310deg, #0a3fff 0%, #21d4fd 100%);
      border-radius: 0.7rem;
      padding: 0.4rem 0.6rem;
/*      box-shadow: 0 3px 10px 0 rgb(0, 0, 0, 25%);*/
      box-shadow: 0 2px 8px #00478a1f, 1px 0 5px #00478a1a;
    }
    .messages__bubble--right .messages__image {
      position: relative;
      z-index: 1;
      height: auto;
      max-height: 200px;
      border-radius: 0.7rem;
      background-color: #fff;
/*      box-shadow: 0 3px 5px 0 rgb(0, 0, 0, 25%);*/
      box-shadow: 0 2px 8px #00478a1f, 1px 0 5px #00478a1a;
      overflow: hidden;
        &amp; img { 
          cursor: grab;
          width: 100%;
          max-width: 250px;
          height: auto;
          max-height: 250px;
          object-fit: contain;
        }
        &amp; video { 
          cursor: grab;
          width: 100%;
          max-width: 250px;
          height: auto;
          max-height: 250px;
          object-fit: contain;
        }
        &amp; .chat-message-doc {
          position: relative;
          display: block;
          min-width: 150px;
          max-width: 150px;
          cursor: pointer;
          text-align: center; 
          overflow: hidden;
          &amp; svg {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin: 0.5rem auto;
          }
          &amp; .chat-doc-filename {
            font-size: 0.75rem;
            margin: 0 0.5rem 0.5rem;
            color: var(--bs-body-color);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
    }

  .messages__text {
    border-radius: 7rem;
    padding: 0.4rem 0.6rem;
    overflow-wrap: anywhere;
  }

.conversation .footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.8rem;
  border-top: 1px solid var(--bs-gray-200);
/*  border-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));*/
  /*border-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)) 10;
  border-top-width: 1px;
  border-top-style: solid;*/
/*  background-color: #fff;*/
}
  
.footer__input {
  width: 100%;
  padding: 0.0rem 2rem 0.0rem 1.5rem;
  margin-bottom: 0;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  color: var(--bs-heading-color);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 100ms ease-in-out;
  background-color: var(--bs-gray-200);
  background-color: transparent;
  max-height: 40px;
  height: 40px;
    overflow: auto;
}
textarea.footer__input {
   resize: none;
}
    
.footer__input:focus {
  border: 1px solid transparent;
  /*border-color: rgba(37,196,242,0.1) !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.25rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;*/
/*  box-shadow: inset 0 0 3px hsla(0, 0%, 13%, .6);*/
}
.chat_attachment_container {
  position: absolute;
  bottom: 67px;
  background: #fff;
  width: 100%;
  z-index: 2;
  box-shadow: 0 -10px 10px 0px rgba(0,0,0,0.10);
}
.chat_attachment_list {
  padding: 0.5rem;
}
.chat_attachment_container {
  &amp; button {
    &amp; span {
      color: var(--bs-body-color);
      font-weight: 500;
    }
  }
  &amp; button:hover {
    &amp; span {
      color: rgba(0,123,255,0.7);
    }
  }
} 
.chat-attach-text {
  font-size: 0.75rem;
/*  color: var(--bs-heading-color);*/
  margin-left: 0.25rem;
}
.chat_attachment_trigger {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  right: 313px;
  margin-top: 3px;
  color: rgba(103, 116, 142, 0.8);
  background-color: transparent;
  border-radius: 0.6rem;
  cursor: pointer;
}
.chat_attachment_trigger:hover {
  color: rgba(37, 245, 210,1);
  background-color: rgba(225, 230, 237, 0.8);
}
.list .header-chat {
  padding-left: 0.8rem;
}

.chatlist {
  height: 100%;
/*  background-color: #fff;*/
  overflow-y: auto;
  padding: 0.8rem;
}

.btn-new-chat {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-center: center;
  padding: 0.8rem;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  background-color: hsl(0, 0%, 96%);
  color: #fff;
  box-shadow: 0 1px 1px hsla(0, 0%, 0%, .2);
  border-radius: 0.5rem;
  border: 1px solid hsl(0, 0%, 88%);
  cursor: pointer;
  transition: all 100ms ease-in-out;
}
  
.btn-new-chat:hover, .btn-new-chat:focus {
  color: #fff;
/*  border: 1px solid rgba(37,196,242,0.6);*/
/*  box-shadow: 0 1px 3px rgba(37,196,242,1);*/
}

.chat {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
/*  font-family: 'Poppins', sans-serif;*/
  background-color: #fff;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 10px 0 rgb(0, 0, 0, 20%);
  box-shadow: 0 3px 10px 0 #00478a1f, 1px 0 5px #00478a1a;
  transition: all 100ms ease-in-out;
}
  
.chat:hover, .chat:focus {
  /*border: 2px solid rgba(37,196,242,0.5);
  box-shadow: 0 3px 10px 0 rgba(37,196,242,0.35);*/
  border: 2px solid rgba(37, 245, 210, 0.5);
  -webkit-box-shadow: 0 3px 10px 0 rgba(37, 245, 210, 0.35);
  -moz-box-shadow: 0 3px 10px 0 rgba(37, 245, 210, 0.35);
  -ms-box-shadow: 0 3px 10px 0 rgba(37, 245, 210, 0.35);
  -o-box-shadow: 0 3px 10px 0 rgba(37, 245, 210, 0.35);
  box-shadow: 0 3px 10px 0 rgba(37, 245, 210, 0.35);
}

.chat-user-highlight {
  overflow: hidden;
  width: 100%;
}

.email_composer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
/*  padding: 0.25rem 0.5rem;*/
/*  margin-bottom: 0.5rem;*/
  font-family: 'Poppins', sans-serif;
/*  background-color: #fff;*/
/*  border-radius: 0.5rem;*/
/*  border: 2px solid transparent;*/
  overflow: hidden;
  /*box-shadow: 0 3px 10px 0 rgb(0, 0, 0, 20%);
  box-shadow: 0 3px 10px 0 #00478a1f, 1px 0 5px #00478a1a;*/
  transition: all 100ms ease-in-out;
}
  
/*.email_composer:hover, .chat:focus {
  border: 2px solid rgba(37,196,242,0.5);
  box-shadow: 0 3px 10px 0 rgba(37,196,242,0.35);
}*/


.chat__user {
  display: block;
  float: left;
  align-items: flex-start;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bs-heading-color);
}
  
.chat__message {
  display: block;
  text-align: left;
  /*flex-direction: row;
  align-items: center;*/
  width: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__sent {
  display: flex;
  flex-direction: row;
}
/*.chat__sent svg {
  width: 1rem;
  height: 1rem;
  stroke: hsl(120, 100%, 26%);
}
  
.chat__sent svg:last-of-type {
  margin: 0 0.3rem 0 -0.7rem;
}*/

@keyframes appear {
  1% {
    transform: translateY(50px);
    opacity: 1;
  }

/*  25% {
    transform: translateY(-15px);
  }

  65% {
    transform: translateY(10px);
    opacity: 1;
  }

  80% {
    transform: translateY(-5px);
  }*/
  
  100% {
    transform: translateY(0);
  }
}
div.minimize {
  height: .40px;
}

div.list--active {
  transform: translateX(0);
}
@media (min-width: 501px) and (max-width: 667px) { 
  .mask-email-composer {
    max-width: calc(100vw - 45px);
  }
}
@media (max-width: 500px) {
  /*.mask-chat {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 1024;
  }*/
  .mask-email-composer {
    position: fixed;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    border-radius: 0;
  }
  .mask-email-composer .email_composer {
    border-radius: 0;
  }
  .mask-email-composer .email-message-body {
    max-height: 985px;
  }
  .container-email-composer {
    width: 100%;
    height: 100%;
    transform: translateX(0);
  }
  .conversation .header-chat {
    min-height: 40px;
    height: 40px;
  }
  .email-compose-footer {
    bottom: 0;
  }
  .mask-chat .waves {
    display: none;
  }
  /*.mask-chat div.list--active {
    transform: translateX(50%);
  }*/
  .footer__input {
    width: 100%;
    margin-right: 1rem;
  }
  /*.form-chat, .list, .conversation {
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }
  .container-chat {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    transform: translateX(0);
  }*/
}


/************************
 * ----- Email --------*
 * *********************/
.search-wrap {
  position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 300px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border-radius: 0.5rem;
}
.search-input-icon {
  padding-left: 10px;
    padding-right: 10px;
    color: var(--bs-body-color);
    z-index: 1;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    position: absolute;
    right: 5px;
    top: 13px;
    cursor: pointer;
}
  .modal-compose {
    --bs-modal-width: 600px;
  }
  .modal-compose-header {
    height: 35px;
    background-color: rgba(0, 123, 255, 0.1) !important;
    border-bottom: none;
  }
  .btn-minimize, .btn-expand {
    padding: 0.25rem 0.5rem;
/*    margin: 0rem -23rem 0rem auto;*/
    margin-left: auto;
    height: 25px;
    width: 25px;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
  }
  .btn-minimize {
    right: -300px;
  }
  .btn-expand {
    right: -150px;
  }
  .btn-discard {
    position: relative;
    top: 5px;
    padding: 0.4rem 0.5rem;
    margin: 0rem 0.5rem 0rem auto;
    height: 30px;
    width: 30px;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .btn-compose-discard {
    position: relative;
    padding: 0.4rem 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color) !important;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .btn-compose-attach-file {
    position: relative;
    padding: 0.4rem 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color) !important;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .btn-compose-signature {
    position: relative;
    padding: 0.4rem 0.5rem;
    height: 30px;
    width: 30px;
    color: var(--bs-body-color) !important;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .btn-email-widget-header {
    width: 30px;
    height: 30px;
    border-radius: 0.4rem;
    transition: all 100ms ease-in-out;
    cursor: pointer;
    z-index: 2;
    color: var(--bs-body-color);
    background-color: transparent;
  }
  .btn-email-widget-header:hover {
    background-color: rgba(0, 123, 255, 0.2);
    color: rgba(0, 123, 255, 1);
  }
  .btn-email {
    display: flex;
    position: relative;
    padding: 0.4rem 0.5rem;
    margin: 0rem 0.1rem 0rem auto;
    height: 30px;
    width: 30px;
    background-color: var(--coolGrey25);
    vertical-align: middle;
    align-items: center;
    border-radius: 0.4rem;
    cursor: pointer;
  }
  .btn-email-close {
    color: var(--bs-body-color);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    opacity: 1;
  }
  /*.btn-email-back {
    position: relative;
    padding: 0.15rem 0.35rem;
    height: 30px;
    width: 30px;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }*/
  .btn-minimize:hover, .btn-expand:hover, .btn-email-close:hover, .btn-discard:hover, .btn-email:hover, .btn-email-back:hover, .btn-compose-discard:hover, .btn-compose-attach-file:hover, .btn-compose-signature:hover {
    background-color: var(--coolGrey50) !important;
  }
  .btn-minimize:hover i, .btn-expand:hover i, .btn-email-close:hover i, .btn-email:hover i, .btn-email-back:hover i, .btn-compose-discard i, .btn-compose-attach-file i, .btn-compose-signature i {
    color: rgba(0, 123, 255, 0.6) !important;
  }
  .btn-discard:hover i {
    color: rgba(255, 0, 0, 0.7);
  }
  .btn-email input[type='file'] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    outline: none;
    font-size: 0px;
}
  .modal-header .btn-close {
    padding: 0.5rem !important;
  }
  .email-reply-canvas {
    position: relative;
    padding: 0.75rem;
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px 0 rgba(132,140,154,.5), 0 2px 6px 2px rgba(132,140,154,.25);
    .ql-container. {
      p {
        color: var(--bs-body-color);
        font-size: 0.875rem;
      }
      span {
        color: var(--bs-body-color);
        font-size: 0.875rem;
      }
      h3 {
        font-size: 1.0rem;
      }
      h2 {
        font-size: 1.25rem;
      }
      h1 {
        font-size: 1.75rem;
      }
    }
  }
  .email-compose-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0 1rem 0 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--bs-body-color);
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-bottom: 1px solid var(--bs-gray-200);
    border-radius: 0rem;
  }
  .email-compose-input:focus {
    background-color: var(--bs-gray-200);
    border-color: rgba(37,196,242,0.1) !important;
    border-bottom: 1px solid transparent;
    border-radius: 0.6rem;
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
  }
  .btn-email-copy {
    position: absolute;
    display: flex;
    margin-left: auto;
    right: 10px;
    top: 10px;
  }
  .email-compose-fields .text-copy {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.25rem;
    margin: 0rem 0rem 0rem auto;
    background-color: transparent;
    color: var(--bs-body-color);
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .email-compose-fields .text-copy-2 {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.25rem;
    margin: 0rem 0rem 0rem auto;
    background-color: transparent;
    color: var(--bs-body-color);
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  /*.text-copy {
    position: absolute;
    top: -36px;
    right: -245px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    margin: 0rem 0rem 0rem auto;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .text-copy-2 {
    position: absolute;
    top: -36px;
    right: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    margin: 0rem 0rem 0rem auto;
    background-color: transparent;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }*/
  .text-copy:hover, .text-copy-2:hover {
    color: rgba(0, 123, 255, 0.7) !important;
    font-weight: 500;
  }
  .email-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-heading-color);
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--bs-gray-200);
  }
  .email-input:focus {
    background-color: #fff;
    /*border-radius: 0.5rem;
    border: 1px solid transparent;
    border-color: transparent !important;
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;*/
  }
  .email-from-field select,
  .email-from-field form-select {
    color: var(--bs-body-color);
    font-weight: 500;
    border-radius: 0;
    margin-bottom: 0.2rem !important;
  }
  .email-from-field select:focus,
  .email-from-field form-select:focus,
  .email-from-field form-select:active {
/*    border-radius: 0.5rem !important;*/
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
  }
  .email-message-body-wrap .ql-toolbar.ql-snow {
    background-color: transparent;
/*    background-color: rgba(0, 123, 255, 0.1);*/
    border-radius: 0.5rem;
    padding: 0.2rem;
/*    box-shadow: 0 5px 20px hsla(0, 0%, 0%, .1), 0 3px 6px hsla(0, 0%, 0%, .10);*/
  }
  /*.email-message-body-wrap .ql-toolbar {
    display: none;
  }
   .email-message-body-wrap .ql-toolbar:focus {
    display: block;
   }*/
  .email-message-body .ql-editor {
    padding: 0.5rem;
  }
  .email-message-body .ql-editor p {
    font-size: 0.875rem;
  }
  .email-message-body .ql-editor.ql-blank::before {
    left: 10px;
    color: var(--bs-gray-500) !important;
  }
  .email-message-body {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 387px;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
/*    font-weight: 500;*/
    line-height: 1.4;
    color: var(--bs-body-color);
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-color: transparent;
    border-radius: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .email-message-body:focus {
    background-color: #fff;
    /*border-color: rgba(37,196,242,0.1) !important;
    -webkit-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -moz-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -ms-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    -o-box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;
    box-shadow: 0 0 0 0.125rem rgba(37,196,242,0.4) !important;*/
  }
  .email-compose-footer {
    position: absolute;
    display: flex;
    width: 100%;
    bottom: 0;
    padding: 0.5rem;
    border-top: 1px solid var(--bs-gray-200);
  }
  .email-temp-wrapper {
    overflow: hidden;
    max-width: 600px;
    height: 50px;
    background: var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 0 0.3rem;
    margin-bottom: 0.25rem;
  }
  .email-temp {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    max-width: 600px;
    height: 50px;
    padding-bottom: 0.5rem;
    padding-top: 0.4rem;
    padding-left: 0.1rem;
  }
  .email-temp::-webkit-scrollbar {
   
  }
  .email-temp::-webkit-scrollbar-thumb,
  .email-temp::-moz-scrollbar-thumb,
  .email-temp::-ms-scrollbar-thumb,
  .email-temp::-o-scrollbar-thumb {
    background-color: #fff !important;
    border-radius: 0.5rem !important;
    width: 4px;
    margin-left: -1rem !important;
  }
  .email-temp-item {
    list-style: none;
    position: relative;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    margin: 0;
    margin-right: 0.2rem;
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 0.4rem;
    height: 30px;
    line-height: 1;
    cursor: pointer;
  }
  .email-temp-item a {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .email-temp-item:hover {
    background-color: rgba(0, 123, 255, 0.2);
    color: rgba(0, 123, 255, 0.8);
  }
  .email-icon {
    margin-left: -2px;
    color: var(--bs-body-color);
  }
 @media screen and (max-height: 767px) {
    .modal-compose {
      --bs-modal-width: 500px;
    }
  }
select.select{
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url(/img/svg/expand_more_gray_24dp.svg) !important;
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 5px;
  background-size: 26px;
}
.alert-index-1{
  z-index: 1;
}
.main-details .ql-container{
  font-family: Open Sans,sans-serif;
}
.main-details .ql-snow .ql-editor h1{
  font-size:3rem;
}
.main-details .ql-snow .ql-editor h2{
  font-size:2.25rem;
}
.main-details .ql-snow .ql-editor h3{
  font-size:1.875rem;
}
.main-details .ql-snow .ql-editor h4{
  font-size:1.5rem;
}
.main-details .ql-snow .ql-editor h5{
  font-size:1.25rem;
}
.main-details .ql-snow .ql-editor h6{
  font-size:1rem;
}
.main-details .ql-snow .ql-picker.ql-header .ql-picker-item[data-value]::before,
.main-details .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,
.main-details .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before,
.main-details .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=normal]:before,
.main-details .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before,
.main-details .ql-snow .toolbar-item .ql-picker-label{
  font-size:14px;
}
@media (max-width: 575.98px) {
  .main-details .ql-snow .ql-editor h1{
    font-size: calc(1.425rem + 2.1vw);
  }
  .main-details .ql-snow .ql-editor h2{
    font-size: calc(1.35rem + 1.2vw);
  }
  .main-details .ql-snow .ql-editor h3{
    font-size: calc(1.3125rem + 0.75vw);
  }
  .main-details .ql-snow .ql-editor h4{
    font-size: calc(1.275rem + 0.3vw);
  }
}
.screen-loader {
    width: 100vw;
    height: 100vh;
    background-color: #ffffff8e;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen-loader .loader {
    width: 50px;
    height: 50px;
    background-image: url(../../img/svg/spinners/preview/3-dots-bounce-blue-36.svg);
    background-repeat: no-repeat;
    background-size: cover;
    fill: #00f;
}
.fixed-plugin-activity .st15-1,
.fixed-plugin-activity .st15-mid8h{
  fill: #478FF6;
}
.fixed-plugin-activity .st2-1,
.fixed-plugin-activity .st2-mdij83 {
  fill: url(#SVGID_1_);
}</pre></body></html>