/* =========================
   Base Variables (easy theming)
   ========================= */

:root {
    --ui-primary: #224f89;
    --ui-primary-hover: #1c99d5;    
    --ui-text: black; /* #1f2937; /* #374151 */
    --ui-text-hover: black;
    --ui-primary-text:white;
    --ui-primary-text-hover:var(--ui-primary-text);
    --ui-primary-text-highlighted:#16173e;
    --ui-secondary: #16173e;
    --ui-secondary-hover:var(--ui-primary-hover);
    --ui-secondary-text:var(--ui-primary-text);
    --ui-secondary-text-hover:var(--ui-primary-text-hover);
    --ui-secondary-text-highlighted:#224f89;
    
    --ui-text-disabled: #9aa3af;    
    --ui-border: #cfd6df;
    --ui-border-focus: #2f80ed;
    --ui-bg: #ffffff;
    --ui-bg-alt:aliceblue;
    --ui-bg-disabled: #f2f4f7;        
    --ui-radius: 8px;
    --ui-shadow-focus: 0 0 0 3px rgba(47,128,237,0.2);
}

#facademenubar, .menubarcolor { color:var(--ui-primary-text); background:var(--ui-primary); }
#facaderootmenu { }
#facadesubmenu_level1, .facadesubmenu_level2, .submenucolor  { background:var(--ui-secondary); }
.facademenuitem { color:var(--ui-primary-text); }
.menuicon { }
.menuseparator { }
#facaderootmenulabel { }


.tabbar li /*a*/ a:hover
{
color:var(--ui-primary-text-hover);
background:var(--ui-primary-hover);
border-color:var(--ui-primary-hover);
}

.facademenuitem:hover { 
	background:var(--ui-primary-hover); 
	color:var(--ui-primary-text-hover);
}

.messageboxtitle { color:var(--ui-primary-text);background:var(--ui-primary); }

.facaderesultstable tr:hover  { background:var(--ui-secondary-hover); color:var(--ui-secondary-text-hover);}
.facaderesultstablefocusedrow { background:#9c007d; color:white; }

.facaderesultstablegroup {
	background:var(--ui-primary);
	color:var(--ui-primary-text);
	border: 1px solid var(--ui-primary);
}

.facaderesultstablegroup2 {
	background:#466545; /*#048706;*/
	color:White;
	border: 1px solid #466545; /*#048706;*/
}

.facaderesultstablegroup3 {
	background:#496978;
	color:White;
	border: 1px solid #496978;
}

.facaderesultstablegroup4 {
	background:#006EA2;
	color:White;
	border: 1px solid #006EA2;
}

.facaderesultstablecolumnheaderunsorted { border-style: solid; border-color: White; background:var(--ui-primary); color:var(--ui-primary-text);}

@media screen and (max-width: 399px) {
	#navgotofirst, #navgotolast {
		display:none;
	}
}


/* Form Styles */

/* General Settings */
#contentdiv, #fielddiv {
    color: --ui-text;
}

/* =========================
   Text & Number Inputs
   ========================= */
.facadetext,
.facadedate,
.facadetime,
.facadetextarea,
.facadeselectboxmultiselectitems {
    width: 100%;
    padding: 10px 12px;
    line-height: 1.4;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.facadetext:hover {
    border-color: #aab4c0;
}

.facadetext:focus {
    outline: none;
    border-color: var(--ui-border-focus);
    box-shadow: var(--ui-shadow-focus);
}

.facadetext:disabled {
    background: var(--ui-bg-disabled);
    color: --ui-text-disabled;
    cursor: not-allowed;
}

/* =========================
   Select Fields
   ========================= */
.facadeselect, #clientpagelist {
    width: 100%;
    padding: 0px 40px 0px 12px;
    color: var(--ui-text);
    background-color: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    
    /* custom arrow */
    background-image:
        linear-gradient(45deg, transparent 50%, #6b7280 50%),
        linear-gradient(135deg, #6b7280 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px),
        100% 0;
    background-size: 6px 6px, 6px 6px, 2.5em 100%;
    background-repeat: no-repeat;
}

.facadeselect:hover, #clientpagelist:hover {
    border-color: #aab4c0;
}

.facadeselect:focus, #clientpagelist:focus {
    outline: none;
    border-color: var(--ui-border-focus);
    box-shadow: var(--ui-shadow-focus);
}

.facadeselect:disabled, #clientpagelist:disabled {
    background-color: var(--ui-bg-disabled);
    color: #9aa3af;
    cursor: not-allowed;
}

.facadewebimage {
	border-radius:var(--ui-radius);
}

/* =========================
   Primary Action Button
   ========================= */
/*
input[type="submit"],
input[type="button"] {
    min-width: 180px;
    padding: 12px 20px;
    color: #ffffff;
    background: var(--ui-primary);
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.15s ease,
                transform 0.05s ease,
                box-shadow 0.15s ease;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
    
}

input[type="submit"], input[type="button"], #crudsave, #crudcancel, #cruddelete, #crudinsert, #navgotofirst, #navgotoprevious, #navgotonext, #navgotolast {
    margin-bottom:2px;
}

input[type="submit"]:hover:enabled,
input[type="button"]:hover:enabled, 
button:hover:enabled {
    background: var(--ui-primary-hover);
}


input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
}
*/

/*
input[type="submit"]:focus,
input[type="button"]:focus {
    outline: none;
    box-shadow: var(--ui-shadow-focus);
}

input[type="submit"]:disabled,
input[type="button"]:disabled {
    background-color: #9aa3af;
    cursor: not-allowed;
}
*/

.facadelabel, .facadetextarealabel {
    font-weight: 500;    
    padding-right: 8px;
    /*white-space: nowrap;*/
}

.facadetext, .facadeselect, .facadedate, .facadecolor, .facadetime, #clientpagelist {
    height: 46px;
}

@media screen and (max-width: 599px) {
    .facadetext, .facadeselect, #clientpagelist, .facadedate, .facadecolor, .facadetime {
        height: 46px;
    }

    td.fieldcell {
        display: block;
        width: 100%;
    }

    /*
    td.facadelabel {
        margin-top: 12px;
    }
    */
}



.sidepanetitle {
    color:var(--ui-secondary-text) !important;
    background: var(--ui-secondary) !important;
}