:root
{
	--primary: #313c70;
	--secondary: #313c70;
	--tertiary: #B2B2B2;
	
	--placeholder-color: #cccccc;
	
	--bg-color: white;
	--bg-white: rgb(255 255 255 / 88%);
	--bg-black: rgba(0,0,0,.6);
	
	--white: white;
	
	--max-width: 1360px;
	
	--header-height: 120px;
	--footer-height: 120px;
	
	--gradient-main:	linear-gradient(90deg, #a8c7ed 0%, #4772a5 100%);
	--gradient-blue:	linear-gradient(90deg, rgb(187,204,243) 0%, rgb(99,169,252) 100%);
	--gradient-fucsia:	linear-gradient(90deg, rgba(249,159,235) 0%, rgba(146,15,171) 100%);
	--gradient-green:	linear-gradient(90deg, rgba(161,249,159) 0%, rgba(39,171,15) 100%);
	--gradient-orange:	linear-gradient(90deg, rgba(249,203,159) 0%, rgba(236,102,6) 100%);
	--gradient-purple:	linear-gradient(90deg, rgba(219,159,249) 0%, rgba(156,6,236) 100%);
	--gradient-teal:	linear-gradient(90deg, rgb(255,210,248) 0%, rgb(225,69,255) 100%);
	
	--font-weight-light: 400;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
	--font-weight-black: 900;
}

::-webkit-input-placeholder{color: var(--placeholder-color);text-transform: none;}
:-ms-input-placeholder{color: var(--placeholder-color);text-transform: none;}
::placeholder{color: var(--placeholder-color);text-transform: none;}

*
{
/* 	-webkit-touch-callout: none; */
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

html,
body
{
	margin: 0;
	padding: 0;
	

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-light);
}

body
{
	width: 100vw;
	min-height: 100vh;
	
	background-color: var(--bg-color);
	background-image: url('img/layout/bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrapper
{
	position: relative;
	
	margin: 0 auto;
	
	width: 98vw;
	height: 100vh;
	
	max-width: var(--max-width);
}

header
{
	position: fixed;
	left: 0;
	top: 0;
	
	width: 100%;
	height: 110px;
	
	background-color: var(--bg-black);
}

header div
{
	position: relative;
	
	width: 98%;
	height: 100%;
	max-width: var(--max-width);
	
	margin: 0 auto;
	
	text-align: center;
	
	background-image: url('img/layout/logo_white.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 40%;
}

header div .title
{
	width: 35%;
	height: 1px;
}

header div button
{
	position: absolute;
	
	right: 0;
	top: calc(50% - 12px);
}

section
{
	width: 100%;
	min-height: calc(100vh - calc(var(--header-height) + var(--footer-height)));
	
	padding: var(--header-height) 0 0 0;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	text-align: center;
}

footer
{
	width: 100%;
	height: var(--footer-height);
	
/* 	background-image: url('img/layout/footer.svg'); */
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}

button:not(.dt-button)
{
	margin: 10px 0;
	padding: 6px 10px;
	
	text-transform: uppercase;
	
	font-size: 15px;
	
	color: var(--white);
	
	background: var(--primary);
	background-position: left top;
	background-repeat: repeat-x;
	background-size: contain;
	
	border: none;
	border-radius: 3px;
	
	box-shadow: 0px 2px 0px 0px rgba(0,0,0,.3);
	
	cursor: pointer;
	
	transition: all .3s ease-in-out;
}

/*
button.blue{	background: var(--gradient-blue);}
button.fucsia{	background: var(--gradient-fucsia);}
button.green{	background: var(--gradient-green);}
button.orange{	background: var(--gradient-orange);}
button.purple{	background: var(--gradient-purple);}
button.teal{	background: var(--gradient-teal);}
*/

/*
button.a.blue{	background-image: url('img/gradients_ud/blue.png');}
button.a.fucsia{background-image: url('img/gradients_ud/fuia.png');}
button.a.green{	background-image: url('img/gradients_ud/gren.png');}
button.a.orange{background-image: url('img/gradients_ud/orge.png');}
button.a.purple{background-image: url('img/gradients_ud/pure.png');}
button.a.teal{	background-image: url('img/gradients_ud/teal.png');}
*/

button.busy
{
	opacity: .8;
	
	transform: scale(.9);
	
	pointer-events: none;
}

.box.on
{
	position: relative;
}

.top_buttons
{
	position: absolute;
	right: 10px;
	top: 10px;
}

.box
{
	margin: 0;
	padding: 20px;
	
	display: inline-block;
	
	max-width: calc(100% - 40px);
	
	background-color: var(--bg-white);
	
	border-radius: 5px;
	
	text-align: left;
	
	color: var(--primary);
	
	transition: all .3s ease-in-out;
}

.box.hidden
{
	position: absolute;
	
	transform: scale(.7);
	
	opacity: 0;
	
	pointer-events: none;
}

.box.center
{
	text-align: center;
}

.box h1
{

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-regular);
	font-size: 21px;
}

.box input[type=text],
.box input[type=email],
.box input[type=password],
.box select
{
	min-width: 260px;
	
	margin: 5px 0;
	padding: 8px 6px;
	
	color: var(--primary);
	
	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-light);
	font-size: 15px;
	
	border: solid 1px var(--primary);
	border-radius: 5px;
	
	box-sizing: border-box;
}

.box input[type="email"]
{
	text-transform: lowercase;
}

.box p
{

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-light);
	font-size: 14px;
}

.box a
{

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-light);
	font-size: 14px;
	
	color: inherit;
}

.box .content
{
	position: relative;
	
	width: 100%;
}

.box .half,
.box .third,
.box .two-thirds
{
	display: inline-block;
	
	vertical-align: top;
	
	margin: 0;
	padding: 0;
}

.box .half{width: 49.89%;}
.box .third{width: 32.89%;}
.box .two-thirds{width: 64.89%;}

#menu
{
	position: fixed;
	left: 0;
	top: 0;
	
	z-index: 200;
	
	width: 100vw;
	height: 100vh;
	
	color: white;
	
	background-color: rgba(0,0,0,.6);
	
	opacity: 0;
	
	transition: all .2s ease-in-out;
	
	pointer-events: none;
}

#menu.on
{
	opacity: 1;
	
	pointer-events: all;
}

#menu .c
{
	position: absolute;
	left: 0;
	top: 0;
	
	width: 280px;
	height: 96vh;
	
	padding: 2vh 20px;
	
/* 	background: var(--gradient-main); */
	background-color: var(--bg-white);
/*
	background-image: url('img/gradients_ud/blue.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
*/
	
	opacity: 0;
	
	transform: translateX(-300px) scaleX(.9);
	
	pointer-events: none;
	
	transition: all .4s ease-in-out;
}

#menu.on .c
{
	opacity: 1;
	
	transform: translateX(0) scaleX(1);
	
	pointer-events: all;
}

#menu .c h2
{

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-regular);
	font-size: 24px;
	
	color: var(--primary);
	
	margin: 0;
	padding: 0;
}

#menu .c div
{
	position: absolute;
	left: 280px;
	top: 20px;
	
	cursor: pointer;
}

#menu .c span
{
	width: 100%;
	
	margin: 10px 0;
	padding: 5px 0 10px 0;
	
	font-size: 14px;
	
	display: block;
	
	border-bottom: solid 1px var(--primary);
	
	cursor: pointer;
	
	color: var(--primary);
}

#menu .c span.active
{

	font-family: 'Open Sans', sans-serif;
	font-weight: var(--font-weight-regular);
	font-size: 16px;
	
	background-image: url('img/layout/arrow.svg');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 35%;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input
{
	color: var(--primary) !important;
	
	font-size: 12px !important;
}

.dt-buttons button.dt-button
{
	background-color: var(--primary);
	border-color: var(--primary);
	
	color: white;
}

.dt-buttons button.dt-button:hover:not(.disabled),
.dt-buttons div.dt-button:hover:not(.disabled),
.dt-buttons a.dt-button:hover:not(.disabled),
.dt-buttons input.dt-button:hover:not(.disabled)
{
	background: none;
	background-color: var(--primary) !important;
	border-color: var(--primary);
	
	color: white;
}

.dt-text-left{text-align: left;}
.dt-text-center{text-align: center;}
.dt-text-right{text-align: right;}

.dt-nowrap{white-space: nowrap;}
.dt-hide-text-overflow{overflow: hidden;text-overflow: ellipsis;max-width: 100px;}

table button
{
	margin: 0 !important;
}

.menu_trigger
{
	background-color: white !important;
	color: var(--primary) !important;
}

#preloader
{
	position: fixed;
	left: 0;
	top: 0;
	
	width: 100vw;
	height: 100vh;
	
	background-color: var(--primary);
	background-image: url('img/layout/preloader.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px auto;
	
	z-index: 99999;
	
	transition: opacity .4s ease-out;
}

#preloader.off
{
	pointer-events: none;
	
	opacity: 0;
}

fieldset
{
	margin: 10px 20px 0 0;
	padding: 0;
	
	border: none;
}

.quote_info
{
	width: 100%;
	min-height: 50px;
	
	display: grid;
	grid-template-columns: 50% 50%;
}

.quote_info > img
{
	justify-self: start;
	
	align-self:center
}

.quote_info > div
{
	font-size: 13px;
	
	text-align: right;
	
	align-self:center;
	
	max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#quote_id_container
{
	display: none;
}

.extra-space{display: none;}
@media print{.extra-space{display: table-row;}}