body {
    font-family: "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
}

body.crystal {
    background-color: #e4e4ec;
}

/* Placeholder shown by report viewer pages whose report has no HTML renderer */
.report-unavailable {
    padding: 24px;
    font-size: 14px;
    color: #333;
}

/* Custom Icons */
.icon-fossum     {background-image: url(icons/fossum.png) !important; background-repeat: no-repeat; background-position: 0 0; }
.icon-clientlogo {background-image: url(icons/clientlogo.png) !important;background-repeat: no-repeat;background-position: 0 0;}
.icon-user-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234a90e2'/><circle cx='12' cy='9.5' r='3.5' fill='%23fff'/><path fill='%23fff' d='M12 13.5c-3.6 0-6.5 2-6.5 4.5 1.7 1.9 4.1 3 6.5 3s4.8-1.1 6.5-3c0-2.5-2.9-4.5-6.5-4.5z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-help-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23444' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.1-13.5c-1.9 0-3.2 1.2-3.2 2.9h1.8c0-.7.5-1.3 1.4-1.3.8 0 1.3.4 1.3 1.1 0 .6-.3.9-1 1.4-1 .7-1.3 1.3-1.3 2.3v.4h1.7v-.3c0-.6.2-.9.9-1.3 1-.7 1.6-1.3 1.6-2.5 0-1.6-1.4-2.7-3.2-2.7zm-.2 10.4a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-signout-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23444' d='M5 3h7a2 2 0 0 1 2 2v3h-2V5H5v14h7v-3h2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm11 5 4 4-4 4-1.4-1.4 1.6-1.6H8v-2h8.2l-1.6-1.6L16 8z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-base-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23f0c419'/><path fill='%23222' d='M7 7h2.5v10H7zM14.5 7H17v10h-2.5zM9.5 10.75h5v2.5h-5z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-start-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='6'/><path d='M12 1v4M12 19v4M1 12h4M19 12h4'/></g><circle cx='12' cy='12' r='1.5' fill='%23444'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}

/* Theme toggle: moon while light mode is active (sun variant in Custom-dark.css). */
.icon-theme-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23444' d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-ok-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%2334a853'/><path fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M7 12.5l3.5 3.5L17 9'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-cancel-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23e53935'/><path fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M8 8l8 8M16 8l-8 8'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-wrench-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231976d2' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.4-.4.4-1.1.1-1.4z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
.icon-wrench-orange-modern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f57c00' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.4-.4.4-1.1.1-1.4z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}

/* Modern blue ring spinner for Ext.JS load masks (replaces the legacy GIF). */
.x-mask-loading div {
    background-image: none !important;
    padding-left: 28px !important;
    position: relative;
}
.x-mask-loading div::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    /* Ring is 18px tall incl. the 2px borders, so center with -9px (not -7px,
       which left the spinner 2px too low, nearly touching the box bottom). */
    margin-top: -9px;
    width: 14px;
    height: 14px;
    border: 2px solid #d0e0f0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: portalen-spin 0.8s linear infinite;
}
@keyframes portalen-spin {
    to { transform: rotate(360deg); }
}

/* Flat, borderless tab close button (replaces famfamfam close icon). */
.x-tab-strip-close {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/></svg>") !important;
    background-position: center center !important;
    background-size: 10px 10px !important;
    background-repeat: no-repeat !important;
    border: none !important;
    opacity: 1 !important;
}
.x-tab-strip-close:hover,
.x-tab-strip-close-over {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/></svg>") !important;
}

/* = Headings ===*/
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight: bold;
    font-family: "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1 {font-size: 1.5em;padding: 0;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1.0em;}
h6 {font-size: 0.9em;}

a,a:visited,a:active,a:hover {/*	color: #000;*/}
.strong .x-label-value{font-weight: bold;}
input.textbox{padding: 0px 2px;}
textarea{font-family:inherit;font-size: 100%;}
input{font-family:inherit;}
div.head-panel div.x-panel-body{background: #fff url(images/fossum14.png) no-repeat 0px 0px;color: #000;width: 100%;}
div.head-panel div.x-panel-body h1{margin-left: 80px;	margin-top: 13px;cursor:default;}
div.head-panel div.x-panel-body #login{	position:absolute;	top: 5px;	right: 10px;font-size: 1.0em;}
div.head-panel div.x-panel-body #login span {	background: transparent url(images/user.png) no-repeat 0px 0px;  margin-right: 5px; padding-left: 20px;}

div.menu-content{padding: 6px;}
div.menu-content ul{}
div.menu-content li{margin-bottom:3px;}
div.columns{overflow:hidden;zoom:1;margin-top:10px;}
div.column {float:left; width:47%; margin:0 2% 0 0;overflow:hidden;}
div.pagecontainer{margin: 10px;}
#create-message textarea{width: 400px;height: 120px;font-size: 100%;}
#create-message div.recipient,
#create-message input.fileupload,
#create-message input.textbox{width: 400px;}
#create-message div.recipient{height: 100px;overflow: auto;	border: 1px solid #666666;}
div.pos-modified{background-color: Yellow;	width: 100%;}
div.filter-panel th{font-size: 0.9em;}
div.unread{color:Red;}

div.unreleased .x-grid3-cell-inner{
    color:Red;
    font-weight: bold;         
}
div.released .x-grid3-cell-inner {
    color: #000000;
    font-weight: bold;
}

.list-item {
    font-size: 11px;
    font-family: "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 3px 10px 3px 10px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eeeeee;
    white-space: normal;
    color: #555;
}
.list-item p {display:block;font:inherit;font-weight:bold;color:#222;}
.location-label {
    background-color: White;
    padding: 2px;
    border: solid 1px black;
    font-family: "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0em;
    white-space: nowrap;
}
.creditlimit {background-color: #FF5050;background-image: none;}
.menu-title {
    background: #ebeadb;
    border-bottom: 1px solid #99bbe8;
    color: #15428b;
    font-family: "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    display: block;
    padding: 3px;
} 

.x-grid3-summary-row {background:#F1F2F4 none repeat scroll 0 0;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;color:#333333;}
.x-grid3-summary-row .x-grid3-cell-inner {font-weight:bold;padding-bottom:4px;}
.x-grid3-cell-first .x-grid3-cell-inner {padding-left:16px;}
.x-grid-hide-summary .x-grid3-summary-row {display:none;}
.x-grid3-summary-msg {font-weight:bold;padding:4px 16px;}    

/* Icon classes */
.icon-n-text{padding-left: 18px;}
.icon{display: block;width: 16px;height: 16px;text-indent: -9999px;}

.icon-StopGreen{background :transparent url(/icons/stop_green-png/ext.axd) no-repeat 0 0;}
.icon-StopRed{background :transparent url(/icons/stop_red-png/ext.axd) no-repeat 0 0;}
.icon-BulletCross{background :transparent url(/icons/bullet_cross-png/ext.axd) no-repeat 0 0;}
.icon-StopBlue{background :transparent url(/icons/stop_blue-png/ext.axd) no-repeat 0 0;}
.icon-BulletError{background :transparent url(/icons/bullet_error-png/ext.axd) no-repeat 0 0;}
.icon-Box{background :transparent url(/icons/box-png/ext.axd) no-repeat 0 0;}
.icon-BoxError{background :transparent url(/icons/box_error-png/ext.axd) no-repeat 0 0;}
.icon-Sum{background :transparent url(/icons/sum-png/ext.axd) no-repeat 0 0;}
.icon-Date{ background :transparent url(/icons/date-png/ext.axd) no-repeat 0 0; }
.icon-PageGo {background :transparent url(/icons/page_go-png/ext.axd) no-repeat 0 0;}

div.news{ margin-top: 20px; }
div.news hr{ margin: 5px 0px;}
div.news h3{ font-size: 14px; margin-top: 15px; }
div.news ul { margin-left: 10px; list-style-type: circle; list-style-position: outside; }
div.news li { margin: 10px 0 0 10px;}
div.news li p { font-weight: bold;}

ul.comment{ margin: 0px;}
ul.comment li{margin-bottom: 5px;border-bottom: solid 1px #e2e2e2;padding: 3px;}
ul.comment li p{ font-size: 12px; margin-bottom: 4px;  }
ul.comment li span{ font-size: 10px; color: Gray; padding: 2px; margin-left: 0px; }

#dashboard a{ color:Red; font-weight: bold;}
#dashboard li{margin-bottom:5px;}

div.alert a{ font-weight:bold; }
div.alert a span {color:Red;}
div.info a{ font-weight: bold; }

div.report{  }
div.report th{ font-weight:bold; }
div.report th,div.report td{padding-right: 10px;}
div.report h3{ color: #0033CC; font-size: 1.3em; }
div.report h4{  margin-top: 10px; font-size: 1.2em; }

div.servicelist-detail{ background-color:#e2e2e2; padding: 4px;}
div.servicelist-detail th{ font-weight:bold;}
div.servicelist-detail th,div.servicelist-detail td{ padding-right: 10px; }

#flightdiary-summary{table-layout: fixed;border-collapse: collapse; font-family:Tahoma; font-size: 11px; margin: 5px;}
#flightdiary-summary th,#flightdiary-summary td{ width: 100px; padding: 2px;}
#flightdiary-summary th{ background-color:#e2e2e2; font-weight:bold; border:solid 1px gray;}
#flightdiary-summary td{border:solid 1px gray;}

input.readonly{background: #e2e2e2;}
#maintenance-due-filter li.filter th,#maintenance-due-filter li.filter td{ padding: 2px;}
#maintenance-due-filter ul{float:left;}
#maintenance-due-filter li{float:left;}
#maintenance-due-filter li.btn{ padding-top: 24px;  }

.custom-trigger-edit{ background-image:url(/images/edit-trigger.png) !important; }
.custom-trigger-new{ background-image:url(/images/add-trigger.png) !important; }

.part-inventory-item{ padding: 2px; clear: both; }
.part-inventory-item h3{ font-size: 11px; }
/*.part-inventory-item span{ padding: 2px 2px 2px 18px; }*/
.part-inventory-item span{ padding: 2px; }

#poswindow ul{}
#poswindow li{ float:left;}

#about-box{padding: 8px;}
#about-box p{ margin-top: 6px;}
/*@purchase-order-details*/
#workorder-table th,
#workorder-table td,
#purchase-order-details th,
#purchase-order-details td{ padding: 2px 10px 2px 5px;}
#workorder-table td,
#purchase-order-details td{ border: solid 1px #e2e2e2; background-color:#f2f2f2;}
#purchase-order-details col.col0{ width: 120px;}
#purchase-order-details col.col1{ width: auto;}
#purchase-order-details col.col2{ width: 120px;}
#purchase-order-details col.col3{ width: auto;}
#purchase-order-details col.col4{ width: 150px;}
#purchase-order-details col.col5{ width: auto;}
#purchase-order-details col.col6{ width: 80px;}
#purchase-order-details col.col7{ width: auto;}
#workorder-table col.col0{ width: 120px;}
#workorder-table col.col1{ width: 700px;}
#cash-accounting-filter li{ margin-bottom: 5px;  }
div.filedataview{background-color:Red; margin-top: 10px;}
div.fileitem{float:left; width: 150px; background-color: Green; overflow:hidden; padding: 4px;}
.small-label{ font-size: 11px; }
#resource-readings{ font-size: 11px; font-family: Tahoma; }
#resource-readings td{ padding-right: 5px;  }
.x-grid3-row-body p {margin : 5px 5px 10px 15px !important;padding: 5px;color  : Navy;background-color: #f2f2f2;border: solid 1px gray;}

/* avvikelser, olästa */
.unread-row .x-grid3-cell-inner { font-weight: bold;} 
.deviation-readers-panel {padding: 6px; }
.deviation-readers-panel .x-panel-btns-ct {}
.deviation-readers-gridpanel {}

/* crs - confirmation workorder */
h2.crs-head {font-size: 1em;}

p.deleted-action { border: 1px solid red; background-color: #FCE0E0; color: #000; }

.remark-disabled {color: #000;}
.red-text label {color: red;}

/* Periodical inspections */
#ActionsGridPanel .x-grid3-col-3 {
    /* Word wrap fix */
    white-space : normal;
}

/* Workorder actions */
#WorkOrderActionsGridPanel .x-grid3-cell-inner {
    /* Word wrap fix */
    white-space: normal;
}

.cell-deleted {
    color: #989898;
}

/* Word wrap fix all */
.x-grid3-cell-inner, .x-grid3-hd-inner {
    white-space: normal;
}

/* Keep column headers on a single line — the "Word wrap fix all" above is meant
   for data cells; wrapped header text makes the header row tall and ragged. */
.x-grid3-hd-inner {
    white-space: nowrap;
}

/* Ext.JS Fix: Selected row highlight: paint cells (background + top/bottom line) so it reaches the right edge of the last column */
.x-grid3-row-selected td.x-grid3-cell,
.x-grid3-row-selected td.x-grid3-cell .x-grid3-cell-inner {
    background-color: #dfe8f6 !important;
}
/* Ext.JS Fix: Removes Ext.js top/bottom border lines as they are slightly too short compared to the above. Visuals are cleaner without them anyway */
.x-grid3-row-selected {
    border-color: transparent !important;
}

/* Ext.JS Fix: Body td gets 1px padding-left + 1px padding-right (and 1px
   border-right when ColumnLines is on), header td gets border-left + border-right
   (2px) with no padding. Either way each cell overflows its declared width and
   the row-table renders wider than the row div, drifting body column boundaries
   away from header ones. Force header and body cells to honour their declared
   widths via border-box so tables and their column boundaries line up — applied
   to all grids regardless of ColumnLines so non-column-lines grids align too. */
.x-grid3-row td.x-grid3-cell,
.x-grid3-hd-row td {
    box-sizing: border-box;
}

/* Ext.JS Fix: The row div is content-box with width set to the column-total,
   so its border-right is drawn 1px past the table's right edge. With ColumnLines
   the last cell's own border-right is already at the table's right edge, so the
   row's border-right adds a redundant 2nd stroke adjacent to the last column.
   Non-column-lines grids still need the row's border-right to draw the last
   column's right edge (the body cells don't), so this stays scoped. */
.x-grid-with-col-lines .x-grid3-row {
    border-right: 0;
}

/* SMS Max längd */
#SMSTextLength { color: #666; }

.el-DateError {
    background-color: yellow;    
}

.part-nr-and-title-by-average-price {
    color: Silver;
}

.quantity-and-price-by-average-price {
    text-align: right !important;
    color: Silver;
}

.part-nr-and-title-by-no-price {
    color: Red;
}

.quantity-and-price-by-no-price {
    text-align: right !important;
    color: Red;
}

img.AviationSafety {
    display: block;
    margin: 0 auto;
}

img.AviationChart {
    display: block;
    margin: 0 auto;
}

.x-grid-custom .x-grid3-row {
    max-height: 50px;
    overflow: hidden;
}

.grid-row-red {
    background: #ff6666;
}

.grid-row-yellow {
    background: #ffff80;
}

.grid-row-green {
    background: #ccffcc;
}

.bulletpadding {
    padding-left: 17px;
}