/* ========================================================================================================================== */
/* Page Specific CSS Classes                                                                                                  */
/* ========================================================================================================================== */
/* Page Theme Variables                                                                                                       */
/* -------------------------------------------------------------------------------------------------------------------------- */
.light-theme {
	--color-wks-block-bg  : var(--color-c4);
	--color-wks-block-bdr : var(--color-c4);
	--color-wks-img-bdr   : var(--color-c5);
	--color-wks-cls       : var(--color-c6);
	--color-wks-cls-hvr   : var(--color-c7);
}
.dark-theme {
	--color-wks-block-bg  : var(--color-c4);
	--color-wks-block-bdr : var(--color-c4);
	--color-wks-img-bdr   : var(--color-c2);
	--color-wks-cls       : var(--color-c2);
	--color-wks-cls-hvr   : var(--color-c7);
}
.bright-theme {
	--color-wks-block-bg  : var(--color-c4);
	--color-wks-block-bdr : var(--color-c4);
	--color-wks-img-bdr   : var(--color-c2);
	--color-wks-cls       : var(--color-c2);
	--color-wks-cls-hvr   : var(--color-c7);
}
/* -------------------------------------------------------------------------------------------------------------------------- */
/* Main Dashboard                                                                                                             */
/* -------------------------------------------------------------------------------------------------------------------------- */
.mdb-main-container {
	display        : flex;
	flex-direction : column;
	column-gap     : 20px;
	row-gap        : 20px;
}
.wks-block {
    background-color : var(--color-wks-block-bg);
	border           : 1px solid var(--color-wks-block-bdr);
    min-height       : 50px;
    border-radius    : 5px;
    padding          : 10px;
    display          : flex;
    flex-direction   : column;
    font-size        : 18px;
}
/* -------------------------------------------------------------------------------------------------------------------------- */
.mdb-block-row {
    display   : flex;
    flex-wrap : wrap;
}
.mdb-block-row .card-box {
    background-color : var(--color-gs1-blue-pale);
}
.mdb-block {
    flex-grow   : 1;
    flex-shrink : 0;
    padding     : 20px;
    background-color : var(--color-c2);
}
.mdb-block.active {
    cursor : pointer;
}
.mdb-block > div {
    margin  : 0;
    padding : 15px !important;
    min-height  : 100%;
}
.mdb-block.active > div:hover {
    background-color : whitesmoke !important;
}
.mdb-block.active > div:hover .mdb-block-content .counter {
    color : var(--color-gs1-orange);
}
.mdb-block.active > div:hover .mdb-block-text-main > span {
    color : var(--color-gs1-blue);
}
.mdb-block.active > div:hover .mdb-block-text-dbl > span {
    color : var(--color-gs1-blue);
}
.mdb-block > div > div {
    height         : 100%;
    display        : flex;
    flex-direction : row;
    align-content  : center;
}
.mdb-block-icon {
    flex-basis      : 80px;
    flex-shrink     : 0;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}
.mdb-block-icon > img {
    width : 100%;
}
.mdb-block-content {
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
    text-align     : right;
    margin-left    : 20px;
}
.mdb-block-content .counter {
    font-size   : 22px;
    font-weight : bold;
}
.mdb-block-text-main {
    flex-grow       : 1;
    display         : flex;
    flex-direction  : column;
    justify-content : flex-end;
}
.mdb-block-text-main > span {
    color     : darkgray;
    font-size : 20px;
}
.mdb-block-text-dbl > span {
    color     : darkgray;
    font-size : 20px;
}
@media (max-width: 1280px) {
    .mdb-block-row {
        flex-direction : column;
        flex-wrap      : nowrap;
    }
}
/* ========================================================================================================================== */
.wks-welcome-content {
    display        : flex;
	flex-direction : row;
	align-items    : stretch;
	position       : relative;

}
.wks-welcome-image {
    flex-basis  : 220px;
    flex-shrink : 0;
    position    : relative;
    /* overflow    : hidden; */
	border-right : 1px solid var(--color-wks-img-bdr);
	display: flex;
    align-items: center;
}
@media (max-width: 768px) {
    .wks-welcome-image {
        flex-basis  : 120px;
    }
}
.wks-welcome-image > div {
    /* position : absolute; */
    width    : 100%;
	padding-right: 30px;
	filter : invert(var(--filter-invert-wks-img));
}
.wks-welcome-image > div > img {
    width    : 100%;
}
.wks-welcome-body {
    flex-grow    : 1;
    margin-left  : 30px;
	margin-right : 15px;
	color : var(--color-c2);
}
.wks-close-btn {
	position : absolute;
	top      : 0;
	right    : 5px;
	color    : var(--color-wks-cls);
	cursor   : pointer;
}
.wks-close-btn:hover {
	color : var(--color-wks-cls-hvr);
}
.wks-tour-btn {
	color           : var(--color-c7);
	text-decoration : underline;
	font-weight     : bold;
	cursor          : pointer;
}
/* ========================================================================================================================== */