/* ==========================================================================
   Default styles
   ========================================================================== */

html,
body {
    /*    height: 100%;*/
    overflow-x: hidden;
    /* prevents horizontal scroll bars */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* disable webkit tap highlight */
}

body {
    position: relative;
    /*	font: 16px/26px "Open Sans", Helvetica, Arial, sans-serif;*/
    padding-top: 50px;
    /* Move down content because we have a fixed navbar that is 50px tall */
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.row {
    position: relative;
}

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


/* ==========================================================================
   Layout styles
   ========================================================================== */

/*
 * Navbar
 */

.navbar.affix {
    width: 100%;
    z-index: 9999 !important;
}


.navbar-fixed-bottom,
.navbar-fixed-top {
    z-index: 1000;
}

.navbar-brand {
    height: auto;
}

/* second nav (when using external nav) */

.navbar-second,
.navbar-second ul li,
.navbar-second .navbar-nav > li > a {
    display: inline-flex;
}

.navbar-second .navbar-nav > li > a {
    padding-top: 15px;
}

/* 
 * TOPNAV Dropdown variant 
 */

ul.top-nav li ul.subnav {
    position: absolute;
    width: 200px;
    background: white;
    padding: 20px 10px;
    display: none;
    border: 1px solid #ccc;
    border-top: 0px none;
}

ul.top-nav li:hover ul.subnav {
    display: block;
}

ul.top-nav li ul.subnav li ul.subnav {
    position: absolute;
    margin: -40px 0 0 185px;
    background: green;
    padding: 20px 10px;
    display: none;
}

ul.top-nav li ul.subnav li:hover ul.subnav {
    display: block;
}

@media (max-width: 768px) {
    ul.top-nav li ul.subnav li ul.subnav {
        margin: 0;
    }
    .navbar-fixed-bottom,
    .navbar-fixed-top {
        z-index: 99999;
    }
    .navbar-second {
        display: -webkit-box;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}


/*
 * Sidebar
 */

/* Hide for mobile, show later */

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .navbar-second {
        display: -webkit-box;
        white-space: nowrap;
    }
    .col-sm-3.col-md-2.sidebar {
        top: 20px;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}


/* Sidebar navigation */

.nav-sidebar {
    margin-right: -21px;
    /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}

.nav-sidebar ul > li > a {
    padding-right: 20px;
    padding-left: 50px;
}

.nav-sidebar li.selected > a {
    color: #555;
    background-color: #e7e7e7;
}


/*
 * Main content
 */

.main {
    padding: 20px;
}

@media (min-width: 768px) {
    .mainPlus {
        padding-right: 40px;
        padding-left: 40px;
    }
}

.main .page-header {
    margin-top: 0;
}


/*
* syncMessageModal listview
*/

.sync-message-modal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sync-message-modal ul li {
    margin-bottom: 6px;
}


/* ==========================================================================
   Common styles
   ========================================================================== */

.table.table-vert td,
.table.table-vert th {
    vertical-align: middle;
}

.dropdown-menu > li > a.disabled {
    background-color: #fff;
    border-color: #ccc;
    cursor: default;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

tr[data-href],
tr[data-target],
li[data-href] {
    cursor: pointer;
}

.btn-disabled {
    color: #999;
    background-color: #ddd;
    border-color: #999;
    cursor: pointer;
}

.list-group {
    /*	margin:20px 0px;*/
}

.list-group.simple a.list-group-item:before {
    content: "› ";
}

.list-group.simple a.list-group-item {
    border: none;
    padding: 0;
    background: none;
}


/* 
 * Modal-wide class addition, for bigger modals
 */

.modal.modal-wide .modal-dialog {
    width: 80%;
}

.modal-wide .modal-body {
    overflow-y: auto;
}


/* styles to put input fields aligned after each other should not have the heavy paddings */

.form-group .row .col-xs-1:not(:first-child),
.form-group .row .col-sm-1:not(:first-child),
.form-group .row .col-xs-2:not(:first-child),
.form-group .row .col-sm-2:not(:first-child),
.form-group .row .col-xs-3:not(:first-child),
.form-group .row .col-sm-3:not(:first-child),
.form-group .row .col-xs-4:not(:first-child),
.form-group .row .col-sm-4:not(:first-child),
.form-group .row .col-xs-5:not(:first-child),
.form-group .row .col-sm-5:not(:first-child),
.form-group .row .col-xs-6:not(:first-child),
.form-group .row .col-sm-6:not(:first-child),
.form-group .row .col-xs-7:not(:first-child),
.form-group .row .col-sm-7:not(:first-child),
.form-group .row .col-xs-8:not(:first-child),
.form-group .row .col-sm-8:not(:first-child),
.form-group .row .col-xs-9:not(:first-child),
.form-group .row .col-sm-9:not(:first-child),
.form-group .row .col-xs-10:not(:first-child),
.form-group .row .col-sm-10:not(:first-child),
.form-group .row .col-xs-11:not(:first-child),
.form-group .row .col-sm-11:not(:first-child),
.form-group .row .col-xs-12:not(:first-child),
.form-group .row .col-sm-12:not(:first-child),
.form-group .row .col-md-1:not(:first-child),
.form-group .row .col-lg-1:not(:first-child),
.form-group .row .col-md-2:not(:first-child),
.form-group .row .col-lg-2:not(:first-child),
.form-group .row .col-md-3:not(:first-child),
.form-group .row .col-lg-3:not(:first-child),
.form-group .row .col-md-4:not(:first-child),
.form-group .row .col-lg-4:not(:first-child),
.form-group .row .col-md-5:not(:first-child),
.form-group .row .col-lg-5:not(:first-child),
.form-group .row .col-md-6:not(:first-child),
.form-group .row .col-lg-6:not(:first-child),
.form-group .row .col-md-7:not(:first-child),
.form-group .row .col-lg-7:not(:first-child),
.form-group .row .col-md-8:not(:first-child),
.form-group .row .col-lg-8:not(:first-child),
.form-group .row .col-md-9:not(:first-child),
.form-group .row .col-lg-9:not(:first-child),
.form-group .row .col-md-10:not(:first-child),
.form-group .row .col-lg-10:not(:first-child),
.form-group .row .col-md-11:not(:first-child),
.form-group .row .col-lg-11:not(:first-child),
.form-group .row .comdsm-12:not(:first-child),
.form-group .row .col-lg-12:not(:first-child) {
    padding-left: 0;
}


/* ==========================================================================
   cursor styles
   ========================================================================== */

a {
    cursor: pointer
}

span.handle_span {
    cursor: all-scroll;
}

span.handle_span_off {
    cursor: all-scroll;
}


/* ==========================================================================
   Roxen editor styles
   ========================================================================== */

.highlight {
    border: 2px dotted #5CE65C;
}

.placeholder {
    background-color: #FFFFFF;
    width: 30px;
    height: 30px;
}

.absolute {
    visibility: hidden;
    width: 30px;
    height: 30px;
}

.roxen-edit-box-wrap {
    height: 100%;
}

.roxen-edit-box-wrap .editlink,
a.roxen-linkbrowser {
    height: 17px !important;
}

.roxen-edit-box-off {
    height: 100%;
}

.roxen-edit-box-on {
    height: 100%;
    outline: 1px dotted #f8bb7b;
}

.roxen-edit-marker-off {
    visibility: hidden;
    display: block;
    position: absolute;
}

.roxen-edit-marker-on:before {
    visibility: visible;
    display: block;
    position: absolute;
    background: URL('/apps/com.brightanswers.nieuweverhuringapp/app-files/resources/img/icons-background.png');
    width: 39px;
    height: 24px;
    z-index: 2;
    font-family: FontAwesome;
    content: "\f040";
    color: black;
    padding-left: 3px;
}

.handle_span-off {
    visibility: hidden;
    display: block;
    position: absolute;
}

.handle_span:before {
    visibility: visible;
    display: block;
    position: absolute;
    top left no-repeat;
    width: 15px;
    height: 15px;
    z-index: 3;
    font-family: FontAwesome;
    content: "\f047";
    color: black;
    margin-left: 18px;
}

div.roxen-linkbrowser-anchor a {
    visibility: visible;
    display: block;
    position: absolute;
    background: URL('/roxen-files/cms-sites/4.5/images/button_link_browser.gif') top left no-repeat;
    width: 28px;
    height: 13px;
    z-index: 1;
}

.drag-over {
    position: relative;
}

.drag-over > .content-zone {}

.drag-over > .drop-zone {
    background-color: lightyellow;
    outline: 2px dashed saddlebrown;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}


/* ==========================================================================
   drag & drop and modal styles
   ========================================================================== 

	.edit-modal-btn {
	    color: 			  #ffffff;
	    background-color: #0275d8;
	    border-color: 	  #0275d8;
		z-index:		  2;
	}
	.edit-modal-btn:hover{
		color: #fff;
	    background-color: #286090;
	    border-color: #204d74;
	}

	.edit-modal-btn-close{
	    color: #373a3c;
	    background-color: #fff;
	    border-color: #ccc;
		z-index:		  2;
	}
	.edit-modal-btn-close:hover{
		color: #333;
	    background-color: #e6e6e6;
	    border-color: #adadad;
	}

    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000000;
    }

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop, .modal-backdrop.fade.in {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }
*/

/* ==========================================================================
   edit modus styles
   ========================================================================== 

.edit-modus .highlight {
  	 outline:             1px dotted #5CE65C;
}

.edit-modus {
     outline:          1px dotted #f8bb7b;
}

.edit-modus .roxen-edit-box-on, .edit-modus .roxen-edit-box-off{
     outline:          1px dotted #f8bb7b;
}

.edit-modus .roxen-edit-marker-on:before, .edit-modus .roxen-edit-marker-off:before{
    visibility:       visible;
    display:          block;
    position:         absolute;
    background:	      URL('/apps/com.brightanswers.nieuweverhuringapp/app-files/resources/img/icons-background.png');
    width:			  39px;
	height:			  24px;
	z-index:		  2;
	font-family: 	  FontAwesome;
	content: 		  "\f040";
	color:			  black;
	padding-left:     3px;	
}
.edit-modus .handle_span_off:before, .edit-modus .handle_span:before{
    visibility:       visible;
    display:          block;
    position:         absolute;
					  top left no-repeat;
	width:            15px;
	height:           15px;
    z-index:          3;
	font-family: 	  FontAwesome;
	content: 		  "\f047";
	color:			  black;
	margin-left:      18px;		  
}

.edit-modus-navbar .handle_span_off:before, .edit-modus-navbar .handle_span:before{
    visibility:       visible;
    display:          block;
    position:         absolute;
	background:	      URL('/apps/com.brightanswers.nieuweverhuringapp/app-files/resources/img/icons-background-navbar.png');
					  top left no-repeat;
    width:			  26px;
	height:			  24px;
	z-index:          2;
	font-family: 	  FontAwesome;
	content: 		  "\f047";
	color:			  black;
	padding-left:     3px;		  
}*/

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1.0;
    }
}

@keyframes hide {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0;
    }
}

.btn-primary.inactive {
    color: #fff;
    background-color: #ccc;
    border-color: #2e6da4;
}


/* ----------- loading  animations (offline pages) ------------ */

.angularApp .content-box {
    -webkit-animation: fadein 0.8s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.8s;
    /* Firefox < 16 */
    -ms-animation: fadein 0.8s;
    /* Internet Explorer */
    -o-animation: fadein 0.8s;
    /* Opera < 12.1 */
    animation: fadein 0.8s;
}

.angularApp #manifestModal {
    -webkit-animation: fadein 5s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 5s;
    /* Firefox < 16 */
    -ms-animation: fadein 5s;
    /* Internet Explorer */
    -o-animation: fadein 5s;
    /* Opera < 12.1 */
    animation: fadein 5s;
}

.angularApp #manifestModalBackdrop {
    -webkit-animation: fadein 0.5s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.5s;
    /* Firefox < 16 */
    -ms-animation: fadein 0.5s;
    /* Internet Explorer */
    -o-animation: fadein 0.5s;
    /* Opera < 12.1 */
    animation: fadein 0.5s;
}

@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;
    }
}


/* ----------- loading  animations (offline pages) ------------ */

/* -----------  Metadata List Decision tree component --------  */

.add-metadata ul {
    list-style-type: none
}

.add-metadata .collapsed ul {
    display: none;
}

.add-metadata li.collapsed i.material-icons.list-icon::after {
    content: "keyboard_arrow_right";
}

.add-metadata i.material-icons.list-icon::after {
    content: "keyboard_arrow_down";
}

.add-metadata i.material-icons {
    position: relative;
    top: 7px;
}

.add-metadata ul {
    padding-top: 5px;
}

.add-metadata .metadata-list {
    margin-bottom: 15px;
}

.add-metadata .metadata-list ul:first-child {
    padding-left: 0px;
}

.add-metadata .action-button {
    border-radius: 4px;
}


/* -----------  Metadata List Decision tree component --------  */

/************************************************************
* 404 page
*************************************************************/

.path- .container-fluid {
    width: 1170px;
}

.path- .error-404 .grid-column-3 {
    text-align: center;
}

.path- .header-component.with-image {
    position: relative;
    background-color: #eee;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-attachment: inherit;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    height: 300px;
}


/************************************************************
* Translation Element
*************************************************************/

/* 
.translate li #lang-selector:before {
    content: "\f0ac";
    display: block;
    text-align: center;
    font-family: 'fontAwesome';
    font-size: 24px;
    left: 5px;
    transition: 1s all ease;
    color: #15488e;
    position: relative;
} */

#lang-selector .country{
    padding-top: 23px;
    padding-bottom: 18px;
    font-size: 18px;
    color: rgba(0,0,0,1);
    line-height: 28px;
}

#lang-selector .country:before{
    content: "\f0ac";
    text-align: center;
    font-family: 'fontAwesome';
    font-size: 19px;
    left: -3px;
    transition: 1s all ease;
    color: #000;
    position: relative;
}