body, html { background-color: #FFF; }
body {
    min-width: 1100px;
    width: 100%;
    height: 100%;
    min-height: 650px;
    position: relative;
}

.Logo {
    text-align: center;
}

.Logo-back {
    width: 174px;
    height: 132px;
    background: url(../Images/logoroots.png) no-repeat center;
    position: relative;
}

span.appRelease {
    color: rgb(136, 136, 136);
    font-size: x-small;
}

span.appRelease.rootsLogo {
    bottom: 99px !important;
    left: 135px !important;
    position: absolute;
}

span.appRelease.rootsText {
    bottom: 0 !important;
    right: 0 !important;
    position: absolute;
}

span.appRelease.rootsHeader {
    color: #CBCBCB !important;
    vertical-align: bottom !important;
    font-size: xx-small !important;
}

/* Header */
header.account-header {
    height: auto;
    position: relative;
    padding: .5em 1em !important;
    min-height: 90px;
}
.account-header .logo-gesp {
    position: absolute;
    right: 1em;
}
.account-header .header-links {
    position: absolute;
    left: 1em;
}
    .account-header .header-links li {
        float: left;
        margin-right: 1em;
        min-width: 75px;
    }
    .account-header .header-links li a {
        text-decoration: none;
    }
        .account-header .header-links li a:hover {
            cursor: pointer;
            text-decoration: underline;
        }
/* Footer */
footer.account-footer {
    text-align: center;
    margin-top: 1.5em;
}
/* Header */
body > header {
    background-color: rgb(85,85,85);
    color: rgb(203,203,203);
    position: relative;
    z-index: 50;
    height: 40px;
}
#Header { height: 100%; position: relative; z-index: 55; }
    #Header > div, #Header > nav {
        height: inherit; 
        z-index: 500;
        float: left;
    }
        #Header > div > *, #Header > div > a > * {
            display: inline-block;
            line-height: 33px;
            vertical-align: middle;
        }
        #Header > div > a > h1 {
            padding-bottom: 7px; 
        }
#Header-Menu ul li h2 a.ico-30 {
    margin: -.3em 0 0 0 !important;
}
#ProfilePages {
    min-width: 146px;
    margin-left: -50px;
}
#AmministrazionePages {
    min-width: 180px;
}
#GestionePages {
    min-width: 160px;
    margin-left: -15px;
}
#ReportPages {
    min-width: 220px;
    margin-left: -12px;
}
#PlanningListPages {
    min-width: 255px;
    margin-left: -20px;
}
.planning-title-menu {
    font-size: 120%;
    color: #01AEF0;
}
ul#PlanningListPages li:hover span.planning-title-menu {
    color: #FFF !important;
}
.planning-info-menu {
    font-size: 80%;
    display: block; 
    margin-top: -5px; 
    font-weight: normal;
}

#Logo-container { padding-left: 1.5em; }
    #Logo-container > * { margin-right: .4em; }
#Search-container {
    height: 32px !important;
    margin-top: 4px;
    margin-left: 12px;
    background-color: #999;
    min-width: 238px;
}
    #Search-container > .ico-30 { margin-right: 0px !important; }
    #Search-container > * {
        display: block; margin-right: .4em;
    }
    #Search { margin: 0; height: 32px; padding-left: 0.2em; line-height: 20px !important; font-size: 90%; max-width: 200px; }
#Header-Menu { min-width: 90px; right: 0; float: right !important; }
    #Header-Menu ul {
        padding: 0;
    }
    #Header-Menu ul li ul li a {
        display: block;
        width: 100%;
        height: 100%;
        color: black !important;
        font-weight: normal !important;
    }
        #Header-Menu ul > li {
            padding-top: 12px;
            padding-bottom: 12px;
            height: 40px;
            padding-right: 1.5em !important;
            display: block;
            color: black !important;
        }
            #Header-Menu ul li h2 a {
                text-decoration: none;
                color: rgb(203,203,203);
                margin: 0 !important;
                padding-left: 1em;
            }
            #Header-Menu ul li:hover h2 a {
                color: #000;
            }
            #Header-Menu ul li ul li:hover a, 
            #Header-Menu ul li ul li a:hover {
                color: inherit !important;
            }
            #Header-Menu ul li .ico-30 {
                margin-top: -5px;
                display: block;
            }
            #Header-Menu ul li ul li {
                height: auto;
                padding: 0 !important;
                min-width: 140px;
                height: auto;
            }
            #Header-Menu ul li ul li a {
                margin: 0;
                padding: .5em;
            }
                #Header-Menu ul li ul li.sep {
                    width: 100%;
                    padding: 0;
                    margin-top: .1em;
                    margin-bottom: .1em;
                }
                #Header-Menu ul li ul li.active {
                    background: none;
                    color: black;
                }
#Title-Container {
    height: 42px;
    margin: 0 258px 0 .7em;
    color: rgb(31, 31, 31);
    position: relative;
}
#Title {
    position: absolute;
    bottom: 0;
    line-height: 2em;
    font-weight: bold;
    color: #555;
}
/* Panes */
div#body {
    position: relative;
    z-index: 10;
    height: -moz-calc( 100% - 40px - 42px );
    height: -webkit-calc( 100% - 40px - 42px );
    height: calc( 100% - 40px - 42px); /* 100 - header - title */
}
#right-pane {
    padding: .5em;
    min-width: 525px;
    width: 38%;
    height: 100%;
    float: right;
}
#left-pane {
    padding: .5em;
    margin: 0;
    height: -moz-calc( 100% - 258px );
    height: -webkit-calc( 100% - 258px );
    width: calc( 62% - 10px ); /* 100% - right-pane - 10px*/
    position: relative;
    height: 100%;
    float: left;
}
#left-pane:after {
    /* Clearfix */
    clear: both;
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
#nav-pane {}
#info-pane-wrapper {
    max-width: 700px;
}
    #info-pane-wrapper.full-width-pane {
        max-width: none !important;
    }
.info-pane {
    position: relative;
    border: 1px solid #cbcbcb;
    padding: 1em;
}
.info-boxes > div {
    margin-top: .5em;
    position: relative;
}
.totale-unita {
    margin: .4em 0;
    position: relative;
}
.totale-unita-table {
    height: 18px;
}
.totale {
    font-size: 140%;
}
.apice {
    font-size: 90%;
    position: relative;
    bottom: .4em;
    color: #808080;
}
    .right-subpane { }
        .right-subpane > h2 { color: rgb(136, 136, 136); }
        .right-subpane div { }
#additional-info {
    margin-top: 40px;
    border-top: 3px solid rgb(136, 136, 136); 
}
#additional-info li {
    margin: 0 .75em 1em 0;
    display: inline-table;
}

#grid-pane {
    height: calc( 100% - 235px ); /* 100% - info-pane-wrapper*/
}
    #grid-pane > .grid-header {
        height: 40px;
        margin-bottom: 10px;
    }
    #grid-pane > .k-grid {
        overflow: auto;
        height: auto;
        max-height: calc( 100% - 50px ); /* 100% - header griglia */
    }
#Griglie {
}
#Griglie > div {
    width: 100%;
    height: 100%;
    overflow: auto;
}
#TabsPianificazione {
    position: relative;
    background: none !important;
    margin-top: 5px;
}
/* Menu principale */
#NavMain {}
    #NavMain ul {
        margin-bottom: 2.5em;
    }
.sub-menu ul li a {
    text-decoration: none;
    font-weight: bold;
}
ul li.sep {
    height: 1px !important;
    width: 90%;
    background-color: rgb(203,203,203);
}
ul.menu li {
    min-width: 90px;
    display: block;
    height: 26px;
    line-height: 24px;
    margin: .95em;
    padding: .2em;
}
ul.menu li a {
    text-decoration: none;
    display: block;
    height: 100%;
    text-transform: lowercase;
    font-size: 18px;
    line-height: 16px;
    font-family: 'Segoe UI semibold', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    color: rgb(31, 31, 31);
}
header > h1 {
	padding: .5em;
    padding-left: 1.2em;
}

.dev-environment {
    background-color: #376585 !important;
}
h1.dev-environment {
    padding: .1em .2em;
    color: white !important;
}


/* Personalizzazione controlli e fixes */
.k-colorpalette .k-item {
    width: 28px !important;
    height: 28px !important;
}
.k-autocomplete, .k-combobox, .k-datepicker, .k-datetimepicker, .k-colorpicker, .k-numerictextbox, .k-dropdown, .k-selectbox, .k-textbox {
    width: 100% !important;
}
.k-timepicker {
    width: 100px;
    border: 0;
}
    .k-timepicker .k-picker-wrap {
        height: 25px;
        padding-top: 0;
        border-bottom: 1px solid rgb(203,203,203); 
    }
        .k-picker-wrap .k-input {
            padding-top: 0px !important;
            vertical-align: middle;
            line-height: 24px;
            height: 100% !important;
            padding: 0;
            margin: 0;
        }
.k-picker-wrap.k-state-hover {
    border-bottom: 1px solid rgb(203,203,203); 
    margin: 0;
    padding-bottom: 0 !important;
}
.k-colorpicker .k-state-hover {
    border-bottom: none !important;
}
        .k-timepicker .k-picker-wrap .k-select { line-height: 19px; }
.k-timepicker .k-picker-wrap input {
    width: 72px !important;
}
.k-window-action.k-link {
    box-sizing: content-box !important;
}
.k-datepicker, .k-combobox /*fix widget kendo*/  {
    white-space: normal !important;
}
.k-datepicker .k-state-active {
    border-bottom: none !important;
    overflow: hidden;
}
.k-datepicker input:focus {
    border: none !important;
}
input[type="textbox"], input[type="text"], input[type="password"], span.t-input /*fix widget kendo*/ {
    width: 100%;
}
.k-window-titlebar.k-header {
    position: relative;
}
.k-widget * {/* fix del box sizing dalla versione 2015*/
    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}
.k-tabstrip-wrapper {
    height: 100%;
}
.k-loading.k-complete {
    display: none !important;
}
.k-tabstrip-items .k-link, .k-panelbar .k-tabstrip-items .k-link {
    padding: .4em .7em;
}
input[readonly="readonly"], input[readonly="True"] {
    border: none !important;
    font-weight: bold !important;
    padding: 0 !important;
}

/* fix editor periodicità scheduler */
.k-edit-field > .k-check {
    float: left;
    margin-top: .35em;
}
.k-edit-field > ul.k-reset > li > * {
    display: inline-block;
}
.k-edit-field > ul.k-reset > li .k-datepicker {
    width: auto !important;
    display: inline-block;
}
.k-edit-field>ul.k-reset .k-numerictextbox, 
.k-edit-field span.k-recur-interval {
    width: 5em !important;
    margin-left: 0;
}
.k-edit-field > ul.k-reset .k-widget {
    margin-left: 0;
}
.k-edit-field > ul.k-reset .k-widget {
    margin: 0 .4em;
}
.k-edit-field > ul.k-reset > li input[type=radio] {
    margin: 0 .4em !important;
}
.k-edit-field>ul.k-reset li .k-dropdown {
    width: auto !important;
}
/* eof fix editor periodicità scheduler */

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {
    background-color: #cdcdcd;
}
::-webkit-scrollbar-thumb:active {
    background-color: #606060;
}
::-webkit-scrollbar-button {
    background-color: #606060;
    color: #cdcdcd;
}
::-webkit-scrollbar-button:increment {   
    background: #f0f0f0 url("../Content/themes/base/images/ui-icons_888888_256x240.png") -66px 0px;
}
::-webkit-scrollbar-button:decrement {
    background: #f0f0f0 url("../Content/themes/base/images/ui-icons_888888_256x240.png") -1px 0px;
}
body {
    scrollbar-3dlight-color: #cdcdcd;
    scrollbar-arrow-color:#767676;
    scrollbar-base-color:#cdcdcd;
    scrollbar-face-color: #cdcdcd;
    scrollbar-shadow-color: #cdcdcd;
    scrollbar-highlight-color: #cdcdcd;
    scrollbar-darkshadow-color: #cdcdcd;
    scrollbar-track-color: #f0f0f0;
}

/* Drop down menu - 
    ul.dd-menu ==> con supporto hover (apertura all'hover)
    ul.dd-menu-c ==> con supporto click (apertura al click gestita via js)
 */
ul.dd-menu-c ul,
ul.dd-menu ul {
	display: none;
	background-color: #FFF;
    color: #888;
    border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
    border: 1px solid rgb(183,183,183);
}
    ul.dd-menu-c ul li,
	ul.dd-menu ul li {
		float: none; 
		position: relative;
	}
    ul.dd-menu-c li a,
	ul.dd-menu li a {
		display: inline-block; margin: .3em .6em .3em .5em;
		color: #757575; text-decoration: none;
	}
    ul.dd-menu-c ul li a,
	ul.dd-menu ul li a { 
        margin: .4em .7em;
		color: #757575;
        width: calc( 100% - 1.7em );
        margin-right: 1em;
	}
    ul.dd-menu-c ul ul
    ul.dd-menu ul ul {
	    position: absolute; left: 100%; top:0;
    }
    ul.dd-menu-c .ico-arr.s16.down-small,
    ul.dd-menu .ico-arr.s16.down-small {
        height: 14px;
    }

    ul.dd-menu-c li,
    ul.dd-menu li {
	    float: left;
        margin: 0;
        height: 30px;
    }

    ul.dd-menu-c li.open ul,
	ul.dd-menu li:hover > ul {
		display: block;
        z-index: 300;
	}
    ul.dd-menu-c li.open:hover,
    ul.dd-menu-c > li.open,
    ul.dd-menu-c li:hover,
	ul.dd-menu li:hover {
		background-color: rgb(183,183,183);
	}
        ul.dd-menu-c > li.open:hover > a,
        ul.dd-menu-c > li.open > a,
		ul.dd-menu li:hover > a {
			color: #FFF;
		}
            ul.dd-menu-c ul > li.open:hover a,
            ul.dd-menu-c ul > li a:hover,
			ul.dd-menu ul li:hover a,
			ul.dd-menu ul li a:hover {
				color: #FFF !important;
			}
            /*ul.dd-menu-c ul {
                display: inline-block;
            }*/
            ul.dd-menu-c ul > li {
                float: left;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
            }

/* File upload control */
.FileUploadWrapper {
}
input.FileUpload {
    width: 365px;
}
div.FileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
    color: #FFF;
    background-color: #428BCA;
    border: 2px solid #428BCA;
    width: 100px;
    text-align: center;
    padding: 3px 2px;
    display: inline-block;
    margin: 2px;
}
    div.FileUpload:hover {
        border-color: #64aae6;
    }
    div.FileUpload:active {
        border-color: #357EBD;
    }
    div.FileUpload span {
    }
    div.FileUpload input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
    }
div.FileUploadProgressWrapper {
    margin-top: .5em;
}
div.FileUploadBar {
    width: 365px;
    border: 1px solid #428BCA;
    float: left;
    height: 20px;
}
    div.FileUploadBar .ProgressBar {
        display: block;
        height: 100%;
        width: 0%;
        background-color: #428BCA;
        height: 20px;
    }
div.FileUploadProgressWrapper .ProgressPerc {
    display: block;
    float: left;
    height: 100%;
    line-height: 20px;
    margin-left: .5em;
    min-width: 32px;
}
div.FileUploadProgressWrapper .FileUploadStatus {
    clear:both;
}

.account-single-col-w {
    width: 550px;
    margin: 0 auto 2em auto;
}

.olMap, .olMap > * {
    font-family: Arial, Helvetica, sans-serif;
    z-index: 5;
}

/* marker per drag'n'drop ordini */
.tl-dragMarker {
    width: 2px;
    height: inherit;
    background-color: grey;
    position: absolute;
}
.tls-tLabel > span {
    margin-top: -20px;
    margin-left: -1.5em;
    position: absolute;
}

div.tls-tLabel {
    height: calc( 100% - 20px ) !important;
    margin-top: 20px !important;
}
.tls-tLabel.first > span {
    text-indent: -9999px;
}

div#denyMessage {
	width: 100%;
    height: 100%;
	margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
    display: block;
    position: relative;
}

div#denyMessages {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background: url(roots-logo-foglia-90.png) no-repeat;
    background-size: 90px 92px;
    height: 92px;
    padding-left: 50px;
}

div#forbidden {
    left: 50%;
    top: 25%;
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
}