@charset "utf-8";

/* CSS Document */
/* system.css - Standard OASIS stylesheet for any OASIS Web 4.0 System Component Screens */

/* --- ELEMENT STYLING RESET --- */


body, div, h1, h2, h4, h5, h6, p, img, img a, a img, form, fieldset, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

body {
    margin-left: 10px;
    margin-right: 10px;
    background-color: #F5F5F5;
}

body.popup {
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
}

body.dialogPage {
    margin-left: 0px;
    margin-right: 4px;
    background-color: white;
}

/* --- STANDARD TAG RE-STYLING --- */


button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #09AFE6;
    text-align: center;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px #CCC;
    cursor: pointer;
    border-style: none;
}

.blue button {
    background-color: #F0F0F0;
    color: #09AFE6;
    box-shadow: none;
}

button.white {
    background-color: #FFF;
    color: #09AFE6;
    box-shadow: 0px 0px 14px 6px #CCC;
}

button:hover {
    background-color: #6BD7FA;
    -webkit-transition: background-color 0.1s ease-out 0s;
    -moz-transition: background-color 0.1s ease-out 0s;
    -ms-transition: background-color 0.1s ease-out 0s;
    -o-transition: background-color 0.1s ease-out 0s;
    transition: background-color 0.1s ease-out 0s;
    color: #FFF;
}

button:focus {
    outline: none;
    background-color: #F90;
    color: #FFF;
}
button:disabled {
    background-color: #BBB;
    color: #DDD;
    cursor: default;
}
input , select{
    border: none #AAA 1px;
    border-radius: 5px;
    /* [disabled]box-shadow: inset 1px 1px 5px -1px #999;
*/
    margin: 0px;
    padding: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

input:disabled  {
    background-color: initial;
    color: initial;
}
select:disabled  {
    background-color: #F0F0F0;
    color: #999;
}
input:enabled , select:enabled{
    margin: 2px;
    background-color: #F0F0F0;
}
input:hover:enabled , select:hover:enabled{
    box-shadow: inset 1px 1px 5px -1px #999;
    border: solid #6BD7FA 1px;
    margin: 1px;
}
input:focus:enabled ,select:focus:enabled{
    outline: none;
    box-shadow: inset 1px 1px 5px -1px #999;
    border: solid #09AFE6 2px;
    margin: 0px;
}
.blue input:focus:enabled , .blue select:focus:enabled{
    border-color: #F90;
}

input[type="radio"] {
    margin: 2px 6px 2px 2px !important;
    border: none 0px !important;
}

input[type="radio"]:hover:enabled {
    box-shadow: none !important;
    margin: 2px 6px 2px 2px !important;
    border: none 0px !important;
}

input[type="radio"]:checked {
    color: #09AFE6;
}

label[disabled] {
    color: #BCBCBC;   
}

label.radio {
    border: none;
    padding: 2px;
    border-radius: 6px;
}

label.radio:not(.disabled):hover {
    /* [disabled]box-shadow: inset 1px 1px 5px -1px #999;
*/
    border: solid #6BD7FA 1px;
    padding: 1px;
}

label.radio.focus {
    /* Labels don't directly receive focus so a JQuery trigger is added to set the "focus" class on labels instead for objects that require it. */
    border: solid #6BD7FA 1px;
    padding: 1px;
}

label.small {
    font-size: smaller;   
}

input[type="checkbox"] {
    vertical-align: middle;   
}

input[type="checkbox"]:hover {
    margin: 2px;
    border-radius: 5px;
    outline: solid 1px #6BD7FA;
}

.inputGroup {
    border: none #AAA 1px;
    border-radius: 5px;
    margin: 0px;
    padding: 6px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F0F0F0;
    font-size: 14px;
}

.inputGroup .contentsHeading {
    margin-bottom: 10px;
}

.blue {
    background-color: #09AFE6;
    color: #FFF;
}

.floatRight {
    float: right;   
}

.floatLeft {
    float: left;   
}
/* --- STANDARDISED CLASSES --- */

.bottomSpacer {
    height: 20px;
    position: absolute;
    bottom: -20px;
}

.column {
    height: 100%;
    float: left;
    min-height: 100%;
}

.contentsHeading {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #666;
    background-color: #FFF;
    padding: 6px;
    box-shadow: 3px 3px 6px 0px #CCC;
    border-radius: 5px;
    border: 1px solid #CCC;
}

.disabled {
    color: #999;
}

.errorMessage {
    border: solid #ED1D25 3px;
    border-radius: 6px;
    padding: 10px;
    margin-right: 6px;
    color: #ED1D25;
    background-color: #FBE1E1;
    border-style: solid;
    box-shadow: 3px 3px 6px #666;
}

.fieldValidationError {
    background-color: #FFB0B0 !important;
    border: 2px solid #CE0000 !important;
    border-radius: 3px;
    -webkit-transition: border-color 600ms ease-in-out, border-width 600ms ease-in-out, background-color 600ms ease-in-out;
    -moz-transition: border-color 600ms ease-in-out, border-width 600ms ease-in-out, background-color 600ms ease-in-out;
    -ms-transition: border-color 600ms ease-in-out, border-width 600ms ease-in-out, background-color 600ms ease-in-out;
    -o-transition: border-color 600ms ease-in-out, border-width 600ms ease-in-out, background-color 600ms ease-in-out;
    transition: border-color 600ms ease-in-out, border-width 600ms ease-in-out, background-color 600ms ease-in-out;
}

.fieldValidationError:focus {
    background-color: rgba(255,176,176,0.5) !important;
    -webkit-transition: border-color 100ms ease-in-out, border-width 100ms ease-in-out, background-color 100ms ease-in-out !important;
    -moz-transition: border-color 100ms ease-in-out, border-width 100ms ease-in-out, background-color 100ms ease-in-out !important;
    -ms-transition: border-color 100ms ease-in-out, border-width 100ms ease-in-out, background-color 100ms ease-in-out !important;
    -o-transition: border-color 100ms ease-in-out, border-width 100ms ease-in-out, background-color 100ms ease-in-out !important;
    transition: border-color 100ms ease-in-out, border-width 100ms ease-in-out, background-color 100ms ease-in-out !important;
}
.fixedText {
    color: #09AFE6;
    font-family: Calibri, "Times New Roman", Times, serif;
    font-style: italic;
}
.highlight {
    background-color: #B9ECFD;
    -webkit-transition: background-color 1.5s ease-out;
    -moz-transition: background-color 1.5s ease-out;
    -ms-transition: background-color 1.5s ease-out;
    -o-transition: background-color 1.5s ease-out;
    transition: background-color 1.5s ease-out;
}
.highlight.dulled {
    -webkit-transition: background-color 1.5s ease-out;
    -moz-transition: background-color 1.5s ease-out;
    -ms-transition: background-color 1.5s ease-out;
    -o-transition: background-color 1.5s ease-out;
    transition: background-color 1.5s ease-out;
    background-color: transparent;
}



.imageButton   {
    width: 20px;
    height: 20px;
    background-position: top left;
    padding: 0px;
    background-color: transparent;
    vertical-align: text-bottom;
    box-shadow: none;
}

.imageButton:hover {
    background-color: transparent;
}

.imageButton:disabled {
    background-color: transparent;
    opacity: 0.4;
}

.imageButton .inner  {
    width: 20px;
    height: 20px;
    background-position: top right;
    opacity: 0;
    -webkit-transition: opacity 200ms ease-out 0s;
    -moz-transition: opacity 200ms ease-out 0s;
    -ms-transition: opacity 200ms ease-out 0s;
    -o-transition: opacity 200ms ease-out 0s;
    transition: opacity 200ms ease-out 0s;
}

.imageButton:enabled:hover .inner, .imageButton:enabled:focus .inner {
    opacity: 1;
}
.imageButton.cancel, .imageButton.cancel .inner {
    background-image: url(images/delete_btn_bg.png);
}

.imageButton.delete, .imageButton.delete .inner {
    background-image: url(images/delete_btn_bg.png);    
}

.imageButton.edit, .imageButton.edit .inner {
    background-image: url(images/edit_btn_bg.png);    
}
.imageButton.save, .imageButton.save .inner {
    background-image: url(images/ok_btn_bg.png);
}
.imageButton.select, .imageButton.select .inner {
    background-image: url(images/select_btn_bg.png);
}
.instructionsShowing {
    color: #999;
}


.label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.oasisLogo.light {
    background-color: #09AFE6;
    background-image: url(images/oasis_logo_white.png);
    background-position: center;
    width: 140px;
    height: 39px;
    display: inline-block;
    background-repeat: no-repeat;
}

.off {
    display: none;
}

.panel {
    border-radius: 6px;
    padding: 10px;
    border-color: #FFF;
}

.screenBlocker {
    -webkit-transition: opacity 0.1s ease-in;
    -moz-transition: opacity 0.1s ease-in;
    -ms-transition: opacity 0.1s ease-in;
    -o-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
}

.screenBlockerPopupAlert {
    background-color: #09A6E0;
    opacity: 0.4;
}

.selected {
}

.spacer {
    height: 14px;
}
.sideSpacer {
    min-width: 10px;
}
.systemBackground {
    background-color: #F5F5F5;
}

.thumbnailHolder {
    max-width: 100px;
    max-height: 100px;
}



.verticalCentre {
    vertical-align: middle;
    display: table-cell;
    height: inherit;
}

h3.contentsHeading {
    font-size: 13px;
}

/* --- OBJECT SPECIFIC STYLING --- */


div.oasisSystemHeader {
    height: 100px;
    position: relative;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    left: 0px;
    right: 0px;
    margin-bottom: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
div.oasisSystemHeader a {
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    font-size: 13px;
}
div.oasisSystemHeader a:hover {
    text-decoration: underline;
}


div.oasisSystemHeader div.oasisLogo {
    margin-top: 20px;
}

div.oasisSystemHeader div.title {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 180px;
    right: 200px;
    padding-top: 30px;
    line-height: 40px;
}

div.oasisSystemHeader div.title h1 {
    font-family: "Montserrat Alternates", Arial, Helvetica, sans-serif;
}

div.oasisSystemHeader div.controls {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding-right: 20px;
}

div.oasisSystemHeader div.controls div.verticalCentre {
    height: 100px;
    text-align: right;
}


div.dialogPage {
    border-radius: 6px;
    box-shadow: 4px 4px 12px 3px #666;
    background-color: #FFF;
    border-style: solid;
    border-color: #FFF;
}

div.dialogPage .title {
    color: #FFF;
    background-color: #AAA;
    padding: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-transition: background-color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out;
    -ms-transition: background-color 0.1s ease-out;
    -o-transition: background-color 0.1s ease-out;
    transition: background-color 0.1s ease-out;
}

div.dialogPage .controls {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 6px;
}

div.dialogPage .controls button.close {
    border-style: none;
    background-color: transparent;
    width: 20px;
    height: 20px;
    background-image: url(images/close_btn_blue.png);
    box-shadow: none;
    opacity: 0;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

div.dialogPage .title~.controls button.close {
    background-image: url(images/close_btn_white.png);
}

div.dialogPage:hover .controls button.close {
    opacity: 0.6;
}

div.dialogPage:hover .controls button.close:hover {
    opacity: 1;
}

div.dialogPage .contents {
    padding: 10px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

div.dialogPage .title~.contents {
    top: 30px;
}

div.pageBody {
    position: relative;
}
div.pageBody.fullScreen {
    bottom: 14px;
    position: fixed;
    top: 120px;
    left: 10px;
    right: 10px;
}

div.popupAlert {
    position: fixed;
    top: 35%;
    left: 35%;
    right: 35%;
    min-width: 200px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    background-color: white;
    background-position: left bottom;
    background-repeat: repeat-x;
    border-style: solid;
    border-width: 3px;
    border-color: #09AFE6;
    border-radius: 5px;
    padding: 5px;
}

div.popupAlert.error {
    border-color: #ED1D25;
    color: #ED1D25
}

div.popupAlert.error .icon {
    width: 50px;
    height: 50px;
    background-image: url(images/error_icon.png);
}

div.popupAlert.question .icon {
    width: 50px;
    height: 50px;
    background-image: url(images/question_icon.png);
}

div.popupAlert.information .icon {
    width: 50px;
    height: 50px;
    background-image: url(images/information_icon.png);
}

div.tabSet {
    position: relative;
}

div.tab {
    padding: 4px;
    background-color: #09AFE6;
    color: #FFF;
    cursor: pointer;
}

div.tab:hover {
    background-color: #6BD7FA;
    -webkit-transition: background-color 0.1s ease-out 0s;
    -moz-transition: background-color 0.1s ease-out 0s;
    -ms-transition: background-color 0.1s ease-out 0s;
    -o-transition: background-color 0.1s ease-out 0s;
    transition: background-color 0.1s ease-out 0s;
}
div.tab:focus {
    background-color: orange;
    -ms-transition: background-color 0.1s ease-out 0s;
    -o-transition: background-color 0.1s ease-out 0s;
    outline: none;
}

div.tab.selected {
    background-color: #FFF;
    color: #000;
    -webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out, color 0.1s ease-out;
    -ms-transition: background-color 0.1s ease-out, color 0.1s ease-out;
    -o-transition: background-color 0.1s ease-out, color 0.1s ease-out;
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}

div.tabContents, section {
    display: none;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 6px 6px 10px -2px #CCC;
    background-color: #FFF;
    border-style: solid;
    border-color: #FFF;
    overflow: auto;
}

div.tabContents.selected, section {
    display: block;
}

div.tabContents iframe.fullTab {
    display: block;   
    width: 100%;
    height: 100%;
    border: none;
}

div.tabSet.vertical div.tabStrip {
    width: 160px;
    float: left;
    padding-top: 20px;
    padding-bottom: 10px;
    min-height: 210px;
}

div.tabSet.vertical div.tab {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

div.tabSet.vertical div.tab.selected {
    margin-right: 0px;
    border-right-style: none;
    box-shadow: 3px 3px 10px 1px #CCC;
}

div.tabSet.vertical div.tabContents {
    min-height: 200px;
    right: 10px;
    top: 10px;
    position: absolute;
    left: 160px;
}

div.tabSet.vertical.fullScreen div.tabContents {
    min-height: 200px;
    right: 20px;
    top: 120px;
    position: fixed;
    left: 170px;
    bottom: 20px;
}

div.fullPage  {
    top: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

table.recordSelector {
    border-style: solid;
    border-width: 1px;
    border-color: #555;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: 12px;
    padding: 0px;
    border-spacing: 0px;
}
table.recordSelector th, table.recordSelector td{
    padding: 3px;
}
table.recordSelector th:not(.sideSpacer), table.recordSelector td:not(.sideSpacer){
    padding-left: 10px;
    padding-right: 10px;
}
table.recordSelector thead  {
    color: #DDDDDD;
    background-color: #555;
    font-style: normal;
    font-size: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


table.recordSelector thead th {
    color: #DDDDDD;
    background-color: #555;
    font-style: normal;
    font-size: 14px;
}
table.recordSelector thead tr:first-of-type th:first-of-type {
    border-top-left-radius: 4px;
}

table.recordSelector thead tr:first-of-type th:last-of-type {
    border-top-right-radius: 4px;
}
table.recordSelector tbody tr:not(.spacer):not(.pullDownTab) td, table.recordSelector tbody tr:not(.spacer):not(.pullDownTab) th{
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-color: #D6D6D6;
    border-width: 1px;
    text-align: center;
}

table.recordSelector tbody tr.spacer td {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-color: #D6D6D6;
    border-width: 1px;
}

table td.pullDownTab  {
    color: white;
    background-color: #09AFE6;
    text-align: center;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

table td.pullDownTab:hover {
    background-color: #6BD7FA;
    -webkit-transition: background-color 0.1s ease-out 0s;
    -moz-transition: background-color 0.1s ease-out 0s;
    -ms-transition: background-color 0.1s ease-out 0s;
    -o-transition: background-color 0.1s ease-out 0s;
    transition: background-color 0.1s ease-out 0s;
}

table td.pullDownTab:focus {
    background-color: orange;
    -ms-transition: background-color 0.1s ease-out 0s;
    -o-transition: background-color 0.1s ease-out 0s;
    outline: none;
}

table tr.pullDownTabContents:not(.pulledDown) td {
    /* [disabled]height: 0px; */
    /* [disabled]overflow: hidden; */
    /* [disabled]padding: 0px; */
    /* [disabled]display: none; */
    padding-top: 0px;
    padding-bottom: 0px;



}

table tr.pullDownTabContents td >  div{
    overflow: hidden;
    display: none;
}

.hidden {
    display: none !important;   
}

.hideIfEmpty {}

.hideIfNoData, .hideIfNoData .data {}

.controls .recordFilter {
    position: absolute;
    right: 10%;   
    top: 0%;
}

.section {
    background-color: white;
    border-radius: 6px;
    padding: 16px;
}

form table th {
    text-align: right;   
}

td.field {
    padding: 6px;   
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px;
}

.thisLoads {
    -webkit-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;      
    transition: opacity 300ms ease;    
}

.loading {
    opacity: 0.2;   
}

.dataFields .dataField {
    border-radius: 5px;   
    -webkit-transition: color .5s linear;
    -o-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -ms-transition: color .5s linear;      
    transition: color .5s linear;     
    padding: 2px 6px;
}

.dataFields .dataField:hover {
    background-color: #FFF5E4;   
    -webkit-transition: color .1s linear;
    -o-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -ms-transition: color .1s linear;      
    transition: color .1s linear;       
}

.dataFields .dataField.focused {
    border-top: solid 2px #FFA500;
    border-bottom: solid 2px #FFA500;
    /*background-color: #FFA500;   */
}

.dataFields .dataField label {
    font-weight: bold;
    min-width: 260px;  
    display: inline-block; 
    text-align: left;
}

.dataFields .dataField.modified input:enabled,
.dataFields .dataField.modified select:enabled,
.dataFields input.modified:enabled,
.dataFields select.modified:enabled {
    /*background-color: #FFF5E4;*/
    border: solid 2px orange;       
}

.dataFields .dataField.focused label {
    color: #FFA500;   
}

.dataFields .dataField .controls {
    opacity: 0;
    -webkit-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;      
    transition: opacity 300ms ease;        
}

.dataFields .dataField.focused .controls {
    opacity: 1;
}

.dataFields .dataField.modified .controls {
    opacity: 1;   
}

.group {
    border: solid #666 1px;
    border-radius: 5px;
    padding: 5px;    
}

.tabContents section {
    padding-left: 12px;
    padding-right: 12px;   
    padding-bottom: 12px;
}

.tabContents section > h3 {
    margin-left: -6px;
    margin-right: -6px;
}

input[type=text].long {
    width: 400px;   
}

input[type=text].medium {
    width: 250px;   
}