@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.woff2') format('woff2'),
url('../fonts/Roboto-Italic.woff') format('woff'),
url('../fonts/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
url('../fonts/Roboto-Bold.woff') format('woff'),
url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.woff2') format('woff2'),
url('../fonts/Roboto-BoldItalic.woff') format('woff'),
url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
url('../fonts/Roboto-Regular.woff') format('woff'),
url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
padding: 0;
margin: 0;
border: none;
scrollbar-width: thin;
scrollbar-color: #0055d6 transparent;
}
*, *::before, *::after { box-sizing: border-box }
*::-webkit-scrollbar { width: 4px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb {
background-color: #0055d6;
border-radius: 10px;
}
a, a:link, a:visited  { text-decoration: none }
a:hover  { text-decoration: none }
aside, nav, footer, header, section, main, legend { display: block }
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
}
ul, ul li { list-style: none }
img { vertical-align: top }
img, svg {
max-width: 100%;
height: auto;
}
address { font-style: normal }
input, textarea, button, select {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
}
input::-ms-clear { display: none }
textarea { resize: vertical }
button, input[type="submit"] {
display: inline-block;
box-shadow: none;
background-color: transparent;
background: none;
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
input[type='file'] { max-width: 100% }
body {
font-family: 'Roboto', sans-serif;
height: 100vh;
background: #120439;
letter-spacing: 0.03em;
}
.hidden { display: none !important }
.input-group { margin-bottom: 20px; }
.input-group label {
display: block;
margin-bottom: 4px;
color: #fff;
font: 400 14px/22px 'Roboto', sans-serif;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 12px;
color: #000;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
transition: border-color 0.3s;
}
.input-group textarea {
min-height: 140px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.input-group input:focus, .input-group textarea:focus {
border-color: #007bff;
outline: none;
}
.input-group input[type="number"]::-webkit-outer-spin-button,
.input-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-group input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.input-group input[type="checkbox"] {
width: auto;
margin-right: 8px;
vertical-align: baseline;
}
select {
width: 100%;
padding: 12px;
background: #fff;
border-radius: 5px;
}
.btn {
display: inline-block;
padding: 12px 24px;
background: #007bff;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.btn.delete-btn { background: #dc3545 }
.btn.small-btn { padding: 6px 12px }
.btn:hover { background: #0056b3 }
.btn.delete-btn:hover { background: #bb2d3b }
.btn.neutral-btn, .btn.neutral-btn:hover { background: #3f4a77 }
.flex-half {
display: flex;
flex-wrap: wrap;
}
.flex-half > * { width: 49% }
.flex-half > *:last-child { margin-left: 2% }
h1, h2 {
display: inline-block;
margin: 0;
padding: 20px 40px;
font: 700 32px/32px 'Roboto', sans-serif;
color: #fff;
background: #191e54;
border-radius: 10px;
}
h2 {
padding: 14px 40px 14px 0;
font: 700 24px/36px 'Roboto', sans-serif;
background: none;
}
.section-link {
display: flex;
margin: 0 12px 12px 0;
padding: 12px 24px;
font: 400 16px/24px 'Roboto', sans-serif;
color: #fff;
align-items: center;
background: #191e54;
border-radius: 10px;
-webkit-transition: background .2s linear;
transition: background .2s linear;
}
.message {
margin-bottom: 24px;
padding: 12px 24px;
font: 400 16px / 24px 'Roboto', sans-serif;
color: #fff;
background: #22c55e;
border-radius: 10px;
}
.message.warning-message {
color: #000;
background: #ffd54f;
}
.message.alert-message { background: #dc3545 }
.pagination {
display: flex;
margin-top: 24px;
flex-wrap: wrap;
flex-direction: row;
}
.pagination > * {
min-width: 46px;
margin: 0 12px 12px 0;
padding: 12px;
font: 400 16px / 16px 'Roboto', sans-serif;
color: #fff !important;
text-align: center;
text-decoration: none !important;
border: 1px solid #0055d6;
border-radius: 10px;
}
.pagination > span { background: #0055d6 }
.page-public-login, .page-public-welcome {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.page-public-welcome { flex-wrap: nowrap }
.page-public-login header, .page-public-welcome header {
display: flex;
width: 100%;
padding: 16px 40px;
align-items: center;
flex-shrink: 0;
background: #1b2051;
}
.logo-container {
display: block;
width: 72px;
height: 48px;
background: url('../img/logo.svg') no-repeat center/contain;
}
.page-public-login img, .page-public-welcome img {
width: auto;
height: 48px;
}
.page-public-login header a, .page-public-welcome header a {
display: flex;
margin-left: auto;
align-items: center;
color: #fff !important;
text-decoration: none !important;
}
.page-public-login .login-title, .page-public-welcome .login-title {
margin-left: 18px;
font: 400 18px/28px 'Roboto', sans-serif;
color: #fff;
}
.page-public-login .form-background,
.page-public-welcome .form-background {
display: flex;
position: relative;
justify-content: center;
align-items: center;
flex-grow: 1;
background: url('../img/bg.svg') center / cover no-repeat;
}
.page-public-login .form-background::after,
.page-public-welcome .form-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #120439;
opacity: 0.5;
z-index: 1;
}
.page-public-login form {
position: relative;
width: 100%;
max-width: 400px;
padding-bottom: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(44, 145, 235, 0.15)), to(rgba(44, 145, 235, 0))), #1b2051;
background: linear-gradient(180deg, rgba(44, 145, 235, 0.15) 0%, rgba(44, 145, 235, 0) 100%), #1b2051;
border-radius: 10px;
overflow: hidden;
z-index: 2;
}
.page-public-login form .form-header {
margin-bottom: 20px;
padding: 20px 40px;
font: 700 16px/24px 'Roboto', sans-serif;
color: #fff;
background: rgba(18, 4, 57, 0.4);
}
.page-public-login form .input-group {
margin-left: 40px;
margin-right: 40px;
}
.page-public-login form .input-group-buttons { text-align: center }
.container {
display: flex;
height: 100vh;
}
.page-public-login form .message { margin: 24px 40px 0 40px; }
/*.page-public-welcome { flex-direction: initial }*/
.page-public-welcome .form-background {
flex-direction: column;
background: url(../img/bg.svg) center / cover repeat-y;
}
.container aside {
padding: 12px;
flex: 0 0 300px;
min-height: 0;
border-right: 1px solid #3f4a77;
overflow-y: auto;
}
.container aside a {
display: flex;
margin-bottom: 8px;
padding: 12px;
font: 400 16px/24px 'Roboto', sans-serif;
color: #fff;
text-decoration: none !important;
background: transparent;
border-radius: 10px;
align-items: center;
-webkit-transition: background .2s linear;
transition: background .2s linear;
}
.container aside a:hover, .section-link:hover, .section-link.active {
background: #0055d6;
-webkit-transition: background .2s linear;
transition: background .2s linear;
}
.container aside a:last-child { margin-bottom: 0 }
.container aside img { width: 34px }
.container aside span { padding-left: 24px }
.container main {
padding: 24px;
flex-grow: 1;
overflow-y: auto;
min-height: 0;
box-sizing: border-box;
}
.content-card {
background: #1b2051;
border-radius: 10px;
padding: 24px;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.content-card .group-buttons {
display: flex;
margin-bottom: 20px;
justify-content: flex-end;
}
.content-card .input-group-buttons {
display: flex;
margin-top: 30px;
gap: 10px;
}
.list-table {
width: 100%;
border-collapse: collapse;
color: #fff;
margin-top: 10px;
}
.list-table th {
padding: 12px;
font-weight: bold;
border-bottom: 2px solid #3f4a77;
}
.list-table th .th-inner {
display: flex;
align-items: center;
}
.list-table th .asc, .list-table th .desc, .list-table th .sortable {
margin-left: 12px;
width: 16px;
height: 16px;
background: url('/assets/img/sort.svg') 0 0 / 16px 16px no-repeat;
text-decoration: none !important;
}
.list-table th .desc { transform: scaleY(-1) }
.list-table th .sortable {
position: relative;
background: none;
}
.list-table th .sortable:before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
}
.list-table td {
padding: 12px;
border-bottom: 1px solid #3f4a77;
vertical-align: middle;
}
.list-table tr:hover { background: rgba(255, 255, 255, 0.05); }
.list-table.text-center th, .list-table.text-center td { text-align: center }
.diagram-container {
position: relative;
max-width: 1160px;
width: 100%;
margin-top: 36px;
padding: 12px 0;
background: #1b2051;
border-radius: 10px;
z-index: 2;
}
.diagram-container:last-child { margin-bottom: 36px }
.diagram-container.container-fluid {
max-width: 100%;
margin: 0;
padding: 0;
}
.diagram-container h2 {
display: block;
padding: 14px 0;
font: 700 32px / 32px 'Roboto', sans-serif;
background: none;
text-align: center;
border-radius: 0;
}
.diagram-container-body {
margin: 12px;
width: 100%;
height: 500px;
}
#selected-tags td { text-align: center }
.sentiment {
display: block;
padding-left: 30px;
font: 400 14px / 24px 'Roboto', sans-serif;
background-size: 24px 24px;
background-position: 0 0;
background-repeat: no-repeat;
}
.sentiment.smile { background-image: url("/assets/img/smile.svg"); }
.sentiment.meh { background-image: url("/assets/img/meh.svg"); }
.sentiment.sad { background-image: url("/assets/img/sad.svg"); }
#selected-tags .sentiment { display: inline-block }