/* ========================================================================
	Misc generic css.
    NOTE: Only for Agendec Web, NOT for Agendec Mobile.
   ========================================================================*/

/*
	Har også prøvd med hoved blåfarge: #aec4e8 - ble noe lys og blass...
*/

/*html
{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}*/

body {
    /* Note: Had to set the width to 99 instead of 100 to avoid a horizontal scrollbar appear in browsers.
       MERK 15.6.2017: Kan vi ikke heller løse dette med bredden ved å sette margin:auto?
       16.12.2019: Setter nå margin:auto istedenfor calc av width og satser på det fungerer ok, samt bedre i noen tilfeller, eks. i RadWindow's?
            Fjernet da også margin:0px og padding:0px;
    */
    margin: auto;
    /*width: calc(100% - 4px);*/
    text-align: center;
    /* 20.6.2017: Changed common Agendec Web font to a bit larger and also to use a commonly used font combination where Tahoma is the first font, organized by generic family (see e.g. here: https://www.w3schools.com/cssref/css_websafe_fonts.asp).
                  It's also changed other places, e.g. for the .input and .dropdown classes in this css file.
                  However, it now seems the font size in grids are a bit higher than in grids in the new modules and the line height maybe a bit lower; we should probably implement the same skin on older modules for the grids. 
                  Seems this is the font settings on new grids: line-height: 16px; font-size: 12px; font-family: "Segoe UI",Arial,Helvetica,sans-serif. */
    font: normal 12px Tahoma, Geneva, sans-serif;
    /*font: normal 12px "Segoe UI",Arial,Helvetica,sans-serif;*/
    /*line-height: 16px;*/
    /*font: normal 11px "tahoma", Arial, Helvetica, sans-serif;*/
}

/* Added 20.6.2017 so we potentially can reduce places where we need to add the common font used in AgendecWeb */
table {
    font: normal 12px Tahoma, Geneva, sans-serif;
    /*line-height: 16px;*/
}

/* ---------------------------------------------------------------
    Generic formatting of controls, e.g. input, select (dropdown), textarea etc.
    Note 16.9.2019: Have now done some changes to make the ui more equal in the different modules and dialogs, e.g.:
         - input/inputReadOnly: padding-top:3px and padding-left:2px changed to: padding:2px, plus changed height from 17px to 16px. Is then also more equal cssTextBox.
         - dropdown: Increased height from 20px to 22px; are then now the same height as .input.
         - Changed name of .txt to .inputMultiline; more consistent.
   -------------------------------------------------------------- */

/* Styling for input fields.
   inputMultiline are the same as input except for height and pading which are omitted.
   inputReadOnly are the same as input except for the background color. */
.input {
    font: normal 12px Tahoma, Geneva, sans-serif;
    height: 16px; padding: 2px;
    border: 1px solid #ABABAB; color: #1F1F1F; background: #ffffff; }

.inputMultiline {
    font: normal 12px Tahoma, Geneva, sans-serif;
    border: 1px solid #ABABAB; color: #1F1F1F; background: #ffffff; }
/*.txt { font: normal 12px Tahoma, Geneva, sans-serif; border: 1px solid #ABABAB; color: #1F1F1F; background: #ffffff; }*/

.inputReadOnly {
    font: normal 12px Tahoma, Geneva, sans-serif;
    height: 16px; padding: 2px;
    border: 1px solid #ABABAB; color: #1F1F1F; background: #f0f0f0; }

.dropdown { font: normal 12px Tahoma, Geneva, sans-serif; height: 22px;}

.buttonimage {border: none; outline: none; padding-left:1px;cursor:pointer }
/*.buttonimage {border: none; outline: none; padding-left:3px;cursor:pointer }*/
/* 2.1.2020: We now set height to 22px since most input controls are now 22px (we didn't set button height here before and was then default 20px). */
.button { font: normal 12px Tahoma, Geneva, sans-serif; color: #1A3516; height: 22px; }
/* Added hovering style; "highlight" of backcolor and cursor. */
.button:hover { cursor:pointer; }

/* Search field button used on fields where user can click the button to search for content to put in field.
   16.12.2019: Changed to fit better in most forms: height from 20->22, removed top:-1px, removed margin-left:1px, increased width from 18->20.
*/
.buttonSearch {
    font: normal 12px Tahoma, Geneva, sans-serif; color:#1A3516;
	padding:0px; margin:0px;
	/*border: 1px solid #ABABAB;*/
	height: 22px;
	width:20px;
	position:relative;
	/*top: -1px;*/
}

/* Style for the auto completion list elements (AjaxControlToolkit's AutoCompleteExtender control) - used in fields where auto search starts when user enters something. */
.autocomplete_completionListElement
{   
    list-style-type: none;
    display: inline-block;
    border:solid 1px #888888;
    margin:0px;
	margin-top:4px;
    padding:2px;
    /* 8.3.2018: We now set max height to avoid the list getting extremely high on very many search hits. overflow to get a vertical scrollbar in the list so the items stays within the control. */
    max-height: 300px;
    overflow:auto;
    /*height: 200px;
    overflow:auto; */
    min-width : 200px;
	background-color: white;
    /* 3.5.2017: z-index needed due to list shown behind some controls sometimes, e.g. behind the asp button btnCreate in frmAccReporting. */
    z-index : 10 !important;
}


/* Make disabled fields look better and consistent across different browsers. Also input set as readonly (has attribute readonly="readonly")
   NOTE: For some reason Safari and Firefox also implements the read-only input styling on type button, image, submit, other?
         This caused e.g. toolbar image buttons on modules to get this styling.
         We therefore exclude those input types from the input read-only styling. We could e.g. instead include only those types we want for read-only, but that may in the future be much more than we need to exclude since there are many types, e.g. date, email, file, number, password, search, text etc.
         See e.g. here for a post on this strange issue: https://stackoverflow.com/questions/62571297/are-input-type-button-elements-readonly-firefox-seems-to-think-so
    Note: The read-only pseudo-class seems to apply for both readonly and disabled controls, at least in some situations, e.g. on textbox controls in Firefox.
*/
input:read-only:not([type=button]):not([type=submit]):not([type=image]) {
    background-color: #f8f8f8;
    border: 1px solid #888;
}
input:disabled {
    background-color: #f8f8f8;
    border:1px solid #888;
}
select:disabled {
    background-color: #f8f8f8;
    border:1px solid #888;
}
textarea:disabled {
    background-color: #f8f8f8;
    border:1px solid #888;
}

/* ---------------------------------------------------------------
    Formatting of controls in maint modules, e.g. textbox, dropdown etc.
    Note: They also contain width=100% so that they by default fill the width of the TD cells that they're contained in.
          This probably mean these formatting cannot be used generic for controls in other places in Agendec.
          BUT, we should see if we could merge them with the other definitions for generic controls in this file. If not able to make one general for all, maybe able to use an additional css,
          e.g. for those which need 100% width? Maybe LESS can be used?
    Note: The css here are newer than the others defined a little bit further up in this file (input, dropdown etc).
   --------------------------------------------------------------- */

/* Currently not tested/used and don't know if needed. */
/*.cssLabel {
    font: normal 12px tahoma, Arial, Helvetica, sans-serif;
}*/

.cssTextBox,
.cssDropDown {
    /* Make the height of them a little bit bigger by padding top and bottom. */
    padding-top: 2px; padding-bottom: 2px;
    /*padding: 2px;*/
    width: 100%;
    /* We have box-sizing to get all controls aligned correctly on the right-hand side. En ulempe med denne er at det ser ut til å bli litt avstand (margin/padding?) på høyre side (alle sider?) som gjør at når vi skal ha en søke-knapp for feltet i en annen TD til høyre for feltet så blir det noen pixels avstand til knappen (frmAccReporting). */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Make the asp checkbox bigger and make it align correct with other controls by setting margin to 0. Note: Set on the input element of the checkbox control.
    Note 11.1.2019: Now also set vertical-align:top to make the checkbox align with textbox if is inside a td cell along with a textbox.
    Note 6.3.2019:  Now also set margin-right to get some spacing between the actual input checkbox and checkbox text, in case the text is set on the checkbox. */
.cssCheckBox input {
    height: 20px; width: 20px;
    margin: 0px;
    margin-right: 4px;
    vertical-align: top;
    /*width:18px; height:18px;
    margin:0px;*/
}

/* Same as cssCheckBox but adjusted for having the checkbox text on the left side of the actual check box.
   Note: Must then also set TextAlign="Left" on the Asp CheckBoxes using this css. */
.cssCheckBox_TextLeft input {
    height: 20px; width: 20px;
    margin: 0px;
    margin-left: 4px;
    vertical-align: top;
}

/* Corresponds to a smaller version of the cssCheckBox.
   Also set vertical-align:middle to make the input align correctly with the checkbox text. */
.cssCheckBoxS input {
    height: 18px; width: 18px;
    /*margin:0px;*/
    vertical-align: middle;
}
/* An even smaller checkbox. Will currently probably be used for checkboxes in RadGrid; to make them a little bit larger since the default is very small. */
.cssCheckBoxXS input {
    height: 16px;
    width: 16px;
    /*margin:0px;*/
    vertical-align: middle;
}

/* Like cssCheckBox but for RadioButtonList items instead; not yet tested or used, but use a local version in frmAccReporting. */
/*.cssRadioButtonList input[type="radio"] {
    width:20px; height:20px;
    margin:0px;
    vertical-align:top;
}*/

.cssButton {
    /* Seems 13px is the best - 12 is too small and 14 seems too big. We could optionally try points instead of pixels, but did we decide pixels was best? */
    font: normal 13px Tahoma, Geneva, sans-serif;
    color: #2f2f2f;
}

/* Css for up/down help buttons for RadNumericTextbox. Needed due to issues with RadNumericTextbox not able to resize spin buttons correctly when reducing height of textbox in Lightweight rendermode; up/down image/icon/sign is not moved correspondingly. */
.cssNumericTxtHlpButton {
    padding: 0px;
    height: 22px;
    width: 18px;
    /* We set vertical-align:middle to get it aligned with the numeric textbox which has vertical-align:middle. */
    vertical-align: middle;
    font-size: 12px;
    color: #555;
}

/* ========================================================================
   Miscellaneous common css for main modules, e.g. module header, toolbar etc.
   We have this css here instead of in agMasterPage.css since it's also used in other forms/dialogs besides main forms.
   ======================================================================== */

/*.moduleContent
{
	margin:10px;
	padding:10px;
}*/

.moduleHeader
{
	/*background: linear-gradient(#81c8f7, #71afd9);*/
	background: linear-gradient(#99ddff, #79bde9);
	/* NOTE: We set the background-color as a backwards compatibility for older browsers not supporting gradient, e.g. IE8 on Win2003/XP. */
	background-color:#89cdf4;

	/*background-color:#79bde9;*/
	/*background-color:#26b5fe;*/
	/*border: 2px solid #79bde9;
	border-bottom-color:#e3eaf7;*/
	margin-bottom:0px;
}

.moduleCaption { font: normal 16px Arial, Helvetica, sans-serif; color:#ffffff; text-decoration: none; padding-left:12px; padding-right:12px; width:120px; height:40px; } /* color:#484848; */
/*.moduleCaption { font: bold 17px Arial, Helvetica, sans-serif; color:#ffffff; text-decoration: none; padding-left:12px; padding-right:12px; width:140px; height:40px; } */

.moduleToolbarItem { 
    text-align: center;
    width:42px;
    /* Added white-space:nowrap; to avoid text/image wrapping if using html Button instead of asp ImageButton for a toolbar button, and then set moduleToolbarBtnImgAndTxt class on the button. */
    white-space:nowrap;
}
/*.moduleToolbarItem { text-align: center; width:42px; height: 40px; }*/
/*.moduleToolbarItem a { display: block; height: 40px; padding-top: 8px; text-align: center; background: url(../images/nav-divider.gif) no-repeat left center; }*/
/*.moduleToolbarItem a:hover { display: block; height: 34px; padding-top: 6px; background-color:rgba(255, 255, 255, 0.65); text-align: center; }*/
/*.moduleToolbarItem a:hover { display: block; height: 40px; padding-top: 8px; background-color:rgba(255, 255, 255, 0.65); text-align: center; }*/

.moduleToolbarBtn { padding:8px; vertical-align:text-bottom; }
.moduleToolbarBtn:hover { background-color:rgba(255, 255, 255, 0.65); }

    /* Override default disabled look. Default is lighter grey background color.
   Also set disabled hover color to same as disabled color to avoid disabled button lighting up on hover making it look like it's enabled.
   We also set border:none or else the height of the module toolbar will increase by 2 pixels which looks a bit odd when increased plus may be confusing when we calc heights of content on a pixel-perfect sizes.
      Also it looked a bit better without the border. The border probably comes due to the input:disabled css we have in this file which is set to 1px solid #888.
*/
.moduleToolbarBtn[disabled="disabled"]
{
    background-color: rgba(238, 238, 238, 1);
    border: none;
}
.moduleToolbarBtn[disabled="disabled"]:hover
{
    background-color: rgba(238, 238, 238, 1);
}

/* Style for module toolbar buttons that are NOT ImageButton, but normal asp Button. Needed if we need module buttons with text instead of image. */
.moduleToolbarBtnNonImgBtn {
    padding:12px; vertical-align:text-bottom; color:white;
}
.moduleToolbarBtnNonImgBtn:hover { background-color:rgba(255, 255, 255, 0.65) !important; cursor:pointer; }

/* Override default disabled look. Default is lighter grey background color.
   Also set disabled hover color to same as disabled color to avoid disabled button lighting up on hover making it look like it's enabled. */
.moduleToolbarBtnNonImgBtn[disabled="disabled"]
{
    background-color: rgba(238, 238, 238, 1) !important;
}
.moduleToolbarBtnNonImgBtn[disabled="disabled"]:hover
{
    background-color: rgba(238, 238, 238, 1) !important; cursor:default;
}


/* Style for module toolbar buttons that are plain html Button instead of ImageButton. Needed if we need module buttons with both text and image. */
.moduleToolbarBtnImgAndTxt {
    padding:8px; color:white;
    border-style:none;
    background-color:transparent;
}
.moduleToolbarBtnImgAndTxt:hover { background-color:rgba(255, 255, 255, 0.65) !important; cursor:pointer; }

/* -------------------------------------------------------------
   Style for our own custom generic split/dropdown module toolbar buttons.
   Note: Instead of building this further we should instead look at using a finished toolbar control, e.g. Telerik's RadToolBar.
   Currently used for print dropdown button in order dialog for printing delivery note, mark ready dropdown in order and order dialog, save dropdown in frmMsgDialogHtml, New dropdown in frmReportDesigner.
   ------------------------------------------------------------- */
.moduleToolbarDropdown {
    padding-top:10px;
    padding-bottom:10px;
}
.moduleToolbarDropdown:hover { background-color:rgba(255, 255, 255, 0.65); }

.moduleToolbarDropdown-Content {
    display: none;
    position: absolute;
	/*text-align:center;*/
	background-color:#69add9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-top:10px;
}

.moduleToolbarDropdown:hover .moduleToolbarDropdown-Content {
    display: block;
}

/* Custom module toolbar dropdown menu button */
.moduleToolbarDropdownItem {
    padding: 8px 8px;
    color:white;
	background-color:#69add9;
    display:block;
    width:100%;
	text-align:left;
    border:none;
}
.moduleToolbarDropdownItem:hover {
    cursor:pointer;
    background-color:rgba(255, 255, 255, 0.35);
}

/* -------------------------------------------------------------
   Css for content in modules, e.g. common formatting of groups of data.
   ------------------------------------------------------------- */

/* Intended as a group header for grouping of data/settings belonging together in a module, typically maintenance modules, e.g. Economy settings in Master company maintenance. */
.contentGroupHeader {
    margin-top:14px; margin-bottom:10px;
    padding-left:4px;
    font-size: 16px;
    /*border-bottom: 5px solid blue;*/
    background-color:#90d4f9;
    color: #003a60;
    /* Makes the group header text upper case. */
    text-transform: uppercase;
}

/* ========================================================================
   Module menu test - basis from http://code-tricks.com/simple-css-drop-down-menu/
   Module menu is a menu inside a module on the left-hand side and has only one level - not hierarchical/sub levels..
   ======================================================================== */

/*Initialize*/
ul#moduleMenu {
    padding:5px;
    margin: 0;
	background: #79bde9;
	font-size: 12px;
	/*max-width:140px;*/
	/*border: 1px solid #25a0da;*/
}

ul#moduleMenu li, ul#moduleMenu {
    list-style-type: none;
    /*display: inline-block;*/
}

/*Link Appearance*/
ul#moduleMenu li a {
    display:block;
    text-decoration: none;
    color: #fff;
    padding: 5px;
	margin-bottom:6px; /* Get some distance between each menu item. */
}

ul#moduleMenu li a:hover {
	background-color:rgba(255, 255, 255, 0.5);
}

/* Style for currently selected module menu item. */
.moduleMenuCurrent
{
	background-color:rgba(255, 255, 255, 0.5);
	/*background-color: black;*/
}


/* ========================================================================
	Telerik styling - RadGrid - WITH the use of skins.
    
    Note: 
    Telerik bruker de samme css klassenavnene om vi bruker innebygde skins eller ikke, MEN, når skin brukes ser det ut til at vi må ha !important på det vi ønsker å override.
    Oppdatert info: Istedenfor å bruke !important kan vi heller bruke en "parent" element; Eks. er RadGrid alltid i en div parent og kan da eks. bruke div.RadGrid_Default,
    se eks. her for mer info: https://www.telerik.com/blogs/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin

    To get css apply to a specific skin the css class name should contain the skin's name, e.g. RadGrid_Default & RadGrid_Metro.
    To apply to all grids regardless of skin, just use RadGrid.
========================================================================*/

/* Set the height for rows and alternating rows in all grids. We use tr. to get higher css specificity. */
.RadGrid tr.rgRow {
    height: 24px;
    /*height: 26px;*/
    /*background: green;*/
}
.RadGrid tr.rgAltRow {
    height: 24px;
    /*height: 26px;*/
}
/*.RadGrid tr.rgHeader {
    height: 24px;
}*/

/* Reduce padding in cell content for rows, alt rows and header rows; are by default very high.
   Set a little bit higher top and bottom padding on header rows to make them stand out a little bit more.
   Also need to reduce padding on footer correspondingly to get correct alignment of sums in group sums and total som rows.
   Also need to reduce padding on edit row for cases where edit mode is used. */
.RadGrid tr.rgRow > td {
    padding: 4px;
    border: none !important;
}
.RadGrid tr.rgAltRow > td {
    padding: 4px;
    border: none !important;
    /* Think this works for setting the alternating backcolor; then don't need to specify that on alle grids... */
    /*background-color: #e8f0f8;*/
}
.RadGrid tr.rgEditRow > td {
    padding: 4px;
    /*border: none !important;*/
}
.RadGrid th.rgHeader {
    padding: 4px;
    padding-top:6px;
    padding-bottom:6px;
}
.RadGrid tr.rgFooter > td {
    padding: 4px;
}

/*.RadInput input.riTextBox {
    padding: 2px !important;
}*/

/* Reduce padding in filter row cells and padding within the filter textboxes. */
.RadGrid tr.rgFilterRow > td {
    padding: 4px;
}
.RadGrid .rgFilterBox {
    padding: 4px !important;
}


/* Needed to override the background color/gradient of the grouping panel. */
.rgGroupPanel {
    background: linear-gradient(#eee, white) !important;
}

/* Needed to override the background color/gradient of the items in the grouping panel. */
.rgGroupItem {
    background: linear-gradient(to bottom, #f8fbfc 0%,#eaeff2 50%,#d7e0e5 51%,#eef6fc 100%) !important;
    /*background: linear-gradient(#ffdcaf, #fdc57b ) !important;*/
    /*background: linear-gradient(#cdeb8e, #E5F9A7) !important;*/
}

/* Needed to override the background color/gradient of the grouping col containing plus/minus for expanding/collapsing rows. */
.rgGroupCol {
    /*background: #ffffff !important;*/
    background: #f9f9f9 !important;
    border-color: #f9f9f9 !important;
    /*background: #dbedff !important;*/
    /*border-color: #dbedff !important;*/
    border-top-color: #828282 !important;
    /*background: #cbddef !important;*/
}

/* If we want to override the backcolor used when sorting on all the cells in the column being sorted, enable the css below and choose the color we want. */
.rgSorted { background-color:rgba(230, 230, 255, 0.5) !important; }

/* NOTE: Need this to be able to set back color on the Group footers since setting it in ItemDataBound server-side doesn't seem to work when RenderMode is Lightweight (probably due to a bug); see SupportUtvikling.doc for more info.
         Also we set :not(:first-child) to prevent styling the first cell which would not look too good. */
tbody > .rgFooter > td:not(:first-child) {
    background: #D0E2F5 !important;
}
/* NOTE: Need this to be able to set back color on the main/grid footer since setting it declaratively in the grid definition doesn't seem to work when RenderMode is Lightweight (probably due to a bug); see SupportUtvikling.doc for more info. */
tfoot > .rgFooter > td {
    background: #dae6f2 !important; /* Changed to #dae6f2 7.5.2020; old color #acc8f2 was too purple. */
}
/* NOTE 29.7.2020: Dersom UseStaticHeaders=True så endres strukturen på hvor footer er; ligger da i separat overordnet div element med rgFooterWrapper klasse satt samt ligger under et tbody element istedenfor tfoot!?! Må derfor også ha denne for å få riktig i slike tilfeller! Note: Starts with div to get higher specificity than the tbody > .rgFooter > td:not(:first-child) selection for Group footers css above */
div.rgFooterWrapper .rgFooter > td {
    background: #dae6f2 !important;
}

/* After converting to RenderMode=Lightweight the page navigation buttons got very big; this css reduces the size.
   Note: Need to be more specific than ".RadGrid button.t-button" because that also influence the sort buttons in col header. */
.RadGrid tr.rgPager .rgActionButton {
    height: 22px;
    width: 18px;
    padding: 0px;
}

/* Set background color to white on paging area; default is grey (at least on default skin). */
.RadGrid td.rgPagerCell {
    background-color: #fff;
}

/* Some custom styling for items (e.g. ImageButton) in RadGrid toolbars; elements/buttons inside CommandItemTemplate part of the radgrid. Added to enable hover effect on the buttons/items. */
.cssGridTlbItem {
    padding: 4px; /* Some padding on each button so that when hover backcolor is set, it's a bit wider than e.g. the actual image of an image button. */
}
.cssGridTlbItem:hover {
    background-color: rgba(128, 128, 128, 0.15);
    /*background-color:rgba(128, 180, 255, 0.5);*/
    /* Note: We use outline instead of border; border  causedthe entire toolbar to expand a bit. */
    outline: 1px solid #c0c0c0;
    /*border: 1px solid #a0a0a0;*/
}

/* Needed to override a generic override we do for RadComboBox buttons to get the down arrow button a bit further down inside the combo's in paging area (override ".RadComboBox button.rcbActionButton" in this file). */
div.rgWrap.rgAdvPart button {
    padding-top: 2px !important;
}

/* ========================================================================
	Telerik styling - RadGrid - WITHOUT the use of skins.
    
    Note: 
    Telerik bruker de samme css klassenavnene om vi bruker innebygde skins eller ikke, MEN, når skin brukes ser det ut til at vi må ha !important på det vi ønsker å override.
    Årsaken er at css for de innebygde skins blir lagt til helt i slutten av head delen for html'en til formen som rendres så det skal endel til for å få høyere prioritet/specificity for å override.
    Et bedre alternativ som Telerik foreslår er å bruke faste "parent" elementer, eks. div.RadGrid ..., se eks. her for mer info: https://www.telerik.com/blogs/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin

    Note: We may need to set ImagesPath="images\Telerik\Grid" on grids where we won't use built in skins... See e.g. here for more info: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/appearance-and-styling/skins
========================================================================*/
/* Grid header.
   Note: To be able to set the text color we also needed to set the .rgHeader a - saw Telerik themselves set the color both in .rgHeader and .rgHeader a. */
.rgHeader {
    background: linear-gradient(#fcfcfc, #eaeaea);
    /*background: #79bde9;*/
    color: black;
    border-top: 1px solid #d0cee1;
    border-bottom: 1px solid #d0cee1;
}
.rgHeader a
{
	color: black;
}

/* Grid row */
/*.RadGrid_Outlook .rgRow*/
.rgRow
{
	background: white;	
}

/* Alternating grid row */
/*.RadGrid_Outlook .rgAltRow*/
.rgAltRow {
    background: #e8f0f8;
}

/* Selected grid row */
.rgSelectedRow
{
	background: #69add9 !important;
    /*background: none !important;
    background: none #9eb4d8 !important;*/
    /*color: black !important;*/
}

/*.RadGrid_Outlook .rgSelectedRow
{
	background: #9eb4d8;
}*/


 /* ========================================================================
	Telerik styling - RadWindow
    ======================================================================== */

 /* After converting to RenderMode=Lightweight the title font size were reduced and non-capitalized, plus width is only 60%. We therefore increase font size, clear left padding and calc width to make use of all the space in the title bar. */
.RadWindow h6.rwTitle {
    font-size: 14px;
    padding-left: 0px;
    width: calc(100% - 50px);
    /*margin-left:-40px;*/
}
/* Note: If the pixel density / scaling / resolution is 1.25 or higher, decrease font size again in RadWindow's header.
         Done since bottom parts of some chars (e.g. "g") was not shown when text/screen scaling was set to 125% in Windows (seen on Win10). */
@media screen and (min-resolution: 1.25dppx) {
    .RadWindow h6.rwTitle {
        font-size: 12px;
    }
}

/*.rwTitlebar
{
	background: #79bde9 !important;
}*/

/* ========================================================================
	Telerik styling - RadToolbar.
    cssToolbarS is created to be able to have a Small toolbar which use little space, especially created to minimize the height of the toolbar.
    We use the cssToolbarS class instead of div.RadToolBar to allow us to choose which toolbars we want small instead of having all toolbars small.
    It is created for RadToolbar rendered with Lightweight RenderMode; see further down for commented out css for what worked in Classic RenderMode (which we no longer use).
    We prefix some of telerik's classes with e.g. span to get a higher css specifity to be able to override the telerik css and to be able to do it without needing to use !important, see e.g. here for more info: https://www.telerik.com/blogs/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin
    ======================================================================== */

/* Main button structure in RadToolBar: UL (rtbUL -> LI (rtbLI rtbItem) -> SPAN (rtbButton) (For icon only: rtbButton rtbIconOnly) -> IMG (rtbImage).
   rtbText is a Span on same level as IMG/rtbImage for buttons containing text  */

.cssToolbarS {
    height: 26px;
    padding: 0px !important;
    /* margin had no effect */
    /*margin:0px;*/
    border: none !important;
    /* box-sizing had no effect */
    /*box-sizing: content-box;*/
    line-height: 0.8 !important;
}
/* Needed because the text on buttons with text were misaligned with the icon; text had vertical-align top while icons had middle; is this a bug in the toolbar css? */
.cssToolbarS span.rtbText {
    vertical-align: middle;
}
/* Note: Do we need this? Disable for now by adding TMP. */
.TMPcssToolbarS span.rtbButton {
    padding: 4px !important;
    /* Can set this to remove small border and make buttons even smaller */
    /*border:none !important;*/
}
/* This solves issue with buttons with image & text were a little bit higher than buttons with only icon/image; margin were then margin: -2px 0 0 0;. */
.cssToolbarS span.rtbIconOnly .rtbImage {
    margin: 0px 0 0 0;
}
/* This solves issue with buttons with image & text had apparently no padding on their left-hand side due to margin-left on those are set to -4px for some strange reason - bug?.
   That looked especially bad when such a button was the first button in a toolbar.
   Note: Now commented out since it doesn't seem to be an issue anymore!?! */
/*.cssToolbarS .rtbImage {
    margin-left: 0px;
}*/
/* Needed to be able to reduce toolbar height a little bit more. */
.cssToolbarS li.rtbSeparator {
    height: 1.1em;
}

/* Some tests regarding styling of toolbar */
/*.rtbIconOnly {
            background-color:red !important;
        }*/
/*.rtbItem {     
            padding:0px !important;
            margin:0px !important;     
        }*/
/*.rtbUL {
            margin-block: 60px 60px; !important;
        }*/

/* ---------------------------------------------------
	Telerik styling - RadToolbar.
    css corresponding to the cssToolbarS above that worked when we used Classic RenderMode.
    Note: Used this in the frmOrderDlg; haven't used it from agCommon.css; might then increase css specificity on some parts to make it work. However, we'll probably not going to have non-Lightweight rendermode anymore...
   --------------------------------------------------- */
/* Added this to reduce height of toolbar. Done especially to reduce the height of the attachments toolbar. Solution found here: https://stackoverflow.com/questions/29837022/how-to-align-resized-items-in-radtoolbar-when-radtoolbar-is-resized */
/*div.RadToolBar .rtbOuter,
div.RadToolBar .rtbIn {
    padding: 0;
    line-height: 12px;
}*/
/* To Remove border in RadToolBar*/
/*div.RadToolBar_Metro .rtbOuter {
    border: none;
}
div.RadToolBar_Metro .rtbMiddle {
    border: none;
}*/

/* The css below was not in use:
   ------------------------------ */
/*div.RadToolBar_Metro .rtbIcon,     
       div.RadToolBar_Metro .rtbIn,     
       div.RadToolBar_Metro .rtbMid  {     
            padding: 0 !important;     
        }     
             
        div.RadToolBar_Metro .rtbItem {     
            margin: 0 !important;     
}*/

/* ========================================================================
	Telerik styling - RadAutoCompleteBox plus other controls.
    This was needed after converting all RenderMode on Telerik controls to Lightweight (old was Classic, which is the default rendermode).
    ======================================================================== */

/* Needed to reduce height of RadAutoCompleteBox controls to normal AgWeb height (22px inc. border) after converted AgWeb to using RenderMode=Lightweight. */
.RadAutoCompleteBox div.racTokenList {
    padding: 0px;
    height: 20px;
}

/* Needed to reduce height of RadInput controls to normal AgWeb height (22px inc. border) after converted AgWeb to using RenderMode=Lightweight.
   Note: RadInput class is used by the controls RadTextBox, RadMaskedTextBox, RadDateInput and RadNumericTextBox, see e.g. here for more info: https://docs.telerik.com/devtools/aspnet-ajax/controls/textbox/server-side-programming/properties */
.RadInput input.riTextBox {
    padding: 1px 4px 0px 4px;
}

/* Removes rounded corners on all tabs in tabstrips. */
.RadTabStrip span.rtsLink {
    border-radius:0px 0px 0px 0px !important;
}

/* Styles below is needed to reduce height of RadComboBox controls to normal AgWeb height (22px inc. border) after converted AgWeb to using RenderMode=Lightweight. */
div.RadComboBox {
    line-height:12px;
}
div.RadComboBox input {
    height: 12px !important;
}
.RadComboBox span.rcbInner {
    /* Have this to reduce left and right padding a bit inside combo */
    padding-left: 4px; padding-right:4px;
}
.RadComboBox button.rcbActionButton {
    /* Need this to move the combo arrow further up inside the combo. */
    padding-top: 0px;
}

/* Needed to clear a generic override we do for read-only fields so we get transparent background and no border inside RadComboBoxes; RadComboBox use a read-only text input field (clear "input:read-only:not([type=button]):not([type=submit]):not([type=image])" in this file). This also affects the PagingSize combo's in radgrid's paging area since RadComboBox is used there. */
.RadComboBox input { /* div.RadComboBox.RadComboBox_Default input */
    background-color: transparent !important;
    border: none !important;
}

/* Styles below is needed to reduce height of RadDropDownList controls to normal AgWeb height. Also change background color. */
div.RadDropDownList {
    line-height: 12px;
}
div.RadDropDownList .rddlInner {
    padding: 4px 8px 0px 2px;
    background-color: none;
    background-image: linear-gradient(#79bde9,#3aa6eb);
    border-color: #2a96db;
    /*background-image: linear-gradient(#9a9aff,#8080aa);*/
    /*color: #333;*/
}
/* reduce padding on arrow down "icon" (rddlSelect). */
div.RadDropDownList .rddlSelect {
    padding: 0px;
    padding-top: 3px;
}
/* Change selected list item in RadDropDownList from grey to blue */
ul.rddlList .rddlItemSelected {
    background-color: #79bde9;
}
/* Note: For some reason the RadGrid "batch container" is set to max-width=90% which cause the drop down to only fill 90% of the column. We override this to 100%. */
div.RadGrid .rgBatchContainer {
    max-width: 100%;
}

 /* ========================================================================
	Html Table styling.
	NOTE: Currently specific styling for frmLogin, frmLogout and frmMasterCompChoose.
    ======================================================================== */

.table
{
	margin: 0 auto;
	border: 1px solid #25a0da;
	border-spacing:0px;
}

.tableHeaderRow
{
	background: #25a0da;
	color:white;
}
/*.tblLogInHeader{ font-family: Verdana; background:url(../images/green-middle-bg.gif) repeat-x; HEIGHT: 25px; font-size: 14px;}*/

.tableHeaderRowAsCaption
{
	height:25px;
	font-size: 14px;
}

/* ===========================================================
   Miscellaneous styling
   =========================================================== */

/* Scale down the SweetAlert2 dialog we use for showing messages and asking for misc input. */
/* We now use swal2-modal instead of swal2-container; seems to only be the actual dialog, and then works with transform:scale instead of zoom. */
/* 26.10.2020: We now use zoom again instead of transform: scale because the latter got in conflict with the animation of the dialog; showed first non-scaled and then moved to scaled. Note: Still not working in IE, but doesn't matter since we don't support that browser).
               Worked if told swal in input not to animate (showClass: { popup: '', icon: '' }), but we want the animation... */
.swal2-modal {
    zoom: 80%;
    /* transform: scale(0.75); */
}
/* We decrease the SweetAlert2 dialog size here; is quite big compared to AgWeb's other user interface. Note: the css zoom property is a non-standard, but the recommended use of 
           "transform: scale" also reduce the size of the overlay which greys down the dialog in the background. This is since the swal2-container is that full area. If we are to use "transform: scale"
           we would need to instead do the transform on a sub-element which is only the actual dialog part...
           However, zoom is supported by all major browsers except Firefox & Firefox for Android so it should be ok to use it. */
/* NOTE: Couldn't comment out the whole part below; caused exception Google Chrome!?!?!?! 26.10.2020: Tried again and now it seemed to work; maybe because now also moved to agCommon.css? */
/*.swal2-container {
    zoom: 80%;
}*/

/* Needed to get the sweet alert dialog in front of telerik radwindow, at least in some cases (at least when shown from frmMfa.aspx). Default z-index for swal is 1060. */
.swal2-container {
    z-index: 4000 !important;
}

/* Ensure a min width on confirm button; gets a it small when only contains "OK" text. */
.swal2-confirm {
    min-width: 90px;
}

/* Nedenfor er en test for å prøve å få bort hvit border rundt radwindow til oppgavedialogen. */

    /*.rwCorner .rwTopLeft,
    .rwTitlebar,
    .rwCorner .rwTopRight,
    .rwIcon,
    .rwTopLeft,
    .rwTopRight,
    .rwFooterLeft,
    .rwFooterRight,
    .rwFooterCenter,
    .rwBodyLeft,
    .rwBodyRight,
    .rwTitlebar,
    .rwTopResize,
    .rwStatusbar,
    .rwStatusbar .rwLoading
    { 
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }*/