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

body {
		color: #333;
		font-family: sans-serif;
		font-size: 13px;
		line-height: 1.22;
		margin:0;
		padding: 0;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		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: 0 5px;
    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;
}

/**
 * This is the bare-bones css file needed to use QCubed in your application. If you need to modify an item, simply
 * override it in an additional css class you include after this one. Or you can copy this and completely replace it
 * by pointing to it with the QCUBED_CSS define.
 */
button {
		cursor: pointer;
		border: 1px solid #666;
		border-radius: 5px;
		color: #f33;
}
button[disabled] {
		color: #999;
		border-color: #999;
}
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: 15px auto 10px;
}

#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;
}




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: 10px;
    left: -10px;
}

#pnlList .pnlButtons button {
    text-align: center;
    padding: 2px 15px;
    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;
}

#pnlList .pnlButtons .btnNew:hover {
    translate: 5px 0;
}


#pnlList .pnlButtons .catLbl {
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

#pnlList .pnlButtons .catLbl[disabled] {
    filter: grayscale(100%);
    font-weight: normal;
    opacity: 0.6;
}





#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 90px;
    z-index: 11;
    position: relative;
    top: 0;
    padding: 0;
    margin: 30px 0 0;
    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: 30px 0 0;
    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;
}


#Dashboard .waitIcon {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: -10px;
}




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


#pnlTop p {
    display: inline-block;
    position: absolute;
    left: 115px;
    top: 14px;
    font-size: 11px;
}




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


#pnlTop .lblLoggedUser {
    display: inline-block;
    float: right;
    margin: 3px 10px;
    padding: 1px 15px;
    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: 0;
    z-index: 9999;
    position: absolute;
    top: 0;
}

#pnlTop .lblTopLogo a {
    font-size: 20px;
    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: 3px 5px;
    height: 22px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    padding: 0 15px;
}


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


#pnlMenu select.listbox {
    width: 80px;
    margin: 10px 0 30px 5px;
}


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

#pnlMenu .button {
    display: flex;
    width: 65px;
    padding: 5px 10px 5px 20px;
    margin: 10px 0px 0px -8px;
    transition-duration: 0.2s;
		box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}

#pnlMenu .button:hover {
		margin-left: -5px;
		border: 1px solid blue;
}


.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;
}


#dtgCardsLstLevel {
    display: inline-block;
    width: 80px;
    margin: 0 0 0 110px;
}

#dtgTextsLstVoice {
    display: inline-block;
    width: 80px;
    margin: 0 0 0 110px;
}


#dtgCardsLstVoice {
    display: inline-block;
    width: 150px;
    margin: 0 0 0 10px;
}

#btnTestVoice {
		margin: 0 0 0 10px;
}

#btnTestVoiceUpdate {
		margin: 0 20px 0 10px;
}


.catLbl {
    display: inline-block;
    width: 25px;
    border: 1px solid;
    border-radius: 3px;
}

.catLbl:hover {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
}

.catLblActive {
		font-weight: bold;
}

.catLblNotActive {
    color: #888;
}


#dtgCardsPnlFilter, #dtgTextsPnlFilter {
    position: absolute;
    top: 10px;
    display: inline-block;
    left: 50px;
		z-index: 1000;
}


#dtgCardsPnlFilter input.textbox, #dtgTextsPnlFilter input.textbox {
    padding: 2px;
}



#pnlLang {
    margin-top: 20px;
}


#pnlLang .button {
    width: 60px;
    font-weight: normal;
    border-color: #aaa;
    height: 20px;
    text-align: right;
    padding: 1px 1px 1px 15px;
    margin: 1px 1px 0px -10px;
}

#pnlLang .button img {
    margin: 2px 5px 0 0;
}


#pnlLang .active {
    font-weight: bold;
    background-color: #ccf;
    text-transform: uppercase;
    border-color: #66f;
}

#audioWrapper {
		display: none;
}


#pnlProfiling {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    width: 100%;
    height: 100px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#profiling {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    width: 100%;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}