/*_____________________________________________________________________________

    STRUCTURE

    - BASE
    - ELEMENTS
    - BLOCK CONTENT
    - MODULE
    
    INFO: 
    ASIC Font:
    http://patorjk.com/software/taag/#p=display&f=Slant&t=GENERAL%0A
    http://patorjk.com/software/taag/#p=display&f=Calvin%20S&t=%0A
________________________________________________________________________________*/




/*___________________________________________________________

    GENERAL STYLES: BASE START
____________________________________________________________*/

html, body {
    height: 			100%;
    width: 				100%;
    padding: 			0;
    margin: 			0;
    min-height: 		100vh;
    color:				rgba(255,255,255,0.91);
    font-family: 		"Roboto", sans-serif !important;
}

h5{
    font-size: 1.3vw
}

.small-text{
    font-size: 13px;
}

p{
    color:				rgba(255,255,255,0.91);
}

/* generalStructe and main are for the sticky footer */
.generalStructure {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.main {
    flex: 1 0 auto;
}

#content{
    padding-bottom:		60px;
}

@media only screen and (min-width: 993px){
    .container {
        width: 90%;
    }
}

@media only screen and (min-width: 1201px){
    .container {
        width: 75%;
    }
}


.container {
    max-width: 1400px;
}

/*.footerContainer{
    z-index: 101;
}*/

footer.page-footer{
    height: 			50px;
    bottom: 			0;
    width: 				100%;
    margin-top: 		0px;
    padding-top: 		0px;
    background-color: 	#37474f;
/*    z-index:		 	101;*/
}

.padding-bottom{
    padding-bottom: 	10px;
}

.padd5-T-B {
    padding-bottom: 	5%;
    padding-top: 		5%;
}

.overridea *{
    color:				rgba(255,255,255,0.91);
}

.overrideaselected *{
    color: 				#009fe3;
}

a:focus {
    outline: 			none;
}

.collection {
    border: 			none;
}

.collapsible {
    border: 			none;
}

.full-size {
    height: 			100%;
    width: 				100%;
}

label {
    color: 				rgba(255,255,255,0.91);
}


/*___________________________________________________________

    HEADER
____________________________________________________________*/

h1{
    margin-top: 		20px;
    margin-right: 		0px;
    margin-bottom: 		10px;
    margin-left: 		0px;
}

h2{
    margin-top: 		15px;
    margin-right: 		0px;
    margin-bottom: 		5px;
    margin-left: 		0px;
}

h3{
    margin-top: 		0px;
    margin-right: 		0px;
    margin-bottom:		0px;
    margin-left: 		0px;
}

h4{
    margin-top: 		0px;
    margin-right: 		0px;
    margin-bottom: 		5px;
    margin-left: 		0px;
}


/* Large Devices, Desktops */
@media only screen and (min-width: 1201px) {

    .title i {
        font-size: 		3.56rem;
    }

}

/* Large Devices, Desktops */
@media only screen and (max-width: 1200px) {

    .title i {
        font-size: 		3.56rem;
    }

}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px){
    nav.nav-extended {
        height: 		64px;
    }
    .nav-wrapper-backend {
        margin-right: 	2.25em;
        margin-left: 	0em;
        padding-left: 	0.75em;
        padding-right: 	0.75em;
    }
    h2 {
        display: 		block;
        font-size: 		1.60rem;
        margin-left: 	0;
        margin-right: 	0;
    }
    h4{
        /* font-size: 		1.40rem !important; */
    }
    h5{
        font-size:		1.24rem;
    }
    .title i {
        font-size: 		3.56rem;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    h2 {
        display: 		block;
        font-size: 		1.60rem;
        margin-left: 	0;
        margin-right: 	0;
    }
    .title i {
        font-size: 		2.5rem;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    h2 {
        display: 		block;
        font-size: 		1.60rem;
        margin-left: 	0;
        margin-right: 	0;
    }
    .title i {
        font-size:	 	2rem;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {

}

.collapsible-header:not(.panorama-viewer .collapsible-header):not(.ch) {
    background-color: 	rgba(84, 110, 122, 0.4);
    border-bottom: 		0px solid #ddd;
    margin-bottom: 		1px;
    line-height: 		2rem;
    min-height: 		none;
    padding:			0;
}

div.spinner {
    float: 				left;
    background-image:	url(/img/icons/loading.gif);
    background-repeat: 	no-repeat;
    width: 				128px;
    height: 			111px;
    background-color: 	transparent;
}


/*___________________________________________________________

    TITLE
____________________________________________________________*/


.title i {
    float: 				left;
    margin-right: 		10px;
}

.title h2 {
    text-align: 		left;
    margin-top: 		0.4em;
    margin-bottom: 		0.4em;
    word-wrap: 			break-word;
    -ms-word-wrap: 		break-word;
}

.progress {
    background-color: 	#ffffff;
}


/*___________________________________________________________

    PADDING
____________________________________________________________*/


@media only screen and (max-width: 992px){
    .padd-0-lr {
        padding-left: 	0px !important;
        padding-right:  0px !important;
    }
}

.padd-3-percent{
    padding:            3%;
}

.padd-1-percent{
    padding:            1%;
}

.zero-padding{
    padding:            0px !important;
}


/*___________________________________________________________

    MARGIN
____________________________________________________________*/

.zero-margin{
    margin:            0px !important;
}

.zero-margin-top{
    margin-top:        0px !important;
}

.margin-top{
    margin-top:        3%;
}

.margin-top-auto{
    margin-top:        auto;
}

.marg-1-percent {
    margin:            1%; 
}

.marg-3-percent-top-right-bottom {
    margin:             0 3% 3% 3%;
}

.marg-right-2-percent{
    margin-right: 2%
}

.marg-left-2-percent{
    margin-left: 2%
}

.marg-left-auto {
    margin-left: auto;
}

.marg-auto {
    margin: auto;
}

/*___________________________________________________________

    ICONS
____________________________________________________________*/


.icon-container i {
    font-size: 			3em;
    margin-bottom:		10px;
}

.icon-container span {
    display: 			block;
}

.icon-container .icon-preview {
    /*height: 120px;*/
    text-align: 		center;
}

.chipicon {
    float: 				left;
    font-size: 			16px;
    line-height: 		32px;
    padding-right: 		8px;
}

@media only screen and (max-width: 992px){
    i.medium.material-icons {
        font-size: 		2rem !important;
    }
}

.custom-icon {
    width: 24px;
    height: 24px;
}


/*___________________________________________________________

    COLOR
____________________________________________________________*/


.immersight-color.text-darken-3{
    color: 				#1D7BA3 !important;
}
.immersight-color.text-darken-2 {
    color: 				#2086B2 !important;
}
.immersight-color.text-darken-1{
    color: 				#2292C1 !important;
}

.immersight-color {
    color: 				#009fe3 !important;
}

.immersight-background-color {
    background-color: 	#009fe3 !important;
}

.immersight-color.text-lighten-1 {
    color: 				#28A9E0 !important;
}
.immersight-color.text-lighten-2{
    color: 				#2BB4EF !important;
}
.immersight-color.text-lighten-3 {
    color: 				#2DC0FF !important;
}

.blue-grey.darken-1 {
    background-color: 	rgba(84, 110, 122, 0.4) !important;
}

.blue-grey.darken-1-solid{
    background-color: 	rgba(84, 110, 122, 1.0) !important;
}

:root {
    --primary-color: #009fe3;
}

.primary-color-foreground {
    color: var(--primary-color);
}

.primary-color-background {
    background-color: var(--primary-color);
}

/*___________________________________________________________

    SHADOW
____________________________________________________________*/


.shadow
{
    box-shadow:		 	0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.noshadow
{
    box-shadow: 		0 0 0 0 rgba(0,0,0,0.14), 0 0 0 0 rgba(0,0,0,0.12), 0 0 0 0 rgba(0,0,0,0.2);
}

#profileImage {
    border-radius: 		50px;
    height: 			30px;
    width: 				30px;
    float: 				left;
    margin-top: 		3px;
    margin-right: 		0px;;
}

blockquote {
    margin: 			20px 0;
    padding-left: 		1.5rem;
    border-left: 		5px solid #009fe3;
}
.shadowOnHover:hover{
    box-shadow: 		0px 1px 14px 3px rgba(33,33,33,1); 
}

/*___________________________________________________________

    GENERAL STYLES: BASE END
____________________________________________________________*/



/*___________________________________________________________

    HTML-ELEMENTS: START
____________________________________________________________*/



/*___________________________________________________________

    TABLES
____________________________________________________________*/


thead {
    font-family: 		sans-serif;
    border-bottom: 		1px solid #d0d0d0;
}

tr {
    border-bottom: 		unset;
}

tbody{
    font-family:        "Roboto", sans-serif !important;
}

/* TABLE BODY */
@media only screen and (max-width: 992px){
    table.responsive-table td {
        padding: 		15px;
        padding-left: 	0%;
    }
}

.requestTable td {
    word-wrap: 		break-word;
}

div.dataTableNavigation .prev, div.dataTableNavigation .next {
    font-weight: normal;
    font-size: 15px;
    position: relative;
    color: #039be5;
    background-color: transparent;
}

.dataview:not(.tablegrid) tbody tr:hover{
    background-color: #249bd3;
    cursor: pointer;
}

/*___________________________________________________________

    INPUT FIELD
____________________________________________________________*/


/* BASE INPUT CONFIGURATIONS */
input, textarea{
    font-family: 		"Roboto", sans-serif;
}

/* FIELDS */
input[type=text]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
textarea.materialize-textarea{
    color:				white;
    /*border-bottom: 		1px solid #37474f;*/
}
textarea {
    color: white;
}

/* LABEL COLOR */
/*
.input-field label {
    color: 				#ffffff;
}
*/
/* LABEL FOCUS COLOR */
.input-field input[type=text]:focus + label,
.input-field input[type=date]:focus + label,
.input-field input[type=password]:focus + label,
.input-field input[type=number]:focus + label,
textarea.materialize-textarea:focus + label {
    color: 				#009fe3 !important;
    color: 				var(--primary-color) !important;
}
/* LABEL UNDERLINE FOCUS COLOR */
.input-field input[type=text]:focus,
.input-field input[type=date]:focus,
.input-field input[type=password]:focus,
.input-field input[type=url]:focus,
.input-field input[type=tel]:focus,
.input-field input[type=number]:focus,
textarea.materialize-textarea:focus {
    border-bottom: 		1px solid #009fe3 !important;
    border-bottom: 		1px solid var(--primary-color) !important;
    box-shadow: 		0 1px 0 0 #009fe3 !important;
    box-shadow: 		0 1px 0 0 var(--primary-color) !important;
}

/* VALID COLOR */
.input-field input[type=text].valid,
.input-field input[type=date].valid,
.input-field input[type=password].valid,
textarea.materialize-textarea.valid {
    border-bottom: 		1px solid #01a901;
    box-shadow: 		0 1px 0 0 #01a901;
}
/* INVALID COLOR */
.input-field input[type=text].invalid,
.input-field input[type=date].invalid,
.input-field input[type=password].invalid,
.input-field input[type=tel].invalid,
textarea.materialize-textarea.invalid {
    border-bottom: 		1px solid #F44336 !important;
    box-shadow: 		0 1px 0 0 #F44336 !important;
}

input:not([type]).invalid ~ .helper-text:after,
input:not([type]):focus.invalid ~ .helper-text:after,
input[type=text]:not(.browser-default).invalid ~ .helper-text:after,
input[type=text]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=password]:not(.browser-default).invalid ~ .helper-text:after,
input[type=password]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=email]:not(.browser-default).invalid ~ .helper-text:after,
input[type=email]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=url]:not(.browser-default).invalid ~ .helper-text:after,
input[type=url]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=time]:not(.browser-default).invalid ~ .helper-text:after,
input[type=time]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=date]:not(.browser-default).invalid ~ .helper-text:after,
input[type=date]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=datetime]:not(.browser-default).invalid ~ .helper-text:after,
input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=tel]:not(.browser-default).invalid ~ .helper-text:after,
input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=number]:not(.browser-default).invalid ~ .helper-text:after,
input[type=number]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=search]:not(.browser-default).invalid ~ .helper-text:after,
input[type=search]:not(.browser-default):focus.invalid ~ .helper-text:after,
textarea.materialize-textarea.invalid ~ .helper-text:after,
textarea.materialize-textarea:focus.invalid ~ .helper-text:after,
.select-wrapper.invalid ~ .helper-text:after {
    content: attr(data-error);
    color: #F44336;
}


/* BORDERED TEXTAREA*/
textarea.bordered.materialize-textarea {
    box-shadow: none !important;
    height: 200px;   
    border: 1px solid #9e9e9e;
    margin-top: 5px;
}

textarea.bordered.materialize-textarea:focus {
    border-bottom: 1px solid #9e9e9e !important;

}

.disabled-mobile div .input-field input[type="text"]:not(.browser-default):disabled + label,
.disabled-mobile div .input-field input[type="number"]:not(.browser-default):disabled + label {
    color: white !important;
}
.disabled-mobile div .input-field input[type="text"]:not(.browser-default):disabled,
.disabled-mobile div .input-field input[type="number"]:not(.browser-default):disabled {
    border-bottom: 1px dotted #9e9e9e !important;
    color: white !important;
    font-size: x-large;
}

.input-field input[type="text"]:not(.browser-default):disabled + label,
.input-field input[type="number"]:not(.browser-default):disabled + label {
    color: #9e9e9e !important;
}
.input-field input[type="text"]:not(.browser-default):disabled,
.input-field input[type="number"]:not(.browser-default):disabled {
    border-bottom: 1px dotted #9e9e9e !important;
    color: grey !important;
}

.input-field textarea.materialize-textarea:disabled + label {
    color: #9e9e9e !important;
}

.input-field textarea.materialize-textarea:disabled {
    border-bottom: 1px dotted #9e9e9e !important;
    color: grey !important;
}


.timeline-date-box input.datepicker, 
.timeline-date-box input[type=text].datepicker:focus{
    border-bottom:          none !important;
    text-align:		center;
    font-size:		2rem;
    margin:         10px 0 10px 0;
    cursor:			pointer;
    box-shadow:		none !important;
    outline:		none;
}
.timeline-date-box input[type=text].datepicker:disabled {
    border-bottom:          none !important;
}


.timeline-date-box input.timepicker, .timeline-date-box input[type="text"].timepicker:focus {
    border-bottom: none !important;
    text-align: center;
    font-size: 2rem;
    margin: 10px 0 10px 0;
    cursor: pointer;
    box-shadow: none !important;
    outline: none;
}

.timeline-date-box input[type=text].timepicker:disabled {
    border-bottom:          none !important;
}



/* ICON PREFIX FOCUS COLOR */
.input-field .prefix.active {
    color: 				#009fe3 !important;
    color: 				var(--primary-color) !important;
}

/* AUTO COMPLETE */
.input-field input:-webkit-autofill,
.input-field input:-webkit-autofill:hover, 
.input-field input:-webkit-autofill:focus
.input-field textarea:-webkit-autofill,
.input-field textarea:-webkit-autofill:hover
.input-field textarea:-webkit-autofill:focus,
.input-field select:-webkit-autofill,
.input-field select:-webkit-autofill:hover,
.input-field select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    caret-color: white;
    transition: 		background-color 5000s ease-in-out 0s;
    background:			transparent;
}

.wicket-mfu-container{
    margin-top: 		5%;
}

/* PLACEHOLDER TEXT COLOR */
/*
input[type="text"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ffffff !important;
} 
input[type="text"]:-moz-placeholder,
textarea:-moz-placeholder {
    color: #ffffff !important;  
} 
input[type="text"]::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ffffff !important;  
}
input[type="text"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {  
    color: #ffffff !important;  
}
*/

/* PLACEHOLDER TEXT ANIMATION */
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; }
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; }
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; }
::placeholder { opacity: 1; transition: opacity .5s; }
*:focus::-webkit-input-placeholder { opacity: 0; }
*:focus:-moz-placeholder { opacity: 0; }
*:focus::-moz-placeholder { opacity: 0; }
*:focus:-ms-input-placeholder { opacity: 0; }
*:focus::placeholder { opacity: 0; }

/* FILE INPUT */
input[type=file] {
    background-color: 	#536973;
    border: 			none;
    color: 				white;
    padding: 			2%;
    text-align: 		center;
    text-decoration: 	none;
    font-size: 			16px;
    border-radius: 		2px;
}
@media only screen and (max-width: 992px){
    input[type=file] {
        width: 			100%;
    }
}

/* TEXTAREA LABEL */
.text-area-label {
    color: #9e9e9e;
    font-size: 1rem;
}

/* BUTTON INPUT */
input[type="button"] {
    font-size: 			75%;
    padding:			5px 15px; 
    background:			#69818c; 
    border:				0 none;
    cursor:				pointer;
    -webkit-border-radius: 5px;
    border-radius: 		2px;
}

/* Handle formItems with different Structure
   e.g. phoneNumber with an additional div arount input-field created with javascript
*/
.handleFormComponentErrorParent > .helper-text[data-success],
.handleFormComponentErrorParent > .helper-text[data-success],
.handleFormComponentErrorParent > .helper-text[data-error],
.handleFormComponentErrorParent > .helper-text[data-error]{
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.handleFormComponentErrorParent > .helper-text:after,
.handleFormComponentErrorParent > .helper-text:after {
    content: attr(data-error);
    color: #F44336;
}

.handleFormComponentErrorParent > div > input:focus ~ label {
    color: #009fe3;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #009fe3 !important;
    -webkit-box-shadow: 0 1px 0 0 #009fe3 !important;
    box-shadow: 0 1px 0 0 #009fe3 !important;
}

input:not([type]):focus:not([readonly])~label, 
input[type=text]:not(.browser-default):focus:not([readonly])~label, 
input[type=password]:not(.browser-default):focus:not([readonly])~label, 
input[type=email]:not(.browser-default):focus:not([readonly])~label, 
input[type=url]:not(.browser-default):focus:not([readonly])~label, 
input[type=time]:not(.browser-default):focus:not([readonly])~label, 
input[type=date]:not(.browser-default):focus:not([readonly])~label, 
input[type=datetime]:not(.browser-default):focus:not([readonly])~label, 
input[type=datetime-local]:not(.browser-default):focus:not([readonly])~label, 
input[type=tel]:not(.browser-default):focus:not([readonly])~label, 
input[type=number]:not(.browser-default):focus:not([readonly])~label, 
input[type=search]:not(.browser-default):focus:not([readonly])~label, 
textarea.materialize-textarea:focus:not([readonly])~label {
    color: #009fe3 !important;
}

/*___________________________________________________________

    BUTTONS
____________________________________________________________*/


.btn, .btn-large, .btn-small {
    text-decoration: 	none;
    color: 				#fff;
    background-color: 	#009fe3;
    background-color: var(--primary-color);
}

.btn-floating {
    background-color: 	#009fe3;
    background-color: var(--primary-color);
}

.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: 	#34ace3;
    background-color: var(--primary-color);

    filter: saturate(75%);
    filter: brightness(110%);
}

.btn:focus, .btn-large:focus, .btn-floating:focus, .btn-small:focus {
    background-color: 	#148cc3;
    background-color: var(--primary-color);

    filter: saturate(80%);
    filter: brightness(95%);
}

/*
@media only screen and (max-width: 992px){
    .btn {
        width: 		   	100%;
        padding: 		0px;
        margin:  		0px;
        margin-left:	0px !important;
        margin-bottom: 	5px;
    }
    .btn-large {
        width: 		   	100%;
        margin:  		0px;
        margin-left:	0px !important;
        margin-bottom: 	5px;
    }
    .btn-custom {
        padding:		unset !important;
    }
    .btn-floating {
        width: 		   	40px;
    }
}
*/

.btn.disabled {
    background-color: 	#4d646f !important;
    color: 				#848f94 !important;
}

.btn-floating.disabled {
    background-color: 	#4d646f !important;
    color: 				#848f94 !important;
}

.btn-floating.disabled i{
    color: 				#848f94 !important;
}


.sortBtn{
    background-color: transparent !important; 
    box-shadow: none !important; 
    padding: 0px;	
}


.structuredButton {
    cursor: pointer;
    border-radius: 100%;
    border: 3px solid #fff;
    padding: 5px;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
}

.structuredButton:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 2px 8px 15px black;
}

.structuredButtonIcon {
    margin: 5px;
    cursor: pointer;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-shadow: 2px 4px 5px black;
}

.btn-border {
    border-style: solid;
    border-width: 1px;    
    border-color: #435760;
    border-radius: 3px;
}

/*___________________________________________________________

    CHECKBOX
____________________________________________________________*/


/* CHECKBOX: BASE */
.checkbox {
    margin-top: 		1rem;
    margin-bottom: 		1rem;
}
.character-counter {
    height: 			0px !important;
}
.checkboxKoje {
    position: 			absolute;
    left: 				5px;
    top: 				5px;
}

/* CHECKBOX: LABEL */
[type="checkbox"]+label {
    position: 			relative;
    padding-left: 		25px;
    cursor: 			pointer;
    display: 			inline-block;
    height: 			25px;
    line-height: 		25px;
    font-size: 			1rem;
    margin-right: 		10px;
}
[type="checkbox"]+label:not(.lever):before, [type="checkbox"]+label:not(.lever):after {
    content: 			'';
    left: 				0;
    position: 			absolute;
    -webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    transition: 		border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    z-index: 			1;
}
[type="checkbox"]:checked+label:not(.lever):before {
    top: 				-5px;
    left: 				0px;
    width: 				7px;
    height: 			19px;
    border-top: 		2px solid transparent;
    border-left: 		2px solid transparent;
    -webkit-transform: 	rotate(40deg);
    transform: 			rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 	100% 100%;
}
[type="checkbox"]+label:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
    content: 			'';
    position: 			absolute;
    top: 				0;
    left: 				0;
    width: 				18px;
    height: 			18px;
    z-index: 			0;
    border: 			2px solid #ffffff;
    border-radius: 		1px;
    margin-top: 		3px;
    -webkit-transition: .2s;
    transition: 		.2s;
}
[type="checkbox"]:checked+label:not(.lever):after {
    top: 				0;
    width: 				20px;
    height: 			20px;
    border: 			2px solid #009fe3;
    border-radius:		2px;
    background-color: 	#009fe3;
    z-index: 			-10;
}
[type="checkbox"]+label:not(.lever):before, [type="checkbox"]+label:not(.lever):after {
    content: 			'';
    left: 				0;
    position: 			absolute;
    z-index: 			1;
}

/* RADIO BUTTON */
[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after {
    border: 			2px solid #ffffff;
}
[type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border: 			2px solid #009fe3;
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
    background-color:		#039be5;
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border: 			2px solid #039be5;
}


/*___________________________________________________________

    SWITCHES
____________________________________________________________*/


.switch label input[type=checkbox]:checked+.lever:after {
    background-color: 	#009fe3;
}
.switch label input[type=checkbox]:checked+.lever {
    background-color: 	#009fe359;
}
.switch label .lever {
    background-color: 	#263238;
}
.switch label .lever:after {
    background-color:	#37474f;
}

/*___________________________________________________________

    TABLES
____________________________________________________________*/


.tableIcon{
    height: 50px; 
    width: 50px; 
    margin-top: 0.7%; 
    margin-left:-4px; 
    border: inset; 
    overflow:hidden; 
    text-align: center;
    vertical-align: middle;
}

.table-list{
    padding-bottom: 10px !important; 
    min-height: 35px;
}

@media  only screen and (max-width: 1640px){
    .tableIcon{
        display: none;
    }
}

@media  only screen and (max-width: 1280px){
    .hide-before-med-and-down{
        display: none;
    }
}



/*___________________________________________________________

    SPAN
____________________________________________________________*/


@media only screen and (max-width: 992px){
    .reset-span{
        margin-right:  	0% !important;
        float: 			unset !important;
        font-size: 		unset !important;
    }

}


/*___________________________________________________________

    HTML-ELEMENTS: END
____________________________________________________________*/



/*___________________________________________________________

    BLOCK CONTENT: START
____________________________________________________________*/


/*___________________________________________________________

    NAVBAR
____________________________________________________________*/


.nav-wrapper-backend {
    margin-right: 		2.25em;
    margin-left: 		2.25em;
    padding-left: 		0.75em;
    padding-right: 		0.75em;
}

.nav-center {
    text-align: 		center;
    vertical-align: 	middle;
}

.nav-center .tab {
    float:				none;
}

.stick-top {
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
    z-index: 1;
}

.nav-logo {
    max-height: 40px;
    height: auto;
    vertical-align: middle;
    max-width: calc(100vw - 900px); 
}


/*___________________________________________________________

    PROGRESSBAR
____________________________________________________________*/


/* progress bar for file upload form */
.wupb-progressBar{
    position: 			relative;
    height: 			4px;
    display: 			block;
    width: 			100%;
    background-color:           white !important;
    border-radius: 		2px;
    margin: 			.5rem 0 1rem 0;
    overflow: 			hidden;
}
.wupb-background{
    position: 			absolute;
    top: 			0;
    left: 			0;
    bottom: 			0;
    background-color:           #009fe3 !important;
    transition: 		width .3s linear !important;
}
.wupb-border{
    border: 		white !important;
    width: 			100% !important;
    background-color: 	white !important;
}
.wupb-uploadStatus label {
    color: 			white;
    font-size: 		1rem;
}

div.btn-trans {
    position: 			absolute;
    right:                      10px;
    top:                        10px;
    cursor: 			pointer;
    border: 			solid white;
}

div.btn-trans i {
    width: 				100%;
    line-height: 		34px;
}


/*___________________________________________________________

    SCROLLBAR
____________________________________________________________*/


/* width */
::-webkit-scrollbar {
    width: 				10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: 		#263238; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: 		#435760; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: 		#617a86; 
}


/*___________________________________________________________

    SEARCHBAR
____________________________________________________________*/
div.search div.search-wrapper {
    margin-bottom: 		2px;
    transition:			margin .25s ease;
    background-color:	transparent;
}

div.search div.search-wrapper.card input {
    display:			block;
    font: 				inherit;
    font-size:			16px;
    font-weight:		300;
    width:				80%;
    height:				45px;
    margin:				0;
    padding:			0 0 0 15px;
    border:				0;
    box-shadow:			0 0px;
}

/* ICON */
div.search div.search-wrapper.card i.material-icons {
    color:				#9e9e9e;
}

div.search div.search-wrapper.card input:focus {
    outline:			none !important;
    border-bottom:      none !important;
    -webkit-box-shadow: none !important;
    box-shadow:         none !important;
}

div.search .search-wrapper i.material-icons {
    position:			absolute;
    top:				10px;
    right:				10px;
    cursor:				pointer;
}

div.search .search-wrapper button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: none;
    color: inherit;
    border: none;
}

div.search .search-wrapper button i.material-icons {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

div.flex-search {
    display:            flex; 
    align-items:        center; 
    height:             36px;
    text-shadow: 2px 2px 4px black;

}

div.flex-search * {
    margin-left:        5px; 
    margin-right:       5px;
}

div.flex-search i.material-icons {
    cursor:             pointer;
}

div.flex-search input {
    min-width:          0;
    outline:			none;
    border-bottom:      none;
    text-shadow: 2px 2px 4px black;
    -webkit-box-shadow: none !important;
    box-shadow:         none !important;
    border:             0 !important;
    align-self:         baseline; 
    height:             100% !important; 
    flex-grow: 1;
}


/*___________________________________________________________

    BREADCRUMB
____________________________________________________________*/


.breadcrumb {
    font-size: 			14px;
}

.custom-breadcrumb {
    height: 			32px !important;
    line-height: 		32px !important;
   	padding-left: 		20px;
   	padding-right: 		20px;
   	margin-bottom: 		0px;
   	margin-top: 		10px;
}

.custom-breadcrumb #bread-style {
    text-overflow: 		ellipsis;
    direction: 			rtl;
    width: 				100%;
    white-space: 		nowrap;
    overflow: 			hidden;
    text-align: 		left;
}

.breadcrumb:before {
    margin: 			0px;
}

.collapsible-header i:not(.panorama-viewer .collapsible-header i){
    /* width: inherit; */
    font-size: 			1.6rem;
    line-height: 		inherit;
    display: 			block;
    float: 				left;
    text-align: 		center;
    margin-right: 		1rem;
}

.breadcrumb:last-child {
    color: 				#009fe3;
}


/*___________________________________________________________

    MODAL
____________________________________________________________*/
.modal.modal-fullscreen, .modal.modal-fullscreen.modal-image{
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 100vh;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.modal.modal-fullscreen.modal-image .modal-content {
    padding: 0;
    height: 100%;
}

.modal.modal-fullscreen.modal-image .modal-footer {
    display: none;
}


.modal-large:not(.bottom-sheet) {
    height: 80vh !important;
    width: 80vw !important;
    max-height: 80vh !important;
}

.small-modal .modal-content {
    height: auto !important;
}

.small-modal{
    height: 70% !important;
}

.center_modal {
  position: fixed;
  width: 30vw !important;
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px){
    
    .modal .modal-content {
        padding: 12px;
    }

}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    
    .modal:not(.bottom-sheet):not(.modal-fullscreen):not(.modal-small) {
        top: 0 !important;
        bottom: 0 !important;
        width: 95% !important;
        max-height: 100vh;
        max-width: 95% !important;
        height: 95% !important;
        overflow: hidden !important;
    }
    
}


.text-block-on-image {
    position: absolute;
   	top: 10%;
   	background-color: #009fe3;
   	padding: 1% 5% 1% 5%;
   	text-align: left;
   	opacity: 0.8;
   	max-width: 500px;
   	font-size: 2.5em; 
   	line-height: 1.25;
}

/*___________________________________________________________

    ROW
____________________________________________________________*/


.row {
    margin-bottom: 		0px;
}

td {
    padding: 			5px 5px;
}

tr.cspacer {
    padding-bottom: 	15px;
}


/*___________________________________________________________

    CARD
____________________________________________________________*/


.card .card-content {
    min-height: 		70.5px;
}

div.card-content.activator.white-text.card-fixed-height {
    max-height: 		91px;
    min-height: 		91px;
}

div.card-content.activator.white-text.card-hover {
    cursor: 			pointer;
    background-position: center;
    transition: 		background 0.8s;
}
div.card-content.activator.white-text.card-hover:hover {
    background-color: 	#435761;
    background-size: 	100%;
    transition: 		background 0s;
}

.card .card-image .card-title {
    text-shadow: 		0px 2px 3px black, 2px 1px 5px black;
}

@media only screen and (max-width: 992px){
    .card0padd {
        padding:		0px !important;
    }
}

.search-card {
    height: 175px; 
}

.pdf-card {
    min-height: 		100px !important;
}

@media only screen and (max-width: 600px){
    .search-card {
        max-height: 	145px !important;
    }
}

.eventSearch .card .card-content {
    min-height: 150px !important;
    max-height: 150px !important;
}

.eventSearch .card .card-content .card-title {
    width:100%;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.eventSearch .card .card-content .eventDescription {
    width:100%;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.eventSearch .card .card-image {
    min-height: 400px;
    max-height: 400px;
    overflow: hidden;
}

.eventSearch .card .card-image img {
    min-height: 400px;
    max-height: 400px;
    overflow: hidden;
}

/*
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
*/

figure.aspectCropFallback * {
    -webkit-box-sizing: border-box;
    box-sizing: 		border-box;
}
figure.aspectCropFallback img {
    opacity: 			1;
    width: 				100%;
    height:				224px;
    -webkit-transition:             opacity 0.35s;
    transition:                     opacity 0.35s;
    height:                         100%;
}
figure.fill {
    margin: 			0;
}

.aspectFit{
    object-fit:			contain;
    object-position: 	center;
}

.aspectOptimal{
    display: 			none;
}

.image-hover-effect {
    position: 			relative;
    overflow: 			hidden;
    width: 				100%;
    /*height:				unset !important;*/
    background: 		#37474f;
    text-align: 		center;
    cursor: 			pointer;
    -webkit-box-sizing: border-box;
}
.image-hover-effect * {
    -webkit-box-sizing: border-box;
    box-sizing: 		border-box;
}
.image-hover-effect img:not(.select-mode .image-hover-effect img) {
    max-width: 			100%;
    transition: 		.3s linear;
}
.image-hover-effect > div {
    left: 				0;
    position: 			absolute;
    top: 				0;
    width: 				100%;
    color: 				#ffffff;
    height: 			100%;
}
.image-hover-effect > div i:not(.select-mode .image-hover-effect div i) {
    display: 			inline-block;
    font-size: 			58px;
    opacity: 			0;
    top: 				43%;
    left: 				calc(50% - 29px);
    position: 			absolute;
    -webkit-transform: 	translate3d(0, -50%, 0);
    transform: 			translate3d(0, -50%, 0);
    -webkit-transition: 0.3s ease-in-out;
    transition: 		0.3s ease-in-out;
    -webkit-transition-delay: 0s;
    transition-delay: 	0s;
}
.image-hover-effect:hover img:not(.select-mode .image-hover-effect img) {
    opacity: 			0.3;
    -webkit-transform: 	scale(1.1);
    transform: 			scale(1.1);
    -webkit-transition-delay: 0s;
    transition-delay: 	0s;
    transition: 		all 0.5s;
}
.image-hover-effect:hover > div i:not(.select-mode .image-hover-effect div i) {
    opacity: 			0.8;
    top: 				50%;
    -webkit-transition-delay: .3s;
    transition-delay: 	.3s;
    transition-duration: 0.5s !important;
}

.select-mode .image-hover-effect .material-icons {
    display: none !important;
}

.select-mode .btn-floating {
    display: none !important;
}

.showroom-card {
    height: 280px;
    cursor: pointer;
}

.client-card {
    height: 150px;
    cursor: pointer;
}

.showroom-card-content{
    padding: 10px 24px 8px 24px !important;
}

.showroom-card-image{
    cursor: default; 
    height: 70%;
    padding: 4% 4% 4% 4%;
    background: rgb(230, 230, 230);
}

.fill-logoBackground{
    position: relative !important;
    width: 100%;
    height: 100%;
}

.logoPlaceholder{
    text-align: center;
    font-size: 30px;
    display: inline-block;
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 2px 0 2px;
}

/*___________________________________________________________

    IMAGE
____________________________________________________________*/


.imgstack {
    position: 			relative;
    top: 				0;
    left:				0;
}

.stackimage {
    position: 			absolute;
    top: 				0;
    left: 				0;
}

.polyclip1{
    -webkit-clip-path: 	polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
    clip-path: 			polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

.center-cropped {
    object-fit: 			cover;
    object-position: 		center; /* Center the image within the element */
    height: 				200px;
    width: 				200px;
}

.center-fit {
    object-fit: 			contain;
    object-position: 		center; /* Center the image within the element */
    height: 				200px;
    width: 				200px;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;;
}

.pano-logo {
    position: fixed; /* Use absolute if you don't want it to stay in place during scroll */
    top: 0;
    right: 0;
    width: 10%;
    height: 33.33%; /* 1/3 of the screen height */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden; /* Ensures the image does not overflow its container */
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
    z-index: 555;
    margin: 2%;
}

.logo-size {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*___________________________________________________________

    DROPDOWN
____________________________________________________________*/


/* DROPDOWN: BASE */
.dropdown-content {
    border-radius: 		25px;
    top: 				-50px;
    margin-top: 		55px;
    padding: 			0px 0px;
}
#dropdownField {
    text-align: 		center;
    min-height: 		20px;
}
#dropdownElement {
    padding: 			10px;
}
.select-wrapper.disabled+label{
    color: 				#9e9e9e;
}

.dropDownItem .label {
    margin-left: 5px;
}

/* DROPDOWN: HIGHLIGHT COLOR */
.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #249bd3;
}
.select-dropdown{
    background-color: rgba(59,73,80, 1);
    border-radius: 0%;
    text-align: left;
}

/* DROPDOWN FIELD ICON COLOR*/
.caret{
    fill: 				#ffffff4d !important;
}

/* DORPDOWN: CHILD LIST */
.dropdown-content li>a, .dropdown-content li>span {
    color: 				#009fe3;
}
.select-wrapper span.caret{
    color: 				white;
}
.dropdown-content li>a>i{
    /*margin: 			unset;	*/
}
.dropdown-content li.selected{
    background-color: rgba(67,87,96, 1) !important;
}
.dropdown-content li:hover{
    background-color: rgba(67,87,96, 1) !important;
}
.dropdown-content li>a, .dropdown-content li>span {
    color: white;
}

/* DROPDOWN: ADMIN */
.adminDropDown *{
    text-align: center !important;
}

/* DROPDOWN: MOBILE */
.mobile-wrapper .dropdown-content li:hover {
    background-color: rgba(222, 222, 222, 0.68) !important;
}

.select-wrapper input.select-dropdown:disabled {
    color: gray;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*___________________________________________________________

    TABS
____________________________________________________________*/


.tabs .tab a.active {
    background-color:   rgba(255, 255, 255, 0) !important;
}
.tabs .indicator {
    background-color: 	transparent;
}
.tab0 {
    margin-left: 		0px;
}
.tab1 {
    margin-left: 		25px;
}
.tab2 {
    margin-left: 		50px;
}
.tab3 {	
    margin-left: 		75px;
}
.tabs{
    background-color: 	transparent;
    overflow-x: 		hidden;
}

.tabs.tabs-transparent.kojeGroup .tab.active {
    background-color: rgba(84, 110, 122, 0.4) !important;
}

.tabs.tabs-transparent .tab div > i {
    padding: 5px;
}

.tabs.tabs-transparent .tab div > i:hover {
    color: #fff !important;
    cursor: pointer;
}

div.tab-row {
    width: 				100%;
    line-height: 		30px;
    padding-bottom: 	28px;
}
div.tab-row ul {
    margin: 			0;
    padding: 			10px 10px 0;
    list-style: 		none;
}

a.wide {
    display:			inline-block;
    padding: 			0.5rem;
    width:				100%;

}

.collection .collection-item{
    display:flow-root;
}

div.tab-row li {
    float: 				left;
    background: 		no-repeat left top;
    margin:				0;
    padding: 			0 0 0 9px;
}

div.tab-row a:link, div.tab-row a:visited {
    float: 				left;
    background: 		#ffffff;
    font-weight: 		bold;
    padding: 			5px 15px 5px 15px;
    margin-right:		4px;
    border: 			1px solid #37474f;
    text-decoration: 	none;
    color: 				rgba(255,255,255,0.7);
    background-color:   transparent;
}

div.tab-row li.selected a:link, div.tab-row a:visited.active {
    border-bottom: 		1px solid transparent;
    background:			rgb(67, 87, 96);
    color: 				#fff;
}

div.tab-row a:hover {
    background: 		rgba(84, 110, 122, 0.2);
}


.search-project div.tab-row ul {
    margin: 0;
    padding: 0px 10px 0 10px;
    list-style: none;
}

.search-project div.tab-row {
    padding-bottom: 0px;
}

.search-project div.tab-row li.selected a:link, .search-project div.tab-row a:visited.active {
    border-bottom: none;
}

.search-project div.tab-row a:link, .search-project div.tab-row a:visited {
    float: 				left;
    background: 		#ffffff;
    font-weight: 		normal;
    padding: 			5px 15px 5px 15px;
    margin-right:		4px;
    border:             none;
    text-decoration: 	none;
    color: 				rgba(255,255,255,0.7);
    background-color:   transparent;
}

.search-project div.tab-row li.selected a:link, .search-project div.tab-row a:visited.active {
    background:			rgb(67, 87, 96);
    color: 				#fff;
}

.search-project div.tab-row li {
    border-bottom: 2px solid transparent;
}

.search-project div.tab-row li.selected {
    border-bottom: 2px solid white;
}

.btn-floating.search-project {
    background-color: transparent;
    border-radius: 6%;
    width: 45px;
    height: 45px;
    line-height: 45px;
}

.btn-floating.search-project i {
    font-size: 45px !important;
    line-height: 45px !important;
    color: unset;
}

/*___________________________________________________________

    DRAG N DROP
____________________________________________________________*/


.highlight-droparea {
    background-color: 	rgba(0, 0, 0, 0.4);
}

#dropDownbase {
    background-color: 	#f5f5f5;
    border-radius: 		25px;
    min-width: 			130px;
    padding: 			0px;
    padding-left: 		5px;
    padding-right: 		10px;
    text-align:         center;
}

.collapsible-body:not(.panorama-viewer .collapsible-body):not(.cb) {
    border-bottom: 		0px solid #ddd;
    border-left: 		1px solid #ddd;

    box-sizing: 		border-box;
    padding-left: 		2rem;
    padding-top: 		0px;
    padding-bottom: 	3px;
    padding-right: 		0px;

    margin-left: 		2rem;
    margin-top: 		0px;
    margin-bottom: 		3px;

    background-color: 	rgba(84, 110, 122, 0.4);
}

ul.collapsible-body.hide-collapsible-body {
    visibility: hidden;
}

ul.collapsible-body.hide-collapsible-body li {
    visibility: visible;
}

.progress .determinate{
    background-color: 	#009fe3;
}

.drag-placeholder-koje {
    border-radius: 		5px;
    border: 			1px dotted #333333;
    height: 			313.500px;
}

.drag-placeholder-slide {
    border-radius: 		5px;
    border: 			1px dotted #333333;
    height: 			453.500px;
}

.drag-placeholder-panorama {
    border-radius: 		5px;
    border: 			1px dotted #333333;
    height:	 			302.500px;
}

.drag-placeholder {
    opacity: 0.3;
}

.draggable-image {
    display:			block;
    background-color:	#576E7B;
    -webkit-mask:		url("/../../img/icons/map_pos.png" ) center/contain;
    mask:				url("/../../img/icons/map_pos.png" ) center/contain;
    pointer-events: 	all;
}

.draggable-image.active {
    background-color: #009fe3;
    background-color: var(--primary-color);	
}

@media only screen and (max-width: 992px){
    .draggable-image {
        height: 50px;
    }
}


.no-drag {    
    -webkit-user-select: none; /* Safari 3.1+ */ 
    -moz-user-select: none; /* Firefox 2+ */ 
    -ms-user-select: none; /* IE 10+ */ 
    user-select: none; /* Standard syntax */ 
    user-drag: none; 
    -webkit-user-drag: none;
}


/*___________________________________________________________

    LOADER
____________________________________________________________*/


.pano-loader {
    position: 			fixed;
    top: 				0;
    left: 				0;
    right: 				0;
    bottom: 			0;
    margin: 			auto;
    z-index: 			100 !important;
}

.koje-loader {
    position: 			fixed;
    top: 				0;
    left: 				0;
    right: 				0;
    bottom: 			0;
    margin: 			auto;
    z-index: 			100 !important;
}

.title-loader {
    position: 			fixed;
    top: 				0;
    left: 				0;
    right: 				0;
    bottom: 			0;
    margin: 			auto;
    z-index: 			100 !important;
}

.slide-loader {
    position: 			fixed;
    top: 				0;
    left: 				0;
    right: 				0;
    bottom: 			0;
    margin: 			auto;
    z-index: 			100 !important;
}

.storage-preloader {
    position: 			fixed;
    top: 				0;
    left: 				0;
    right: 				0;
    bottom: 			0;
    margin: 			auto;
    z-index: 			100 !important;
}

.preloader-wrapper {
    pointer-events: 	none;
}


/*___________________________________________________________

    TOAST
____________________________________________________________*/


.toast {
    color: 				#fff;
    background-color: 	rgba(34, 146, 193, 0.8);
}

@media only screen and (min-width: 993px){
    #toast-container {
        top: 18%;
        right: 2%;
        max-width: 86%;
    }	
}


/*___________________________________________________________

    Tap Target for Feature Discovery
____________________________________________________________*/

.tap-target {
    background-color: #009fe3;
}


/*___________________________________________________________

    DATEPICKER
____________________________________________________________*/


/* DATE CONTAINER */
/*
.datepicker-container{
    height: 370px;
}
*/
.datepicker-date-display{
    background-color: 	#263238;
}

/* CALENDAR CONTAINER */
.datepicker-calendar-container{
    background-color: 	#37474f;
}

/* NAVIGATION BUTTON COLLOR */
.datepicker-calendar-container svg {
    fill: 				rgb(255, 255, 255);
}

/* TITLE COLOR */
.datepicker-table abbr {
    color: #ffffff4d;
}

/* HIGHLIGHTED CURRENT DATE COLOR */
.datepicker-table td.is-today{
    color:				#249bd3;
}
.datepicker-table td.is-selected {
    background-color: 	#249bd3;
    color: 				#fff !important;
}
.datepicker-day-button:focus {
    background-color: 	#039be559;
}


/* Timepicker */
.timepicker-digital-display {
    background-color: 	#263238;
}

.timepicker-analog-display {
    background-color: 	#37474f;
}

.timepicker-canvas line {
    stroke:   #009fe3;
}

.timepicker-canvas-bearing {
    fill:   #009fe3;
}

.timepicker-canvas-bg {
    fill:   #009fe3;
}

.timepicker-close {
    color: #009fe3;
}

.timepicker-text-container {
    color: #fff;
}

.text-primary {
    color: #009fe3;
}

.timepicker-tick:hover {
    background-color: rgba(36,156,211,0.25);
}

/* BUTTONS */
.datepicker-cancel, .datepicker-done{
    color:				#249bd3;
    font-weight: 		500;
}
button:focus{
    background-color:	#249bd3;
}   

/*Google Maps*/

.locationLabel{
    float: left; 
    color: #9e9e9e !important; 
    min-height: 18px;
}

.labelImageCard{
    float:  left;
    min-height: 18px;
}

#map{
    height: 450px;  /* The height is 400 pixels */
    width: 100%;  /* 100% is the width is the width of the parent component */ 
    color: #9e9e9e;
}

#map button.gm-ui-hover-effect {
    display: none !important;
}


/*___________________________________________________________

    INTERNET EXPLORER
____________________________________________________________*/


.internetExplorerWarning {
    background-color:	#37474f;
    width: 				1000px;
    top:				1%;
    position: 			absolute;
    z-index: 			10;
    border-radius: 		7px;
    margin-left:        auto;
    margin-right:       auto;
    left:               0;
    right:              0;
    text-align:         center;
    box-shadow: 		0 2px 20px 7px rgba(0, 0, 0, 0.63), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.iEHeaderContainer {
    margin: 			15px;
    color: 				white;
}

#iEHeaderContainerLeft {
    margin: 			0;
    width: 				6%;
}

.iEHeader {
    margin: 			0;
    font-weight: 		400;
}

.iEDevider {
    margin:				0;
    background-color: 	#263238;
}

.iEIconLeft {
    font-size: 			39px;
}

.iEIconRight {
    font-size: 			35px;
    float: 				right;
    margin-top: 		0.2%;
    margin-right: 		0.2%;
    text-shadow: 		1px 1px 9px black;
}
.iEIconRight:hover {
    color: 				red;
    font-weight: 		bold;
}

.iEBodyContainer {
    padding: 			35px;
}	

.iEBody {
    font-size: 			18px;
}

.iELinkContainer {
    background-color: 	white;
    max-height:			173px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    box-shadow: 		inset 0px 4px 15px 0px black;
    padding:			35px;
    padding-bottom:		30px; 
}

.iELinkChildContainer {
    text-align: 		center;
}

.iEImageLink {
    height: 			80px;
}
.iEImageLink:hover{
    height: 			90px;
}

.iETextLink {
    color: 				#263238;
    font-weight: 		600;
}

/* 
    Fade in - fade out animation
    used from internetexplorerwarning
    look at panels\modal\internet-explorer-warning.js
*/
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slideOutFromBottom {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

/*___________________________________________________________

    PAGINATION
____________________________________________________________*/


.pagination li.active {
    background-color: 	#34ace3;
}

.pagination li a {
    color: 				white;
}

.pagination li:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/*___________________________________________________________

    INFO
____________________________________________________________*/


.infocontainer{
    padding: 			50px;
}



/*___________________________________________________________

    COLLECTION
____________________________________________________________*/


/*
@media only screen and (max-width: 992px){
    .collection-item {
        padding-left: 	5% !important;
        padding-bottom: 25% !important;
    }
    
    .secondary-content {
        top:			unset !important;
        bottom: 		3%;
        right: 			5% !important; 	
    }
    
        visibility: 	hidden;
}
*/

/*___________________________________________________________

    BLOCK CONTENT: END
____________________________________________________________*/



/*___________________________________________________________

    MODULE: START
____________________________________________________________*/


/*___________________________________________________________

    DATEPICKER
____________________________________________________________*/

#colorSelector {
    position: 			relative;
    width: 				36px;
    height: 			36px;
    background: 		url(/../../img/colorpicker/select.png);
}
#colorSelector div {
    position: 			absolute;
    top: 				3px;
    left: 				3px;
    width: 				30px;
    height: 			30px;
    background: 		url(/../../img/colorpicker/select.png) center;
}

#foregroundColorSelector {
    position: 			relative;
    width: 				36px;
    height: 			36px;
    background: 		url(/../../img/colorpicker/select.png);
}
#foregroundColorSelector div {
    position: 			absolute;
    top: 				3px;
    left: 				3px;
    width: 				30px;
    height: 			30px;
    background: 		url(/../../img/colorpicker/select.png) center;
}

[type="checkbox"]:checked+label:before {
    border-right: 		2px solid #009fe3;
    border-bottom: 		2px solid #009fe3;
}

[type="checkbox"].filled-in:not(:checked)+label:after {
    border: 2px solid #ffffff;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.56), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
[type="checkbox"].filled-in:checked+label:after {
    border: 2px solid #009fe3;
    background-color: #009fe3;
}

.layoutPositionMarker {
    -webkit-filter: 	drop-shadow(2px 4px 10px black);
    filter: 			drop-shadow(2px 4px 10px black);
    -ms-filter: 		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=4, Color='black')";
    filter: 			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=4, Color='black')";
}


/*___________________________________________________________

    CROPPER
____________________________________________________________*/


.div.cropper-container.cropper-bg {
    height: 			500px;
    width: 				500px;
}

.cropper-canvas {
    margin: 			0 !important;
}

#modalLeftSide {
    padding-right: 	8%;
}

#modalRightSide {
    padding-left: 		4%; 
    border-left: 		2px solid rgba(0, 0, 0, 0.1);
}

.cropper-view-box img {
    margin: 			0 !important;
    float: 				left;
}

.cropCollapsible {
    padding-left: 		unset;
    box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
        rgba(0, 0, 0, 0.19);
}

#pictureCropModal {
    max-height: 		90%!important;
    max-width: 			80%!important;
    height: 			auto!important;
    width: 				auto!important;
    overflow: 			hidden;
    padding: 			3%;

}


.cropContainer {
    width: 				100%;
    height: 			600px;
    box-shadow:		 	0 1px 0px 5px rgba(0, 0, 0, 0.14), 0 1px 5px 0
        rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 1750px) {
    .cropContainer {
        width: 			100%;
        height: 		467px;
    }
}
@media only screen and (max-width: 1200px) {
    .cropContainer {
        width: 			100%;
        height: 		309px;
    }
}



@media only screen and (max-width: 993px) {
    .cropContainer {
        width: 			100%;
        height: 		225px;
        margin-bottom: 	5%;
        margin-right: 	auto;
        margin-top: 	auto;
    }
    #modalLeftSide {
        padding-right: 	3%;
    }
    #modalRightSide {
        padding-left: 	3%; 
    }
    #pictureCropModal {
        margin-top: 	-11%;
        overflow: 		auto;
        overflow-x: 	hidden
    }
}


.container-fluid {
    .row {
        padding: 0 0 4em 0;
        &:nth-child(even) {
            background: #F1F4F5;
        }
    }
}

.header-planung-umbau {
    text-align: center;
    margin-bottom: 60px;
    padding: 3em 0;
    border-bottom: 1px solid #E4EAEC;
}

/*---------------------- HARDCOPY ----------------------*/

@media only screen and (max-width: 992px){
    .hardcopy-content{
        padding-left:	0px !important;
        padding-right:  0px !important;
    }
}

@media only screen and (max-width: 992px){
    #stateContainer{
        margin-left:	0px !important;
        width:  		100% !important;
    }
}


.slider .indicators .indicator-item.active {
    background-color:	#009fe3 !important;
}



/*
Materialize CSS 1.0 !!!
*/

.checkbox-label{
    position:       absolute !important;
    left:           5px;
    top:            5px;
    z-index:        1;
}

[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    border: 2px solid #009fe3;
    background-color: #009fe3;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
    border: 2px solid #ffffff;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.56), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

[type="checkbox"] + span:not(.lever)::before, [type="checkbox"]:not(.filled-in) + span:not(.lever)::after {
    border: 2px solid #ffffff;
}

[type="checkbox"]:checked + span:not(.lever)::before {
    border-right: 2px solid #009fe3;
    border-bottom: 2px solid #009fe3;
}

[type="checkbox"] + span {
    padding-left: 25px !important;
    margin-right: 10px !important;
}


.card-title {
    display: unset !important;
}

.card-title.brandWorld{
    display: inline !important;
}


textarea::placeholder {
    opacity: 1.0;
    color: grey;
    font-style: italic;
    font-size: 0.8em;
}


.bottom-sheet {
    max-height: 100% !important;
}

.video-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*
* Mobile
*/
@media only screen and (max-width: 993px) {

    .container {
        width: 98%;
    }

    .card .card-content {
        padding: 12px;
    }

    .card .card-reveal {
        padding: 12px;
    }

    .datepicker-container.modal-content {
        padding: 0px;
    }

    .timepicker-container.modal-content {
        padding: 0px;
    }

}

/*
* fixes cropped month in materialize datepicker modal
*/
.datepicker-controls .select-month input {
    width: 80px !important;
}


.bottom-right-fab {
    position: absolute;
    right: 24px;
    bottom: 24px;
}

.object-type-icon {
    position: absolute;
    z-index: 1;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    top: 0;
    right: 0;
    margin-right: 5px;
    margin-top: 5px;
    line-height: 0;
}

/**
 * expands textarea to full height
 */
.card-textarea-large {
    max-height: 82px !important;
}

.fileupload-progress.fade {
    display: none;
}

.fileupload-progress.fade.in {
    display: block;
}

.cropper-point.point-se:before {
    content: none !important;
}

@media (max-width: 400px) {
    .overlay-big {
        display:none;
    }
    .overlay-small {
        display:block;
    }
}

@media (min-width: 401px) {
    .overlay-big {
        display:block;
    }
    .overlay-small {
        display:none;
    }
}


.circle.materialboxed.active {
    border-radius: 0%;
    object-fit: contain;
}

.dropdown-content.context-menu {
    border-radius: 0;
    top: 0;
    margin-top: 0;
    padding: 0;
}
.dropdown-content.context-menu li > a, .dropdown-content.context-menu li > i.menu-item {
    color: #009fe3 !important;
}

.dropdown-content.context-menu li i.menu-item {
    margin-left: 15px !important;
}

.dropdown-content.context-menu li:hover{
    background-color: rgba(36, 156, 211, 0.3) !important;
}

.fab-container {
    position: absolute;
    right: 24px;
    bottom: -20px;
}

/**
 * image as icon
 */
div.storage-icon.object-type-icon i.material-icons img {
    height: 24px !important;
    width: 24px !important;
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Opera and Firefox */
}


.material-tooltip {
    z-index: 10000 !important
}

/*___________________________________________________________

    FADE IN / OUT
____________________________________________________________*/

.fade-in-out {
    -webkit-animation: fadeInOutAnimation 4s linear;
    -moz-animation: fadeInOutAnimation 4s linear;
    -o-animation: fadeInOutAnimation 4s linear;
    animation: fadeInOutAnimation 4s linear;

    opacity: 0;
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}

@-webkit-keyframes fadeInOutAnimation {
    50% { opacity: 1; }
}

@keyframes fadeInOutAnimation {
    50% { opacity: 1; }
}

.fade-in {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
    opacity: 1;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.icon-bar a {
    color: white !important;
    z-index: 0;
}        

.icon-bar a:hover {
    /*background-color: #009fe3 !important;*/
    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transform: scale(1.2);
    z-index: 1;
}

.icon-bar a.active {
    color: #039be5 !important;
}

.ratio-16-9 {
    padding-bottom: 56.25% !important;
}

.ratio-16-9.aspectFit div.title-picture div.fill img.title-picture {
    object-fit:			contain;
    object-position: 	center;
}

.ratio-16-9.aspectCrop div.title-picture div.fill img.title-picture {
    object-fit:         cover;
    object-position:    center;
}

.title-picture {
    vertical-align: middle;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.title-picture-template {
    vertical-align: middle;
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: contain;
}



/*
    Disabled Checkbox (make things grey)
*/

.disableCheckBox [type=checkbox]:disabled + span {
    color: grey !important;
}

.info-box {
    background-color: #fff7e0;
    border-color: #bb8137;
    border-width: 1px;
    border-style: solid;
    text-align: center;
}

.info-box p {
    color: #bb8137;
}

.disable-strech {
    width: 1%;
}


/*___________________________________________________________
   
    SHARE PANEL
____________________________________________________________*/

.add-partner {
    position: absolute;
    right: 10px;
    top: 20px;
}

.partner-headline {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.chip-button {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
}

.partner-advice-image { 
    height: 100% !important;
    width: 100% !important; 
    margin-top: 0px !important; 
    margin-right: 10px !important;
}

.partner-image {
    margin-top: 1px !important;
    margin-right: 8px !important;
}

span.badge.new {
    background-color: #009fe3;
}

span.badge.new:after {
    content: "NEU";
}

span.badge[data-badge-caption]::after {
  content: " " attr(data-badge-caption);
}

span.banderole {
    width: 40%;
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
}

.nopointer {
    pointer-events: none;
}

.displayLogo {
    margin-right: 0px !important;
}

.displayAndroidLogo {
    color: #263238 !important;
    margin-right: 0px !important;
}

.valign-wrapper a.btn-floating {
    min-width: 40px;
    min-height: 40px;
}

.transparentBackground{
    background-color: transparent !important;
}

/*.tab-panel.storage > div {
    height: 100%;
}*/

.tab-panel.storage {
    height: calc(100% - 56px);
}

.color-children * {
    color: inherit;
}

.ui-datepicker-title select {
    display: inline;
    padding: inherit;
    height: inherit;
}


.collapsible-header .switch {
    margin-left: auto;
    padding-right: 20px;
}


/* non-modal version of storage panel content */ 
.nonmodal .tab-panel .card-content {
    overflow-y: inherit;
}

/* modal version of storage panel content */ 
.modal .tab-panel .card-content {
    overflow-y: auto;
}

/* footer for a non-modal storage panel */
.stickyFooter {
    z-index: 1002;
    position: sticky;
    position: -webkit-sticky; /* Safari */
    display: inline-block;
    width: 100%;
    height: 50px;
    bottom: 0;
}

.modal-footer.customStickyFooter{
    padding: 0;
    height: 50px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

/* button within a footer for a non-modal storage panel */
.stickyFooter .btn {
    margin: 6px;
}

/* uses default values for modal storage panel footer*/
.modal .stickyFooter {
    z-index: 1004;
    position: fixed;
    left: 0;
    text-align: left;
}

.privacy-statement-margin {
    margin-top: 2%;
    margin-bottom: 2%;
}

.center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-card-content {
    bottom: 0;
    position: absolute;
    width: 100%;
}

.panorama-version {
    height: 190px;
    margin-top: auto;
    justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panorama-version i.immersight-icons{
    font-size: 150px !important;
}

.immersight-icons {
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.image-enhancement-overlay {
    position:absolute;
    top: 0; 
    right: 0; 
    z-index: 11111; 
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 5px;
}

.image-enhancement-overlay p {
    margin: 0 !important;
}

div.gallery .card {
    margin: 5px;
    border: 5px solid #ccc;
    border-radius: 5%;
    float: left;
    width: 220px;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
}

div.gallery.selected .card {
    border: 5px solid #009fe3;
}

div.gallery .card img {
    width: 100%;
    height: 190px;
}

div.gallery-center {
    display: flex;
    justify-content: center;
    height: 100%;
    position: absolute;
    width: 100%;
    flex-wrap: wrap;
}

/*___________________________________________________________
    
        LANGUAGE CHOICE PANEL (localization picker)
___________________________________________________________ */

/* Dropdown button style */
.languageChoiceDropDownButton {
    display: inline-flex;
}
.languageChoiceDropDownButton .custom-icon {
    margin-bottom: 3px;
}
.languageChoiceDropDownButton .label {
    padding-left: 10%;
}
.languageChoiceDropDownButton .material-icons{
    margin: 0;
}

/* Dropdown content style */
.languageChoiceDropDownItem {
    width: 100%;
}
.languageChoiceDropDownItem .custom-icon{
    margin-bottom: -6px
}
.languageChoiceDropDownItem .label{
    margin-left: 5px;
}

.autocomplete-content.dropdown-content li:hover {
    background-color: #eee !important;
}

.autocomplete-content li span {
    color: black;
}

.autocomplete-content li .highlight {
    color: var(--primary-color);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Slider color */
.noUi-connect, .noUi-tooltip {
	background: #009fe3 !important;
	background: var(--primary-color) !important;
}

/* Fix for autocomplete dropdown hiding input field */
.autocomplete-content.dropdown-content {
	top: 0 !important;
}

/* prevent preloader to be activate by an active tab */
.preloader-wrapper:not(.active) .spinner-layer, 
.preloader-wrapper:not(.active) .spinner-layer.spinner-blue-only, 
.preloader-wrapper:not(.active) .spinner-layer.spinner-red-only, 
.preloader-wrapper:not(.active) .spinner-layer.spinner-yellow-only, 
.preloader-wrapper:not(.active) .spinner-layer.spinner-green-only {
    opacity: 0;
    -webkit-animation: none;
    animation: none;
}


/* table view for attributes in the koje description */
.attributes td {
    padding: 0px 5px 0px 0px
}

.attributes td .input-field {
    margin: 6px 0 6px 0;
}

.attributes td .attributeBool {
    margin: 18px 0 18px 0 !important;
}

.dragCursor{
    cursor: move;
}
caption.attributes{
    color: #9e9e9e;
    text-align: left;
    font-size: 13px;
}

/*___________________________________________________________
    
        PUBLISH POOL PANEL
___________________________________________________________ */

.publishPoolLabel {
    font-size: inherit;
}

/*___________________________________________________________
    
                    EVENT PREVIEW GRID
___________________________________________________________ */
.previewGridItem {
    height: 400px;
    min-height: 200px;
}

.previewGridImage {
    height: 100% !important;
    max-height: 400px;
}

/*___________________________________________________________
    
                    SPACE LINK
___________________________________________________________ */
.spaceLink {
    color: white;
}

.spaceLink:hover {
    color: #039be5;
    text-decoration: underline;
}

/*___________________________________________________________
    
                    User-Device Table
___________________________________________________________ */

.devices-container {
    padding: 0 16px 16px 40px;
}

.devices-table {
    width: 100%;
    border-collapse: collapse;
}

.devices-table th,
.devices-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

/*___________________________________________________________
    
                    Different / Unsorted
___________________________________________________________ */

.button-margin {
    margin: 0.5rem 0;
}

.password-show-button {
    color: #ffffff !important;
    position: absolute;
    top: 0px;
    right: 14px;
    z-index: 3;
    opacity: .5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.password-show-button:hover {
    opacity: .87;
}

.modal .storage-pagination {
    top: -24px;
}

.storage-pagination {
    background-color: #425761;
    z-index: 100;
    padding: 10px;
    top: 0;
}

.storage-pagination-background {
    background-color: #425761;
}

.storage-pagination ul {
    margin: 0px;
}

/* project search */
.event-card .card {
    height: 600px;
}

.event-card .card .card-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #4d6671;
}

.stick-top-10 {
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
    z-index: 10;
}

.feedbackBorderERROR {
    color: #f44336;
}

.display-block {
    display: block !important;
}

.input-description {
    display: block;
    margin-left: 3.75rem;
    margin-bottom: 2rem;
    width: calc(100% - 3rem - 1.5rem);
    overflow-wrap: break-word; 
    color: #b0b0b0;
}