html { width: 100%; vertical-align: top; }
body, html { color: #333333; font-size: 12px; font-family: 'Open Sans', sans-serif; text-align: left; margin: 0; height: 100%; margin: 0px; padding: 0px; letter-spacing: 0px; }
body { width: 100%; margin-right: auto; margin-left: auto; }
.main { width: 100%; text-align: center; }
.main-topp { width: 100%; height: 80px; background-color: #ffffff; }
.itext { color: #2cb4e9; float: left; height: 80px; font-size: 36px; vertical-align: middle; line-height: 80px; }
.ilogo { float: right; height: 80px; }
.main-content { min-width: 350px; max-width: 1100px; margin-top: -110px; text-align: left; margin-left: auto; margin-right: auto; }
.main-body { float: left; min-width: 560px; }
.main-seperator { clear: both; height: 20px; }
.main-bottom { color: #999999; }
.white-text { color: white; }
.idrift-button,.idrift-button-small { font-size: 12px !important; }
.idrift-button-small { color: #6E6E6E; width: 20px; border: 1px #A8A8A8 solid;  padding: 2px 4px 2px 4px; margin: 2px 2px !important; cursor: pointer; }
.idrift-button-xsmall { color: #6E6E6E; min-width: 32px !important; border: 1px #A8A8A8 solid;  padding: 2px 4px 2px 4px; margin: 2px 2px !important; cursor: pointer; }
.idrift-small-icon { margin: 2px; line-height: 20px; }
.idrift-k-icon { margin: 0px 3px 0px 3px; line-height: 16px; }
.idrift-icon { width: 16px !important; float:left; margin: 2px 3px 0px 0px; color: black; }
.main-body img { max-width: 560px!important; }
hr { height: 1px; border: 0px; border-top: 1px solid #eeeeee!important; }
@media screen and (max-width: 850px) { 
    .toppmenu { display: none; }
}

/* kendo UI overrides */
.k-content { max-width: 800px; } /* main-content max-width - left-menu width */
.white-text a { color: white !important; }
.k-grid-filter .k-filter { opacity: 0.4; }
.k-state-active .k-filter { opacity: 1; color: #ffff00 !important; }
.k-editor, .k-editor-dialog, .k-toolbar { background-color: #E3E3E3; }
.k-dropdown .k-state-focused .k-input { color: #ffffff !important; background-color: #0070c0 !important; }
.k-window-titlebar { background-color: #0070c0; color: #ffffff; }
.bg-color-blue > a > .k-filter { background-position: -48px -80px; }
.bg-color-greenDark > a > .k-filter { background-position: -48px -80px; }
#qualitygrid .k-state-active, #qualitygrid .k-state-active:hover, #qualitygrid .k-active-filter, #checklistgrid .k-state-active, #checklistgrid .k-state-active:hover, #checklistgrid .k-active-filter { background-color: transparent; }
th span.k-header { border-bottom: 0px!important; padding: 0px!important; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea, .win-textarea { min-height: 20px; }
.k-widget .k-state-hover { background-color: #0070c0!important; }
.k-nclblue { background-position: -90px -88px; background-color: #004990; }
.k-nclgreen { background-position: -90px -88px; background-color: #009A66; }
.k-nclblueback { background-position: -90px -110px; background-color: #004990; }
.k-nclgreenback { background-position: -90px -110px; background-color: #009A66; }
.k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item { background-color: #F3F3F4; }
.k-tabstrip-items .k-state-default a { color: #666666; }
.k-tabstrip-items .k-state-hover a { color: #ffffff; }
.k-tabstrip-items .k-state-active {  background-color: #ffffff; }
.k-tabstrip-items .k-state-active a { color: #000000; }
.k-tool-icon { background-color: transparent; }


/* bootmetro overrides */
#qualitygrid th { font-size: 13px; }
.k-animation-container, .k-filter-menu { font-size: 12px !important; min-width: 190px; }

/* top items */
.toppmenu { float: right; height: 70px; color: #eeeeee; padding-top: 5px; }
a.win-command, button.win-command { padding: 2px 0px 0px 0px; height: 78px; cursor: pointer; }
a.win-command .win-label, button.win-command .win-label { height: 38px; line-height: 15px; color: #000000; padding-top: 2px; }
.navigation-line { border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
.navigation-line, .navigation { width: 100%; height: 30px; clear: both; background-color: #aaaaaa; }
.navigation { color: #ffffff; font-size: 20px; line-height: 28px; padding: 0px 10px 0px 0px; cursor: pointer; text-transform: uppercase; letter-spacing: -1px; height: 28px; }
.navigation-element, .navigation-element, .navigation-seperator { padding: 0px; background: transparent; border: 0; color: #ffffff; text-decoration: none; }
a.navigation-seperator { padding: 0px 10px; }
a.navigation-element:hover { color: #000000; }

/* front */
.metro-tile-image { display: inline-block; font-family: "IcoMoon"; font-size: 60px; line-height: 80px; }
.bg-color-gray { background-color: #808080 !important; }
/*.bg-color-blue { background-color: #2CB4E9 !important; } */

/* left menu */
.left-menu { width: 180px; margin: 0px 35px 0px 0px; float: left; }
.leftmenuitem:link, .leftmenuitem:visited { color: #000000 !important; }
.left-menu-active { color: #ffffff !important; background-color: #0070c0 !important; }
.menuicon { font-family: "IcoMoon"; margin: 1px 10px 1px 0px; }
#panelbar .k-state-selected > .k-link { color: #ffffff; }
#panelbar .k-link:hover { color: #ffffff; }
#panelbar .k-state-active >.k-header, #panelbar .k-state-active >.k-link { color: #ffffff; background-color: #001237 !important; } 
#panelbar .k-state-highlighted >.k-header { color: #ffffff; }
#panelbar li ul li a { padding-left: 15px; font-size: 11px; }

/* Right menu */
.right-menu { width: 200px; margin: 0px 0px 0px 0px; float: left; border: 1px #A8A8A8 solid; }
.idrift-right-header { background-color: #AAAAAA; text-align: center !important; padding: 0px !important; color: #ffffff; font-size: 16px; }
.right-menu table tr td a { font-size: 14px !important; color: #333333; text-decoration: none; }
.right-menu table tr td:hover { background-color: #0070c0; color: #ffffff; }
.right-menu table tr td a:hover { color: #ffffff; }

/* Messages */
.message-block { padding: 20px; font-size: 18px; }

/* forms and gridsystem */
input[type="password"] { border-width: 1px; }
.forms {
	float: left;
    padding-left: 20px;
}
.forms li {
	list-style: none outside none;
	margin-bottom: 5px;
}
.span0 { width: auto; margin-left: 30px; }
.span1 { width: 70px; margin-left: 30px; }
.span2 { width: 140px; margin-left: 30px; }
.span3 { width: 270px; margin-left: 30px; }
.span4 { width: 370px; margin-left: 30px; }
.span5 { width: 470px; margin-left: 30px; }
.span6 { width: 570px; margin-left: 30px; }
.span7 { width: 670px; margin-left: 30px; }
.span8 { width: 770px; margin-left: 30px; }
.span9 { width: 870px; margin-left: 30px; }
.k-header > .span5 { font-weight: 700 !important; }
.idrift-gridinput-large { width: 270px; }
.idrift-gridinput-medium { width: 200px; }
.idrift-gridinput-small { width: 140px; }
.idrift-input-large { width: 500px; }
.idrift-input-medium { width: 370px; }
.idrift-input-small { width: 240px; }
.idrift-input-yellow { background-color: #ffff99 !important; color: #333333 !important; }
.idrift-input-blue { background-color: #c6d9f1 !important; color: #333333 !important; }
.idrift-input-green { background-color: #99ff66 !important; color: #333333 !important; }
.idrift-toolbar { border-left: 1px #A8A8A8 solid; border-right: 1px #A8A8A8 solid; }
.hide { display: none; }
.tabcontent { padding: 10px; }
#tabstrip { background-color: #2CB4E9; }


/* File Browser */
.fileBrowserFiles, .idrift-listview, .fileBrowserPath, .fileBrowserToolbar { width: 600px; float: left; clear: both; }
.fileBrowserPath, .fileBrowserToolbar, .filebrowserBottom { height: 25px; border: 1px #A8A8A8 solid; margin-bottom: 5px; text-align: left; }
.fileBrowserPath { padding: 2px 5px; width: 590px; }
.fileBrowserToolbar { margin-bottom: -1px; }
.fileBrowserFiles, .idrift-listview { height: 350px; float: left; }
.fileBrowserFile { float: left; width: 250px; height: 25px; padding: 5px 0px 0px 5px; }
.idrift-listview { float: left; text-align: left; cursor: pointer; margin-bottom: 5px; }
.fileBrowserFileName { clear: both; margin-bottom: 5px; }
#fileBrowserUp { margin-left: 10px; cursor: pointer; }
.fileBrowserFiles .k-button:hover { color: #000000; }
.filebrowserBottom { text-align: right; border: 0px; }
.k-filter { color: yellow!important; }
.required { color: #BC1C48; margin: 0px 0px 0px 10px; font-size: 14px; font-weight: bold; }
.idrift-melding { text-align: center; padding: 10px; font-size: 14px; }