html, body {
height: 100vh;
width: 100vw;
overflow: hidden;
background: #f8f8f8;
}
/*
1. #91D754
2. #005640
*/
*{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
font-size: 12px;
font-family: Arial, 'Segoe UI', Tahoma, Geneva, sans-serif;
color: #5d5d5d;
z-index: 0;
padding: 0;
margin: 0;
}
body > * { overflow: auto; }
a { color: cornflowerblue; text-decoration: none; }
hr { margin: 5px -5px; padding: 0; border-top: solid 1px #CCC; }
/* Headings */
h1 { font-size: 34px; display: inline-block; font-size: 300%; font-weight: bold; vertical-align: top; }
h1 > a { color: #91D754; text-decoration: none; font-size: 100%; font-weight: bold; vertical-align: top; }
h1 > a > img { padding: 5px; height: 70px; display: inline-block; }
h2 { font-size: 150%; font-weight: bold; padding: 10px 15px; color: #91D754; background: rgb(255, 255, 255); border-bottom: 1px solid #91D754; }
h2 * { color: white; font-weight: bold; }
h3 { color: white; font-size: 140%; padding: 8px; font-weight: bold; background: #91D754; }
h3 > span.k-sprite { margin-bottom: -1px; margin-right: 10px; }
h3 > span { display: inline-block; font: inherit; color: #005640; }
h4 { padding: 10px; background: #91D754; color: white; }
h4 > span { color: white; }
ul { list-style: none; }
p { margin: 10px 0; }
.hidden{ display: none !important; }
/* Forms related tags */
fieldset { border: none; }
pre { border: solid 1px #CCC; padding: 5px 0; padding-top: 0; }
input { padding: 5px; border-width: 1px; border: solid 1px #c5c5c5; border-style: none none solid dashed;}
input[type=text],
input[type=email],
input[type=password] { line-height: 110%; }
select { background: white; margin-bottom: 2px; padding: 5px; border: solid 1px #CCC; }
textarea { font-size: 100%; background: white; border: solid 1px #CCC; outline: 0 none; margin: 3px 0; padding: 5px; height: 80px; width: 300px; }
textarea:focus { box-shadow: 2px 2px 5px #333; border: solid 1px #CCC; }
select:hover,
textarea:hover { background-color: rgb(15, 14, 18); color: #000; }
h3 > button { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }
/* layout */
body > header { width: 100%; background: rgb(255, 255, 255); display: block; overflow: visible;}
body > header > .details { vertical-align: top; display: inline-block; margin-bottom: -15px; position: absolute; right: 0; }
body > header > .details > ul > li { padding: 6px; text-align: right; }
body > footer { position: static; bottom: 0; }
body > footer {
position: fixed;
width: 100%;
z-index: 100;
bottom: 0;
right: 0;
padding: 0;
background: #005640;
border-top: solid 1px #CCC;
-moz-box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #333;
box-shadow: 2px 2px 5px #333;
}
body > footer > * { padding: 0 20px; color: #91D754;}
body > footer > a,
body > footer > div,
body > footer > p { display: inline-block; }
/* content block styles */
.content { display: block; max-height: 100%; max-width: 100%; overflow: auto; position: relative;}
.content.k-splitter { height: 100%; }
/* general fixes / hacks */
.clearfix:before,
.clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; clear: both; }
.clearfix { zoom: 1; }
/* form styles */
button { border: solid 1px #005640; color: #005640; padding: 8px 16px; background: rgba(255,255,255,0.2); transition: all 0.3s; }
button:hover { color: #91D754; background: #005640;}
button > span.k-icon { margin-top: -2px; margin-left: -2px; margin-right: 5px; }
.error,
.input-validation-error,
.field-validation-error,
.field-validation-error * { color: red; }
.field-validation-error { width: 100%; max-width: 350px; display: block; margin-top: 3px; }
/* kendo hacks */
input { transition: all 0.3s; padding: 5px 16px 5px 8px; }
span.k-icon { margin-top: -2px; margin-right: 5px; }
input[type=text]:hover { background: white; }
input[type=text]:focus { border-radius: 0; }
input[type=password]:hover { background: white; }
input[type=password]:focus { border-radius: 0; }
input[type=email]:hover { color: #91D754; }
input[type=email]:focus { border-radius: 0; }
input[data-role=datepicker],
input[data-role=numerictextbox] { min-width: 0; border-radius: 0; }
input[data-role=datepicker]:focus,
input[data-role=numerictextbox]:focus { border: none; }
input:focus { color: #5d5d5d; padding-right: 8px; padding-left: 16px; }
.k-grid-toolbar .k-button { vertical-align: top; margin-right: 10px; padding: 2px 8px; }
.k-grid-toolbar .k-button > span.k-icon { margin-left: -2px; margin-right: 5px; margin-top: -2px; }
.k-grid > .k.header { background:#91D754; }
.k-window .k-window-content { padding: 0; background: white; border: solid 1px #CCC; box-shadow: 2px 2px 5px #333; }
.k-window .k-window-content > button { margin-left: 10px; margin-bottom: 10px; margin-top: 6px; }
.k-window .k-window-content.component { margin: 0; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.k-window > .component h3 { display: none; }
.k-window > .k-window-titlebar.k-header { background: #91D754; margin-right: 5px; border: none; }
.k-window > .k-window-titlebar.k-header > .k-window-title { font-size: 100%; color: white; background-position: 0 -16px; height: 17px; }
.k-grid > .k-header { background: #91D754; color:#fff; }
.k-grid > .k-header * { color:#fff; }
.k-grid .k-grid-header .k-header>.k-link,
.k-grid th.k-header * { color: #91D754; }
.k-grid .k-header .btn { background: rgba(255,255,255,0.2) }
div.k-window { overflow: hidden; }
div.k-window,
.k-window > .k-window-titlebar.k-header { border-radius: 0; }
.k-window > .k-window-titlebar.k-header { background: #91D754; border-bottom: 1px solid #91D754; }
.k-window > .k-window-titlebar.k-header > .k-window-title,
.k-window > .k-window-titlebar.k-header * { color:#fff; }
.k-grid .k-header.k-grid-toolbar > a > button,
.k-grid .k-header.k-grid-toolbar > button { transition: all 0.3s; background:rgba(255,255,255,0.2) !important; color:#fff; border: 1px none rgba(255, 255, 255, 0.8); padding: 8px 16px; margin: 8px;}
.k-grid .k-header.k-grid-toolbar > a > button *,
.k-grid .k-header.k-grid-toolbar > button * { color: rgba(255, 255, 255, 0.9); }
.k-grid .k-header.k-grid-toolbar > a > button:hover,
.k-grid .k-header.k-grid-toolbar > button:hover { background: rgba(255,255,255,0.2); color:#fff; border-color: #fff; background:rgba(255,255,255,0.4); box-shadow: 1px 1px 1px rgba(25,25,25,0.2);}
.k-grid .k-header.k-grid-toolbar > a > button:hover ,
.k-grid .k-header.k-grid-toolbar > button:hover * { color: rgba(255, 255, 255, 0.9); }
.k-grid tr th.k-header{
background: rgb(255, 255, 255) !important;
color: #91D754;
padding: 8px 4px;
font-size: 12px;
}
/* Notifications */
.notification { padding: 3px 10px; min-width: 200px; max-width: 400px; max-height: 200px; word-wrap: normal; word-break: keep-all; }
.notification > .k-icon { margin-right: 10px; }
.notification > * { display: inline-block; }
.k-widget.k-notification.k-notification-success { background-color: #EAF7EC; border: solid 1px #CCC; color: #222; }
.k-widget.k-notification.k-notification-info { background-color: #E5F5FA; border: solid 1px #CCC; color: #222; }
.k-widget.k-notification.k-notification-warning { background-color: #FFF4D9; border: solid 1px #CCC; color: #222; }
.k-widget.k-notification.k-notification-error { background-color: #FFECEC; border: solid 1px #CCC; color: #222; }
/*.k-widget .k-icon { margin-top: 3px !important; margin-right: -3px !important; }*/
/* Component styles */
.k-window .component { border: none; box-shadow: none; }
.component { background: transparent; width: 100%; display: block; }
.content > .component { width: calc(100%); box-sizing: border-box; }
.component .component { box-shadow: none; }
.k-grid tr:hover { background-image: none !important; }
.k-grid tr > td:first-child { border-left: 0; transition: all 0.3s; }
.k-grid tr > td { border-bottom: 1px solid #e0e0e0; }
.k-grid tr:hover > td:first-child { border-left: 5px solid #005640; }
.k-header > .k-grid-filter { margin:0 !important; }
.k-header > .k-widget { margin: 4px; }
body > .content{ opacity: 0.9; }
body > .content[name=body] > [data-component] > .component {
padding: 1%;
width: 98%;
}
/* validation helpers */
input.error,
textarea.error { background: #FFECEC; border: dotted 1px #FFECEC; }
input.error:hover,
textarea.error:hover { background: #FFECEC; }
label.error { color: #b94a48; font-weight: normal; width: 100%; display: block; }
/* sprite based icon attachements */
.k-sprite { background-image: url("https://apidev.corporatelinx.com/Core/File/GetContent()?fileId=7ae68e3e-d853-47ae-baee-bad4f87a530f"); margin-top: 0; }
.root { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.page { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
.question { background-position: 0 -80px; }
.add { background-position: 0 -96px; }
.query { background-position: 0 -112px; }
.organisation { background-position: 0 -48px; }
.company { background-position: 0 -48px; }
.tradingrelationship { background-position: 0 -48px; }
.icon-close { background-image: url("../images/close.png"); }
.icon-tick { background-image: url("../images/tick.png"); }
.icon-empty { background-image: url("../images/empty.png"); }
/* What is this? */
.delete-link { width: 12px; height: 12px; background: white url("../images/close.png") no-repeat 50% 50%; overflow: hidden; display: inline-block; font-size: 0; line-height: 0; vertical-align: top; margin: 2px 0 0 3px; }
/** clx loader */
.clx-loader { width: 100px; display: table; height: 100px; margin: 5px auto; overflow:hidden; }
.clx-loader:before { width: 100px; display: block; height: 100px; content: ""; border-radius: 100px; border: 10px solid #ccc; border-top-color: #91D754; }
.clx-loader:before { z-index: 100; animation: spin 1s infinite; }
@keyframes spin {
0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
/* clx spinner */
.clx-spinner {
height: 22px;
width: 25px;
border-radius: 100%;
border-top: 2px solid cornflowerblue;
border-bottom: 2px solid cornflowerblue;
margin:0 8px;
display: inline-block;
border-left:0px solid transparent;
animation: 1s spin linear infinite;
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* forms */
.fieldList { padding: 6px; }
.fieldList > li > * { display: inline-block; vertical-align: top; }
.fieldList > li { padding: 5px; }
.fieldList > li > label { vertical-align: top; width: 200px; margin: 5px 0; }
.fieldList > li label,
.fieldList > li > div.value > label { margin: 5px 0; display: inline-block; }
.fieldList > li > .value > input[type=checkbox] { margin: 5px 0; }
.fieldList > li > .value { min-width: 20%; max-width: 100%; }
.fieldList > li > .value > textarea { max-width: 66%; }
.fieldList > li > .value > pre { height: 100%; min-width: 200px; max-height: 200px; overflow: auto; padding: 10px; }
.fieldList > li > .value > button { margin-right: 10px; }
.fieldList > li > .value > .k-invalid { border: dashed 1px red; }
.fieldList .k-widget.k-tooltip-validation { border: 0; background: #fff; color: red; box-shadow: none; text-align: left; display: block; }
.fieldList .k-widget.k-tooltip-validation span { color: red; }
/* tables */
.k-grid { max-width: 100%; overflow: visible; }
.tabItem { background: #DD6205; }
.submenu li { display: block; }
/* Context Menus */
.contextMenu { position: fixed; display: none; top: 0; left: 0; border: solid 1px #CCC; box-shadow: 2px 2px 5px; }
.contextMenu > .component { margin: 0;}
.contextMenu > .component > ul > li { padding: 10px; border-bottom: solid 1px #CCC; background: #EFEFEF; cursor: pointer; }
.contextMenu > .component > ul > li:hover { background: #CCC; }
.contextMenu > .component > ul > li > .k-icon { margin-right: 5px; margin-top: -3px; }
/* Flags */
.flags { height: 25px;}
.flags > a { display: inline-block; }
.flags > a > span { display: inline-block; height: 16px; width: 32px; cursor: pointer; background-size: 100%; background-image: url('https://api.corporatelinx.com/Core/App(6)/Download/Themes/Default/images/Flag_sprites.png'); }
.flags > a > span.flag-fr { background-position: 0 16px; box-shadow: 2px 2px 2px rgba(25,25,25,0.2) }
.flags > a > span.flag-fr-FR { background-position: 0 16px; box-shadow: 2px 2px 2px rgba(25,25,25,0.2) }
.flags > a > span.flag-en { background-position: 0 0; box-shadow: 2px 2px 2px rgba(25,25,25,0.2) }
.flags > a > span.flag-en-GB { background-position: 0 0; box-shadow: 2px 2px 2px rgba(25,25,25,0.2) }
/* Tooltips */
.tooltip { position: relative; display: inline-block; min-width: 26px; min-height: 30px; overflow: visible; }
.tooltip > .tooltiptext { display: none; background-color: #91D754; color: #fff; text-align: center; padding: 10px; position: absolute; margin-left: -50%; margin-top: 15px; }
.tooltip:hover > .tooltiptext { display: block; opacity: 1; transition: all; }
.tooltip.k-icon.k-i-question:before { margin: 0;}
/* Defaults */
.main-col { display: block; margin: 0% 10%; }
.container { padding: 8px; }
.to-right { float:right; }
.btn { vertical-align: top; padding: 4px 8px; height: auto; background-image: none; transition: all 0.3s; cursor: pointer; transition: all 0.3s; display: inline-block; }
.btn:hover { box-shadow: 0 3px 3px rgba(5,5,5,0.25);}
.link {color: cornflowerblue;}
.link[data-text] { padding: 0px 1px; transition: all 0.3s; display: inline-block; position: relative; }
.link[data-text]:hover::before { opacity:1; padding: 4px 8px; max-width: 100%; }
/* Menuing */
.menu { display: block; min-height: 33px; overflow: visible; border: none; }
.menu .subMenu { position: absolute; overflow: visible; z-index: 1000; }
.menu li { display: inline-block; background: rgb(255, 255, 255); color: #000; margin-left: 0px; transition:all 0.3s; font-size: 14px;}
.menu li * { color: #333; font-size: 14px; }
.menu > li:hover{
box-shadow: inset 0 -5px 0 0 rgba(255,255,255,0.2)
}
.menu li{
background: #91D754;
}
.menu li a{
padding: 10px 20px;
display: inline-block;
color:rgba(255, 255, 255, 0.9);
font-size: 11px;
}
.menu li:hover *,
.menu li.selected * { color: #fff; background: #005640; }
.menu * ,
.submenu * {
transition: all 0.3s;
}
.menu li a,
.submenu li a{
border-left: 0 solid rgba(255,255,255,0.3);
border-right: 5px solid transparent;
}
.submenu li:hover a{
border-left: 5px solid rgba(255,255,255,0.3);
border-right: 0 solid transparent;
}
.menu .sep { color: white; background: white; padding: 10px 0; }
.menu li .submenu { display: none; position: absolute; box-shadow: 5px 5px 5px #333; z-index: 1000; }
.menu li:hover .submenu { display: block; }
.menu li:hover .submenu li { display: block; }
.menu li:hover .submenu:hover { display: block; }
[name=pageHeaderBar] { border: 1px solid #005640; color:#fff; background:#005640; border-width: 1px 0 0 0; box-shadow: 0 5px 8px rgba(25,25,25,0.2); }
.companyLogo { height: 60px; padding: 16px; }
ul.form { list-style: none; }
ul.form>li { position: relative; padding: 25px 0 0 0; font-size: 0; }
ul.form>li span { text-align: left; }
ul.form>li .roiInfo *,
ul.form>li .roiInfo { font-size: 12px; color: #707070; }
ul.form>li .roiInfo .link { color: cornflowerblue; }
ul.form>li .info { display: block; font-size: 11px; color: #ababab; }
ul.form>li .info * { font-size: 11px; }
ul.form>li * { font-size: 16px; }
ul.form label { position: absolute; font-size: 16px; padding: 7px 10px; color: #ababab; pointer-events: none; }
ul.form label.active { font-size: 12px; margin-top: -25px; margin-left: -25px; opacity: 0.8; font-weight: lighter; background: transparent; }
ul.form input { padding: 5px 10px; font-size: 16px; margin: 0; width: 300px; border-width: 1px 1px 1px 0; }
ul.form input.k-invalid { border-color: red; }
ul.form .ttpCase { padding: 5px; border: 1px solid #999; border-width: 1px 0 1px 1px; background: #91D754; font-weight: bold; display: inline-block; z-index: 2; }
ul.form .ttp { position: relative; color: #fff; z-index: 10; }
ul.form .ttp::before { content: ''; position: absolute; background: red; height: 0px; width: 0px; right: -12px; top: 0; bottom: 0; margin: auto; border-top: 5px solid #fff; border-bottom: 5px solid #fff; border-left: 7px solid #91D754; }
ul.form .ttpCase>.ttptext { position: absolute; color: #fff; top: 0; background: #91D754; opacity: 0; padding: 4px 8px; border-radius: 4px; z-index: 2; max-width: 300px; pointer-events: none; font-size: 11px; font-weight: lighter; }
ul.form .ttpCase:hover>.ttptext { opacity: 1; }
ul.form>li .k-tooltip-validation { display: block; background: #fff; color: red; border: none; text-align: left; box-shadow: none; font-size: 11px; }
ul.form>li .k-tooltip-validation * { font-size: 11px; color: red; }
ul.form .k-widget:not(.k-tooltip-validation) { width: 310px; vertical-align: top; display: inline-block; padding-left: 10px; background: #fff; min-height: 29px; }
ul.form .k-widget.k-combobox { padding-left: 0; }
ul.form .k-widget * { font-size: 11px; }
ul.form .k-widget .k-input { font-size: 14.5px; }
ul.form input { border: 1px solid #cbcbcb; }
ul.form>li>button { width: 320px; }
[name=roiForm] h2 { color: #91D754; background: #fff !important; border-bottom: 1px solid #91D754; text-align: center; }
ul.form .ttpCase { background: #91D754; }
ul.form .ttpCase>.ttptext { background: #005640; }
ul.form .ttp::before { border-left-color: #91D754; }
.btn.large { width: 370px; }
ul.form { display: block; }
ul.form li * { text-align: left; }
ul.form li button { text-align: center; }
ul.form * { transition: all 0.3s;}
ul.form input { width: 350px; border-radius: 0 4px 4px 0;}
ul.form .linkList li { display: inline-block; width: 150px; vertical-align: top; }
.ui-dialog .footer { width: 100%; clear: both; }
.ui-dialog .footer button { float: right; }
.ui-dialog>* { padding: 5px; }
.ui-dialog-titlebar { background: white; border: none 0; }
.ui-dialog-titlebar .ui-icon { float: right; }
.ui-widget-overlay { background: #222222; }
.row { display: inline-block; display: flex; flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; overflow-x: hidden; }
.row * { box-sizing: border-box; }
.row>h2 { width: 100%; }
.row.header { padding: 0; border-top: #e0e0e0 1px solid; }
.row>.col { align-content: flex-start; flex: 20%; }
.row>.col-sm { flex: 0 25%; min-width: 25%; max-width: 25%;}
.row>.col-half { flex: 0 50%; min-width: 50%; max-width: 50%; }
.row>.col-lg { flex: 0 75%; min-width: 75%; max-width: 75%; }
.row>.col-full { flex: 1 100%;
.centered{
text-align: center;
}
.k-i-excel:before{
background-image: url('https://api.corporatelinx.com/Core/App(6)/Download/Themes/Default/images/excel_icon.png') !important;
background-size: contain !important;
content: "" !important;
}
.k-grid .k-header button{
margin: 4px;
color:#fff;
}
.k-grid tr .k-edit-cell input{
background: transparent;
border:none;
box-shadow: none;
border-radius: 0;
border-bottom: 1px dashed #ff8a00;
}
.k-grid > .k-header input{
color: #666;
}
.k-panelbar>li.k-state-default>.k-link { background: #005640; }
.k-panelbar>li.k-state-default>.k-link span,
.k-panelbar>li.k-state-default>.k-link label{ color: #fff; }
.link { color: cornflowerblue; }
.link[data-text] { border: 1px solid #1183e0; color:cornflowerblue; padding: 4px 8px; transition: all 0.3s; display: inline-block; position: relative; }
.link[data-text]::before { color:#fff; background:cornflowerblue; content:attr(data-text); display:block; overflow: hidden; position: absolute; top:0; left:0; transition: 0.25s; max-width: 0; padding: 4px 0px; opacity:0; }
.link[data-text]:hover::before { opacity:1; padding: 4px 8px; max-width: 100%; }
[data-role=listview] > li{
border-bottom: 1px solid #cbcbcb;
}
.menu-pullout>nav a{ color: #91D754 }
.menu-pullout .submenu>a::after,
.menu-pullout>nav>a::after {
border: 1px solid #91D754;
}
.menu-pullout{
background: rgb(255, 255, 255);
}
[name=HamburgerNav] .menu {
border: 1px solid #91D754;
}
.menu .hamburger{
border: 1px solid #91D754;
}
.menu .hamburger .menu-ico .bar{
background: #005640;
}
.menu .hamburger .menu-ico .bar::after{
background: #91D754;
}
.menu .hamburger {
color: #91D754;
}
.menu .hamburger:hover {
color: #005640;
}
.menu-pullout>nav a .clx-icon{
background: #91D754;
}
.menu-pullout .account{
padding: 8px;
border: 1px dashed cornflowerblue;
border-width: 1px 0;
margin: 0 0 8px 0;
}
.menu-pullout .flags{
padding-left: 8px;
}
.primary-color{
background: #91D754;
}
.secondary-color{
background: #005640
}
.k-grid tr{
background: rgb(255, 255, 255);
border-left: 5px solid transparent;
}
.content .k-grid tr:hover{
background-color: rgb(255, 255, 255);
}
.menu-pullout>nav a .submenu{
background: rgb(255, 255, 255);
}
.k-panelbar>li.k-item
{
background: #91D754;
}
.k-state-selected
{
background-color: #005640;
}
.k-state-active
{
background: #005640;
}