* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* All unordered lists are hereof supposed to be navigational elements (ie. tabs)
-----------------------------------------------------------------------------------*/
li { display: inline; }
li a { display: block; float: left; outline: none; text-align: center; text-decoration: none; }
	

/* Icons
----------------------------------------*/
[class*="icon-"] {
    display: inline-block;
    /*padding-left: 26px;*/
    background: url('img/sprite.png') 0 0 no-repeat;
    width: 16px;
    height: 16px;
    line-height: 1;
}
.icon-accept { background-position: -346px -478px; }
.icon-hammer { background-position: -346px -1150px; }
.icon-list { background-position: -30px -1430px; }
.icon-layout-grid { background-position: -30px -1374px; }

[class*="button-library"] [class*="icon-"] {
    position: relative;
    top: 4px;
    margin-right: 5px;
    display: none;
}


/* Global settings (form elements, typography etc etc)
-------------------------------------------------------*/
html, body { height: 100%; overflow: hidden; }

body
{
    /* 12px / 18px */
	font: 75%/1.5 "DINNextRoundedLTW01-Lig", "Dosis", Arial, Helvetica, sans-serif;
	background: #fff;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p 
{ 
    margin-bottom: 1em; 
}

h1, h2, h3 {
    text-transform: uppercase;
    font-family: 'DINNextRoundedLTW01-Reg';
}

input[type="text"] {
    background: #F9F9F9;
    line-height: normal;
    padding: .4em .5em;
    color: #BABABA;
    border: none;
    border-radius: 0;
}

img 
{ 
    border: 0; 
    vertical-align: middle;
    -ms-interpolation-mode: bicubic; 
}

a 
{ 
    color: #0085cf; 
}

.noie button,
.button 
{ 
    padding: 0.4em 1em 0.5em;
    border-radius: 2em;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    background: #333132;
    
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.noie button:hover,
.button:hover,
.noie button:active,
.button:active,
.noie button.selected,
.button.selected
{
    /*background: #a8473b;*/
    
}
.noie button:focus,
.button:focus
{
    -webkit-box-shadow: 0 0 3px #5fceea; 
    -moz-box-shadow: 0 0 3px #5fceea; 
    box-shadow: 0 0 3px #5fceea;
}

a.button
{
    text-transform: uppercase;
    display: inline-block;
    padding: 0.4em 1em 0.5em;
    margin: 0 1em 0 0;
    text-decoration: none;
    color: #fff;
}


[class*="button-library"] {
    display: block;
    padding: 0.4em 1em 0.5em;
    border-radius: 2em;
    border: 0;

    color: #fff;
    background: #333132;

    text-decoration: none;
    
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    text-transform: uppercase;
    text-align: center;
}

.btn-group {
      position: relative;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      white-space: nowrap;
      *margin-left: .3em;
}
.btn-group:first-child {
    *margin-left: 0;
}
.btn-group > .button {
    position: relative;
    border-radius: 0;
    margin: 0;
}
.btn-group > .button + .button {
    margin-left: -.3em;
    border-left: 1px solid #4D4D4D;
}
.btn-group > .button:first-child {
    margin-left: 0;
    border-radius: 2em 0 0 2em;
}
.btn-group > .button:last-child {
    border-radius: 0 2em 2em 0;
}


.notice {
    padding: 1.5em 1.5em 0.5em;
    background: #565656;
    color: #fff;

}
.validation-summary-errors
{
    background: #ffbdb1;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    font-size: 14px;
}
    .validation-summary-errors li {
        display: block;
        margin-bottom: 0.75em;
    }


/* The main frame
--------------------------------------------------------------*/

#outer-wrapper
{
	position: relative;
	height: 100%;
	width: 100%;
}

#header
{
	position: relative;
	background: #fff;
	height: 5em;
}
    #system-controls { position: relative; height: 100%; }

#logo {
    position: absolute;
    top: 1.75em;
    left: 0px;
    width: 200px;
    height: 100px;
    text-indent: -9999px;
    background: url('img/fredericia_logo.png') center no-repeat;
    background-size: 80%;
}


/* Layout layering (just in case)
----------------------------------------*/
#loginDiv
{ z-index: 9000; }

.login-controls, .user-controls
{ z-index: 2000; }

.functions-list, #header
{ z-index: 1000;}

#ViewpointArea, #categories, #functions
{ z-index: 100; }

#UserGuideArea
{ z-index: 101; }

#functions
{ z-index: 75; }

#planner-area, #planner-frame, #library, #library-contents
{ z-index: 50; }


/* System controls
----------------------------------------*/
#system-states
{
	position: absolute;
	bottom: 0;
	right: 0;
	color: #323232;
    display: none; 
}
    
	#system-states a
	{
		height: 3em;
        line-height: 3;
        margin-left: 0.5em;
        padding: 0 1em;
        text-transform: uppercase;
        color: #323232;
        font-size: 1.3em;

	}

	#system-states li a:hover,
	#system-states li.current a
	{
		color: #a8473b;
	}


/* Library category frame and buttons
----------------------------------------*/
#categories
{
    position: relative;
	height: 3em;
	margin: 0;
	padding-left: 1em;
	background: #fff /*url('img/bg-categories-bar.png') left top repeat-x*/;
	text-transform: uppercase;
    border-bottom: 2px solid #333333;
}

	.categories
	{
		height: 100%;
		padding-right: 2em;
		float: right;
	}
        
        .categories li {  }
		.categories li a
		{
            font-size: 1.2em;
		    display: block;
			line-height: 0.8em;
			padding: 0 0.8em;
		    color: #323232;
			text-align: left;
			border-left: 1px solid;
            margin: 0.8em 0;
            height: 0.8em;
		}
            .categories li:first-child a {
                border-left: none;
            }

		.categories li a:hover,
		.categories li.current a,
		.categories li a.current
		{
			color: #000;
		}	


/* Planner-area
----------------------------------------*/
#planner-area
{
	position: absolute;
    top: 8em;
	top: 6em;       /*JANNE: TO SHOW LOGIN, COMMENT THIS*/
	bottom: 6.5em;
	left: 0;
	right: 0;
	border-collapse: collapse;
	clear: both;
}
	
#frame { position: relative; display: block; height: 100%; }

#planner-frame
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 22em;
}
	
	#UserGuideArea,
    #ViewpointArea,
	#FlashArea,
	#scene-image-replacement-area
	{
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #fff;
		visibility: visible;
		position: absolute;
	}
	
	#FlashArea
	{
		visibility: hidden;
		position: absolute;
		top: 0;
		left: -9999em;
	}
	
	#scene-image-replacement-area { display: none; }

    #canvas { width: 100%; height: 100%; }


/* Library layer
----------------------------------------*/
#library {
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden; /* never show parent scrollbar */
	width: 22em;
    color: #323232;
	background: #fff;
	   -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

    .library-content {
        padding: 0 2em;
    }

	.library-category-header {
		display: block;
        clear: both;
		padding: 0 2em;
        margin-bottom: 1.5em;

        color: #323232;
        background: #fff;
        
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
	}
    .library-category-header a {
        display: block;
        padding: 0.2em 0;
        background-position: 100% 50%;
        background-repeat: no-repeat;
        text-transform: uppercase;
        text-decoration: none;
        color: #323232;
        font-weight: 500;
    }
    .library-category-header-open a {
        /*background-image: url('img/icon-light-minus.png');*/
    }
	.library-category-header-closed a {
        /*background-image:url('img/icon-light-plus.png') ;*/
        border-bottom: 1px solid #323232;
	}
	/*.library-category-header-closed {
        border-bottom: 2px solid #a8473b;
	}*/
    .library-category-content {
        padding: 0 2em;
    }


    #library-controls
	{
        display: none;
        padding: 1.5em 2em;
        border-bottom: 1px solid #323232;
        background: #fff;
	}

	#library-options
	{
        position: relative;
		overflow-x: hidden;
		margin: 0;
		padding: 1.5em 2em;
        border-bottom: 1px solid #323232;
		background: #fff;
        display: none;
	}
	
	#library-options h1, #library-options h2, #library-options h3, #library-options h4 { margin-bottom: 1.5em; }
	
	.small-icons li
    {
        width: 100px;
        height: 20px;
        line-height: 20px;
        margin: 0px 8px 10px 0px;
        display: list-item;
    }
    .small-icons li img { width: 20px; height: 20px; margin-right: 10px; float: left; }
    .small-icons li .icon-image
	{
	    width: 20px;
	    height: 20px;
	    text-indent: -9999em;
	    margin-right: 10px;
	    float: left;
	}
	
	#library-contents
	{
		position: relative;
		height: 100%;
		width: auto;
		
		padding: 1.5em 0 0;
		overflow: auto;
	}

    #library-notification {
		position: absolute;
		height: 100%;
		width: 100%;
        top: 0;
        right: 0;
		background: #fff;
        z-index: 99;
		padding: 1.5em;
		overflow: auto;
        text-align: center;
    }
    #library-notification.stack-with-content {
        position: relative;
        height: auto;
    }
        #library-notification img {
            width: 90%;
            margin-bottom: 1em;
        }
        #library-notification h2 {
            font-size: 120%;
            margin: 1em 0;
        }
        #library-notification p {
            font-size: 110%;
        }
        #library-notification .lib-notification-button-container {
            margin: 1em 0;
        }


/* Library icons
----------------------------------------*/
.lib-icons { width: 18em; margin: 0; padding: 0; }

.lib-icons > li
{
	position: relative;
	width: 8em;
	margin: 0 0 1em 0;
	display: inline-block;
	vertical-align: bottom;
	height: auto !important;
	min-height: 110px;
	height: 110px;
}
    .lib-icons > li:nth-child(2n+1)
    {
        margin-right: 1.5em;
    }
    .lib-icons > li a,
    .lib-icons > li img
    {
        width: 100%;
    }
    .lib-icons > li img
    {
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .lib-icons > li a { 
        color: #323232; overflow: hidden; 
        text-transform: uppercase;
        overflow-wrap: break-word; word-wrap: break-word; /* Forced wrapping for otherwise non-wrapping string (using "_" instead of spaces for example */
    }
    .lib-icons > li a.disabled {
        opacity: 0.6;
        pointer-events: none;
    }
    .lib-icons > li a .lib-item-label {
        text-align: left;
        font-size: 85%;
    }
        .lib-icons > li a .lib-item-label span {
            display: block;
        }
        .lib-icons > li a .lib-item-label .lib-item-name {
            
        }
        .lib-icons > li a .lib-item-label .lib-item-code {
            border-top: 1px solid #323232;
        }

.lib-icons .wide
{
	position: relative;
	width: 18em;
	float: left;
	margin-right: 0;
	padding: 0;
}

    .lib-icons .wide a,
    .lib-icons .wide img 
    {
        width: 100%;
    }

.lib-item-actions {
    position:absolute; 
    bottom: 0;
    left:0; 
    width:100%;
}
.lib-item-actions a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}
.lib-item-actions li {
    width: 2em; 
    height: 2em; 
    position: absolute;
    display: block;
    margin: 0;
}
.lib-item-actions__remove {
    right: -0.5em;
    top: 0;
}
    .lib-item-actions__remove a {
        background: url('img/icon-ios-remove.png') 50% 50% no-repeat;
    }
.lib-item-actions__visibility {
    left: -0.5em;
    top: 0;
}
    .lib-item-actions__visibility input {
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }

/* Special library icons & buttons
----------------------------------------*/
#button-newconfiguration {
    text-align: center;
    color: #fff;
}
.lib-icons li.newconfiguration {
    height: auto;
    min-height: initial;
    margin-bottom: 1.5em;
}
.lib-icons .ar-image-placeholder {
    height: 8em !important;
    min-height: initial;
    background: #f3f3f3 url('img/icon-dark-upload.png') 50% 50% no-repeat;
    border-radius: 6px;
}

.RotateElementContainer {
    text-align: center;
    width: 120%;
    margin-left: -10%;
}
    .RotateElementContainer button {
        margin-bottom: 0.5em;
    }



/* AR upload / info area
----------------------------------------*/
#ar-upload-form { border-bottom: 1px solid #323232; margin-bottom: 10px; }
#ar-upload-form button { width: 100%; }
.ar-info {  }
.ar-info ul li a { color: #323232; text-decoration: none; display: block; line-height: 24px; padding-left:24px; background: url('img/sprite.png') 0 0 no-repeat; }
.ar-info ul li a.ar-help { background-position: -30px -923px; }
.ar-info ul li a.ar-printmarker { background-position: -30px -195px; }


/* Save combination / configuration area
----------------------------------------------*/
.save-combination label { display: block; }
.save-combination input.text { width: 100%; margin: 0; }
.save-combination select { width: 100%; }
.save-combination button { width: 100%; }


/* Meta areas (info + facebook etc)
----------------------------------------*/
#meta
{
    position: absolute;
    bottom: 4em;
    left: 0;
    right: 0;
    height: 2.5em;
    line-height: 2.5;

    color: #fff;
    background: #333333;
    
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#info
{
	position: relative;
	margin-right: 18.8571em;
	height: 100%;
	font-size: 14px;
    line-height: 2.25;
	padding-left: 36px;

    background: none;
    padding-left: 1em;
    text-transform: uppercase;

	color: #333333 !important;
}

    #info .icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        top: 3px;
        margin-right: 1em;
        background: url('img/sprite.png') -30px -366px no-repeat;
    }

#sharing
{
	position: absolute;
	top: 0;
	right: 0;
	width: 22em;
	height: 100%;
}

    #sharing a
    {
        position: relative;
        display: block;
        width: auto;
        height: 100%;

        border-left: 1px solid #555;

        color: #fff;
        line-height: 2.5;
        text-decoration: none;
    }
    
    #sharing span
    {
        position: relative;
        display: block;
        height: 100%;
        margin: 0 0 0 0.75em;
        padding: 0 0 0 2em;
        background: url('img/icon-light-share.png') 0 50% no-repeat;
    }


/* Main function frame and buttons
----------------------------------------*/
#functions
{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 4em;
	background: #fff;
}
    #functions .helper { display: none; }
    #functions-left ul { margin-left: 10px; }
	#functions-righ ul { /*float: right;*/ }
	
	.functions-list, .functions-list li 
    { 
        list-style-type: none; 
        margin-bottom: 0; 
	}
	.functions-list li 
    { 
        display: inline; 
	}
	
	.functions-list a
	{
        position: relative;
        float: left;
        height: 1em;
        /*width: auto !important;
        min-width: 100px;
        width: 100px;*/
        padding: 0 1em;
        top: 0.5em;
        margin: 1.2em 0;
        line-height: 0.8em;
        color: #363636;
        text-decoration: none;
        text-align: left;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-left: 1px solid #323232;
        text-transform: uppercase;
        overflow: visible;
	}
        .functions-list li:first-child a {
            border-left: none;
        }
        .functions-list .icon
         {
            display: block;
            padding: 1.1em 0 0 2.2em;
            height: 3em;
            margin-top: -1em;
        }
	.functions-list a:hover,
	.functions-list a:active
	{
        background-image: none;
        /*
        background-image:      -o-linear-gradient(bottom, #b1b1b1 0%, #e5e5e5 100%);
        background-image:    -moz-linear-gradient(bottom, #b1b1b1 0%, #e5e5e5 100%);
        background-image: -webkit-linear-gradient(bottom, #b1b1b1 0%, #e5e5e5 100%);
        background-image:         linear-gradient(bottom, #b1b1b1 0%, #e5e5e5 100%);
        */
	}

	
	#clear-function .icon      { background: url('img/MK_interface_clear.png') left center no-repeat; }
	#new-function .icon        { background: url('img/MK_interface_clear.png') left center no-repeat; }
    #save-function .icon       { background: url('img/sprite.png') -346px -76px no-repeat; }
    #saveas-function .icon     { background: url('img/sprite.png') -346px -1252px no-repeat; }
    #load-function .icon       { background: url('img/sprite.png') -346px -132px no-repeat; }
    #print-function .icon      { background: url('img/MK_interface_report.png') left center no-repeat; }
    #screenshot-function .icon { background: url('img/MK_interface_picture.png') left center no-repeat; }
    #measure-function .icon    { background: url('img/MK_interface_measurements.png') left center no-repeat; }
    #help-function .icon       { background: url('img/sprite.png') -346px -356px no-repeat; }
    #remove-function .icon     { background: url('img/MK_interface_remove.png') left center no-repeat; }
    #back-function .icon       { background: url('img/sprite.png') -346px -468px no-repeat; }
    #hide-function .icon       { background: url('img/sprite.png') -346px -524px no-repeat; }
    #autopanel-function .icon  { background: url('img/sprite.png') -346px -580px no-repeat; }
    #fit-function .icon        { background: url('img/sprite.png') -346px -636px no-repeat; }
    #zoomin-function .icon     { background: url('img/sprite.png') -346px -693px no-repeat; }
    #zoomout-function .icon    { background: url('img/sprite.png') -346px -748px no-repeat; }
    #grid-function .icon       { background: url('img/sprite.png') -346px -804px no-repeat; }
    #floorplan-function .icon  { background: url('img/sprite.png') -346px -860px no-repeat; }
    #feedback-function .icon   { background: url('img/sprite.png') -346px -1196px no-repeat; }
	#toggle-doors-function .icon,
	#hide-function .icon	   { background: url('img/MK_interface_doors.png') left center no-repeat; }

    #functions .loader {
        position: absolute;
        left: 12px;
        top: -5px;
        height: 24px;
        width: 24px;
        display: none;
    }
        #functions .loading .loader {
            display: block;
        }
   

/* Drag n Drop related
----------------------------------------*/
/*
*[draggable=true] {
    -moz-user-select:none;
    -khtml-user-drag: element;
    cursor: move;
}
*/


/* File input styling
----------------------------------------*/

.fake-file-input-container
{
	position: relative;
    width: auto;
    height: 2em;
    line-height: 2;
    margin-bottom: 0.5em;
    background: #f9f9f9;
    color: #bababa;
    font-size: 1em;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
	.fake-file-input-container:hover 
	{
	    -webkit-box-shadow: 0 0 3px #5fceea, inset 0 1px 4px #d9d9d9; 
	       -moz-box-shadow: 0 0 3px #5fceea, inset 0 1px 4px #d9d9d9; 
	        -ms-box-shadow: 0 0 3px #5fceea, inset 0 1px 4px #d9d9d9; 
	            box-shadow: 0 0 3px #5fceea, inset 0 1px 4px #d9d9d9; 
	}
	.fake-file-input-container.disabled 
	{
	    background: #e0e0e0;
	    box-shadow: inset 1px 1px 3px #bdbdbd; 
	}
	.fake-file-input-container .ffi-file-name { float: left; margin-left: 8px; }
	.fake-file-input-container .ffi-file-name.ffi-no-file { font-style: italic; color: #999; }
	.fake-file-input-container .ffi-trigger 
	{ 
	    color: #454545; 
	    text-decoration: none; 
	    display: block; 
	    position: relative; 
	    top: 2px; 
	    height: 1.5em; 
	    line-height: 1.45; 
	    margin-right: 3px; 
	    padding: 0 6px;
	    
	    background: #f3f3f3;
	    background:    -moz-linear-gradient(top, #fff 0%, #efefef 100%);
	    background:      -o-linear-gradient(top, #fff 0%, #efefef 100%);
	    background:     -ms-linear-gradient(top, #fff 0%, #efefef 100%);
	    background: -webkit-linear-gradient(top, #fff 0%, #efefef 100%);
	    background:         linear-gradient(top, #fff 0%, #efefef 100%);
	    
	    border: 1px solid #bdbdbd;
	    -moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	    border-radius: 3px;
	    
	    -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
	}
	.fake-file-input-container .ffi-trigger span { display: block; position: relative; height: 100%; }
	.fake-file-input-container.disabled .ffi-trigger { background-position: 0 -18px; cursor: default; }
	.fake-file-input-container.disabled .ffi-trigger span { background-position: 100% -18px; }
	.fake-file-input-container .ffi-reset { height: 14px; width: 14px; display: block; position: relative; top: 4px; right: 4px; text-indent: -9999em; outline: none; overflow: hidden; background: url('img/fakefileinput-reset.png') right top no-repeat; }
	.fake-file-input-container .ffi-reset:hover { background-position: 0 -14px; }
	.fake-file-input-container .ffi-trigger, .fake-file-input-container .ffi-reset { float: right; }


/* Floorplan uploader
----------------------------------------*/
#floorplan-header
{
    background: #f7f7f7 url('img/bg-lib-options.png') left bottom repeat-x;
    padding: 25px 25px 15px;
    position: relative;
}

#floorplan-header h2 { font-size: 18px; margin-bottom: 12px; font-weight: normal; }

#floorplan-header .phase-upload
{
    text-align: center;
}

#floorplan-header .phase-upload .fake-file-input-container
{
    margin-right: 15px;
    display: inline-block;
    width: 20em;
}

#floorplan-header .phase-useimage
{
    padding: 15px 0 25px;
    text-align: center;
}

#floorplan-header .form button,
.floorplan-update a
{
    display: inline-block;
    width: 140px;
    height: 32px;
    padding: 0;
    position: relative;
    margin: 0;
    
    line-height: 30px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    
    background: #00a5ff;
    background: -o-linear-gradient(top, #00a5ff 0%, #0085cf 100%);
    background: -moz-linear-gradient(top, #00a5ff 0%, #0085cf 100%);
    background: -webkit-linear-gradient(top, #00a5ff 0%, #0085cf 100%);
    background: linear-gradient(top, #00a5ff 0%, #0085cf 100%);
    border-radius: 6px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px #bbb;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#floorplan-header .form button
{
    height: auto;
    padding: 5px 0 8px;
    line-height: 1.5;
    top: 5px;
}
#floorplan-header .form button:disabled
{
    background: #d9d9d9;
    opacity: 0.8;
}
.floorplan-update a.changeimage
{
    background: #ededed;
    background: -o-linear-gradient(top, #fff 0%, #ececec 100%);
    background: -moz-linear-gradient(top, #fff 0%, #ececec 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #ececec 100%);
    background: linear-gradient(top, #fff 0%, #ececec 100%);
    color: #555;
    font-weight: normal;
    margin-left: 10px;
}

#floorplan-unity { position: relative; } 
#floorplan-unity p { text-align: center; color: #999; font-size: 14px; padding-top: 4em; }

.floorplan-measurement { padding: 15px 0; }
.floorplan-measurement form
{
    margin: 0 45px;
    padding: 5px 0;
    color: #f4f4f4;
    
    background: #65a9cf;
    background: -o-linear-gradient(top, #85bedc 0%, #468cbc 100%);
    background: -moz-linear-gradient(top, #85bedc 0%, #468cbc 100%);
    background: -webkit-linear-gradient(top, #85bedc 0%, #468cbc 100%);
    background: -ms-linear-gradient(top, #85bedc 0%, #468cbc 100%);
    background: linear-gradient(top, #85bedc 0%, #468cbc 100%);
    
    border-radius: 10px;
    border: 1px solid #7eb3ce;
    box-shadow: 0 1px 3px #ccc;
}

    .floorplan-measurement form .wrap
    {
        margin: 0 15px;
        background: url('img/icon-info-white.png') 0 50% no-repeat;
        padding-left: 31px;
        position: relative;
    }
    /* CONTROL MODE */
    #controlMode {
        height: auto;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
    #controlMode .wrap {
        overflow: auto;
        padding: 8px 15px;
    }
    #controlMode p {
        float: left;
        margin: 0;
    }
    #controlMode .inputs {
        float: right;
    }
    /* LINE CONTROLLER */
    #measurement form p { font-size: 14px; margin-right: 100px; margin-bottom: 0; }
    #measurement form .input { position: absolute; right: 0; top: 0; }
    #measurement form input
    {
        border: none;
        height: 22px;
        text-align: right;
        margin-top: 5px;
        padding: 0 4px;
        
        background: #fafafa;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px #444;
    }
    /* GRID CONTROLLER */
    #grid p {
        font-size: 12px;
        margin-right: 100px;
        margin-bottom: 0;
    }
    #grid .inputs {
        position: absolute; 
        right: 0; 
        top: 0;
    }
    #gridSizeSelect {
        position: relative;
        top: 7px;
    }
		
/* Forms
----------------------------------------*/
.form-field { 
    position: relative;
    font-size: 117%;
    margin-bottom: 1.5em;
}
.form-field label {
    color: #bababa;
}
.form-field .text, 
.form-field .text-box {
    line-height: normal;
    padding: .4em .5em;
    color: #323232;
    border: none;
    width: 100%;
    background: #f9f9f9;
    
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.form-field select {
}
.form-buttons {
}
#marketing label {
    float: none;
    display: block;
    width: auto;
}
#marketing input {
    margin-right: 0.75em;
}


/* VividPlatform logo (and link?)
----------------------------------------*/
a.vividplatform
{
	display: block;
	width: 100px;
	height: 100%;
	text-indent: -9999em;
	background: url('img/vividplatform-dark.png') 0 50% no-repeat;
	outline: none;
	position: absolute;
	right: 1em;
	bottom: 0;
    background-size: 100%;
}

a.customerlink
{
	width: 100px;
	height: 18px;
	position: absolute;
	right: 230px;
	bottom: 10px;
	color: white;
	font-size:12px;
}

div#footer
{
    display: none;
    height: 0;
}


/* Login / facebook toolbars */
div#custom-controls
{
    position: relative;
    text-align: center;
}

#loginDiv
{
    background: #f8faf7;
    width: 28em;
    padding: 1.5em 2em;
}
    #loginDiv h1 {
        font-size: 2em;
        margin-bottom: 0.75em;
    }
    #loginDiv .form-field { position: relative; }
	#UserName-label, #Password-label
    {
        line-height: normal;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
        padding: 0.5em 0;
        width: 6em;
        margin-left: 0.75em;
        color: #bababa;
    }
	#UserName, #Password
    {
        line-height: normal;
        font-size: 14px;
        padding: .5em 1em .5em 7.5em;
        color: #323232;
        border: none;
        background: #fff;
        /*margin-bottom: 1em;*/
        width: 100%;
        
        border-radius: 0;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    #RememberMe-label
    {
        margin-left: 1em;
        font-size: 14px;
        padding: 0.5em 1em;
        color: #323232;
    }
	#login-button
    { 
        padding: 0.5em 1.5em;
	}
    #loginDiv a.button { padding-top: 0.4em; padding-bottom: 0.4em; }

/* Login controls */
#header, #categories { top: -2em; }
.user-controls,
.login-controls
{
    text-align: center;
    position: relative;
    top: -2em;
    height: 2em;
    background: transparent;
    width: 100%;
    display: none;  /*JANNE: TO SHOW LOGIN, COMMENT THIS*/
}
    .user-controls .user-control,
    .login-controls .login-control 
    {
        display: inline-block;
        position: relative;
        height: 2em;
        top: 2em;
        line-height: 1.83333333333333;
        width: 100%;
        padding: 0;
        margin: 0;
        color: white;
        background: #333132;
        text-align: right;
    }
    .login-controls .login-control a { text-decoration: none; color: white; display: block; height: 100%; float: right; outline: none; text-transform: uppercase; }
    .login-controls .login-control a.login-button { padding: 0 8px 0 10px; }
    .login-controls .login-control a#fb-login { padding: 0 10px 0 8px; border-left: 1px solid #666; }

#userinfo-area
{
    padding: 0 1em;
}
    #userinfo-area .user-info { float: left; margin-right: 1em; }
    #userinfo-area a { margin-left: 1em; text-decoration: none; color: #fff; text-transform: uppercase; }
    #userinfo-area a:hover { color: #fff; }


.breadcrumbs
{
    /*display: inline-block;*/
    width: auto;
    display: none;
}

.breadcrumbs a
{
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 1em;
}

/* Installer*/
.installLayer
{
	color: #555;
	font-size: 15px;
	line-height: 21px;
	height: 250px;
	left: 50%;
	margin: -125px 0px 0px -212px;
	padding: 1px;
	position: absolute;
	top: 50%;
	width: 425px;
	text-align: left;
}

.installLayer .wrap { margin: 50px 15px 10px; }

/* extra lib stuff */
.libTable
{
	/*color:#595959;*/
	color:#FFFFFF;
	border:1px;	
	margin:0px;
	padding:0px;
	margin-bottom:5px;
}

.libCategoryHeader
{
	font-size:16px;
	font-weight:bold;
	text-align:center;
	height:25px;
	width:100%;
}

.libWidthHeader
{
	font-size:12px;
	text-align:center;
	border:1px solid;
	border-color:Black;
}

.libHeightCell
{
	width:15px;
	/*border-top:1px solid #989898;*/
	text-align:center;
}


.libCell
{
	vertical-align:top;
	border-top:1px solid #989898;
	border-right:1px solid #989898;
	text-align:center;
	font-size:10px;
	width:75px;
	cursor:default;
}

.tableThumb
{
	cursor:pointer;	
}

.materialLibTable
{
	color:#FFFFFF;
	padding:8px;
	border:0px;
	width:100%;
}

.materialLibImage
{
	/*border:2px solid;*/
	padding:3px;
	cursor:pointer;
}

.materialLibImageDisabled
{
	/*border:2px solid;*/
	padding:3px;
}

.materialLibText
{
	font-size: 10px;
	cursor:default;
}

.materialLibTextDisabled
{
	font-size: 10px;
	color: #606060;
	cursor:default;
}


.combinationsCategory
{
	font-size:11px;
	font-weight:bold;
	text-align:left;
	padding-left:5px;
	padding-top:10px;
	/*width:100%;*/
	color:#989898;
	cursor:pointer;
}

.combinationsThumb
{
	margin-top:5px;
	margin-bottom:5px;
	margin-left:15px;
	border:2px solid white;
	cursor:pointer;
}


/* jQuery UI Slider
 * Modified for measure-property-editor in VividPlatform
 *********************************************************/
.measure-property-editor { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #d9d9d9; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.measure-property-editor:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.measure-property-editor .name { width: 5em; display: block; float: left; }
.measure-property-editor .value { width: 4em; display: block; float: left; }
.measure-property-editor .value input { width: 2.5em; }
.measure-property-editor-slider { width: 8.9em; float: left; }

.ui-slider-horizontal { height: 4px; margin: 0.65em 0 0; background: #4d4d4d; border: none; }
.ui-slider-horizontal .ui-slider-handle { height: 13px; width: 13px; background: url('img/slider-tab.png') 0 0 no-repeat; border: none; padding: 0; margin-left: -7px; top: -4px; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }


/* Quickslider sliders: flexcontrols etc
-------------------------------------------------------------------*/
.flexcontrol {
    margin-bottom: 1.5em;
    border-bottom: 1px solid #777;
    padding-bottom: 1em;
}
#library-options h3.flexcontrol-title {
    margin: 0 0 0.5em;
}
.flexcontrol-panel {
    padding: 0 2em;
    height: 2em;
    position: relative;
}
.flexcontrol-plus,
.flexcontrol-minus {
    width: 2em; 
    height: 2em;
    display: block; 
    position: absolute; 
    top: 0;
    text-decoration: none;
}
.flexcontrol-plus {
    right: 0;
    text-indent: -9999em;
    background: url('img/icon-light-plus.png') 50% 50% no-repeat;
}
.flexcontrol-minus {
    left: 0;
    text-indent: -9999em;
    background: url('img/icon-light-minus.png') 50% 50% no-repeat;
}


.quickslider-horizontal .quickslider-slider
{
	height: 0.4em; 
	margin: 0 0.75em; 
	background: #888; 
	border: none;
	position: relative;
	overflow: visible;
    top: 0.9em;
}

.quickslider-vertical .quickslider-slider
{
	height: 10em;
	width: 0.4em;
	margin: 0.5em 0.5em; 
	background: #4d4d4d; 
	border: none;
	position: relative;
	overflow: visible;
}

.quickslider-handle
{
	width: 1em;
	height: 1em;
	position: absolute;
	
	top: -0.35em;
	left: 0;
	margin-left: -0.5em;
	
	border-radius: 0.5em;
	background: #ddd;
	cursor: pointer;
}

.quickslider-vertical .quickslider-handle
{
	top: auto;
	left: -0.35em;
	bottom: 0;
	margin-bottom: -0.5em;
	margin-left: 0;
}

.quickslider-label
{
	width: 5.5em;
	height: 1.75em;
	position: absolute;
	
	right: -2.85em;
	top: -3em;
	margin-left: -1.5em;
	
	border: 1px solid #BBB;
	background: white;
	
	line-height: 1.75;
	text-align: center;
	color: #888;
}

.quickslider-vertical .quickslider-label
{
	top: auto;
	bottom: 0;
	left: 1em;
	margin-bottom: -0.8em;
	margin-left: 0;
}

/* */
.flexcontrol-panel input { 
    /*
	height: 0; width: 0; font-size: 0; border: none; background: transparent; position: absolute; left: 999999em; outline: none; 
	*/
    display: none;
}


/* Popover styles
 *********************************************************/
#cboxOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000; 
}
#colorbox
{
    box-shadow: 0 0.2em 3em black;
    /*border-radius: 5px;*/
}
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxMiddleLeft,
    #cboxMiddleRight,
    #cboxTopCenter,
    #cboxBottomCenter { display: none; }
    #cboxContent
    {
        background: #fff;
        overflow: visible;
        /*border-radius: 5px;*/
    }
        .cboxIframe{background:transparent;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:0;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxLoadingOverlay{background:url(img/cbox-loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(img/cbox-loading.gif) no-repeat center center;}
        
        #cboxClose 
        {
            position: absolute;
            text-indent: -9999px;
            top: 1em;
            right: 1em;
            
            width: 16px;
            height: 16px;
            background: url(img/sprite.png) -346px -422px no-repeat;
            z-index: 10;
        }
 
#vwmodal-overlay {
	position: fixed;
	z-index:10000;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	background: #000;
	display: none;
}
#vwmodal-container {
	position: absolute;
	z-index:10100;
	top: 0;
	left: 0;
    overflow: visible;

    background: #fff;
    box-shadow: 0 0.2em 3em black;
    
	display: none;
}
#vwmodal-title {
	position: relative;
    overflow: auto;
    z-index: 10;
}
#vwmodal-content {
	position: relative;
    overflow: auto;
}
#vwmodal-close {
    cursor: pointer;
    position: absolute;
    text-indent: -9999px;
    top: 0.75em;
    right: 0.75em;
    
    width: 32px;
    height: 32px;
    background: transparent url(img/sprite.png) -338px -414px no-repeat;
    z-index: 10;
}
#vwmodal-loader {
    width: 320px;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -110px;
    margin-left: -160px;
    background: #f3f3f3 url('img/loader-dark-beam.gif') 50% 50% no-repeat;
    z-index: 10100;
}
.vwmodal-iframe {
	width:100%; 
	height:100%; 
	display:block; 
	border:0;
}

.popover
{
   /*border-radius: 5px;*/
}
.popover-titlearea
{
    background: #f7f7f7;
    border-bottom: 1px solid #ccc;
    
    background:    -moz-linear-gradient(top, #f7f7f7 0%, #ddd 100%);
    background:     -ms-linear-gradient(top, #f7f7f7 0%, #ddd 100%);
    background: -webkit-linear-gradient(top, #f7f7f7 0%, #ddd 100%);
    background:      -o-linear-gradient(top, #f7f7f7 0%, #ddd 100%);
    background:         linear-gradient(top, #f7f7f7 0%, #ddd 100%);
    /*border-radius: 5px 5px 0 0;*/

    position: fixed;
    width: 100%;
    height: 3.5em;
    z-index: 10;
}
    #vwmodal-title h1,
    .popover-titlearea h1 {
        margin: 0 0 0 1.3333em;
        font-size: 1.5em;
        line-height: 2.3333;
    }
.popover-contentarea
{
    background: #fff;
    color: #323232;
    position: relative;
    overflow: auto;
}
.popover-maincontent,
.popover-highlightarea
{
    padding: 1.5em 2em;
}
.popover-highlightarea 
{
    background: #f3f3f3;
}


/* Confirm & alert dialog
 *********************************************************/
.confirm-dialog {
    color: #fff;
    width: 24em;
    padding: 1.5em 2em 1em;
    text-align: center;
}
    .confirm-dialog .popover-contentarea {
        padding-top: 0;
    }
    .confirm-dialog .buttons { margin-bottom: 0; }
    .alert-modal-confirm {
        width: 6em;
        text-decoration: none;
        display: inline-block;
        margin-right: 1em;
    }
    .alert-modal-cancel {
        width: 6em;
        text-decoration: none;
        display: inline-block;
        background: #B7B7B7;
    }


/* Session timed out dialog
 *********************************************************/
.session-timedout-dialog
{
    width: 33em;
    /*height: 15em;*/
}


/* Save dialog
 *********************************************************/
.save-dialog
{
    width: 30em;
    /*height: 15em;*/
}

.saveform-newfolder {
    border-top: 1px dotted #ddd;
    padding-top: 1.5em;
}
.saveform-folder-select {
    /*width: 47.5%;
    float: left;*/
    margin-bottom: 1em;
    width: 100%;
}
/*.saveform-addfolder-btn, */
#newFolderName {
    /*width: 47.5%;
    float: left;
    margin-left: 5%;*/
    margin-bottom: 1em;
}
#newFolderName {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
.saveform-addfolder-btn,
.saveform-addfolder-cancel {
    color: #404040;
    text-decoration: none;
}
.saveform-addfolder-btn .icon,
.saveform-addfolder-cancel .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    background: url('img/sprite.png') -346px -1038px no-repeat;
}
.saveform-addfolder-cancel .icon {
    background-position: -346px -422px;
}
.saveform-addfolder-cancel {
    float: right;
    clear:both;
    margin-top: 0.75em;
}
.saveform-buttons {
    border-top: 1px dotted #ddd;
    padding-top: 1.5em;
}

/* Load dialog
 *********************************************************/
.load-dialog
{
    width: 55em;
    /*height: 50em;*/
}

.load-dialog .popover-highlightarea .form-field {
    margin: 0.5em 0;
}
.load-dialog .popover-highlightarea input {
    float: left;
    width: 12em;
    margin-right: 0.5em;
    border-radius: 2em;
    background: #fff;
}

.load-dialog-controls {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
}
    .load-dialog-controls .button {
        padding: 0.5em 1em;
        line-height: 1;
    }
.load-dialog-controls-folder {
    height: 3em;
}
.load-dialog-layout {
    float: left;
}
.load-dialog-sortorder {
    float: left;
    margin-left: 3em;
}
    .load-dialog-sortorder .button {
        line-height: 16px;
    }
        .load-dialog-sortorder .button .icn {
            visibility: hidden;
            display: inline-block;
            background: url('img/desc.png') 50% 80% no-repeat;
            width: 1em;
            height: 1em;
        }
        .load-dialog-sortorder .button.asc .icn {
            background: url('img/asc.png') 50% 80% no-repeat;
        }
        .load-dialog-sortorder .button.selected .icn {
            visibility: visible;
        } 
.load-dialog-search {
    position: absolute;
    
    border-radius: 2em;
    width: 16em;
    top: 0;
    right: 0;

    background: #f8f8f8;
    line-height: normal;
    padding: .4em .5em;
    color: #555;
    border: 1px solid #cdcdcd;
    /*box-shadow: inset 0 1px 3px #ccc;*/
}
.load-dialog-search input {
    border: none;
    background: #f8f8f8;
    width: 12.5em;
}
#load-dialog-search-cancel { display: block; height: 14px; width: 14px; position: absolute; top: 10px; right: 6px; text-indent: -9999em; outline: none; overflow: hidden; background: url('img/fakefileinput-reset.png') right top no-repeat; }
#load-dialog-search-cancel:hover { background-position: 0 -14px; }
.load-dialog-header {
    margin-bottom: 2em;
}
.load-dialog-header h2 {
    font-size: 2em;
    line-height: 1;
    float: left;
    color: #666;
    width: 19em;
}
.load-dialog-header .button {
    float: right;
    display: none;
}
.load-dialog-header .button.confirm {
    background: #d55;
    color: white;
}

/* list view */
.savedconfigurations-list td, .savedconfigurations-lis th
    {
        padding: 0.5em 1.5em 0.5em 0;
        border-bottom: 1px solid #dfdfdf;
        line-height: 2;
    }
    .combo-row .combo-date { width: 8em; text-align: left; }
    .combo-row .combo-id { width: 4em; text-align: left; }
    .combo-row .combo-name { width: auto; text-align: left; }
    .combo-row .combo-funcs { width: 10em; padding-right: 0; text-align: right; position: relative; }
    .combo-row .delete-confirm 
    {
        display: none;
        position: absolute; 
        width: 100%; 
        height: 100%; 
        background: #fff; 
        top: 0; 
        left: 0;
    }
        .combo-row .delete-confirm .button { margin-top: 0.5em; margin-right: 0; background: #d55; color: white; border: none; line-height: 2; }
        .combo-row .delete-confirm .button:hover { background: #e88; }

    .combo-row .load-combo,
    .combo-row .delete-combo 
    { 
        text-decoration: none; 
        color: #444; 
        margin-left: 4px; 
        display: inline-block; 
        width: 2em; 
        height: 2em;
        vertical-align: middle;
    }
        .combo-row .load-combo {  background: url('../../Content/images/icon-load-small.png') 50% 50% no-repeat; }
        .combo-row .delete-combo { background: url('../../Content/images/icon-delete-small.png') 50% 50% no-repeat; }
        .combo-row .load-combo span, .combo-row .delete-combo span { display: none; }

/* tile view */
.savedconfigurations-tiled {
    vertical-align: top;
}
    .combo-tile {
        /*float: left;*/
        display: inline-block;
        vertical-align: top;
        width: 11em;
        margin-right: 2em;
        margin-bottom: 2em;
        position: relative;
    }
    .combo-tile.n4 {
        margin-right: 0;
    }
    .combo-tile .combo-image {
        width: 132px;
        height: 0;
        padding-bottom: 100%;
    }
    .combo-tile .combo-image img {
        width: 100%;
        vertical-align: middle;
    }

    .combo-tile a {
        color: #555;
        text-decoration: none;
    }
    .combo-tile .combo-date { display: block; color: #888; }
    .combo-tile .combo-id { display: block; color: #888; }
    .combo-tile .combo-name { display: block; font-weight: bold; width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; /*overflow: hidden;*/ }

    .combo-tile .delete-combo 
    { 
        text-decoration: none; 
        color: #444; 
        margin: 0; 
        display: block; 
        width: 3em; 
        height: 3em;
        vertical-align: middle;
        background: url('img/icon-dark-remove.png') 50% 50% no-repeat;

        position: absolute;
        top: -1.3em;
        right: -1.3em;
    }
        .combo-tile .delete-combo span { display: none; }
    .combo-tile .delete-confirm 
    {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;

        background: #333;
        background: rgba(0,0,0,0.8);
    }
        .combo-tile .delete-confirm .button { margin-top: 2em; margin-right: 0; background: #d55; color: white; border: none; line-height: 2; }
        .combo-tile .delete-confirm .button:hover { background: #e88; }
 


/* Share dialog
 *********************************************************/
.share-dialog
{
    width: 44em;
    /*height: 20em;*/
    min-height: 30em;
}
    .share-dialog .popover-maincontent {
        min-height: 10em;
    }
    .share-block
    {
        border-top: 1px dotted #ccc;
        padding: 15px 0 10px;
    }


/* Feedback dialog
 *********************************************************/
.feedback-dialog
{
    width: 50em;
}


/* Register dialog
 *********************************************************/
.register-dialog
{
    width: 34em;
}
    .register-dialog #marketing label {
        float: none;
        display: block;
        margin: 0;
        width: auto;
    }
    .register-dialog #marketing input {
        margin-right: 0.75em;
    }
    .register-dialog #Password {
        line-height: normal;
        padding: .4em .5em;
        color: #555;
        border: 1px solid #cdcdcd;
        width: 100%;
    }


/* Password reset dialog
 *********************************************************/
.passwordreset-dialog
{
    width: 34em;
}


/* Edit Profile dialog
 *********************************************************/
.editprofile-dialog
{
    width: 34em;
}
    .editprofile-dialog #marketing label {
        float: none;
        display: block;
        margin: 0;
        width: auto;
    }
    .editprofile-dialog #marketing input {
        margin-right: 0.75em;
    }
    .editprofile-dialog #Password {
        line-height: normal;
        padding: .4em .5em;
        color: #555;
        border: 1px solid #cdcdcd;
        width: 100%;
    }


/* Ajaxloaders
 *********************************************************/
.loader, .ajaxloader
{
    position: relative;
    background: url('img/loader-dark-beam.gif') 50% 50% no-repeat;
}
.loader-light, .ajaxloader-light {
    background-image: url('img/loader-light-beam.gif');
    background-color: #222;
    border-radius: 6px
}
.ar-upload-loader {
    height: 8em;
    margin-bottom: 1em;
}
.load-dialog .loader {
    height: 8em;
    margin-bottom: 1em;
}

/* Client not supported info etc
 *********************************************************/
.clientinfo {
    background: #fafafa;
    height: 100%;
    padding: 0 6em;
    box-shadow: inset 0 0 4rem rgba(0,0,0,0.05);
}

    .clientinfo p {
        text-align: center;
        color: #666;
        font-size: 1.3333em;
    }

    .clientinfo table,
    .clientinfo table td {
        vertical-align: middle;
        height: 100%;
        width: 100%;
    }

.appstore-link {
    display: block;
    margin: 2rem auto 0;
}


/* EU Cookie Law implementation
 *********************************************************/
.vweuropolicy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    color: #fff;
    padding: 1.5em 2em;
}

.vweuropolicy-text {
    display: inline-block;
    padding: 0.5em 0;
    margin-right: 18em;
}

.vweuropolicy-accept {
    text-decoration: none;
    color: white;
    background: green;
    padding: 0.5em 1em;
    
    position: absolute;
    top: 50%;
    right: 2em;
    margin-top: -1.25em;

    border-radius: 2px;
}

.vweuropolicy-dialog  {
    width: 44em;
}
.vweuropolicy-dialog .popover-maincontent {
    padding-top: 0;
}
.vweuropolicy-information h2 {
    font-size: 1.4em;
    margin: 0.75em 0 0.5em;
}
.vweuropolicy-information h3 {
    text-transform: uppercase;
}
.vweuropolicy-information ul {
    margin: 1em 0;
}
.vweuropolicy-information li {
    display: list-item;
    list-style: disc;
    margin: 0.5em 0 0.5em 1.5em;
}