.main-header-title {
	font-family: 'Rock Salt';
	color: var(--vr-main-color);
	text-shadow: 1px 3px 1px rgb(0 0 0 / 0.53);
	font-size: 20px;
}

.main-header-subtitle {
	font-size: 13px;
	color: var(--vr-main-subcolor);
	line-height: 7px;
	font-family: fantasy;
}

.rounded-circle {
	border: 1px solid var(--vr-main-color);
}

.nav-item.active>a {
	background-color: #2f3c48 !important;
}

.nav-item-user,
.nav-account-balance {
	/*margin: auto;*/
	padding-right: 5px;
	font-family: sans-serif;
}

.nav-account-balance {
	color: var(--vr-main-subcolor);
}

li.empty::before {
	content: "" !important;
	background: transparent !important;
}

.gj-datepicker [role=right-icon] {
	width: 40px !important;
}

.main-content-container {
	width: 95%;
	margin: auto;
	padding: 10px;
	background: var(--main-container-color);
	border-radius: 15px;
	min-height: 81vh;
}

.table td,
.table th {
	height: 30px !important;
}

.list-menu {
	list-style: disc;
	list-style-type: none;
	display: flex;
	margin: 0;
	padding-left: 0px;
}

.list-menu li,
.list-menu label {
	cursor: pointer;
	padding: 0px 10px 0px 10px;
	border: 1px;
	border-style: solid;
	border-color: transparent;
	color: var(--vr-main-color);
	font: var(--vr-main-font);
	height: 32px;
	display: table;
}

.list-menu .button {
	color: #212529;
	text-shadow: 0px 0px 0px #212529;
	border-radius: 5px;
	margin-right: 7px
}

.button-primary {
	background-color: var(--vr-main-color);
}

.button-danger {
	background-color: var(--vr-danger);
	color: var(--vr-main-subcolor) !important
}

.list-menu bdi {
	vertical-align: middle;
	display: table-cell;
}

/*.list-menu li:hover,
.list-menu label:hover {
	background: var(--vr-main-color);
	color: var(--main-container-color) !important;
	border-radius: 5px;
	border: 1px solid #6F89A3;
}*/

.list-menu li[disabled] {
	color: #666a6d;
	border: 0;
	cursor: default;
	pointer-events: none;
}

.tooltip-inner {
	font-size: 11px !important;
	text-align: left !important;
	white-space: nowrap;
	min-width: 100px !important;
	max-width: 100% !important;
}

.tooltip {
	z-index: 9999 !important;
}


.separator {
	cursor: default !important;
	width: 1px !important;
	padding: 0 !important;
	background: #83a4ca !important;
	height: 20px !important;
	margin: 6px !important;
	border-right: solid 1px #171819 !important;
	opacity: 0.4 !important;
	color: #91c8f6;
	border: 1px;
	border-style: solid;
	border-color: transparent;
}

/* The container */
.cbox-container {
	display: block;
	position: relative;
	padding-left: 20px;
	margin-bottom: 20px;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

/* Hide the browser's default checkbox */
.cbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #2f3c48;
	border: 1px solid #6d86a1;
}

/* On mouse-over, add a grey background color */
.cbox-container:hover input~.checkmark {
	background-color: #6f89a4;
}

/* When the checkbox is checked, add a blue background */
.cbox-container input:checked~.checkmark {
	background-color: #6f89a4;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.cbox-container input:checked~.checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.cbox-container .checkmark:after {
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#holder {
	min-height: 100%;
	position: relative;

}

#header {
	background-color: #354a5f;
	height: 100%;
	border-bottom: 1px solid #98ccfd;
}

.header-inner {
	position: absolute;
	top: 0;
	left: 100px;
}

.header-inner h1 {
	font-family: 'Rock Salt';
	color: #98ccfd;
	text-shadow: 1px 3px 1px rgb(0 0 0 / 0.53);
}

.login-wrapper {
	min-height: 90%;
	position: absolute;
	width: 100%;
	margin-top: 60px;
	/*background: url(../img/login-background.jpg) no-repeat center center fixed;
	background-size: 100%;*/
}

.page-container {
	width: 100%;
	height: 100%;
	background-color: #00000054;
	padding: 0px 15px 0px 15px
}

.search-container {
	width: 50%;
	text-align: center;
}

.search-container input {
	width: 50%;
	border: 1px solid var(--vr-main-color);
	background-color: var(--vr-main-bgcolor);
	border-radius: 5px;
	color: var(--vr-main-subcolor);
	padding: 5px 25px 5px 5px;
	position: relative;
}

.search-container i {
	position: fixed;
	margin: 7px -26px;
	font-size: 20px;
	color: var(--vr-main-color)
}

.login-box {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 20%;
	transform: translate(-50%, -50%);
	height: auto;
	box-shadow: 2px 4px 6px -1px rgb(0 0 0 / 45%);
	border-radius: 10px;
	font: var(--vr-main-font);
}

.wrapper-background-main {
	position: relative;
	width: 100%;
	height: fit-content
}

.wrapper-background-main::after {
	min-height: 100%;
	content: "";
	background: url(../images/main-background.png);
	opacity: 0.3;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-attachment: fixed;
	background-size: 100% 100%;
	background-position-x: center;
	background-position-y: center;
}

.wrapper-background-login {
	position: relative;
	width: 100%;
	height: 100%;
}

.wrapper-background-login::after {
	min-height: 100%;
	content: "";
	background: url(https://wallpaperaccess.com/full/313268.jpg);
	opacity: 0.3;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-attachment: fixed;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
}

#body {
	padding-bottom: 80px;
}

#footer {
	background-color: #354a5f;
	bottom: 0;
	height: 85px;
	left: 0;
	position: absolute;
	right: 0;
	border-top: 1px solid #98ccfd;
}

#logo {
	padding-top: 20px;
}

.account-container {
	background: #354a5f;
	/*border: 1px solid #98ccfd;*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 2px 4px 6px -1px rgba(0, 0, 0, 0.45);
}

.login {
	width: 325px;
	margin: 10% auto;
}

.login-fields input,
select {
	font-size: 13px;
	color: #dff0fe;
	padding: 10px 5px 10px 5px;
	display: block;
	margin: 0;
	border: 0;
	background-color: var(--vr-field-bgcolor);
	width: 100%;
}

.signup {
	width: 325px;
	margin: 5px auto;
}

.signup input {
	padding: 11px 15px 10px 10px !important;
	width: 295px !important;
	background-color: #FFF !important;
}

.signup select {
	width: 322px !important;
	padding: 11px 15px 10px 10px !important;
}


.submit-button {
	background-color: #689cc7;
	color: #FFF !important;
	width: 100px;
	padding: 10px;
	border: 1px solid #EEE;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.09em;
}

.login-actions {
	margin: 15px 0 0 205px;
}

.login-header {
	background: rgba(0, 0, 0, 75%);
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 15px;
}

.login-header h1 {
	font: var(--vr-main-font);
	margin-bottom: 0;
	color: var(--vr-main-color);
	font-weight: bolder;
	font-size: initial;
}

.login-content {
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0 0 5px 5px;
}

.login-extra {
	display: block;
	width: 300px;
	margin: 1.5em auto;
	text-align: right;
	line-height: 19px;
}

.alert-message {
	width: fit-content;
	position: fixed;
	left: 50%;
	bottom: 15px;
	padding: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: none;
	transform: translate(-50%, -50%);
	border: 1px solid #435559;
	-webkit-box-shadow: 2px 4px 6px -1px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 2px 4px 6px -1px rgba(0, 0, 0, 0.45);
	box-shadow: 2px 4px 6px -1px rgba(0, 0, 0, 0.45);
	z-index: 1000000;
	background-color: var(--main-header-color);
	font: var(--vr-main-font);
}

.error {
	color: var(--danger);
}

.success {
	color: var(--vr-main-color);
}

.warning {
	color: var(--warning);
}

.pointer {
	cursor: pointer;
}

#file-upload {
	display: none;
}

.tooltip-container {
	background-color: #202932;
	position: fixed;
	padding: 0px 8px;
	font-size: 11px;
	border-radius: 3px;
	box-shadow: 2px 4px 6px -1px rgba(0, 0, 0, 0.45);
	width: auto;
	height: auto;
	display: block !important;
	z-index: 9999 !important;
	color: #ddd;
	font-family: var(--vr-main-font-family);
}

.tooltip-container:after,
#tooltip-container:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-color: rgba(255, 255, 255, 0);
}

.tooltip-container:before {
	border-top-color: rgba(32, 41, 50, 1) !important;
	margin-left: -9px;
	border-width: 9px;
}

.tooltip-container:after {
	border-top-color: rgba(32, 41, 50, 1) !important;
	margin-left: -6px;
	border-width: 6px;
}

.danger-button,
.danger {
	color: var(--danger) !important;
}

.info {
	color: var(--vr-main-color)
}

.form-toolbar-buttons {
	border-bottom: 2px groove #b6dcfe40;
}

.form-toolbar-buttons ul {
	margin-bottom: 5px !important;
}

.form-group-container {
	width: 50%;
	transform: translate(50%, 0%);
}

.required::before {
	content: '*';
	color: #e08505;
	font-weight: bold;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.popup-dialog {
	position: fixed;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--main-container-color);
	border: 1px solid #343a40;
	border-radius: 10px;
	box-shadow: var(--vr-box-shadow);
	z-index: 9999;
}

.popup-dialog h3 {
	font-weight: 700;
	display: flex;
}

.popup-dialog form {
	height: 100%;
}

.dialog-content {
	color: var(--vr-main-subcolor);
	border-radius: 10px;
	height: fit-content;
	width: 50%;
	margin: auto;
	margin-top: 5px;
	font-size: larger;
	padding-bottom: 10px;
}

.dialog-content figure {
	filter: drop-shadow(2px 4px 6px black);
	text-align: center;
}

.panel-container {
	background-color: var(--vr-main-bgcolor);
	padding: 15px 10px;
	border-radius: 10px;
}

.panel-container {
	margin-bottom: 30px;
}

.button-close-dialog {
	position: fixed;
	right: 5px;
	top: 0px;
	font-size: 25px;
	color: aliceblue;
	background-color: transparent;
	border: 1px solid transparent;
	cursor: pointer;
}

#button-confirm {
	color: var(--vr-main-color);
	padding: 7px;
	border: 1px solid transparent;
	cursor: pointer;
}

.button-close-dialog:hover {
	border-radius: 5px;
	color: var(--vr-main-color);
	font-weight: 800;
	text-shadow: 2px 3px 1px black;
}

.application-header {
	display: flex;
	border-bottom: 2px groove #b6dcfe40;
	margin-bottom: 20px;
}

.app-icon {
	font-size: 40px;
	margin: auto 0;
	color: #91c8f6;
}

.app-header {
	display: inline-block;
	margin: 0;
	padding-left: 10px;
	width: 90%;
}

.app-header-title {
	margin-bottom: -10px;
}

.app-header-title h1 {
	color: var(--vr-main-color);
}

.app-header-subtitle {
	margin-bottom: 10px;
	color: var(--vr-main-subcolor);
	font: var(--vr-main-font);
}

.record-entries,
.counter-dialog,
.account-period {
	text-align: right;
	width: 12%;
	padding-right: 10px;
	text-transform: uppercase;
	margin: auto 0;
	display: grid;
	color: #ffdf72;
}

.count-complete {
	font-size: 11px;
}

.record-entries bdi,
.account-period bdi {
	font-size: 22px;
	font-weight: 700;
}

.dropdown-list {
	display: flex;
	margin: auto 0;
	font-family: var(--vr-main-font);
}

.dropdown-list select {
	width: 80px;
	padding: 0;
	margin-left: 5px;
	border-radius: 3px;
	background: var(--vr-main-bgcolor);
	border-color: var(--vr-main-color);
	font-size: small;
	color: var(--vr-main-subcolor);
}

.dropdown-list select * {
	background: var(--main-header-color);
}

.dropdown-list input {
	text-align: right;
	background-color: var(--vr-main-bgcolor);
	border: 1px solid var(--vr-main-color);
	width: 70px;
	color: var(--vr-main-subcolor);
	border-radius: 5px;
}

.dropdown-list bdi {
	color: var(--vr-main-color)
}

.form-header-title {
	margin: auto;
	pointer-events: none;
	font-size: 18px;
	color: aliceblue !important;
}

.toolbar-spacer {
	margin: auto;
	pointer-events: none;
}

.inner-dropdown,
.dropdown-arrow {
	position: absolute;
	color: var(--vr-main-color);
	right: 19px;
	margin-top: 5px;
	cursor: pointer;
	font-size: 25px;
}

.currency-container,
.service-list-container,
.dropdown-list-container {
	max-height: 80vh;
	border: 2px groove #57596257;
	overflow-y: auto;
	position: fixed;
	width: 95%;
	background: var(--main-header-color);
	box-shadow: 7px 8px 4px 0px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	font: var(--vr-main-font);
}

.currency {
	width: 40px;
	padding-left: 5px !important;
}

.service-list-container {
	width: 50%;
	border-radius: 10px;
	padding: 10px;
	text-align: left;
	color: var(--vr-main-subcolor)
}

.service-title {
	border-bottom: 1px solid var(--vr-main-subcolor);
}

.service-title h3 {
	font-size: 17px;
	font-weight: 700;
}

.service-items {
	display: inline-flex;
	margin-top: 5px;
	width: 100%;
	padding: 5px;
	border: 1px solid transparent;
}

.service-items img {
	height: 20px;
	padding-right: 5px;
}

.service-items:hover {
	background-color: #13171c;
	cursor: pointer;
}

.service-name {
	width: 25%;
}

.service-description {
	padding: 1px;
}

.list-item {
	display: flex;
	cursor: pointer;
	padding: 5px 0px 5px 15px;
}

.list-item:hover {
	background-color: var(--vr-main-color);
	color: var(--main-header-color)
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--vr-main-bgcolor);
}

::-webkit-scrollbar-thumb {
	background: var(--vr-main-color);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: #78c9c9;
}

.loan-details-container {
	width: 100%;
	background: #2d3640;
	border-radius: 4px;
	border: 1px solid #3c4853;
	padding: 10px;
	display: flex;
	margin-bottom: 10px;
	color: var(--vr-main-subcolor);
}

.card:hover {
	filter: drop-shadow(2px 4px 6px gray) !important;
	background-color: #141414 !important;
	border: 1px solid var(--vr-main-color);
}

.loan-details {
	width: 20%;
	display: grid;
	font-weight: 600;
}

.gj-datepicker-md [role=right-icon] {
	color: #b6dcfe;
	display: none;
}

.project-info {
	background-size: 10%;
	background-repeat: no-repeat;
	background-position-x: 99%;
	background-position-y: center;
	color: #dee2e6;
}

.lea-bank {
	background-size: 5% !important;
	background-image: url("https://leabank.no/_next/image?url=https%3A%2F%2Fleabankstorage.blob.core.windows.net%2Fstrapi-uploads%2Fassets%2Flea_bank_classic_06ca027eef.png&w=128&q=75");
}

.bank-norwegian {
	background-image: url("../images/bank-norwegian.png");
}

.chr {
	background-image: url("https://kong-proxy-aws.toyota-europe.com/c1-images/resize/ccis/680x680/png/no/product-token/9df52baa-0b62-47b4-b32e-624880172ca1/vehicle/4602e10c-7985-499e-a92e-686a19556477/padding/50,50,50,50/image-quality/70/day-exterior-04_1k3.webp");
	background-size: 20% !important;
}

.casa-mira {
	background-image: url("https://exvest-pro.rommel-lamanilao.no/images/casa-mira.jpg");
}

.camella {
	background-image: url("https://exvest-pro.rommel-lamanilao.no/images/camella.jpg");
}

.starex {
	background-image: url("https://exvest-pro.rommel-lamanilao.no/images/starex.png");
	background-size: 18% !important;
}

.yaris {
	background-image: url("https://exvest-pro.rommel-lamanilao.no/images/yaris-life.png");
	background-size: 18% !important;
}

.middle {
	vertical-align: middle !important;
}

.fieldset {
	border-right: 3px groove #516476;
	border-left: 3px groove #516476;
}

.flex {
	display: flex;
}

.input-filter-year {
	width: 63px;
	margin-left: 5px;
	background-color: #29313a;
	color: #fff;
	border: 1px solid #939aa6;
	border-radius: 3px;
	padding-left: 10px;
}

.super {
	vertical-align: super;
	font-size: 10px;
	text-decoration: underline;
}

.page-outer {
	padding: 0em 8%;
	width: 100%;
	height: 100%;
}

.tile-group-title {
	display: inline-flex;
	color: var(--vr-main-color);
	height: 40px;
	text-transform: uppercase;
	margin-top: 30px
}

.tile-group-title h2 {
	font-size: 1.385rem;
	font-weight: 600;
	padding-left: 5px;
	padding-top: 4px;
	filter: drop-shadow(2px 4px 6px black);
}

.tile-title,
.dialog-header-title {
	color: var(--vr-main-subcolor)
}

.tile-title p {
	line-height: 18px;
	color: var(--vr-main-subcolor)
}

.tile-title h2,
.dialog-header-title h2 {
	font-weight: 600;
}

.tile-icon,
.tile-title {
	margin: auto 5px
}

.tile-icon img {
	height: 40px;
}

.dialog-header-title {
	display: inline-flex;
}

.dialog-header-title i {
	color: var(--vr-main-color)
}

.dialog-header-title h2 {
	padding-left: 5px;
}

.combobox-container {
	display: flex;
	background-color: var(--vr-main-bgcolor);
	border-radius: 5px;
	font: var(--vr-main-font);
	color: var(--vr-main-subcolor)
}

.modal-form-container {
	overflow-y: auto;
	height: 637px;
}

i[role="button"] {
	color: var(--vr-main-color);
	font-size: 14px;
}

.error-404 {
	background-image: url(https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/404-Page-Template/404-page-glitch-effect.png);
	background-position: -110px -80px;
	background-size: cover;
}

input[type=number] {
	text-align: right;
}

div[role=calendar] {
	z-index: 10000 !important;
	position: absolute;
	text-align: center;
	box-shadow: 2px 4px 6px -1px rgb(227 202 202 / 45%);
	background-color: var(--main-header-color);
	font-family: var(--vr-main-font);
	border: 1px solid var(--vr-main-color);
}

div[role=period],
.gj-icon,
.gj-picker-bootstrap table tr td.today div {
	color: var(--vr-main-color) !important;
}

.gj-picker-bootstrap {
	color: var(--vr-main-subcolor) !important;
}

.gj-picker-bootstrap table tr td:nth-child(7) div,
.gj-picker-bootstrap table tr th:nth-child(7) div {
	color: var(--danger);
}

.gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover {
	background-color: var(--vr-main-color) !important;
}

.gj-picker-bootstrap table tr td.today div:hover {
	color: rgba(0, 0, 0, 0.45) !important;
}

.modal-footer-2 {
	text-align: right;
	padding: 3px 20px;
}

.modal-footer-2 button {
	border: 1px solid transparent;
	width: 100px;
	background-color: transparent;
	color: var(--vr-main-color);
	border-radius: 5px;
}

.modal-footer-2 button:hover {
	cursor: pointer;
	border-color: var(--vr-main-color);
	color: var(--main-header-color);
	background-color: var(--vr-main-color);
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

.fontawesome {
	color: var(--vr-main-color);
	font-size: 1.3em !important;
}

.counter-dialog {
	display: inline-flex;
}

.counter-dialog bdi {
	margin: 3px 5px
}

.container-table {
	overflow-x: auto;
	/*height: 52vh;
	max-height: 55vh;*/
	border-radius: 10px;
	min-height: 50vh;
}

div[role=wrapper] {
	border: 0
}

body:not(.modal-open) {
	padding-right: 0px !important;
}

.gj-datepicker-bootstrap [role=right-icon] button {
	border: 0 !important;
}

.gj-datepicker-bootstrap [role=right-icon] button .gj-icon {
	font-size: 25px !important;
	top: 5px !important;
}

.modal-footer a {
	background: var(--vr-main-color);
	padding: 7px 25px;
	color: var(--vr-main-bgcolor) !important;
	font-weight: 600;
	border-radius: 4px;
}

:root {
	--vr-main-color: #48abf7;
	--vr-main-bgcolor: rgba(0, 0, 0, 75%);
	--vr-main-subcolor: #c6c9cd;
	--vr-main-font-family: "Plus Jakarta Sans", sans-serif !important;
	--vr-main-font: 14px var(--vr-main-font-family);
	--main-container-color: #1d232a;
	--main-header-color: #040a0d;
	--vr-border-color: #69829c;
	--vr-field-bgcolor: #020203;
	--vr-box-shadow: rgba(0, 0, 0, 0.45) 2px 4px 6px -1px;
	--vr-danger: firebrick;
}

.hide {
	display: none;
}

#filter-name {
	text-align: center;
	color: var(--vr-main-subcolor);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color: var(--vr-main-subcolor) !important;
}

.panel-title {
	font-weight: bold;
	font-size: medium;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.form-roles {
	display: flex;
}

.dialog-header-title>div {
	width: 100%;
	font-weight: 600;
	vertical-align: middle;
	color: var(--vr-main-subcolor);
	font-size: x-large;
	display: grid;
	line-height: 38px;
	filter: drop-shadow(2px 4px 6px black);
	margin-left: 10px
}

.dialog-content-wrapper {
	overflow: auto;
	max-height: 80vh;
}

.dialog-content-list {
	margin: 0;
	border-top-left-radius: 0;
	width: 100%;
	border-top-right-radius: 0;
	padding: 15px;
	height: 70vh
}

.dialog-header-title i {
	font-size: xxx-large;
}

.alert-content {
	padding: 0px 20px 12px 20px;
	color: var(--vr-main-subcolor);
	font-size: medium;
}

.entry-counter {
	background: transparent !important;
	pointer-events: none;
	color: var(--warning) !important;
	font-weight: 700;
	font-size: 0.825rem;
	line-height: 15px;
	text-transform: uppercase;
	text-align: right
}

.entry-counter bdi {
	font-size: 1.2rem;
	margin-bottom: 2px;
	padding-right: 4px;
}

.form-filter-layout {
	display: flex;
	font-size: .875rem;
	color: var(--vr-main-subcolor);
	font-weight: 600;
}

.search-filter {
	display: grid;
	margin-top: 10px;
	width: 25%;
}

.search-filter:not(:first-child) {
	margin-left: 20px;
}

.mobile-filter {
	display: none;
}

.main-container-wrapper {
	background-color: var(--main-container-color);
	border-radius: 15px;
	border: 2px groove #57596257;
}

.page-title {
	display: flex;
	color: var(--vr-main-subcolor) !important
}

.page-title img {
	height: 64px;
	filter: drop-shadow(2px 4px 6px black);
}

.page-title h2 {
	font-weight: 800;
	margin: 0
}

.page-title span {
	font-size: small;
}

.gj-picker-md {
	color: var(--vr-main-subcolor) !important;
}

div[role=calendar] td:last-child {
	color: firebrick
}

.wrapper-host {
	border: 1px solid #7c828c;
	padding: 2px 7px 2px 7px;
	border-radius: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 93px;
	display: inline-block;
	overflow: hidden;
	margin-bottom: -5px;
	height: 21px;
	font-size: smaller;
	text-align: center;
}

.wrapper-host:not(:first-child) {
	margin-left: 4px
}

.hidden {
	display: none;
}

.content-frame {
	border: 2px groove #000;
	border-radius: 10px
}

.panel-entry-counter {
	display: flex;
	padding: 10px;
	color: var(--vr-main-color);
	justify-content: end;
}

.selected-option {
	position: absolute;
	z-index: 1;
	padding: 5px;
	font-size: 14px;
	color: var(--secondary);
	font-weight: normal;
}

.selected-option span {
	border: 1px solid #AAA;
	padding: 1px 7px;
	border-radius: 15px;
	margin-right: 3px;
}

.selected-option bdi {
	margin-right: 3px;
}

.modal-footer-alert {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 1rem;
	border-top: 2px ridge #1d232a;
	bottom: 0;
	right: 0;
}

.div-content-center {
	width: 100%;
	height: 47vh;
	display: table;
}

.div-content-center>div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

div[role="popover"] {
	display: inline-grid;
	background-color: rgb(32, 41, 50);
	font-size: 11px;
	border-radius: 3px;
	box-shadow: var(--vr-box-shadow);
	width: auto;
	height: auto;
	z-index: 9999;
	color: rgb(221, 221, 221);
	border: 1px solid rgb(87, 89, 98);
	position: absolute;
}

.host-info {
	position: fixed;
	bottom: 0;
	left: 0;
	filter: drop-shadow(2px 4px 6px black);
	cursor: pointer;
}

.admin-control {
	position: fixed;
	bottom: 0;
	right: 0;
	filter: drop-shadow(2px 4px 6px black);
	cursor: pointer;
}

.admin-control img,
.host-info img {
	filter: grayscale(1);
	width: 45px
}

.page-title div {
	display: inline-block;
	margin-left: 10px
}

.switch {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 23px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: var(--vr-main-color);
}

input:focus+.slider {
	box-shadow: 0 0 1px var(--vr-main-color);
}

input:checked+.slider:before {
	-webkit-transform: translateX(12px);
	-ms-transform: translateX(12px);
	transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 23px;
}

.slider.round:before {
	border-radius: 50%;
}

.bold {
	font-weight: bold;
}

.card-body-list {
	margin-bottom: 15px;
}

.card-body-list span,
.tile-videos {
	color: var(--vr-main-subcolor)
}

.gospel-view-counter {
	width: 100%;
	text-align: right;
	display: block;
	color: var(--warning);
}

.gospel-view-counter bdi {
	font-size: 1.5rem;
	font-weight: 700;
}

.cf-gospel figure {
	text-align: center;
	filter: drop-shadow(2px 4px 6px black)
}

.content-gospel-inner,
.content-inner {
	color: var(--vr-main-subcolor);
	font-size: larger;
}

.tile-videos img {
	width: 100%;
}

.main-color {
	color: var(--vr-main-color);
}

.content-prayer-inner {
	font-size: larger;
}

.dialog-title {
	text-transform: capitalize;
	line-height: 13px
}

.dialog-subtitle {
	font-size: 16px;
	font-weight: normal;
}

.btn-text {
	color: var(--vr-main-subcolor) !important
}

.btn-text input {
	border-right: 0;
	width: 75px;
	border-bottom: 1px solid var(--vr-border-color) !important;
}

.panel-container .wrapper-host {
	padding: 0;
	height: 25px
}

.cell-image {
	width: 24px;
}

.input-group textarea {
	height: 152px;
	border: 0;
	width: 100%;
	background: var(--vr-field-bgcolor);
	color: var(--vr-main-subcolor);
}

#loading-image {
	background-color: #cccccc4f;
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#loading-image img {
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}

.input-group input {
	height: 32px !important;
	border: 0;
	background-color: var(--vr-field-bgcolor);
	border-radius: 3px;
	width: 100%;
}

.back-to-top {
	color: var(--vr-main-color);
	cursor: pointer;
}

.main-container-wrapper>div {
	min-height: 78vh;
	border-color: transparent !important
}

.justify-center {
	justify-content: center;
}

.dialog-list {
	overflow-y: auto;
	border-radius: 10px;
	border: 2px ridge #212529;
	/*max-height: 63vh;
	height: 64vh;
	min-height: 64vh;*/
}

td i {
	color: var(--vr-main-color)
}

.verse {
	color: var(--vr-main-color);
	font-size: larger;
}

.small-link {
	justify-content: end;
	display: flex;
	font-size: smaller;
	cursor: pointer;
	color: var(--vr-main-color)
}

.small-link i {
	margin-right: 5px
}

.multiple-input i {
	margin-top: 17px;
	margin-left: 5px;
	color: var(--vr-danger);
	cursor: pointer;
}

.rosary-guide {
	justify-content: center;
	display: flex;
	margin-top: 10px;
}

.rosary-guide img {
	filter: invert(1) !important;
	border-radius: 30px;
	box-shadow: 0px 0px 12px 5px;
	width: 606px !important;
	height: 638px !important;
}

.guide-list {
	margin-top: 45px;
	font-size: x-large;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vr-main-subcolor);
}

.guide-list div {
	text-transform: none;
	font-weight: normal;
	font-size: 16px;
	text-align: justify;
	margin-top: 20px
}

.guide-list img {
	height: 24px;
	filter: drop-shadow(2px 4px 6px black)
}

.content-rosary-guide {
	padding: 0px 20px;
}

.input-filter-date {
	width: 107px !important;
	margin-left: 5px !important
}

.card-profile {
	background-color: #1a2035 !important;
}

td[headers='colSocMed'] i {
	margin-right: 5px;
}

.row-reflection {
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-top: 20px
}

.tile-title-container {
	min-height: 14vh;
	display: flex;
	background-color: #343a40ba;
}

.col-md-3 {
	flex: 0 0 25%
}

.pwa-alert {
	background: #1a2035 !important;
	border-radius: 10px !important;
}

.input-date {
	height: 31px !important;
	width: 110px !important;
}

div.card {
	background-size: 100% 100% !important;
}

/* Sun Editor */
.sun-editor .se-btn {
	font-family: var(--vr-main-font-family);
}