/* Template
Copyright USoft B.V. (C) 1995-2018
This file includes the selectors that can be used by developers
to customize the style of their documents.
*/

body{
}
table{
}
td{
}

/*MENU layout*/
#ApplicationMenu {
    background: #f0f0f0;
}
.uiMenuControl.Vertical .us-menu > .us-menuline > a {
    display: block;
    text-decoration: none;
    color: #333333;
    font-size: 14px;
    /* text-align: left; */
}
.uiMenuControl.Vertical .us-menu > .us-menuline > a:hover,
.us-menuline > a:hover {
	text-decoration: none;
}
.uiMenuControl.Vertical .menu-fold {
    width: 13px;
}
ul.us-menu li {
    margin-bottom: 10px;
    white-space: normal;
    overflow-wrap: break-word;
}
div#ApplicationFrame {
    margin-bottom: 20px;
}

/* onderstaande kolommen/buttons/menus worden niet getoond indien deze classes zijn gezet */
body.RelatieHide .RelatiecodeColumn, 
body.OrdertypeHide .OrdertypeColumn, 
body.OrdercodeHide .OrdercodeColumn, 
body.AdviesPrijsExHide .AdviesPrijsExColumn, 
body.AdviesPrijsInHide .AdviesPrijsInColumn, 
body.FactuurPrijsExHide .FactuurPrijsExColumn, 
body.FactuurPrijsInHide .FactuurPrijsInColumn, 
body.PrognoseNietWijzigen .HuidigePrognose,
body.PrognoseWijzigen .PrognoseTonen,
body.PrognoseHide .HuidigePrognose,
body.PrognoseHide .PrognoseTonen,
body.RetourenHide .RetourenMenu,
body.NotitieHide .NotitieColumn, 
body.TekstHide .TekstColumn, 
body.BesteldVorigeWeekHide .BesteldVorigeWeekColumn,
body.OrderNieuwHide .OrderNieuwButton, 
body.RetourNieuwHide .RetourNieuwButton, 
body.ToegangscodeHide .WachtwoordMenu,
body.InstellingenHide .InstellingenMenu,
body.VoorraadHide .VoorraadMenu,
body.VoorraadHide .VoorraadColumn,
body.MeetlijstHide .MeetlijstButton,
body.WeekMeetlijstHide .WeekMeetlijstButton,
.Hide   {
		display: none!important;
}

/* achtergrond kleurzetten van het invoerveld waar de focus op is */
input:focus, textarea:focus {
  background-color: rgb(232, 240, 254) !important;
}
/* achtergrond kleur van tabelregels om en om */
tr:nth-child(odd) {
  background-color: #d8e4f8;
}
tr:nth-child(even) {
  background-color: #ffffff;
}
/* achtergrond kleur geselecteerde tabelregel */
.selectedRow{ 
	background-color: #ccffcc !important;
}

/*Zijmenu kleuren als actief en bij hover*/

.uiMenuControl.Vertical .us-menu > .us-menuline.selected > a {
    font-weight: bold;
    background-color: #337ab7;
    color: #ffffff;
}

.uiMenuControl.Vertical .us-menu > .us-menuline > a:hover {
    background-color: #337ab7;
    color: #ffffff;
}

/*Hover kleur buttons*/

button:hover,
.btn:hover {
    background-color: #337ab7;
    color: #ffffff;
}

/* checkbox uitijnen */
input.uiInputControl.checkbox[type='checkbox']
{
    margin-left: 30%;
}

/* ButtonGroup */

div#BottomButtonGroup.GroupControl.Horizontal.uiGroupControl, div#TopButtonGroup.GroupControl.Horizontal.uiGroupControl
{
margin-bottom:10px;
margin-top:10px;
}

/* tabel layout*/
table {
    border-collapse: collapse;
    width: 100%;
}

/* layout wachtwoord */
.WachtwoordColumn {
    border-radius: 4px;
}
  .uiInputControl.text,
  .uiInputControl.select,
  .uiInputControl.password {
    width: 250px;
    line-height: 20px;
    padding: 0px 6px;
    margin-bottom: 10px;
	min-height: 20px;
  }

  button#LogInButton {
    width: 345px;
    margin-top: 20px;
    font-size: 18px;
  }
  
.DefaultButtonS, .DefaultButtonE {
    text-decoration: none;
}

div#ApplicationTextLabel {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* layout van de tabellen */

.uiInputControl.text, .uiInputControl.select, .uiInputControl.password {
    line-height: 20px;
    min-height: 16px;
    padding: 0px 6px;
    margin-bottom: 1px;
    margin-left: 10px;
}
.uiInputControl {
    font-size: 11pt;
}

.uiGridControl th.text-left {
	border-radius: 0px;
    text-align: left;
}
.uiGridControl th.text-center {
    text-align: center;
    vertical-align: middle;
    padding-right: 1px;
    padding-left: 1px;
}

.uiGridControl td {
    vertical-align: middle;
    padding-top: 6px;
}

div#Informatie .uiGridControl td {
    vertical-align: top;
}

textarea{  
	overflow: hidden;
	height: 16px;
	min-height: 1em;
	max-height: 50vh;}

.ui-button-icon-primary.ui-icon.folder{
    height: 16px;
    width: 16px;
    background-image: url(../images/folder.png) !important;
}
/* reclame kolommen worden in deze kleur/font getoond */
.Reclame .ReclameColumn{ 
	color:red;
	font-weight: bold;
	font-style: italic;
}

/* uitverkocht kolom wordt in deze kleur/font getoond */
.Uitverkocht .UitverkochtColumn{ 
	color:red;
	font-weight: bold;
}

.SingleRecordGroup{
	border: 2px groove;
	border-radius: 4px;
	margin: 5px;
}

.ColumnControl{
	margin: 2px;
}

/*Kleur van de geselecteerde rij*/

.uiGridControl [rowid].current *:not(.combobox, .combobox-list) {
   background-color: #D6F1F7;
}

/* Keypad overrule, zodat scherm altijd on top is */
.keypad-popup {
	z-index: 7000;
}

#ApplicationMenu {
		width: 10%;
}

.ApplicationGroup {
	width: 90%;
}

/*Pagina vakjes iets groter, lijkt mij iets duidelijker*/

.uiDataSetNumbersControl li a {
    font-size: 12pt;
}

/* grootte blokjes aantal records */
.uiDataSetNumbersControl li a {
    padding-left: 10px;
	padding-right: 10px;
    text-align: center;
    border: 1px solid #ddd;
    width: 38px;
    height: 32px;
    display: inline-block;
    background: #f0f0f0;
    border-radius: 4px;
	padding-top: 5px;
}

/* aantal regels / assortimentsgroep rechts op scherm */
div#AantalRegelsGroup, div#Assortimentsgroep {
    float: right;
    margin-right: 30%;
}

/*Ruimte tussen de knoppen en het resultaat (resultgroup)*/

#ResultRecordRangeGroup {
    margin-top: 10px;
    margin-bottom: 5px;
}

#AantalRegelsLabel, #Assortimentsgroep {
    margin-left: 10px;
}

/* checkbox levensovertuiging op juiste hoogte */
div#LevensovertuigingGroup div.panel-body input.uiInputControl.checkbox[type='checkbox'] {
	top: -3px;
	margin-left: 0px;
}

/* kleur grijs diverse tabelvelden */
div#Assortimentgroep, div#BESTELD_VORIGE_WEEK, div#FACTUURPRIJS_EX, div#FACTUURPRIJS_IN, div#ADVIESPRIJS_IN, div#ADVIESPRIJS_EX, div#RETOURPRIJS_IN, div#RETOURPRIJS_EX {
	color: #999999;
}

/* Breedte e.d. van de diverse velden */ 

#AANTAL_BESTELD, #HUIDIGE_PROGNOSE, #AANTAL_RETOUR, #INTERFILIAAL_ONTVANGEN, #INTERFILIAAL_GELEVERD, #EINDVOORRAAD, #VERSCHIL_ONTVANGST, .AantalRegels { 
	width: 60px;
	border: 1px groove;
	margin-bottom: 0px;
}

#PD_CODE, #RLT_CODE, #OD_REFERENTIE, #PROGNOSE_TONEN, 
.CodeColumn, .CodeColumn td, .VoedingswaardeColumn, .VerschilColumn, .UitverkochtColumn, .InterfiliaalColumn, .VoorraadColumn {
	width: 60px;
}

#PD_CODE_GROOT, .OrdertypeColumn, #DAGNAAM, #ODTP_CODE, #TOEVOEGEN, #EIGEN_ASSORTIMENT_TOEVOEGEN {
	width: 80px;
}

.OrdercodeColumn, #ORDERCODE {
	width: 220px;
}
.TitleLabelControl {
    font-size: 16pt; 
	font-weight: bold; 
}

.NaamColumn, .NaamColumn td, .NaamColumn div, #NAAM, #ACHTERNAAM, .Omschrijving, #OMSCHRIJVING, #BEDRIJFSNAAM {
    width: auto;
	padding-right:5px;
	white-space: nowrap;
}

.NotitieColumn, #NOTITIE {
	width: 500px;
}
.WelkomColumn, .WelkomColumn div {
    font-size: 16pt; 
	font-weight: bold;
	width: 500px;
	margin-left: 5px;
}

#NOTITIE, #TEKST {
	border: 1px groove;
	height: 20px;
}

.TekstGroot {
	width: auto;
}

.Tekstkassa {
	width: 600px;
	height: 30px;
}

.DatumColumn, {
	width: 100px;
}

.LeverdatumData {
	font-size: 12pt;
}

.DatumTijdColumn {
	width: 120px;
}

.SpecificatieColumn, #ROEPNAAM, #VOORVOEGSEL {
	width: 100px;
}

.CheckboxDag {
	width: 20px;
}

.CheckboxGelezen {
	width: 40px;
}

.FontGroot, .FontGroot div {
	font-size: 120%;
}

.PrijsColumn, .BesteldVorigeWeekColumn {
	width: 70px;
}

.PrijsColumn div:before {
	content: '\20AC  ';
}

.WachtwoordColumn {
	width: 80px;
	border: 1px groove;
}

.OnderwerpColumn{
	font-weight: bold;
	width: 120px;
}

 #ORDERCODE_NIEUW {
	width: 200px;
	border: 1px groove;
	margin: 2px;
}

a {
	cursor: pointer;
}

.Afbeelding {
    width: 300px;
}

#ADVIESPRIJS_IN, #ADVIESPRIJS_EX, #FACTUURPRIJS_IN, #FACTUURPRIJS_EX, #RETOURPRIJS_IN, #RETOURPRIJS_EX {
    width: 100px;
}

.DatumTijdColumn {
    width: 170px;
}

/* Footer afbeelding op inlogpagina omlaag zetten */
#FooterImageControl {
	margin-top: 10%;
}