/* Customizable design */

:root {
--themePrimary: #002933;   /* Dark Blue */
--themeSecondary: #f07f13; /* Orange */
 --themeLightGrey: #f8f8f8;
--themePrimaryDark: #002933;
}

.logo {
	background:url(media/TwelveBioLogo.9.png) no-repeat; 
        background-position-x: 0px;
        background-position-y: center;
	opacity:0.6;
        width: 100%;
        background-size: 200px;
}

/* Temporary fixes */

.tsLoggedIn div { display: none; } 
.mergedField span { display: block; }
.fileinput-button input { position: relative; }
#PAGE_0 .tableFieldTableValue {float: left;width: 100%;}

.tsWidgetAge { display: none; }

/* Kromann styling */

.param i,  
.param .label { color: var(--themeLight); }

#tsMenuPersonal .dropdown-item:first-of-type, 
#tsMenuPersonal .dropdown-divider:first-of-type { display: none; } 
  
.tableForm > tbody > tr > th {   
   min-width: 180px;  
   display: inline-block;
   float: left;
   padding-bottom: 0px; 
}

.searchResultItem { margin-top: 10px; }
.searchResultItem .title { font-size: 140%; }

.zoneMenu { margin-bottom: 15px;  }
.zoneMenu a { margin-bottom: 5px;  }

body {
	background: #f8f9fc;
        color: #8b8b8b;
	background: var(--pageBgColor);
	font-family: "Helvetica", Arial, sans-serif;
	font-size: .8rem;
	line-height: 1.42857143;
 	padding: 0px;
	margin:0px;
}

h1, h2 {
	color: var(--pageHeaderColor);
}

.burger, .btn-personal { color: var(--themeLight); }

a { color: var(--themeSecondary); }

a:hover, a:focus, a:focus-within {
        color: var(--themePrimary); 
        text-decoration: underline; 
}

.breadcrumb-item a {
    color: var(--themePrimary);
}

.breadcrumb-item a:hover {
    color: var(--themeSecondary);
}

.formhelp { color: var(--themeSecondary); }

.FieldNotes, .FieldNotes a { color: var(--themeSecondary); }
.FieldNotes a:hover { color: var(--themeSecondary); }

/* ------------------------------------------------------------------------------------------ */
/* BUTTON STYLES */
/* ------------------------------------------------------------------------------------------ */

.btn-primary {
        color: #002933;
        background-color: #FFFFFF;
        border-color: #002933;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        color: #FFFFFF;
        background-color: var(--themePrimary);
        border-color: var(--themePrimary);
}

a.codeunitButton {
    background-color: var(--themeLight);
    color: var(--themePrimary);
}

a.codeunitButton:hover {
    background-color: #beecf7;
    border-color: var(--themePrimary);
    color: var(--themePrimary);
}

.viewList .btn:hover, .viewList .btn:focus {
    background-color: var(--themeSecondary);
    background: var(--themeSecondary);
    border: none;
}


/* ------------------------------------------------------------------------------------------ */
/* LAYOUT COLUMNS  */
/* ------------------------------------------------------------------------------------------ */


.layoutColumns > tbody.sectionHeader {
    border-bottom: 1px solid var(--themeGrey);
}

.layoutColumns tbody tr td.sectionTitle {
    width: 100%;  
    display: -webkit-flex;  
    display: flex;
    border-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.layoutColumns > tbody.sectionContent {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0px 15px 0px;
}

#TempusServaPage 
.layoutColumns > tbody.sectionContent tr {
    width: 50%;
    x-display: inline; /* Stacking of elements */
}

.layoutColumns > tbody.sectionContent tr.tsInlineTable {
    width: 100%;
    display: inline;
}

.layoutColumns tbody tr th {
    display: block;
    width: 95%; /* Stacking */
    padding: 0px;
}

.layoutColumns tbody tr td {
    display: block;
    width: 95%; /* Stacking */
    padding: 0px 0px 10px 0px;
}

.layoutColumns table.tableFiles tr {
        display: table-row;
}

.layoutColumns table.tableSubtable th,
.layoutColumns table.tableSubtable td {
    display: table-cell;
    padding: .55rem;
}

.layoutColumns table.tableFiles th,
.layoutColumns table.tableFiles td {
        display: table-cell;
        padding: .55rem;
}

.layoutColumns tbody tr td .ComplexQuestionOptions {
    width: 100%;
}

.mergedField span {
    display: inline-block;
    width: 50%;
}

.layoutColumns table.tableSubtable tr {
    display: table-row;
}

.PAGE_999999 { 
    display: block;
    padding-top: 15px;
}

/* ------------------------------------------------------------------------------------------ */
/* VIEW LOGS  */
/* ------------------------------------------------------------------------------------------ */

.viewLogs {
    margin: 40px;
    background-color: var(--themeLight);
}

.viewLogs > table th {
    white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------ */
/* UPDATE SUBMIT REVEAL TEST */
/* ------------------------------------------------------------------------------------------ */

/*
#PAGE_0 { 
    width: 100vw; 
    position: fixed; 
    left: 0px; 
    bottom: 0px;
    background-color: var(--themeLight); 
    border-top: 1px solid var(--themeGrey);
    opacity: 0; 
    box-shadow: 0px 10px 30px var(--themeGrey); 
}

#PAGE_0:hover { 
    bottom: 40px; 
    opacity: 1; 
    transition: 0.5s; 
}
#PAGE_0 > tr {
    display: block;
    width: 100%; 
    max-width: 1280px;
    padding: 0px 40px 0px 40px; 
    margin: auto auto;
}

#PAGE_0 > tr > th, #PAGE_0 > tr > td { 
    width: 100%; 
}

#PAGE_0 .submitOption { 
    width: 33%; 
}
*/

/* ------------------------------------------------------------------------------------------ */
/* VIEW LIST (Helvetica)  */
/* ------------------------------------------------------------------------------------------ */

.table>tbody>tr>td {
    padding: .65rem;
    vertical-align: top;
    text-align: left;
}

/* ---------- Listview Hover on Row ------------ */

.viewList tr:hover th {
    background-color:none !important;
}

.viewList tr:hover td {
    background-color:#f0f6f9 !important;
}

.table-hover>tbody>tr:hover {
    background-color:#f0f6f9 !important;
}

footer, .footer { 
    background-color: #f8f8f8; 
    padding-left: 10px;
}

@media only screen and (min-width: 1600px) {
     main { margin-left: calc(50% - 800px); }
    #PAGE_0 > tr { margin-left: calc(50% - 800px); }
}

@media screen and (max-width: 800px) {
  #tsUserFullname {
    color: var(--headerBgColor);
    background: var(--themeLight);
  }
}


/* ------------------------------------------------------------------------------------------ */
/* Login Page refined July 2020 */
/* ------------------------------------------------------------------------------------------ */

.LoginPage {
   background: url(https://cm.kromannreumert.com/bg.jpg) no-repeat center center;
   background-size: cover;
   height: 100%;
   width: 100%;
   }

.LoginPage .content {
   background: none;
   width: auto;
}

.LoginPage {
	height: 100%;
	padding: 0px;
	margin: 0;
	position: absolute;
	top: 0px;
	left: 0;
	clear: both;
        padding-top: 60px;
        }

.LoginPage {
   font-family: 'Roboto', sans-serif, Arial;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   -webkit-font-smoothing: subpixel-antialiased;
   color: #002932;
   }

/* ------------------------------------------------------------------------------------------ */
/* Login Header */
/* ------------------------------------------------------------------------------------------ */

.loginPageBg #krheader,  
.LoginPage .formLogin, 
.LoginPage .tsOauth {
    margin-left: 8vw;
}

.loginPageBg #krheader {
    padding: 0;
    border-bottom: none;
    background-size: auto;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(https://cm.kromannreumert.com/logo.png);
    margin-top: 2vh;
    max-height: 100px;
    height: 7vw;
    position: relative;
    z-index: 2;
}

.LoginPage .formLogin {
   padding: 20px 25px;
   background: rgba(255,255,255,0.84);
   border-radius: 10px;
   font-size: 14px;
   width: 420px;
   }

.LoginPage h3 {
   font-family: 'Roboto', sans-serif, Arial;
   color: #5D5D5D;
   font-size: 26px;
   text-transform: none;
   width: 100%;
   text-align: center;
   margin: 20px 0px 30px 0px;
   padding: 0;
   border-bottom: none;
   }

.LoginPage #TempusServaPage a {
   color: #f07f13;
   text-decoration: underline;
   transition: color .4s;
   }

.LoginPage #TempusServaPage a:hover {
   text-decoration: none;
   }

/* ------------------------------------------------------------------------------------------ */
/* Login Form elements */
/* ------------------------------------------------------------------------------------------ */

.LoginPage input.form-control {
    color: #002932;
    height: 44px;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 16px;
   }

.LoginPage input, 
body div#TempusServaPage table.tableForm tbody tr td .form-control:focus,
body div#TempusServaPage table.tableForm tbody tr td > div {
   border-color: #ccc !important;
   border-radius: 4px !important;
   }

.LoginPage input.form-control {
   border: 1px solid #CCC;
   border-collapse: #ccc !important;
   border-radius: 4px;
   margin-bottom: 20px;
   }

.LoginPage .formLogin p:nth-child(3) {
   width: 100%;
   }

.LoginPage .formLogin input[type="submit"] {
	border-color: #000;
	color: var(--themeLight);
	text-transform: uppercase;
	padding: 10px;
	font-size: 16px;
	background-color: #000;
	background: linear-gradient(to bottom, #002631 0%,#001319 100%);
        width: 100%;
}


.LoginPage input.form-control.loginUsername {
   background: var(--themeLight);
   text-transform: none;
   }

.LoginPage input.form-control.loginPassword {
   background: var(--themeLight);
   text-transform: none;
   }

/* ------------------------------------------------------------------------------------------ */
/* Login Oauth / forgot pqassword */
/* ------------------------------------------------------------------------------------------ */

.LoginPage .tsOauth img {
    width: 25px;
    height: 25px;
    margin-top: -70px;
}

.LoginPage .tsOauth a {
   float: left;
   display: block; 
   width: 25px; 
   height: 25px; 
   margin-right: 25px; 
}

.LoginPage .loginForgotPasswordLink {
    float: right;
    display: block;
    position: inherit;
 }  

.LoginPage .formLogin {
    padding-bottom: 40px;
}

.LoginPage p { color: #5D5D5D; text-align: center; }

.customFooter  {
  position: fixed;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 40px;
   background: #001319;
   line-height: 40px;
   Xpadding-left: 12vw;
   font-size: 16px;
}

.customFooter a  {
   color: var(--themeLight);
}

.customFooter .customFooterInner  {
   width: 370px; 
   text-align: center;
}

/* ------------------------------------------------------------------------------------------ */
/* Login Screen Size Adjustments */
/* ------------------------------------------------------------------------------------------ */

@media screen and (max-width:480px){
   .customFooterInner, 
   .LoginPage .formLogin { margin-left: auto; margin-right: auto; width: 90vw; }
   .customFooter  { padding-left: 0; }
   .LoginPage .formLogin .loginInfo { display: none; }
}

/* ------------------------------------------------------------------------------------------ */
/* Login Drop logo alignet design */
/* ------------------------------------------------------------------------------------------ */

.customFooter .customFooterInner {
    margin-left: auto;
    margin-right: auto;
}

.LoginPage .input-group-addon {
    display: none;
}

/* ------------------------------------------------------------------------------------------ */
/*Dashboard flowing layout */
/* ------------------------------------------------------------------------------------------ */

.zoneSouth { 
     display: flex;
     flex-wrap: wrap; 
} 
.tsWidgetAge { display: none; }

/* ------------------------------------------------------------------------------------------ */
/*Slå funktioner fra */
/* ------------------------------------------------------------------------------------------ */

.showCommand #menuGroupFiles, 
.editCommand #menuGroupFiles, 
#menuWindowSearch, 
#menuGroupRelated, 
#menuGroupStatistics, 
#menuAreaAddFlag, 
#menuAreaProfile,
#menuAreaNotepad, 
#menuAreaFlags,
#menuAreaMessageList,
#tsMenuPersonal .dropdown-divider 
{ display: none; }

/* skal aktiveres senere */
#menuGroupViews, 
#menuItemCopy, #menuItemPaste 
{ display: none; }

/* ------------------------------------------------------------------------------------------ */
/* LØSNINGSSPECIFIKKE RETTELSER */
/* ------------------------------------------------------------------------------------------ */

/* Bredde på filer og underelementer */
#PAGE_8 tr, 
#PAGE_10 tr { width: 100% !important; }

#VB_DATA_KONTAKTER tr th:first-child, 
#VB_DATA_KONTAKTER tr td:first-child { display: none; }

:root {
--themePrimary: #4d777e;   /* Accent 2 */
--themeSecondary: #f07f13; /* Orange */
 --themeLightGrey: #f8f8f8;
--themePrimaryDark: #002933;
}

.logo {
	background:url(media/Logo.2.png) no-repeat; 
}

.loginPageBg #krheader {
    background-image: url(media/Logo.2.png);
}

.LoginPage {
    background: url(https://cm.kromannreumert.com/bg.jpg) no-repeat center center;
    background-size: cover;
}