@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?687");

/* START: fix for buttongroups with an expression instead of a label */
.button-group span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    word-break: normal;
}

.phone .button-group span {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
}
/* END: fix for buttongroups with an expression instead of a label */

.ie11 .layout {
    height: 100%;
}

.ie11 .main {
    height: 100%;
}

.ie11 .layout .content .ThemeGrid_Container {
    flex: auto;
    flex-shrink: 0;
}

.ie11 footer {
    height: auto;
}

.input-with-icon .input-with-icon-content-icon {
    width: auto;
    min-width: 40px;
}

.search {
    width: 100%;
}

/* Define custom heading font */
@font-face {    
    font-family: 'CaeciliaPMN';
    src: url('./PMN.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

/* Define custom Dojo font */
@font-face {    
    font-family: 'Custom Dojo Font';
    src: url('./Shojumaru-Regular.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

.custom-dojo-font {
    font-family: 'Custom Dojo Font';
    color: black;
}

/* START: Responsive solution to hide menu-items that should only show in the mobile version of the website */
.slidemenu.OSInline {
    display: none;
}

.phone .slidemenu.OSInline {
    display:block;
}
/* END: Responsive solution to hide menu-items that should only show in the mobile version of the website */


/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: #102c7a; /*primary-color*/
    --color-primary-hover: #102c7a; /*primary-color*/
    --color-secondary: #102c7a; /*primary-color*/
    --border-radius-soft: 10px; /* border-radius */
    --font-size-s: 15px;
}

/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */

html {    
    font-family: Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ================================================================ */
/* $2.4 - HTML Elements - Inputs and Selectors                      */
/* ================================================================ */

.checkbox {
    cursor: pointer !important;
}

[type="checkbox"], 
[type="radio"] {
    padding: 0 !important;
}

/* ================================================================ */
/*  $3.1 - Layout Header and Navigation                             */
/* ================================================================ */


.header-top {
    height: 70px;
}

.header-center {
    height: 100%;
}

.layout .header {
    background-color: #102c7a;
    background-color: var(--color-primary);
    box-shadow: 0 1px 5px 0 rgba(21, 24, 26, .1);
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

.layout .main {
    --header-gutter: none;
    padding-top: var(--header-gutter);
}

.header .Menu_TopMenu {
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    padding: 0 8px;
    border-bottom: var(--border-size-m) solid transparent;
    border-top: var(--border-size-m) solid transparent;
    padding: var(--space-none) var(--space-s);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
    text-transform: uppercase;
}



.phone .header .Menu_DropDownButton {
    height: unset;
    width: 100%;
}

.header .Menu_DropDownButton {
     height: 100%;
     width: auto;
}

.ie11 .header .Menu_DropDownButton {
    height: 100%;
    width: auto;
}


.header .Menu_DropDownButton:not(:first-child) {
     margin-left: 0 !important; 
}

.header .Menu_TopMenu:hover,
.header .Menu_TopMenu.Menu_TopMenuActive,
.header .open .Menu_TopMenu {
    border-bottom: 2px solid #ffffff;
    border-bottom: var(--border-size-m) solid var(--color-neutral-0);
    background-color: #ffffff;
    background-color: var(--color-neutral-0);
}

.navigation .Menu_TopMenu {
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 0 16px;
    border-radius: var(--border-radius-soft);
    height: 40px;
    margin-bottom: var(--space-xs);
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
}

.navigation .Menu_TopMenu:hover {
    background-color: #f1f3f5;
    background-color: var(--color-neutral-2);
}

.Menu_TopMenu:hover > div .fa,
.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
    color: #102c7a;
    color: var(--color-primary);
}

.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:after,
.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenuActive > div .Menu_DropDownArrow:after {
    background-color: #102c7a;
    background-color: var(--color-primary);
}

.Menu_TopMenu:hover > div .Menu_DropDownArrow:before,
.Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: #343a40;
    background-color: var(--color-neutral-9);
}

.navigation .Menu_TopMenu.Menu_TopMenuActive {
    background: #102c7a linear-grandient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
    background: var(--color-primary) var(--color-primary-lightest);
}

.navigation .Menu_TopMenu.Menu_TopMenuActive .fa {
    color: #102c7a;
    color: var(--color-primary);
}

.Menu_TopMenu .fa,
.Menu_DropDownPanel .fa {
    color: #adb5bd;
    font-size: 18px;
    margin-right: 8px;
    margin-top: 4px;
    color: var(--color-neutral-6);
    font-size: var(--font-size-h6);
    margin-right: var(--space-s);
    margin-top: var(--space-xs);
    text-align: left;
    width: 20px;
}

.Menu_DropDownPanel {
    background-color: #ffffff;
    border: 0;
    box-shadow: none;
    padding-left: 16px;
    background-color: var(--color-neutral-0);
    border: var(--border-size-none);
    box-shadow: var(--shadow-none);
    padding-left: var(--space-base);
    z-index: initial;
}

.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    color: #102c7a;
    color: var(--color-primary);
    font-size: 15px;
    font-size: var(--font-size-s);
    height: auto;
    line-height: 1.5;
    padding: 8px 16px 8px 32px;
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-l);
    white-space: pre-wrap;
}

.header .Menu_DropDownPanel a,
.header .Menu_DropDownPanel a:link,
.header .Menu_DropDownPanel a:visited {
    padding: 8px 16px 8px 16px;
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-base);
    
}

.Menu_DropDownPanel a:hover {
    color: #fff;
    color: var(--color-neutral-0);
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive {
    color: #102c7a;
    color: var(--color-primary);
}

.navigation .Menu_DropDownPanel {
    margin: 0;
    padding: 0;
    margin: var(--space-none);
    padding: var(--space-none);
}

.Menu_TopMenu > div {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 600;
    font-weight: var(--font-semi-bold);
    height: 100%;
}

.Menu_TopMenu > div a,
.Menu_TopMenu > div a:visited {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: #fff;
    color: var(--color-neutral-0);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    font-weight: 400;
    font-weight: var(--font-regular);
    height: 100%;
    white-space: nowrap;
}

.Menu_TopMenuActive > div a,
.Menu_TopMenuActive > div a:visited,
.Menu_TopMenuActive > div a:hover,
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: #102c7a;
    color: var(--color-primary);
    font-weight: 600;
    font-weight: var(--font-semi-bold);
    white-space: nowrap;
}

.content-top-actions > div:not([class*="ThemeGrid_Width"]) {
    width: auto;
}

.Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.navigation .Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.ie10 .Menu_TopMenu > div a,
.ie11 .Menu_TopMenu > div a, 
.ie10 .Menu_TopMenu > div a:visited,
.ie11 .Menu_TopMenu > div a:visited {
    flex: none;
}

.header .Menu_DropDownPanel {
    border-radius: 4px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    margin: 0;
    border-radius: var(--space-xs);
    border: var(--border-size-s) solid var(--color-neutral-3);
    box-shadow: var(--shadow-m);
    height: auto;
    margin: var(--space-none);
    min-width: 140px;
    z-index: 250;
}

.Menu_DropDownArrow {
    border-top-color: #15181a;
    border-width: 0;
    padding-top: 0;
    border-top-color: var(--color-neutral-10);
    border-width: var(--border-size-none);
    display: block;
    font-size: 20px;
    height: 20px;
    line-height: 1;
    padding-top: var(--space-none);
    position: relative;
    right: 0;
    top: 0;
    width: 20px;
}

.Menu_DropDownArrow:before {
    content: '';
    height: 8px;
    left: 8px;
    position: absolute;
    top: 8px;
    background-color: #adb5bd;
    background-color: var(--color-neutral-6);
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
    width: 2px;
}

.Menu_DropDownArrow:after {
    background-color: #adb5bd;
    background-color: var(--color-neutral-6);
    content: '';
    height: 8px;
    position: absolute;
    right: 0;
    top: 8px;
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
    width: 2px;
}

.Menu_DropDownButton.open .Menu_DropDownArrow:before{
    left: 12px;
}

.Menu_DropDownButton.open .Menu_DropDownArrow:after {
    right: 5px;
}

.Menu_DropDownPanel {
    position: relative;
}

.header .Menu_DropDownPanel {
    padding: 0;
    padding: var(--space-none);
    position: absolute;
}

.navigation .Menu_TopMenuActive+.Menu_DropDownPanel:not(:Empty) {
    display: block;
}



footer {   
 height: 48px;
 background-color: #f1f3f5;
 border-top: 1px solid #ced4da;
 height: var(--space-xxl);
 background-color: var(--color-neutral-2);
 border-top: 1px solid var(--color-neutral-5);
}




/* ************ MENU MOBILE ************ */

.menu-icon-line {
    background-color: #fff; /* hamburger menu color */
    background-color: var(--color-neutral-0); /* hamburger menu color */
    border-radius: 20px;
    height: 3px;
    margin: 2px 0;
    width: 100%;
}

.tablet .layout-top .Menu_TopMenus,
.phone .layout-top .Menu_TopMenus {
    background-color: #102c7a;
    background-color: var(--color-primary);
    box-shadow: 0 8px 10px rgba(0, 0, 0, .1);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-xl);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    height: 100%;
    width: 300px;
}



.Menu_TopMenu > div a,
.Menu_TopMenu > div a:visited {
pointer-events: auto;
margin-left: 5px;
}

.Menu_TopMenuActive > div a,
.Menu_TopMenuActive > div a:visited,
.Menu_TopMenuActive > div a:hover,
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    pointer-events: auto;
}

/* ================================================================ */
/*  $4.1 - Patterns - Content                                       */
/* ================================================================ */

.modaltaskmessage .modal-content {
    margin-top: -46px;
}


/* ================================================================ */
/*  $5.2 - Widgets - TableRecords / EditableTable                   */
/* ================================================================ */


.TableRecords, .EditableTable {
    border-color: #adb5bd;
    border-color: var(--color-neutral-6);
}

.TableRecords a {
    font-weight: bold;
}

.TableRecords .TableRecords_Header,
.EditableTable  thead th {
    background-color: #102c7a;
    border-bottom: 1px solid #dee2e6;
    color: #f8f9fa;
    font-weight: 600;
    padding: 0 24px;
    background-color: var(--color-primary);
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-1);
    font-weight: var(--font-semi-bold);
    height: 48px;
    padding: var(--space-none) var(--space-m);
    text-align: left;
}

.desktop .TableRecords .TableRecords_Header.SortColumns_Sortable:hover {
    color: #ced4da;
    color: var(--color-neutral-5);
    text-decoration: none;
}

.TableRecords .TableRecords_Header.SortColumns_Sorted {
    color: #ced4da;
    color: var(--color-neutral-5);
    text-decoration: none;
}

.TableRecords .TableRecords_EvenLine {
    background-color: #ffffff;
    background-color: -var(--color-neutral-0);
}

.TableRecords .TableRecords_OddLine {
    background-color: #f8f9fa;
    background-color: var(--color-neutral-1);
}

.TableRecords .TableRecords_Header:only-child {
    border-radius: 10px 10px 0 0; border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.TableRecords tbody tr:last-child td:only-child {
    border-radius: 0 0 10px 10px; border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.table-no-header .TableRecords_OddLine, 
.table-no-header .TableRecords_EvenLine {
    padding: 8px 24px; padding: var(--space-s) var(--space-m);
}

.table-no-header tbody tr:first-child td:only-child {
    border-radius: 10px 10px 0 0; border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.table-no-header tbody tr:only-child td:first-child {
    border-radius: 10px 0 0 10px; border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.table-no-header tbody tr:only-child td:last-child {
    border-radius: 0 10px 10px 0; border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
}

.table-no-header tbody tr:only-child td:only-child {
    border-radius: 10px 10px 10px 10px; border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft);
}

/* ================================================================ */
/*  $6 - Styles                                                     */
/* ================================================================ */

/* ================================================================ */
/*  $6.1 - Styles - Typography                                      */
/* ================================================================ */

/* $6.1.1 - Styles - Typography - Sizes Desktop */
.heading1 {
    font-family: 'CaeciliaPMN';
    font-size: 40px;
    font-size: var(--font-size-h1);
}

/* ================================================================ */
/*  Custom classes                                                  */
/* ================================================================ */

.border-photo {
    border-color: #102c7a;
    border-color: var(--color-primary);
    border-style: outset;
    border-width: 3px;
}

.border-photo-rounded {
    border-radius: 50%;
    border: 2px solid #ffffff
}

.TableRecords-compact {
    height: 40px;   
}
.Footer_NoTopAndBottomPadding, .footer.ThemeGrid_Container.ph.Footer_NoTopAndBottomPadding {
    padding-bottom: 0px;
    padding-top: 0px;
}

.TableRecords-rows-nowrap {
    white-space: nowrap   
}

.SmallPopup-minheight {
    min-height: 150px;   
}

.Counter_Message {
    display: none;
}

.main-content {
    opacity: 0.9;
}

.delete-button, .theme-red {
    color: #bf1f1f;
}

.os-internal-ui-dialog-titlebar {
    background-color: #102c7a !important;
    background-color: var(--color-primary) !important;
}


/* Responsive Records ActivityApplication & ActivityMomentDetail */

.floatleft {
 width:50%;
 float:left;
}

.floatright {
 width:50%;
 float:right;
}
.environment_tag {
    background-color: #00f;
    border-radius: 50px;
    color: #fff;
    padding: 0px 10px 0px 10px;
}

.LogoImageContainer img {
  max-width: 150px;
  width: 100%;
}

.badge-icon .icon {
    color: var(--color-neutral-0);
}

.hover-hand {
    cursor: pointer;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr:first-child td, .phone .TableRecords:not(.no-responsive) tbody tr:first-child td {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft);
}

.close-button {
    position: relative;
    top: -20px;
    right: -20px;
    
}