/*
    Table of Contents:
    1.  Import
    2.  Root Variables
        - Colors
        - Spacing
        - Font Sizes
        - Font Weights
        - Line Heights
        - Border Radius
        - Border Width
        - Sizes
        - Shadows
        - Z-Indexes
    3.  Base Styles
        - HTML, Body, Links, Paragraphs
        - Headings (h1-h6)
        - Placeholders
        - Scrollbar
        - Textarea
    4.  Components
        - Navbar
        - Panel
        - Modal
        - Buttons
        - Forms
        - Images
        - Canvas
        - Alerts
        - Sidebar
        - Comments
        - Icons
    5.  Utility Classes
        - Spacing
        - Text Styling
        - Shadows
    6.  Page Specific
        - Repeater
        - Search
        - Wizard
        - Login
        - Upload
*/

/* 1. Import */
@import url(//fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap);

/* 2. Root Variables */
:root {
  /* Colors */
  --color-primary-dark: #2c3e50;
  --color-primary-dark-gradient: #2A4764;
  --color-primary-dark-modal-gradient: #304F6D;
  --color-danger: #c0392b;
  --color-danger-hover: #da5939;
  --color-light-gray: #f8f8f8;
  --color-transparent: transparent;
  --color-placeholder: #bdc3c7;
  --color-navbar-shadow: #ECF0F1;
  --color-panel-shadow: #497F8C30;
  --color-white: white;
  --color-success: #27ae60;
  --color-add-button: #34495e;
  --color-form-control-border: #ecf0f1;
  --color-black: black;
  --color-canvas-border: #95a5a6;
  --color-info: #2980b9;
  --color-warning: #f1c40f;
  --color-drop-shadow: #FFFFFF50;
  --color-sidebar-bg: #f0f3f7;
  --color-sidebar-content-bg: #ffffff99;
  --color-comment-icon-hover: #7f8c8d;
  --color-rate-icon-fill: #ccc;
  --color-scrollbar-thumb: rgba(217,217,227,.8);
  --color-scrollbar-thumb-border: rgba(255,255,255,var(--tw-border-opacity));
  --color-scrollbar-thumb-hover: rgba(236,236,241,var(--tw-bg-opacity));
  --color-btn-question-shadow: rgba(0, 0, 0, 0.2);
  --color-success-bg: #27ae6010;
  --color-info-bg: #2980b910;
  --color-warning-bg: #f1c40f10;
  --color-danger-bg: #c0392b10;

  /* Spacing */
  --spacing-none: 0;
  --spacing-xxs: 0.125rem; /* 2px */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-xxl: 3rem;    /* 48px */
  --spacing-xxxl: 4rem;   /* 64px */
  --spacing-xxxxl: 5rem;  /* 80px */
  --spacing-xxxxxl: 6rem; /* 96px */
  --spacing-negative-md: -1 rem;
  --spacing-negative-lg: -2.5rem;

  /* Font Sizes */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 1.75rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.25rem;
  --font-size-xxxxxl: 2.5rem;

  /* Font Weights */
  --font-weight-very-light: 100;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line Heights */
  --line-height-xs: 1.25rem;
  --line-height-sm: 1.3rem;
  --line-height-md: 1.5rem;
  --line-height-lg: 1.75rem;
  --line-height-xl: 1.875rem;
  --line-height-xxl: 2rem;
  --line-height-xxxl: 2.5rem;
  --line-height-xxxxxl: 3rem;

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 0.5rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 2rem;
  --border-radius-full: 50%;
  --border-radius-pill: 9999px;

  /* Border Width */
  --border-width-none: 0;
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 3px;

  /* Sizes */
  --size-icon-container-sm: 1.5rem;
  --size-icon-container-md: 2rem;
  --size-icon-container-lg: 3rem;
  --size-edit-button: 4rem;
  --width-sidebar: 36rem;
  --max-width-form: 40rem;
  --height-image-container: 9rem;
  --height-image-container-lg: 60vh;
  --max-height-modal-body: 85dvh;
  --max-height-comments: 85dvh;
  --logo-max-height: 4rem;
  --wecare-max-height: 10dvh;
  --width-canvas-container: 18vw;
  --max-width-user-info: 60dvw;
  --bottom-add-note: 11.5rem;
  --max-width-canvas-title: 12dvw;
  --bottom-add-note: 12.5rem;
  --btn-sm: 2.25rem;
  --btn-xs: 2.5rem;
  --btn-md: 2.75rem;
  --btn-lg: 3rem;

  /* Shadows */
  --shadow-navbar: 0px 0px 6px var(--color-navbar-shadow);
  --shadow-panel: 0px 0px var(--spacing-xs) var(--color-panel-shadow);
  --shadow-button: 0px 2px 1px var(--color-drop-shadow);
  --shadow-modal: inset 15px -2px 30px var(--color-primary-dark), inset 0px -8px 9px -5px var(--color-primary-dark-modal-gradient);
  --shadow-question-button: 0px 0px 16px var(--color-btn-question-shadow);

  /* Z-Indexes */
  --z-index-sidebar: 20;
  --z-index-rate-icon: 99;
  --z-index-edit-button: 99;
  --z-index-navbar: 99;
}

/* 3. Base Styles */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 90% !important;
}

body, a, p {
    font-weight: var(--font-weight-normal); 
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
	color: var(--color-primary-dark);
	margin: var(--spacing-none);
}

body, a, p, h1, h2, h3, h4, h5, h6 {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	word-break: break-word;
	margin: var(--spacing-none);
}

h1 { font-size: var(--font-size-xxxxxl); line-height: var(--line-height-xxxxxl); }
h2 { font-size: var(--font-size-xxxl); line-height: var(--line-height-xxxl); }
h3 { font-size: var(--font-size-xxl); line-height: var(--line-height-xxl); }
h4 { font-size: var(--font-size-xl); line-height: var(--line-height-lg); }
h5 { font-size: var(--font-size-lg); line-height: var(--line-height-md); }
h6 { font-size: var(--font-size-md); line-height: var(--line-height-xs); }

::placeholder {
	color: var(--color-placeholder) !important;
}

::-webkit-scrollbar {
    height: var(--spacing-md);
    width: var(--spacing-sm);
}

::-webkit-scrollbar:horizontal {
    height: var(--spacing-sm);
    width: var(--spacing-md);
}

::-webkit-scrollbar-track {
    background-color: var(--color-transparent);
    border-radius: var(--border-radius-pill);
}

::-webkit-scrollbar-thumb {
    --tw-border-opacity: 1;
    background-color: var(--color-scrollbar-thumb);
    border-color: var(--color-scrollbar-thumb-border);
    border-radius: var(--border-radius-pill);
    border-width: var(--border-width-sm);
}

::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: var(--color-scrollbar-thumb-hover);
}

textarea {
    resize: none;
}

textarea, input, select, .form-control {
    min-height: var(--btn-md);
    min-width: var(--btn-md);
	padding: var(--border-radius-sm) var(--border-radius-md) !important;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* 4. Components */

/* Navbar */
.navbar {
	will-change: filter;
    overflow: visible;
	z-index: var(--z-index-navbar);
	filter: drop-shadow(var(--shadow-navbar));
	background: linear-gradient(151.88deg, var(--color-primary-dark) 17.41%, var(--color-primary-dark-gradient) 83.24%);
}

#main-nav{
	-webkit-box-shadow: var(--shadow-modal);
	box-shadow: var(--shadow-modal);  
}

.nav > .mode-cross-link > a {
    padding: 16px 24px !important;
}

.nav > .mode-cross-link > a > .fa {
    font-size: 21px !important;
    padding: 3px 0 0 0;
}

/* Panel */
.panel {
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-md);
	border: none;
	will-change: filter;
	filter: drop-shadow(var(--shadow-panel));
}

.panel-heading {
	border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-none) var(--border-radius-none);
}

/* Modal */
.modal{
    display: flex;
    flex-flow: column;
    justify-content: space-around;
}

.modal-content{
	border: none;
	border-radius: var(--border-radius-md);
	overflow: hidden;
}	

.modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(151.88deg, var(--color-primary-dark) 17.41%, var(--color-primary-dark-modal-gradient) 83.24%);
	-webkit-box-shadow: var(--shadow-modal);
	box-shadow: var(--shadow-modal);
}

.modal-header > .modal-title {
	color: var(--color-white);
}

.modal-body {
    position: relative;
    padding: var(--spacing-md);
    max-height: var(--max-height-modal-body);
    overflow-y: auto;
}

.modal-footer {
	padding: var(--spacing-none);
	border: none;
	margin: var(--spacing-none);
}

.footer {
	margin: var(--spacing-md) var(--spacing-negative-md) var(--spacing-negative-md) var(--spacing-negative-md);
	padding: var(--spacing-none);
}

.footer > .btn-toolbar > .btn-group {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Buttons */
.btn {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--font-weight-medium); 
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    transition: ease-out 150ms;
    padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--border-radius-sm);
	text-transform: uppercase;
    display: inline-flex;
    align-items: center;       
    justify-content: center; 
	white-space: nowrap;
	min-height: var(--btn-md);
    min-width: var(--btn-md);    
    height: auto;    
}

.btn-xs, .btn-group-xs>.btn {
	padding: var(--spacing-none) var(--spacing-sm);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-md);
    border-radius: var(--border-radius-md);
    min-height: var(--btn-xs);
    min-width: var(--btn-xs);    
    width: auto !important;
    height: auto !important;    
}

.btn-lg, .btn-group-lg > .btn {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--font-weight-medium); 
    font-size: var(--font-size-lg);
    line-height: var(--line-height-xl);
    min-height: var(--btn-lg);
    min-width: var(--btn-lg);    
    width: auto !important;
    height: auto !important;    
}

.btn-lg, .btn-group-sm > .btn {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--font-weight-medium); 
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    min-height: var(--btn-sm);
    min-width: var(--btn-sm);    
    width: auto !important;
    height: auto !important;        
}

.btn:active, .btn:focus, .btn:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-group.open .dropdown-toggle, .btn-link:hover, .btn-link:focus {
	-webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none !important;
}

.modal-footer .btn, .footer .btn, .back-button .btn { 
	margin: var(--spacing-none) !important;
	padding: var(--spacing-md) var(--spacing-xxl);
	border: none;
	text-transform: uppercase;
	border-radius: var(--border-radius-none);
    background-color: var(--color-transparent) !important;
	color: var(--color-primary-dark) !important;
}

.back-button .btn {
	padding: var(--spacing-md) var(--spacing-md);
}

.modal-footer .btn:hover, .footer .btn:hover, .back-button .btn:hover {
	background-color: var(--color-placeholder) !important;
	color: var(--color-white) !important;
}

.modal-footer .btn-primary, .footer .btn-primary {
	color: var(--color-success) !important;
}

.modal-footer .btn-primary:hover, .footer .btn-primary:hover {
	background-color: var(--color-success) !important;
	color: var(--color-white) !important;
}

.modal-footer .btn-danger, .footer .btn-danger {
	color: var(--color-danger) !important;
}

.modal-footer .btn-danger:hover, .footer .btn-danger:hover {
	background-color: var(--color-danger) !important;
	color: var(--color-white) !important;
}

.modal-footer .btn:active, .modal-footer .btn:focus, 
.footer .btn:active, .footer .btn:focus, 
.back-button .btn:active, .back-button .btn:focus {
	background-color: var(--color-placeholder) !important;
	opacity:0.4 !important;
	color: var(--color-white) !important;
}

.modal-footer .btn-primary:active, .modal-footer .btn-primary:focus, 
.footer .btn-primary:active, .footer .btn-primary:focus {
	background-color: var(--color-success) !important;
}

.modal-footer .btn-danger:active, .modal-footer .btn-danger:focus, 
.footer .btn-danger:active, .footer .btn-danger:focus {
	background-color: var(--color-danger) !important;
}

.modal-footer > .btn+.btn {
	margin: var(--spacing-none);
}

.add-button > .btn-group > .btn {
  will-change: filter;
  filter: drop-shadow(var(--shadow-button)) drop-shadow(var(--shadow-panel));
  background-color: var(--color-transparent);
  border: var(--border-width-md) dashed;
  color: var(--color-add-button);
}  

.edit-button {
	position: fixed;
	bottom: var(--spacing-md);
	right: var(--spacing-md);
	z-index: var(--z-index-edit-button);
}

.edit-button > .btn-group > .btn {
    font-size: var(--font-size-xxxxl);
    border-radius: var(--border-radius-full);
	width: var(--size-edit-button) !important;
	height: var(--size-edit-button) !important;
	will-change: filter;
	filter: drop-shadow(var(--shadow-button)) drop-shadow(var(--shadow-panel));
}

.edit-button > .btn-group > .btn > i {
	top: calc(50% - var(--font-size-lg));
	position: relative;
}

.btn-question {
	filter:drop-shadow(var(--shadow-question-button));
	width: 93px;
}

.btn-question > .btn-toolbar > .btn-group > a {
	padding: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

/* Forms */
.form-control, .form-control:active, .form-control:focus {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: var(--font-weight-normal); 
    font-size: var(--font-size-md);
    line-height: var(--line-height-md) !important;
    padding:var(--spacing-sm)  !important;
	height: auto  !important;
	border-radius: var(--border-radius-sm) !important;
	border: var(--border-width-sm) solid var(--color-form-control-border) !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.input-group:has(.form-control) > .input-group-btn > .btn {
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
}

span.file-upload-field > span,
div.input-group > a > span.ellipsis {
    position: relative;
}

.input-group > .form-control {
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
}

.btn-group .open > .dropdown-menu {
    display: flex;
    flex-direction: column;
}

.btn-group .open > .dropdown-menu > li {
    padding: var(--spacing-none);
}

.input-group-btn > .btn {
	padding: var(--spacing-sm) var(--spacing-lg) !important;
}

.date > input {
	border-radius: var(--border-radius-sm) var(--border-radius-none) var(--border-radius-none) var(--border-radius-sm) !important;
}

.dropdown-menu>li>a {
	padding: var(--spacing-lg);
}

.options-menu > .btn-toolbar > .btn-group > .dropdown > .btn {
	border: none;
	background: var(--color-transparent);
	color: var(--color-primary-dark);
}

/* Images */
.image-container {
	margin-top: var(--spacing-md);
	width:100%; 
	height: var(--height-image-container);
	background-color: var(--color-form-control-border);
	border-radius: var(--border-radius-sm);
	bottom: var(--spacing-md);
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.image-container.large{
	height: var(--height-image-container-lg);
	max-width: 100%;
	margin-bottom: 2vh;
	align-items: stretch;
}

.image-container > .btn-group {
	height: 100%;
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.image-container > .btn-group > .btn {
	background-color: var(--color-transparent);
    border: none;
	display: flex;
    justify-content: center;
    align-items: stretch;
	min-height: 100%;
    min-width: 100%;
    padding: var(--spacing-none);
}

.image-container > .btn-group > .btn > i {
	font-size: var(--font-size-xxxl);
	top: calc(50% - var(--font-size-md));
	position:relative;
	color: var(--color-black);
	opacity:0.6;
	align-self: center;	
}

.image-container > .btn-group > .btn > img {
	object-fit: cover;
	max-height: 100%;
	max-width: 100%
}

/* Canvas */
.canvas-container {
	width: var(--width-canvas-container);
	border: 0px solid var(--color-canvas-border);
    margin: var(--spacing-sm);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
	will-change: filter;
	filter: drop-shadow(var(--shadow-panel));	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.canvas-header {
	background-color: var(--color-transparent);
	padding: var(--spacing-md);
	order:1;
	display: flex;
	flex-direction: row;
	gap: var(--spacing-sm);
}

.canvas-header-icon {
	display: flex;
	margin-top: var(--spacing-xs);
}

.canvas-header-icon > span {
	display: flex;
	justify-content: space-around;
}

.canvas-header-title {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
}

.canvas-header-title > h1, .canvas-header-title > h2, .canvas-header-title > h3, .canvas-header-title > h4, .canvas-header-title > h5, .canvas-header-title > h6  {
	margin: var(--spacing-none);
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
}

.canvas-body {
	padding: var(--spacing-md);
	order:2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	height: 100%
}

.canvas-images {
	order: 2;
	margin-bottom: var(--spacing-sm);
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: stretch;
	column-gap: var(--spacing-sm);
}

.canvas-body > .form-control {
    height: Calc(1000px - 60px - 50rem) !important;
}

/* Alerts */
.alert {
	border-radius: var(--border-radius-lg);
	margin: var(--spacing-sm) var(--spacing-none) var(--spacing-md) var(--spacing-none);
	display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
	width: fit-content;
}

.alert > .close,
.alert > i {
	top: auto !important;
}

.alert-success {
    color: var(--color-primary-dark);
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
}
.text-succes {
    color: var(--color-success);
}

.alert-info {
    color: var(--color-primary-dark);
    background-color: var(--color-info-bg);
    border-color: var(--color-info);
}
.text-info {
    color: var(--color-info);
}

.alert-warning {
    color: var(--color-primary-dark);
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
}
.text-warning {
    color: var(--color-warning);
}

.alert-danger {
    color: var(--color-primary-dark);
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger);
}
.text-danger {
    color: var(--color-danger);
}

/* Sidebar */
#sidebar {
	position: fixed;
	top: var(--spacing-none);
	right: var(--spacing-none);
	width: var(--width-sidebar);
	max-width: 100dvw;
	height: 100vh;
	padding: var(--spacing-xxxxl) var(--spacing-none) !important;
	background-color: var(--color-sidebar-bg);
    filter: drop-shadow(var(--shadow-panel));
	padding: 20px;
	z-index: var(--z-index-sidebar);
    opacity: 0;
	transition: all 0.3s ease;
}

#sidebar.open {
	opacity: 1;
}

#sidebar.closed {
	opacity: 0;
}

#comments, #updates {
	overflow-y: scroll;
	height: var(--max-height-comments);
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--color-sidebar-content-bg);
}

.sidebar-left {
	left: var(--spacing-none);
	right: auto;
}

/* Comments */
.add-note {
	position: absolute;
	bottom: var(--bottom-add-note);
	right: var(--spacing-none);
}

.comment-button {
	height: var(--size-icon-container-md); 
	width: var(--size-icon-container-md); 
	border-radius: var(--border-radius-full); 
	background-color: var(--color-transparent);
	color: var(--color-warning); 
	display: inline-block;
    position: relative;
}

.comment-button > i {
	top: calc(50% - var(--spacing-sm));
	position:relative;
	opacity: 0.3;
}

.comment-button:hover > i {
	opacity: 1;
}

.comment-button i.fa:before {
	content: "\f249";
	font-size: var(--font-size-xl);
	transition: all 0.1s linear;
}

.comment-button:hover i.fa:before {
	content: "\f055";
	color: var(--color-comment-icon-hover); 
}

.comment-button::before {
  	content: attr(data-tooltip);
  	position: absolute;
  	top: var(--spacing-negative-lg); 
  	transform: translateX(-70%);
  	padding: var(--spacing-xs) var(--spacing-sm);
  	background-color: var(--color-add-button);
  	color: var(--color-white);
  	font-size: var(--font-size-xs);
	border-radius: var(--border-radius-sm);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.comment-button:hover::before {
	opacity: 1;
}

.comment:hover > .add-response {
	opacity: 1;	
}

.add-response {
	opacity: 0;
	transition: all 0.3s linear;
}

/* Icons */
.rateIcon {
	display: flex; 
	justify-content: center;
	fill: var(--color-rate-icon-fill);
	transition: fill 0.2s ease-in-out;
	border-radius: var(--border-radius-full); 
	z-index: var(--z-index-rate-icon);
}

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-container-lg);
    height: var(--size-icon-container-lg);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xxxl);
}

.medium-icons .icon-container {
	width: var(--size-icon-container-md);
    height: var(--size-icon-container-md);
    font-size: var(--font-size-xl);
}

.small-icons .icon-container {
    width: var(--size-icon-container-sm);
    height: var(--size-icon-container-sm);
    font-size: var(--font-size-md);
}

.icon-color-white {
  color: var(--color-white);
}

/* 5. Utility Classes */

/* Spacing */
.hr-spacing-none, .hr-spacing-xxs, .hr-spacing-xs, .hr-spacing-sm, .hr-spacing-md, .hr-spacing-lg, .hr-height-xl, .hr-height-xxxl, .hr-height-xxxxl, .spacing-xl-div-hr, .spacing-md-div-hr, .spacing-sm-div-hr {
  border: none;
  margin: var(--spacing-none);
}
.hr-spacing-none { height: var(--spacing-none); }
.hr-spacing-xxs { height: var(--spacing-xxs); }
.hr-spacing-xs { height: var(--spacing-xs); }
.hr-spacing-sm { height: var(--spacing-sm); }
.hr-spacing-md { height: var(--spacing-md); }
.hr-spacing-lg { height: var(--spacing-lg); }
.hr-height-xl, .spacing-xl-div-hr { height: var(--spacing-xl); } /* Need make generic in app */
.hr-height-xxxl { height: var(--spacing-xxxl); }
.hr-height-xxxxl { height: var(--spacing-xxxxl); }
.spacing-md-div-hr { height: var(--spacing-md); } /* Need make generic in app */
.spacing-sm-div-hr { height: var(--spacing-sm); } /* Need make generic in app */

.hr-margin-xxs { border: none; margin: var(--spacing-xxs) var(--spacing-none); }
.hr-margin-xs { border: none; margin: var(--spacing-xs) var(--spacing-none); }
.hr-margin-sm { border: none; margin: var(--spacing-sm) var(--spacing-none); }
.hr-margin-md { border: none; margin: var(--spacing-md) var(--spacing-none); }
.hr-margin-lg { border: none; margin: var(--spacing-lg) var(--spacing-none); }
.hr-margin-sm { border: none; margin: var(--spacing-sm) var(--spacing-none); }

.clear-top {
	margin-top: var(--spacing-none);
}

/* Text Styling */
.text-color > p {
    color: inherit;
}

.text-bold > p {
	font-weight: var(--font-weight-semibold);
}

.tooltip-inner > p {
	color: var(--color-white);
}

li > a > .text-info, .btn-group > .btn-group > ul >  li > a > .text-danger, .btn-group > .btn-group > ul >  li > a > .text-primary, .btn-group > .btn-group > ul >  li > a > .text-succes, .btn-group > .btn-group > ul >  li > a > .text-warning {
	margin-left: 0px !important;
}

li > a > .text-primary {
	color: var(--color-primary-dark) !important;
}

/* Shadows */
.drop-shadow {
	will-change: filter;
	filter: drop-shadow(var(--shadow-button)) drop-shadow(var(--shadow-panel));
}

/* 6. Page Specific */

/* Repeater */
.repeater-horizontal {
	margin: auto;
}

.repeater_tabbar > .repeater-horizontal {
	margin: var(--spacing-none);
}

/* Search */
.search > .input-group > .form-control:active, .search > .input-group > .form-control, .search > .input-group > .form-control:active, .search > .input-group > .form-control:focus, .search > .input-group > .form-control:focus-visible {
	border: none;
	box-shadow: none;
	outline: 0;
	background-color: var(--color-light-gray);
}

.search > .input-group > .input-group-btn > .btn {
	background-color: var(--color-light-gray);
	border:none;
	color: var(--color-primary-dark);
	border-top-left-radius: var(--border-radius-none);
    border-bottom-left-radius: var(--border-radius-none);
}

/* Wizard */
.wizard-container {
	max-width: 100%;
	display: flex;
    flex-direction: column;
    align-items: center;
}

/* Login */
.login-fields{
	width: calc(100% - var(--spacing-xxxl));	
}

.field-label{
	margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-none); 
	font-weight: var(--font-weight-medium);
}

/* Edit Header */
.edit-header {
	background-color: var(--color-transparent);
	padding: var(--spacing-md);
	order:1;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: var(--spacing-sm);
}

.edit-header-icon {
	display: flex;
	margin-top: var(--spacing-xs);
}

.edit-header-icon > span {
	display: flex;
	justify-content: space-around;
}

.edit-header-title {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

.edit-header-title > h1, .edit-header-title > h2, .edit-header-title > h3, .edit-header-title > h4, .edit-header-title > h5, .edit-header-title > h6  {
	margin: var(--spacing-none);
	color: var(--color-primary-dark);
}

.edit-header-buttons {
	display: flex;
	flex-direction: column;
}

.edit-header-buttons > .btn-group > .btn, .edit-header-buttons > .btn-group > .btn:hover, .edit-header-buttons > .btn-group > .btn:active {
	padding: var(--spacing-xxs) var(--spacing-sm);
}

.header-controls > .btn-group{
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}

.header-controls > .btn-group > .btn, .header-controls > .btn-group > .btn:hover, .header-controls > .btn-group > .btn:active, .header-controls > .btn-group > .btn:focus{
	background-color: var(--color-transparent);
    border: none;
	font-size: var(--font-size-xl);
	padding: var(--spacing-sm);
}

.header-controls > .btn-group > .btn-primary{
	color: var(--color-primary-dark);
}

.header-controls > .btn-group > .btn-danger{
	color: var(--color-danger);
}

.header-controls > .btn-group > .btn-default{
	color: var(--color-light-gray);
}

.dropdown-menu  {
	left: auto;
}

span.dropdown-button > .btn-group > .btn-group > .btn {
    padding-right: var(--spacing-none);
}

/* Upload */
.upload {
	display:flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-md);
}

.upload > p {
	margin: var(--spacing-none);
}

.upload > .input-group > .form-control {
	display: none;
}

.upload > .input-group > .input-group-btn > .btn {
	border-radius: var(--border-radius-md);
}