@import url("/VABStyleGuide/Theme.VABStyleGuide.css?174");

/*
    How to generate a theme for your company: 
    
        1 - Go to http://labs.outsystems.net/ThemeCustomizer/GenerateLiverpool.aspx
        2 - Copy the generated CSS
        3 - Paste it here

*/


/*------------------------------------*\
             Import Font
\*------------------------------------*/

@font-face {
    font-family: 'Roboto';
    src: url('/RichWidgets/fonts/Roboto-Regular-webfont.eot');
    src: url('/RichWidgets/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/RichWidgets/fonts/Roboto-Bold-webfont.eot');
    src: url('/RichWidgets/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: 700;
    font-style: normal;
}



/*------------------------------------*\
             Font Definition
\*------------------------------------*/

 /* html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
    font-family: 'Open-Sans', sans-serif;
} */

html,
body,
a,
select,
fieldset,
input,
button,
select,
textarea,
optgroup,
option {
    font-family: 'Roboto', sans-serif;
}

/* Font OpenSans classes */
.Roboto_Regular {
    font-family:  'Roboto', sans-serif;
    font-weight: 400;
}

.Roboto_Bold {
    font-family:  'Roboto', sans-serif;
    font-weight: 700;
}


/*------------------------------------*\
             Theme Customizations
\*------------------------------------*/

/* Default Action Button **************************/
.Button.ButtonDefault,
.Button.Is_Default {
    background-color: #fc0;
    border-color: #fc0;
    color: #012c51;
}

.Button.Button.Is_Default:hover {
    background-color: #ffd942;
    border-color: #ffd942;
}

.desktop .Button.ButtonDefault:hover,
.desktop .Button.Is_Default:hover {
    background-color: #ffd942;
    border-color: #ffd942;
    color: #012c51;
}

.Button.ButtonDefault:hover:active,
.Button.Is_Default:hover:active {
    background-color: #ffd942;
    border-color: #ffd942;
    color: #012c51;
}

.Title_Section {
    padding: 60px 20px 10px 20px;
}

.Columns .Column .box.White{ /*--- ARV - 17/12/2018 ---*/
    margin: 0;
}
.Box.White {
    margin: 0 0 10px 0; /*--- ARV - 17/12/2018 ---*/
    -webkit-box-shadow: 5px 5px 15px 0px #CCCCCC;
    -moz-box-shadow: 5px 5px 15px 0px #CCCCCC;
    box-shadow: 5px 5px 15px 0px #CCCCCC;
}

span.ListNavigation_CurrentPageNumber {
    background: #003567;
    color: white;
}


.Menu_TopMenu a span.fa {
    border: none;
    margin: 0 5px 0 0px;
}

.TableRecords_OddLine, 
.TableRecords_EvenLine {
    padding: 5px 10px;
}


a.ActionAdd, 
a.ActionAdd:link, 
a.ActionAdd:visited,
a.ActionEdit, 
a.ActionEdit:link, 
a.ActionEdit:visited, 
a.ActionDelete,
a.ActionDelete:link, 
a.ActionDelete:visited, 
a.ActionChange,
a.ActionChange:link, 
a.ActionChange:visited{
    color: #0d5f93;
}

.IconBadge_number {
    border-radius: 16px!important;
    line-height: 16px !important;
    top: 2px !important;
}

.IconBadge {
   margin-top: 0px !important;
   margin-right: 15px !important;
}

.IconBadge span.fa {
    font-size: 14px !important;
}

.FlagSelectionContainer {
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

.FlagSelectionContainer img {
    vertical-align: middle;
}

/* Protection for the login and flag layout on Android and Ipad */
.tablet .Menu_TopMenus{
    margin-top: 50px;
}

*/
/*------------------------------------*\
             Specifics
\*------------------------------------*/

/* Filters Boxes */
.Filters legend {
    color: #999;
    font-size: 12px;
}

.Filters input {
    height: 26px;
    line-height: 26px;
}

Div a:first-child {
    margin-left: 0px;
}

/*----------------------------- Undo and pencil icon remove -------------------------------*/
.Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo, 
.Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo, 
.Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
    display: none;
}

.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, 
.Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, 
.Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
    display: none;
}

/***********************************************************************/
/***to avoid sidebar disturbing development on lower resolution screens***/
.Sidebar {
 display: none;
 
 
}

/************************************************************************/

.GreenIcon {
    color: green;
}

.Ok {
    color: green;
    font-size: 12px;
}

.Empty {
    color: #FF0000;
    font-size: 12px;
}
.MainWrapper{
    background:#FFF;
    border-radius: 0;
    padding: 10px !important;
}
.ContentContainer{
    border: 2px solid #dedede;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(211,211,211,.5);
}
.SpacerBottom{
    margin-bottom: 10px;
}
.SpacerBottom5{
    margin-bottom: 5px;
}
.TableRecords{
    box-shadow:5px 5px 15px 0px #CCCCCC;
    -webkit-box-shadow:5px 5px 15px 0px #CCCCCC;
    border: none;
}
.SignatureContainer{
    border: 2px dashed #dedede;
}

.RoundedCorners{
    border-radius: 4px;
}
.Form .FormLabel{
    padding-top: 5px;
    color: #999;
}

/*----------------------------- Wizard Steps Fix -------------------------------*/
.WizardStep {
    padding-right: 0px;
    line-height: normal;
}

.WizardStep a, 
.WizardStep a:link {
    padding-right: 20px;
}

.WizardStep:before {
    border-bottom-width: 20px;
    border-top-width: 20px;
}

.WizardStep:after {
    right: 7px;
}

/*----------------------------- Confirmation Dialog Styling -------------------------------*/
.conf-dialog-header {
    background-color: rgba(1, 59, 91, 1);
    font-size: 22px;
    font-family: inherit;
    text-align: left;
    text-transform: none;
    padding: 10px 20px;
    padding-right: 60px;
}

.conf-dialog-title {
    font-weight: 400;
    color: white;
}

.conf-dialog-content {
    padding: 20px 20px;
    text-align: left;
}

a.conf-dialog-button.blue {
    color: #fff;
    background-color: rgba(1, 59, 91, 1);
    font-size: 14px;
    font-weight: normal;
    font-family: inherit;
    letter-spacing: 0px;
    text-transform: none;
}

a.conf-dialog-button.blue:hover {
    background-color: #00293F;
    color: #fff;
}

a.conf-dialog-button.gray {
    color: rgba(13, 95, 147, 1);
    background-color: #fff;
    font-size: 14px;
    font-weight: normal;
    font-family: inherit;
    letter-spacing: 0px;
    text-transform: none;
    border: 1px solid #dadbde;
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 rgba(19, 24, 25, .2);
}

a.conf-dialog-button.gray:hover {
    background-color: #f6f6f6;
    color: #131819;
    border: 1px solid #dadbde;
    border-radius: 3px;
    border-bottom-width: 1px;
    box-shadow: none;
}

.conf-dialog-close {
    background: url(/WebPatterns/img/PopupCloseWhite.png?21477&38) no-repeat;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 15px;
    transition: all .3s ease !important;
    width: 20px;
}

.conf-dialog-close:hover {
    background: url(/WebPatterns/img/PopupCloseWhite.png?21477&38) no-repeat;
    opacity: 1;
    transform: rotate(90deg);
}

/*-----------------------------Responsive web design-------------------------------*/
/*--- Mobile header font too big (ic - 297) ---*/
.phone .MobileHeader{
    font-size: 18px;
}
/*--- Tablet header too big (ic - 543) ---*/
.tablet .MobileHeader{
    font-size: 24px;
    white-space: wrap;
    line-height: 25px;
}

/*-----------Tablet language selector (ts-311)-------------------*/
.tablet .Login_Info{
    color: #333;
}


/*-*/
.tablet .LanguageDropDownPanel{
    visibility: hidden
}

.phone .Menu_TopMenus a, .tablet .Menu_TopMenus a{
    color: #FFF;
}
.phone .Login_Info a, .phone .Login_Info{
    color: #FFF !important;
}

.phone .Menu_TopMenuActive a, .tablet .Menu_TopMenuActive a {
    color: rgba(19,24,25,0.7);
}

.tablet .Login_Info div{
    margin-left: 0;
}
.tablet .LanguageDropDown{
    margin-right: 0;
}
.tablet .Application_Menu a, .phone .Application_Menu a, .tablet .Application_Menu a:link, .phone .Application_Menu a:link, .phone .Application_menu a:visited, .phone .Application_menu a:visited{
    padding: 0 20px;
}

.phone .TextInputWide {
    width: 100%;
}

.phone .TextInputMedium {
    width: 30%;
}

.phone .HeaderTitle {
    display: block;
    width: 100%;
    white-space: normal;
}

.phone .HeaderActions {
    width: 100%;
    margin-left: 0;
}

.phone .FormColumn {
    min-height: 0;
}

.desktop .ManualTimesDate {
    max-width: 10em;
}

.desktop .ManualTimesTime {
    max-width: 6em;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}


.FixedData .Panel {
    box-shadow: 5px 5px 15px 0px #CCCCCC;
    margin: 0 0 10px 0;
    padding: 10px;
    border: 0;
}

.Panel__title.Heading3
{
    /* Heading2 Patterns_Lisbon class */
    font-size: 22px;
    font-weight: bold;
    line-height: 24px;

    /* Heading2 VabStyleGuide class */
    color: rgba(1, 59, 91, 1);
}

.phone .FixedData .Panel {
    padding-left: 0;
    padding-right: 0;
}

.phone .NoMarginLeft {
    margin-left: 0px;
}

/* Multiple Columns become 1 column on mobile*/
.tablet .MultiColumnContainer div, 
.phone .MultiColumnContainer div {
    width: 100%;
    margin-top: 1%;
    margin-left: 0;
}

.tablet .MultiColumnContainer div:first-child,
.phone .MultiColumnContainer div:first-child{
    margin-top: 0;
}

/* footer helpdesk */
.Helpdesk {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    width: 100%;
    

}

.Helpdesk a,
.Helpdesk a:link,
.Helpdesk a:visited {
    font-size: 14px;
    color: rgba(13, 95, 147, 1);
    text-decoration: none;
}

.Helpdesk .Card {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.Helpdesk .CardSimpleImage .Card_Image {
    margin-bottom: 0px;
}

.Title_Section .Title {
    width: 70%;
}

.Title_Section .Actions {
    width: 30%;
}



/**********************************************/
/*** Webpatters Select2 Component Restyling ***/
/**********************************************/

.select2-container .select2-choice {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    font-size: 12px;
}

.select2-container .select2-choice span {
    color: #333;
}

.select2-drop.select2-drop-active .fa-pencil
{
    display: none;
}

.select2-container .select2-choice .select2-arrow {
    background-color: inherit;  
}

.select2-container .select2-choice .select2-arrow b {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-position: right center;
    background-repeat: no-repeat;
    width: initial;
    background-color: inherit;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, .1);
}

.select2-dropdown-open .select2-choice .select2-arrow b, .select2-dropdown-open .select2-choice div b {
    background-position: right center;
}

.select2-container.select2-container-disabled .select2-choice {
    cursor: default;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
}

.select2-container.select2-container-disabled .select2-choice span {
    color: #999;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    cursor: default;
    background-color: #f5f5f5;
}


/*********************************************************/
/*** Richwidgets Feedback_AjaxWait Component Restyling ***/
/*********************************************************/

.Feedback_AjaxWait {
    z-index: 100000;
    position: fixed;
    visibility: visible;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(119, 119, 119, 0.7);
    cursor: progress;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border: none;
    box-shadow: none;
    padding: 23% 0;
}

.Feedback_AjaxWait .Loader {
    background: url(/Comet_TH/img/Ajax_Loading_SS.GIF?412) no-repeat;
    background-size: 40px 40px;
    height: 40px;
    position: relative;
    text-indent: -9999em;
    width: 40px;
    display: inline-block;
    top: 10px;
    right: 10px;
}

/*Popup Layout Manipulation*/
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: rgba(1, 59, 91, 1);
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    padding-top: 0px;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    color: white;
}    

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    background: url(/WebPatterns/img/PopupCloseWhite.png?21477&38) no-repeat;
    top: 15px;
    opacity: 0.7;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover {
    opacity: 1;
}

/************************************************/
/************ Selectize Component ***************/
/************************************************/

/* All devices fixes */ 
.selectize-input input:focus {
    box-shadow: none !important;
}

.selectize-input {
    text-overflow: ellipsis;
    padding: 6px 8px;
    padding-right: 30px;
}

.selectize-input > * { 
    white-space: nowrap;
}

.selectize-control.single .selectize-input:after {
    border-color: black transparent transparent transparent;
}

.selectize-control.single .selectize-input, 
.selectize-dropdown.single {
    border-color: #b8b8b8;
    background-image: none;
    background-color: white;
    color: black;
}

.selectize-control.single.Not_Valid .selectize-input {
    border: 1px solid #bf1601;
}

.selectize-dropdown, 
.selectize-input, 
.selectize-input input {
    font-size: 12px;
}

.selectize-control.single .selectize-input, 
.selectize-dropdown.single {
    border-color: #ccc;
}

.selectize-control.single .selectize-input.disabled {
    opacity: 1;
    background-color: #f5f5f5;
    background-image: none ;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    cursor: not-allowed !important;
}

/* Desktop fixes */
.selectize-input > input[type="select-one"] {
    height: 18px;
    line-height: 20px !important;
}

.selectize-input,
.selectize-control {
    max-height: 32px;
}

/* Tablet and Mobile fixes*/
.tablet .selectize-input > input[type="select-one"], 
.phone .selectize-input > input[type="select-one"] {
    height: 24px;
}

.tablet .selectize-dropdown,
.tablet .selectize-input,
.tablet .selectize-input input,
.phone .selectize-dropdown,
.phone .selectize-input,
.phone .selectize-input input{
  line-height: 24px;
}

.tablet .selectize-input,
.phone .selectize-input,
.tablet .selectize-control,
.phone .selectize-control {
    max-height: 38px;
}

/*************** ViewerJS **********************/
.viewer-backdrop.viewer-fixed > .viewer-footer > .viewer-title {
    color: #ccc;
}

/* FileUpload Filename too long fix */
.phone .FileUpload .FileUpload_Label {
    width: 160px !important;
    display: inline-block !important;
    overflow: hidden !important;
}

.FileUpload, 
.phone .FileUpload , 
.tablet .FileUpload {
    white-space: nowrap !important;
    width: 100% !important;
    display: block !important;
}

/* Fix for the section header icon too close to the text */
.Heading3 .fa {
    margin-right: 5px;
}

/* Timepicker fix*/
/* Timepicker stupid CSS bug that forces margin-bottom on all inputs*/
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
select, 
textarea,
label {
    margin-bottom: 0px;
}

/**********************************************************/
/***************** Responsive Styles **********************/
/**********************************************************/

/* MobileStretchFilters - Used for the TableRecords Search  & Fitlers*/
.MobileStretchFilters {}

.phone .MobileStretchFilters > div,
.phone .MobileStretchFilters > div > a {
    width: 100%;
}

.phone .MobileStretchFilters > div:not(:first-child),
.phone .MobileStretchFilters > div a:not(:first-child){
    margin-top: 10px;
    margin-left: 0px;
}

.MobileStretchFilters .FormLabel{
    color: #999;
}

/* MobileStretch - Used to use the full width of the phone */
.MobileStretch {}

.phone .MobileStretch {
    width: 100%;
}

/* Fix for the ButtonGroup because touch input most of the times leave the buttons on 'hover' state instead of 'selected'*/
.phone .ButtonGroup_button.Button:hover {
    color: #fff;
    background-color: rgba(1, 59, 91, 1);
}

/* Used to manipulate the Actions buttons on Tables last columns */
.TableActionButtons {}

.TableActionButtons a 
{
    width: 100%;
    max-width: 15em;
    white-space: nowrap;
}

.phone .TableActionButtons a 
{
    max-width: 100%;
}

/* Used to manipulate the Actions buttons on Assignments Details */
.ActionButtons{}

.phone .ActionButtons a 
{
    width: 100%;
    white-space: nowrap;
}