/* Basic elements */
html {
		position: relative;
		width: 100%;
		height: 100%
}

body {
		color: #aaa;
		background-color: #000;
		font-family: sans-serif;
		font-size: 13px;
		line-height: 1.22;
		margin:0;
		padding: 0;
		position: relative;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		outline: none;
}
a, a:visited, a:link {
		color: #1d7596;
}
a:hover, a:active {
		color: #d90d0d;
}
h1 {
		font-weight: 500;
}
h2, h3, h4, h5, h6 {
		font-weight: 500;
}
form {
		margin:0;
		padding: 0;
}
.disabled {
		color: #dedede
}
section {
		position: relative;
		width: 100%;
		height: 100%
				/*		padding: 10px; */
}
footer {
    background: #333;
    color: #fff;
    padding: 5px 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
		z-index: 20;

		/*		animation-duration: 1s;
				animation-name: fadein;*/

}

@keyframes fadein {
		from {
				opacity: 0;
				/*translate: 0 5vw;*/
				/*scale: 1 200%;*/
		}
		to {
				opacity: 1;
				/*translate: 0 0;*/
				/*scale: 1 100%;*/
		}
}

pre code, code {
		font-family: sans-serif;
		font-size: 15px;
		background: #f6f6f6;
		border: 1px solid #dedede;
		border-radius: 3px;
		display: block;
		padding: 10px;
		margin:10px auto;
		white-space: pre-wrap;
}
pre code ul li {
		font-family: sans-serif;
		font-size: 14px;
}
#logo {
		float: left;
		height: 22px;
		margin-left: 20px;
}
#qcubed-4_logo {
		float: left;
		height: 50px;
		margin-top: -15px;
		margin-right: 10px;
}
#tagline a {
		color: #fff;
		font-weight: 700;
		line-height: 22px;
		margin-left: 10px;
		text-decoration: none;
		font-size: 12px;
}


button {
    cursor: pointer;
    border: 1px solid #666;
    border-radius: 3px;
    color: #cdf;
    background-color: #224;
}

button :hover {
		border-color: blue;
}

select {
		border: 1px solid #999;
		outline: none;
}
form {
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		height: 100%;
		overflow-y: auto;
}
/**
 * Styles of individual QCubed\Control types
 */
.datagrid {
    margin: auto;
    width: 100%;
    border-spacing: 1px;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
		font-size: 10px;
		line-height: 1.2;

		/*		animation-duration: 0.6s;
				animation-name: fadein;*/

}
.ui-dialog {
		animation-duration: 0.6s;
		animation-name: fadein;

}
.datagrid th {
    background-color: #333;
    color: #fff;
    padding: 5px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    border-left: 1px solid #ffffff50;
    border-right: 1px solid #ffffff50;
}
.datagrid th a {
		color: #f6f6f6;
		text-decoration: none;
		white-space: nowrap;
}
.datagrid th a:hover {
		text-decoration: underline;
}
.datagrid th.sortable :hover {
		opacity: 0.95;
}
.datagrid th.sortable div span {
		text-align: center;
}
.datagrid th.sortable div i.fa {
    float: right;
    display: inline-table;
}

#pnlList .datagrid  {
		margin: 31px auto 20px;
}

#pnlList table.dtgSupprDomainListItems,
#pnlList table.dtgSupprListItems,
#pnlList table.dtgSuppressions
{
		margin: 20px auto;
}

#pnlList table.dtgAffiliates,
#pnlList table.dtgSupprDomainLists,
#pnlList table.dtgSupprLists,
#pnlList table.dtgUnsubDomains
{
		margin: 60px auto;
}



#pnlDbg {
    position: fixed;
    z-index: 9999999;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.3);
    width: 300px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}


#pnlMain {
    display: inline-block;
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("/project/assets/images/logo01.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}


#pnlInfo {
    display: inline-block;
    width: 250px;
    position: absolute;
    right: 5px;
    background-color: #004;
    padding: 10px;
    top: 5px;
    min-height: 200px;
    max-height: 95%;
    overflow-y: auto;
}

#pnlActiveCard {
		display: inline-block;
}




#pnlControls {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9900;
}


#pnlControls .button {
    display: flex;
    border: 1px solid #666;
    border-radius: 5px;
    color: #cdf;
    background-color: #224;
    padding: 5px;
    margin: 5px;
    padding-left: 20px;
    margin-left: -20px;
    transition-duration: 0.2s;
    width: 100px;
    justify-content: center;
    align-items: center;
		font-size: 10px;
}



#pnlControls .button:hover {
		margin-left: -12px;
}



#pnlControls .active {
    border-color: yellow !important;
}


#pnlBtn0,
#pnlBtn1 {
    display: flex;
}


#btnInfoLvl0,
#btnInfoLvl1,
#btnRemoveAddShuffleCards0,
#btnRemoveAddShuffleCards1,
#btnRemoveAddShuffleCards2 {
    font-size: 11px;
		height: 42px;
}

#pnlControls #btnInfoLvl0,
#pnlControls #btnInfoLvl1 {
    width: 25px;
    padding: 5px;
    margin: 5px 0;
    font-weight: bold;
    font-size: 15px !important;
}

#btnStopSound, #btnReplaySound {
    height: 30px;
    font-size: 14px;
}



.cardCoverTop {
    top: 0;
    background-color: rgba(20, 20, 200, 0.6);
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    background-image: url(/project/assets/images/male.png);
}


.cardCoverBott {
    top: 50%;
    background-color: rgba(200, 20, 100, 0.6);
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    background-image: url(/project/assets/images/female.png);
    rotate: 0 0 1 180deg;
}

.cardCoverTop:hover {
    background-color: rgba(60, 60, 250, 0.7);
		scale: 1.02;
}

.cardCoverBott:hover {
    background-color: rgba(240, 60, 140, 0.7);
		scale: 1.02;
}


.cardCoverTop, .cardCoverBott {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    opacity: 0.3;
		scale: 0.98;
}




.card {
    display: block;
    width: 83%;
    height: 80%;
    background-color: rgba(100, 100, 180, 0.95);
    top: 6%;
    left: 2%;
    position: absolute;
    border-radius: 10%;
    border: 0.4vw solid;
    rotate: -2deg;
    scale: 95%;
    opacity: 0.5;
    text-align: left;
}


.card p {
    margin: 5px;
    text-align: left;
    font-size: 10px;
}

.card small {
    position: relative;
    left: 10px;
    top: 5px;
    font-size: 0.8vw;
}


#cardBigOverlay {
    display: block;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    z-index: 9000;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
		opacity: 0.5;
}



#cardBigClose {
    width: 80px;
    height: 80px;
    background-color: #ff4d4d;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s;
    right: -100%;
    top: 0;
    margin: -40px 0 0 40px;
    opacity: 0.5;
}

.cardBigCloseRot {
    right: 0 !important;
    top: 100% !important;
    margin: -40px 0 0 -120px !important;
}

@media only screen and (orientation: portrait) {

		#cardBigClose {
				margin: -120px 0 0 -40px;
		}

		.cardBigCloseRot {
				margin: 40px 0 0 -40px !important;
		}
}


#cardBigClose:hover {
		opacity: 1;
}

#cardBigClose::before,
#cardBigClose::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 8px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}


#cardBigClose::after {
		transform: translate(-50%, -50%) rotate(-45deg);
}


#cardBig {
    display: block;
    position: fixed;
    left: 25%;
    top: 10%;
    width: 50%;
    border: 25px solid;
    border-radius: 50px;
    scale: 60%;
    cursor: pointer;
    z-index: 9001;
    outline: 1px solid transparent;
    aspect-ratio: 2/3;
}



#cardBig small {
    position: relative;
    top: 10px;
    left: 10px;
}

.intense {
		border-color: red;
}


.cardFront p, .cardFrontTop p, .cardFrontBott p {
    padding: 0 15px;
    font-size: 2vw;
    margin: 0;
    text-align: justify;
    color: #fff;
    line-height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-shadow: 2px 2px 6px black;
}


.cardFront p {
		height: 50%;
}


.cardFrontTop, .cardFrontBott {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    opacity: 0.9;
}


.cardFrontTop {
    top: 0;
    background-color: rgba(20, 20, 200, 0.7);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background-image: url(/project/assets/images/male.png);
}

.cardFrontBott {
    top: 50%;
    background-color: rgba(200, 20, 100, 0.7);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    rotate: 0 0 1 180deg;
    background-image: url(/project/assets/images/female.png);
}

.cardFront {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 100, 180, 0.6);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}




.pnlCards {
    display: grid;
    text-align: center;
    margin: auto auto;
    width: 99%;
    height: 100%;
    grid-template-columns: repeat(6, 0fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    justify-content: center;
}

.cardPlaceHolder {
		display: inline-block;
		border: 1px solid #226;
		border-radius: 2%;
		margin: 0.3%;
		background-color: rgba(100, 100, 200, 0.1);
		position: relative;
		backdrop-filter: blur(8px);
		aspect-ratio: 2/3;
		/* max-width: 14vw; */
		/* min-width: 12vw; */
		max-height: 30vh;
		min-height: 25vh;
}



































table.dtgAffiliates .red
{
    color: #d18888;
    font-weight: bold;
}

table.dtgAffiliates .green
{
    color: #7a7;
    font-weight: bold;
}

table.dtgAffiliates .orange
{
    color: #e1ac69;
    font-weight: bold;
}






#pnlList .datagrid th.sortable div i {
		opacity: 0.3;
}
#pnlList .datagrid th.sortable div i:hover{
		opacity: 1;
}

#pnlList .pnlButtons {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: -40px;
}

#pnlList .pnlButtons button {
    width: 100px;
    text-align: right;
    padding: 5px 20px 5px 0;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
    outline: none;
    transition-duration: 0.2s;
}

#pnlList .pnlButtons button:hover {
    border: 1px solid blue;
    translate: 5px 0;
}


#pnlList .pnlAddSuppressionsInfo {
    position: absolute;
    top: 2px;
    left: 540px;
}

#pnlList .pnlAddSuppressions {
    position: relative;
    margin: 10px 0 0;
}

#pnlList .pnlAddSuppressions .form-name {
    float: left;
    text-align: right;
    width: 180px;
    margin: 5px 10px;
}

#pnlList .pnlAddSuppressions .form-field {
    margin: 3px 5px 10px;
    width: 300px;
    display: inline-block;
}

#pnlList .pnlAddSuppressions select {
    width: 300px;
}

#pnlList .pnlAddSuppressions textarea {
    width: 300px;
}

#pnlList .pnlAddSuppressions .btnCheck {
    margin: 0 0 0 205px;
}

#pnlList .pnlAddSuppressions .btnAdd {

}

#pnlList .pnlAddSuppressions button {
    width: 60px;
}

#pnlList .pnlAddSuppressions button:hover {
		border-color: blue;
}


#pnlList .pnlHelp hr {
    border-color: #fff;
    box-shadow: 0px 0px 8px #00000030;
}



table.datagrid tbody tr:hover {
		background-color: #eea;
		border-bottom: 2px solid rgba(0, 0, 0, 0.2);
		box-shadow: 0px 0px 8px #333;
}
table.datagrid tr {
		border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.datagrid td {
    border-bottom: 1px solid #dedede;
    padding: 0 3px;
    text-align: center;
    border-right: 1px solid #00000010;
    border-left: 1px solid #00000010;
}

table.dtgCampaigns td,
table.dtgAffiliates td,
table.dtgCreatives td,
table.dtgUsers td,
table.dtgUnsubDomains td
{
		padding: 5px 3px;
}


.datagrid .link a {
		color: #007;
		cursor: pointer;
		text-decoration: none;
		font-size: 11px;
}
.datagrid .link a:hover {
		border-bottom: 1px dotted #000;
		color: #22f;
}


.datagrid .time {
    font-size: 10px;
    letter-spacing: -0.3px;
}

.datagrid .time .timeLater {
    color: #4cc703;
    font-weight: 700;
    font-size: 12px;
}

.datagrid .time .timeEarlier {
    color: #850000;
    font-weight: 700;
    font-size: 12px;
}



.datagrid caption {
		overflow: hidden;
		padding: 5px;
		position: relative;
}
.datagrid .paginator-control {
		float: right;
}
.datagrid .paginator-results {
		float: left;
}
.paginator .arrow {
		color: #dedede;
		font-style: italic;
}
.paginator .arrow a {
		font-style: normal;
}
.paginator .break {
		color: #dedede;
		padding: 5px;
}
.paginator .page {
		color: #dedede;
		display: inline-block;
		padding: 0 5px;
}
.paginator .selected {
		background: #1d7596;
		border: 1px solid #3a6d93;
		border-radius: 3px;
		display: inline-block;
		color: #fff;
		padding: 0 5px;
}
/* Status coloring */
.warning {
		color: orange;
}
.error {
		color: red;
}
.success {
		color: green;
}
/* SQL Profiling */
.qDbProfile {
		/*position: absolute;*/
		background-color: white;
		padding: 5px;
		top: 0;
		right: 0;
		z-index: 5000;
		border: 1px solid black;
}
.qDbProfile a {
		position: relative;
}
/* Modification to jquery ui dialog styling that allows for left/right buttons and other fixes */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
		float: none !important;
		text-align: right;
}
.ui-button-left {
		float: left;
}
/* The following is to allow for correct positioning of an alert icon */
.ui-dialog-title {
		float: none !important;
		width: auto !important;
}
.ui-dialog-titlebar .ui-icon {
		display: inline-block;
		margin-right: .3em;
		vertical-align: middle;
}
/**
 * Utility classes to format objects as tables, without using table tags to be more correct in our html.
 Used in CheckList and RadioList
*/
.qc-table {
		display: table;
}

.qc-tableRow {
		display: table-row;
}

.qc-tableCell {
		display: table-cell;
}

.qc-table input.qc-tableCell {
    margin: 0px 5px 0px 0px;

}

.qc-table label.qc-tableCell {
}




/**
 * For generated list forms that you can click on to edit an item, this styles the cursor so it looks like the
 * row is clickable, and it prevents accidentally selecting text in the row.
 */
.clickable-rows tr td,
.clickable-rows tr th {
		-webkit-user-select: none;
		/* webkit (safari, chrome) browsers */
		-moz-user-select: none;
		/* mozilla browsers */
		-khtml-user-select: none;
		/* webkit (konqueror) browsers */
		-ms-user-select: none;
		/* IE10+ */
		cursor: pointer;
}
.clickable-rows tr:hover {
		background-color: #f0f0f0;
}


/** Error notice styling */
#Qcubed_AJAX_Error {
		position: fixed;
		background-color: white;
		border: 2px solid black;
		left: 20px;
		right: 20px;
		top: 20px;
		z-index: 10000;
		padding: 20px;
}


.ui-widget-overlay {
    background: #000;
    opacity: 0.7;
		/*  filter: Alpha(Opacity=30);	*/
}

.ui-dialog .ui-dialog-content .form-name {
    float: left;
    width: 22%;
    text-align: right;
    font-size: 12px;
    clear: both;
		line-height: 16px;
}

.ui-dialog .ui-dialog-content .form-field {
    margin: 0px 0 3px 2%;
    display: inline-block;
    text-align: left;
}

.ui-dialog .ui-dialog-content label {
		font-weight: normal;
}

.ui-dialog .ui-dialog-content .form-field .error,
.ui-dialog .ui-dialog-content .form-field .warning {
		display: inline-block;
		position: absolute;
		margin: 2px 0 0 5px;
		padding: 4px 5px 0px;
		font-size: 9px;
		height: 15px;
		line-height: 10px;
		color: #e00;
}

.ui-dialog .ui-dialog-content .form-field .error {
		background: linear-gradient(180deg, rgba(255,221,221,1) 0%, rgba(255,255,255,1) 100%);
}

.ui-dialog .ui-dialog-content .form-field .warning {
    background: linear-gradient(180deg, rgb(255, 246, 190) 0%, rgba(255, 255, 255, 1) 100%);
}


#dashboard  {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 100%;
}

/*#dashboard #left {*/
#pnlMenu {
    background-color: #f1f1fd;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.7) 2px 5px 18px -5px;
    overflow-y: auto;
    flex: 0 0 160px;
    z-index: 11;
    position: relative;
    top: 0;
    padding: 0;
    margin: 50px 0 40px;
    height: auto;
}

#right {
    background-color: #e3e4f3;
    flex-grow: 4;
    z-index: 10;
    box-shadow: rgba(82, 63, 105, 0.3) 9px 8px 17px 8px;
    position: relative;
    top: 0;
    padding: 0 20px;
    margin: 50px 0 40px;
    height: auto;
    overflow-y: scroll;
}

#right:before {
    background-image: url(/project/assets/images/ungizmo02.jpg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: -10;
    opacity: 0.1;
}

#pnlMenu select.listbox {
    width: 140px;
    margin: 50px 0 0 10px;
}

#Dashboard .waitIcon {
    position: absolute;
    z-index: 9999;
    left: 300px;
    top: -15px;

}


#pnlTop {
    display: inline-block;
    background-color: #fffae5;
    width: 100%;
    position: absolute;
    top: 0;
    height: 50px;
    box-shadow: 0px 4px 10px #336;
		z-index: 12;
		font-size: 12px;
}


#pnlTop .lstUsers {
    display: inline-block;
    width: 180px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    float: right;
    margin: 11px 10px 11px;
    padding: 3px;
		background: none;
}


#pnlTop .lblLoggedUser {
    display: inline-block;
    float: right;
    margin: 11px 10px;
    padding: 4px 5px;
    width: 220px;
    text-align: center;
    line-height: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#pnlTop .lblUserType {
    display: inline-block;
    float: right;
    margin: 11px 10px;
    padding: 4px 5px;
    width: 180px;
    text-align: center;
    line-height: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


#pnlTop .lblTopLogo {
    left: 12px;
    z-index: 9999;
    position: absolute;
    top: 9px;
}

#pnlTop .lblTopLogo a {
    font-size: 22px;
    font-weight: bold;
    font-family: verdana;
    color: #209CEE;
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.9);
    letter-spacing: -1px;
    text-decoration: none;
}

#pnlTop .lblTopLogo .name {
    position: relative;
    top: 2px;
    left: 4px;
}

#pnlTop .button {
		float: right;
		margin: 10px;
		height: 30px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
		padding: 0 20px;
}

#pnlTop .button:hover {
		border-color: blue;
}


#pnlMenu .listbox option {
    font-weight: 600;
    padding: 0px 5px;
}




.lds-ellipsis {
		/* change color here */
		color: #006aab
}

.lds-ellipsis, .lds-ellipsis div {
		box-sizing: border-box;
}

.lds-ellipsis {
		display: inline-block;
		position: relative;
		width: 80px;
		height: 80px;
}

.lds-ellipsis div {
		position: absolute;
		top: 33.33333px;
		width: 13.33333px;
		height: 13.33333px;
		border-radius: 50%;
		background: currentColor;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
		box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.5);
}

.lds-ellipsis div:nth-child(1) {
		left: 8px;
		animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
		left: 8px;
		animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
		left: 32px;
		animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
		left: 56px;
		animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
		0%		{
				transform: scale(0);
		}
		100%	{
				transform: scale(1);
		}
}

@keyframes lds-ellipsis3 {
		0%		{
				transform: scale(1);
		}
		100%	{
				transform: scale(0);
		}
}

@keyframes lds-ellipsis2 {
		0%		{
				transform: translate(0, 0);
		}
		100%	{
				transform: translate(24px, 0);
		}
}


.pnlLogin {
    position: absolute;
    width: 100%;
    animation-duration: 2s;
    animation-name: fadein;
    margin: 0;
    padding: 0;
    left: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pnlLogin .pnlLoginInner {
    margin: 30px auto;
    width: 500px;
    padding: 40px 0;
    box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.3);
    background-color: rgba(227, 228, 243, 0.5);
}

.pnlLogin .pnlLoginInner .form-name {
    float: left;
    width: 30%;
    text-align: right;
    height: 20px;
    line-height: 40px;
    font-size: 12px;
}

.pnlLogin .pnlLoginInner .form-field {
    margin: 10px 0 2px 3%;
    display: inline-block;
    text-align: left;
    height: 22px;
    line-height: 10px;
    width: 40%;
}

.pnlLogin .pnlLoginInner .btnLogin {
    font-size: 14px;
    font-weight: bold;
		height: 30px;
}

.pnlLoginInner select,
.pnlLoginInner input,
.pnlLoginInner button {
		transition-duration: 0.8s;
}

.pnlLoginInner select:focus,
.pnlLoginInner select:hover,
.pnlLoginInner input:focus,
.pnlLoginInner input:hover,
.pnlLoginInner button:focus,
.pnlLoginInner button:hover {
		border-color: blue;
}

.pnlLogin .lstUsers,
.pnlLogin .txtLogin,
.pnlLogin .txtPass,
.pnlLogin .btnLogin {
		box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
		border: 1px solid #aaa;
		outline: none;
}

.lstUsers option {
		padding: 0px 2px;
		margin: 0;
}

.pnlLogin .txtLogin :target	{
		background-color: #abc;
		border: 1px solid #aaf;
}
.pnlLogin .txtPass :active		{
		background-color: #abc;
		border: 1px solid #aaf;
}
.pnlLogin .btnLogin button :hover	{
		background-color: #88f;
		border: none;
}


#dashboard .pnlHome {
		font-size: 15px;
		margin: 20px;
}


#pageTitle {
    position: absolute;
    z-index: 60;
    top: 70px;
    left: 15px;
}


.pnlCampaignsList .datagrid .campInfo {
    background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 60%);
		padding: 8px;
}

.pnlCampaignsList .datagrid td {
		padding: 0;
}

.pnlCampaignsList .datagrid .campInfo .campInfoRow {
    font-size: 13px;
}

.pnlCampaignsList .datagrid .campInfo .campInfoRow .campInfoCol1 {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin: 0px 3px;
    font-weight: 200;
}

.pnlCampaignsList .datagrid .campInfo .campInfoRow .campInfoCol2 {
    display: inline-block;
    margin: 0px 3px;
    font-weight: 500;
}

.pnlCampaignsList .datagrid .campInfo .campInfoRow big {
    font-weight: 600;
}

.pnlCampaignsList table.datagrid tbody tr:hover {
    background: none;
    border-bottom: 1px solid #333;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    /* -webkit-box-shadow: #333 0px 0px 12px; */
}

#pnlList .pnlCampaignsList table.datagrid {
    margin-top: 10px;
    border-collapse: separate;
    box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.2);
}


#pnlList input.textbox {
    border: 1px solid #00000070;
    width: 200px;
    margin-bottom: 5px;
}



#pnlLang {
    margin-top: 20px;
}


#pnlLang .button {
    width: 70px;
    font-weight: normal;
    background-color: #222;
    border-color: #333;
		height: 20px;
}

#pnlLang .button img {
    margin-right: 5px;
}

#pnlLang .active {
		font-weight: bold;
		background-color: #33f;
		border-color: #aaa;
		text-transform: uppercase;
		cursor: default;
}


#pnlLang .active:hover {
		margin-left: -20px;
}

#btnTst {
    position: absolute;
    top: 100px;
    left: 100px;
}



#pnlDisclaimer {
    display: flex;
    position: absolute;
    top: 15vh;
    border: 1px solid #ccc;
    left: 18vw;
    width: 54vw;
    backdrop-filter: blur(1vw);
    font-size: 1.5vw;
    color: #fff;
    text-align: center;
    padding: 6vh 4vw;
    text-shadow: 1px 1px 5px black;
    align-items: center;
    border-radius: 2vw;
    flex-direction: column;
    justify-content: center;
}

#pnlDisclaimer h2 {
    margin: 0;
}

#pnlDisclaimer p {
    line-height: 1.5em;
}

#pnlDisclaimer button {
    padding: 2vh 2vw;
    font-size: 1em;
    border-radius: 1vw;
}


#audioWrapper {
		display: none;
}


#pnlContents {
    position: absolute;
    border: 1px solid #666;
    left: 15%;
    width: 70vw;
    backdrop-filter: blur(1vw);
    font-size: 1.3vw;
    color: #fff;
    text-align: justify;
    padding: 0;
    text-shadow: 1px 1px 0.4em black;
    overflow-y: auto;
    box-shadow: 1px 1px 25px #000;
    margin: 0;
    height: 80vh;
    top: 7vh;
}



#pnlContents .contentsPart {
    padding: 0 6vw 2vh;
    cursor: pointer;
}


#pnlContents h2 {
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 0 0.4em;
    padding: 4vh 0 1vh 4vw;
    color: #8cf;
    cursor: pointer;
}


#pnlContents .pnlContentsButtonContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 2vh;
}


#pnlContents .pnlContentsButton {
    margin: 3%;
    width: 40%;
    height: 60px;
    padding: 0;
}


#pnlContents .pnlContentsButton:hover {
    border-color: yellow;
    box-shadow: 0px 0px 10px yellow;
    color: #fff;
}




#logoImg {
    background-image: url(/project/assets/images/logo01.jpg);
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 12vw;
    background-color: #000;
    margin: 0;
    box-shadow: 0px 25px 30px #000;
}



#lblGameType {
    position: absolute;
    bottom: 10px;
    right: 10px;
}


#lblNewGameInfo {
    position: absolute;
    top: 65px;
    left: 200px;
    height: 50px;
    opacity: 0;
    color: #dd9;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#lblNewGameInfo p {
		margin: 0;
}

#lblNewGameInfo .arrow {
    height: 50px;
    line-height: 50px;
    text-align: right;
}


#lblNewGameInfo .arrow:before {
    content: "\27A4\27A4";
    font-size: 50px;
    display: block;
    transform: rotate(180deg);
}


#pnlTopLogoImg {
    background-image: url(/project/assets/images/logo01.png);
    height: 65px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 120px;
    display: inline-block;
    aspect-ratio: 1.64;
}






@media only screen and (orientation: portrait) {



		.pnlCards {
				display: grid;
				text-align: center;
				margin: 20% auto 0;
				height: 80%;
				grid-template-columns: repeat(3, 0fr);
				grid-template-rows: repeat(6, 1fr);
		}

		.card {
				border: 0.8vw solid;
		}

		.card small {
				position: relative;
				left: 0;
				top: 0;
				font-size: 0.6vh;
		}


		.cardPlaceHolder {
				display: inline-block;
				border: 1px solid #226;
				border-radius: 1vw;
				margin: 0.3%;
				background-color: rgba(100, 100, 200, 0.1);
				position: relative;
				backdrop-filter: blur(8px);
				max-width: 20vw;
				min-height: 10vh;
		}


		#cardBig {
				display: block;
				position: fixed;
				left: 8vw;
				top: 25%;
				width: 74vw;
				/* height: 57vh; */
				border: 5vw solid;
				border-radius: 12vw;
				scale: 60%;
				cursor: pointer;
				z-index: 9001;
				aspect-ratio: 2/3;
		}



		.cardFront p, .cardFrontTop p, .cardFrontBott p {
				/*font-size: clamp(10px, 3.0vw, 20px);*/
				line-height: 1.4;
				font-size: 2.5vw;
		}



		#pnlControls .button {
				margin-top: 5px;
				margin-bottom: 5px;
				width: 70px;
				padding-top: 3px;
				padding-bottom: 3px;
		}


		#pnlLang .button {
				width: 70px;
				font-weight: normal;
				_background-color: #222;
				border-color: #333;
				height: 20px;
		}

		#btnInfoLvl0,
		#btnInfoLvl1,
		#btnRemoveAddShuffleCards0,
		#btnRemoveAddShuffleCards1,
		#btnRemoveAddShuffleCards2 {
				font-size: 8px !important;
				height: 33px;
		}

		#pnlControls #btnInfoLvl0,
		#pnlControls #btnInfoLvl1 {
				width: 15px;
				padding: 5px;
				margin: 5px -2px;
				font-weight: bold;
				font-size: 12px !important;
		}


		#btnStopSound, #btnReplaySound {
				height: 25px;
				font-size: 13px;
		}

		#pnlDisclaimer {
				backdrop-filter: blur(1vh);
				font-size: 1.5vh;
				border-radius: 2vh;
		}

		#pnlContents {
				backdrop-filter: blur(1vh);
				font-size: 1.2vh;
				left: 14vw;
				top: 15vh;
				height: 70vh;
				width: 75vw;
		}

		#pnlContents .pnlContentsButton {
				font-size: 1em;
		}

		#pnlContents h2 {
				padding: 1vh 0 1vh 4vw;
		}

		#logoImg {
				height: 10vh;
		}


		.cardFrontTop {
				border-top-right-radius: 7vw;
				border-top-left-radius: 7vw;
		}


		.cardFrontBott {
				border-top-right-radius: 7vw;
				border-top-left-radius: 7vw;
		}

}