/* ==========================================================================
	TYPOGRAPHY
   ========================================================================== */

   body, html{ height: 100%; }

   body {
	   font-family: 'Roboto', sans-serif;
	   font-size: 14px;
	   line-height: 24px;
	   color: #222;
	   background-color: #EDECEC;
	   background-color: #0f172a;
   }

   h1, .h1, h2, .h2, h3, .h3, h4, .h4{
	   font-weight: 300;
   }

   h1, .h1 { font-size: 20px; margin: 0;  }
   h2, .h2 { font-size: 20px; margin-top: 40px; margin-bottom: 20px; }
   h3, .h3 { font-size: 18px; font-weight: 700; }
   h4, .h4 { font-size: 16px; }
   h5, .h5 { font-size: 14px; }
   h6, .h6 { font-size: 14px; }

   h1 > a, h1 > a:hover, h1 > a:active, h1 > a:focus{
	   text-decoration: none;
   }

   h2:first-child, h3:first-child{ margin-top: 0; }

   p, ul, ol{
	   margin-bottom: 20px;
   }

   a {
	   -webkit-transition: color 0.1s ease-in, background-color 0.1s ease-in;
	   -moz-transition: color 0.1s ease-in, background-color 0.1s ease-in;
	   -ms-transition: color 0.1s ease-in, background-color 0.1s ease-in;
	   -o-transition: color 0.1s ease-in, background-color 0.1s ease-in;
	   transition: color 0.1s ease-in, background-color 0.1s ease-in;
   }

   hr{
	   border-top-color: #dae3e9;
   }


   /* ==========================================================================
	   STRUCTURE
	  ========================================================================== */

   .base{
	   min-height: 100%;
   }

   .admin-auth{
	   margin-top: 30px;
   }

   .admin-nav{}

   .admin-main{
	   overflow: hidden;
	   background-color: #fff;
	   box-shadow: 0 0 4px rgba(0,0,0,0.25);
   }

   .admin-top{
	   padding: 13px 0;
	   border-bottom: 1px solid #dae3e9;
	   background-color: #FFF;
   }

   .admin-top-left{
	   margin-bottom: 10px;
   }

   .admin-section{
	   padding-top: 30px;
	   padding-bottom: 30px;
   }

   .admin-section.p-0{
	   padding-top: 30px;
	   padding-bottom: 30px;
   }

   .admin-section + .admin-section{
	   border-top: 1px solid #dae3e9;
   }

   .admin-container{
	   max-width: 1170px;
	   padding-left: 15px;
	   padding-right: 15px;
	   margin-left: auto;
	   margin-right: auto;
   }

   @media screen and (min-width: 768px) {
	   .admin-auth{ margin-top: 80px; }

	   .admin-nav{
		   width: 210px;
		   padding-bottom: 30px;
	   }

	   .admin-main{
		   padding-top: 65px;
		   padding-bottom: 60px;
	   }

	   .admin-top{
		   position: fixed;
		   z-index: 15;
		   left: 210px;
		   top: 0;
		   right: 0;
		   margin-bottom: 0;
		   height: 65px;
	   }

	   .admin-top-left{
		   float: left;
		   margin-bottom: 0;
	   }

	   h1.admin-top-left{
		   margin-top: 6px;
		   margin-bottom: 6px;
	   }

	   .admin-top-right{
		   float: right;
	   }
   }

   @media screen and (min-width: 1200px) {
	   .admin-container{
		   padding-left: 30px;
		   padding-right: 30px;
	   }
   }

   @media screen and (min-width: 1600px) {
	   .admin-nav{
		   width: 240px;
	   }

	   .admin-top{
		   left: 240px;
	   }
   }


   /* ==========================================================================
	   MAIN
	  ========================================================================== */

   .main-header{

   }

   @media screen and (min-width: 768px) {
	   .main-header{
		   position: fixed;
		   left: 210px;
		   top: 0;
		   right: 0;
		   padding: 20px 15px;
		   box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	   }

	   .main-body{
		   padding: 90px 0 60px 0;
	   }
   }


   /* ==========================================================================
	   CONTAINERS
	  ========================================================================== */

   .container-xs{ max-width: 360px; } /* auth layout */
   .container-sm{ max-width: 510px; } /* account form */
   .container-md{ max-width: 860px; } /* page form */
   .container-lg{ max-width: 960px; }
   .container-xl{ max-width: 1200px; }

   /* ==========================================================================
	   BRAND
	  ========================================================================== */

   .brand{
	   color: #51647b;
	   font-size: 24px;
	   font-weight: 300;
	   line-height: 1em;
	   margin-top: 6px;
	   margin-bottom: 5px;
   }

   .brand-highlight{
	   color: #8391a2;
   }

   @media screen and (min-width: 768px) {
	   .brand-lg{
		   font-size: 42px;
		   letter-spacing: -1px;
	   }
   }

   /* ==========================================================================
	   AVATAR
	  ========================================================================== */

   .avatar{
	   display: block;
	   width: 34px;
	   height: 34px;
	   padding: 5px;
   }

   .avatar:focus,
   .avatar:hover{
	   color: #fff;
   }

   .avatar svg{
	   fill: currentColor;
   }


   /* ==========================================================================
	   PAGE HEADER
	  ========================================================================== */

   .page-header{
	   clear: both;
	   position: relative;
	   border-bottom: 1px solid #dae3e9;
   }

   div.page-header,
   header.page-header{
	   margin-top: 20px;
	   margin-bottom: 50px;
   }

   .page-header > .nav{
	   position: absolute;
	   right: 0;
	   bottom: -1px;
   }

   .page-footer{
	   padding-top: 50px;
   }

   .page-footer-fixed{
	   padding-top: 30px;
	   padding-bottom: 30px;
	   border-top: 1px solid #dae3e9;
	   background-color: #FFF;
   }

   @media screen and (min-width: 768px) {
	   header.page-header{

	   }
	   .page-body-fixed{
		   margin-bottom: 120px;
	   }

	   .page-footer-fixed{
		   position: fixed;
		   z-index: 11;
		   left: 240px;
		   right: 30px;
		   bottom: 0;
		   padding-top: 30px;
		   height: 120px;
		   border-top: 1px solid #dae3e9;
		   background-color: #FFF;
	   }
   }

   @media screen and (min-width: 1200px) {
	   .page-footer-fixed{
		   left: 300px;
	   }
   }


   /* ==========================================================================
	   HELPER CLASSES
	  ========================================================================== */

   /* show / hide content for IE8 */
   .hidden-ie8{ display: block; }
   .visible-ie8{ display: none; }

   .lt-ie9 .hidden-ie8{ display: none; }
   .lt-ie9 .visible-ie8{ display: block; }


   .mb-0{ margin-bottom: 0 !important; }
   .mb-5{ margin-bottom: 5px !important; }
   .mb-10{ margin-bottom: 10px !important; }
   .mb-15{ margin-bottom: 15px !important; }
   .mb-20{ margin-bottom: 20px !important; }
   .mb-30{ margin-bottom: 30px !important; }
   .mb-40{ margin-bottom: 40px !important; }
   .mb-50{ margin-bottom: 50px !important; }
   .mb-60{ margin-bottom: 60px !important; }
   .mb-70{ margin-bottom: 70px !important; }
   .mb-80{ margin-bottom: 80px !important; }
   .mb-90{ margin-bottom: 90px !important; }
   .mb-100{ margin-bottom: 100px !important; }

   .mt-0{ margin-top: 0px !important; }
   .mt-5{ margin-top: 5px !important; }
   .mt-10{ margin-top: 10px !important; }
   .mt-20{ margin-top: 20px !important; }
   .mt-30{ margin-top: 30px !important; }
   .mt-40{ margin-top: 40px !important; }
   .mt-50{ margin-top: 50px !important; }
   .mt-60{ margin-top: 60px !important; }
   .mt-70{ margin-top: 70px !important; }
   .mt-80{ margin-top: 80px !important; }
   .mt-90{ margin-top: 90px !important; }
   .mt-100{ margin-top: 100px !important; }

   .ml-5{ margin-left: 5px !important; }
   .ml-10{ margin-left: 10px !important; }
   .ml-20{ margin-left: 20px !important; }
   .ml-30{ margin-left: 30px !important; }
   .ml-40{ margin-left: 40px !important; }
   .ml-50{ margin-left: 50px !important; }
   .ml-60{ margin-left: 60px !important; }
   .ml-70{ margin-left: 70px !important; }
   .ml-80{ margin-left: 80px !important; }
   .ml-90{ margin-left: 90px !important; }
   .ml-100{ margin-left: 100px !important; }

   .mr-5{ margin-right: 5px !important; }
   .mr-10{ margin-right: 10px !important; }
   .mr-20{ margin-right: 20px !important; }
   .mr-30{ margin-right: 30px !important; }
   .mr-40{ margin-right: 40px !important; }
   .mr-50{ margin-right: 50px !important; }
   .mr-60{ margin-right: 60px !important; }
   .mr-70{ margin-right: 70px !important; }
   .mr-80{ margin-right: 80px !important; }
   .mr-90{ margin-right: 90px !important; }
   .mr-100{ margin-right: 100px !important; }

   @media screen and (min-width: 992px) {
	   .mt-md-5{ margin-top: 5px !important; }
	   .mt-md-10{ margin-top: 10px !important; }
	   .mt-md-20{ margin-top: 20px !important; }
	   .mt-md-30{ margin-top: 30px !important; }
   }

   .p-0{ padding: 0 !important; }

   .pl-5{ padding-left: 5px !important; }
   .pl-10{ padding-left: 10px !important; }
   .pl-15{ padding-left: 15px !important; }

   .pt-5{ padding-top: 5px !important; }
   .pt-10{ padding-top: 10px !important; }
   .pt-15{ padding-top: 15px !important; }

   .pb-5{ padding-bottom: 5px !important; }
   .pb-10{ padding-bottom: 10px !important; }
   .pb-15{ padding-bottom: 15px !important; }

   .pr-5{ padding-right: 5px !important; }
   .pr-10{ padding-right: 10px !important; }
   .pr-15{ padding-right: 15px !important; }

   .bg-white{ background-color: #fff; }
   .bg-lgrey{ background-color: #f9f9f9; }
   .bg-lblue{ background-color: #0d6efd; }
   .bg-dblue{ background-color: #2c2f40; }


   /* ==========================================================================
	   TEXT
	  ========================================================================== */

   .text-nowrap{
	   white-space: nowrap !important;
   }

   .text-help{
	   color: #777 !important;
	   font-weight: 300 !important;
   }

   .text-muted{
	   color: #777 !important;
   }

   .text-light{
	   font-weight: 300 !important;
   }

   .text-blue{
	   color: #0d6efd !important;
   }

   .text-white{
	   color: #fff !important;
   }

   .text-montserrat{
	   font-family: 'Montserrat Alternates', sans-serif !important;
   }

   .text-ellipsis{
	   white-space: nowrap;
	   overflow: hidden;
	   text-overflow: ellipsis;
   }


   /* ==========================================================================
	   NAV HEADER
	  ========================================================================== */

   .nav-header{
	   padding: 15px;
   }

   @media screen and (min-width: 768px) {
	   .nav-header{
		   height: 65px;
		   background-color: rgba(0,0,0,0.25);
	   }
   }


   /* ==========================================================================
	   NAV TOGGLE
	  ========================================================================== */

   .nav-toggle {
	   border: 1px solid #51647b;
	   border-radius: 4px;
	   padding: 8px 12px;
	   position: absolute;
	   right: 15px;
	   top: 15px;
	   cursor: pointer;
   }
   .nav-toggle:hover { background-color: rgba(0,0,0,0.1); }

   .nav-toggle .icon-bar {
	   background-color: #51647b;
	   border-radius: 1px;
	   display: block;
	   height: 2px;
	   width: 22px;
   }
   .nav-toggle .icon-bar + .icon-bar {
	   margin-top: 4px;
   }


   /* ==========================================================================
	   NAV ALGEMEEN
	  ========================================================================== */

   nav ul{
	   list-style: none;
	   padding-left: 0;
	   margin-bottom: 0;
   }

   nav a{
	   color: rgba(255,255,255, 0.6);
	   text-decoration: none;
   }

   nav a:hover,
   nav a:focus{
	   text-decoration: none;
   }


   /* ==========================================================================
	   NAV HEADING
	  ========================================================================== */

   .nav-heading{
	   float: right;
	   margin-bottom: 20px;
   }

   .nav-heading > ul > li{
	   float: left;
	   /*margin: 0 10px;*/
   }

   .nav-heading > ul > li > a{
	   display: inline-block;
	   /*font-size: 13px;*/
	   /*color: #428BCA;*/
   }

   .nav-heading > ul > li > a:hover,
   .nav-heading > ul > li > a:focus{
	   color: #428BCA;
   }

   /* ==========================================================================
	   NAV MAIN
	  ========================================================================== */

   .nav-main{
	   display: none;
	   /*border-top: 1px solid #d6dde4;*/
	   margin-bottom: -1px;
   }

   .nav-main > li{
	   /*border-bottom: 1px solid #d6dde4;*/
   }

   .nav-main a{
	   display: block;
	   position: relative;
	   outline: none;
	   padding: 8px 15px;
	   border-radius: 4px;
	   color: rgba(255,255,255, 0.6);
   }

   .nav-main a:hover{
	   color: #fff;
	   background-color: rgba(255,255,255, 0.1);
   }

   .nav-main li.active > a{
	   color: #fff;
	   background-color: rgba(255,255,255, 0.1);
   }

   .nav-main li.open{
	   border-radius: 4px;
	   /*background-color: rgba(255,255,255, 0.1);*/
   }

   .nav-main .fa:first-child{
	   min-width: 20px;
	   font-size: 16px;
   }

   .nav-main .fa-angle-down{
	   float: right;
	   position: relative;
	   top: 5px;
	   -webkit-transition: all 0.1s ease-in;
	   -moz-transition: all 0.1s ease-in;
	   -ms-transition: all 0.1s ease-in;
	   -o-transition: all 0.1s ease-in;
	   transition: all 0.1s ease-in;
   }

   .nav-main .open .fa-angle-down{
	   transform: rotate(-180deg);
   }


   /* subnav */
   .nav-main li ul{
	   display: none;
   }

   .nav-main li a.open + ul{
	   display: block;
   }

   .nav-main li ul a{
	   padding-left: 50px;
	   padding-top: 6px;
	   padding-bottom: 6px;
	   font-size: 14px;
   }

   @media screen and (min-width: 768px) {
	   .nav-main{
		   margin: 10px;
		   display: block !important;
		   overflow: hidden;
	   }

	   .nav-main .active{ position: relative; }

	   /* active nav driehoekje */
	   /*.nav-main .active:after{
		   content: "";
		   display: block;
		   position: absolute;
		   z-index: 1;
		   right: -8px;
		   top: 50%;

		   width: 17px;
		   height: 17px;
		   margin-top: -8px;
		   background-color: #FFF;
		   box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
		   transform: rotate(45deg);
	   }*/
   }


   /* ==========================================================================
	   DROPDOWN MENU
	  ========================================================================== */

   .dropdown-menu{
	   padding: 0;
	   border-radius: 0;
	   margin-top: 10px;
	   min-width: 180px;
	   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   }

   .dropdown-menu > li + li{
	   border-top: 1px solid #ededed;
   }

   .dropdown-menu > li > *{
	   padding: 10px 15px;
	   display: block;
   }

   .dropdown-menu > li > label{
	   padding-top: 9px;
	   padding-bottom: 9px;
   }

   .dropdown-menu > li > a{
	   color: #51647b;
	   padding: 10px 15px;
	   line-height: inherit;
   }

   .dropdown-menu > li > a:focus,
   .dropdown-menu > li > a:hover{
	   color: #51647b;
	   background-color: #f2f2f2;
   }

   .dropdown-menu .fa:first-child{
	   min-width: 16px;
	   font-size: 14px;
   }

   .dropdown-heading{
	   background-color: #ededed;
   }

   .dropdown-arrow:before{
	   content: "";
	   display: block;
	   position: absolute;
	   left: 10px;
	   top: -8px;
	   width: 0;
	   height: 0;
	   border: 8px solid transparent;
	   border-bottom-color: white;
	   border-top-width: 0;
   }

   .dropdown-menu-right.dropdown-arrow:before{
	   left: auto;
	   right: 10px;
   }


   /* ==========================================================================
	   ALERT
	  ========================================================================== */

	.alert{
	   z-index: 1050 !important;
	   border-radius: 0 !important;
	}

   .alert ul{
	   list-style: none;
	   padding-left: 0;
	   margin-bottom: 0;
   }

   .alert li:first-letter{
	   text-transform: capitalize
   }

   .notify{
	   padding-right: 40px;
   }


   /* ==========================================================================
	   BUTTONS
	  ========================================================================== */

   .cursor-move{
	   cursor: move;
   }

   .btn{
	   font-weight: 300;
	   /*border-radius: 0 !important;*/
   }

   .btn:not(.btn-sm):not(.btn-lg){
	   padding: 8px 14px;
	   /*font-size: 14px;*/
	   /*line-height: 20px;*/
   }

   .btn-container .btn {
	   margin-bottom: 6px;
   }

   .btn-sm{
	   font-size: 13px;
   }

   .btn-lg{
	   font-size: 16px;
	   font-weight: 300;
   }

   .btn-action{
	   font-size: 18px;
	   padding: 0px 4px;
   }

   .btn-primary{
	   border-color: #0d6efd;
	   background-color: #0d6efd;
   }

   .btn-primary:hover{
	   border-color: #0a58ca;
	   background-color: #0a58ca;
   }

   .btn-success{
	   border-color: #35b653;
	   background-color: #35b653;
   }

   .btn-success:hover{
	   border-color: #028d02;
	   background-color: #028d02;
   }

   .btn-default{
	   color: #666;
   }

   .btn-default:hover,
   .btn-default:focus{
	   color: #555;
   }

   .btn-default.active,
   .btn-default.active.focus,
   .btn-default:has(input:checked).focus,
   .btn-default:has(input:checked) {
		color: #333;
		border-color: #adadad;
		background-color: #e6e6e6;
   }

   .btn-muted{
	   color: #999;
	   border: transparent;
	   background-color: transparent;
   }

   .btn-muted:focus,
   .btn-muted:hover{
	   color: #666;
	   border: transparent;
	   background-color: transparent;
   }

   .btn-active-success.active{ background-color: #DFF0D8; }
   .btn-active-warning.active{ background-color: #FCF8E3; }
   .btn-active-danger.active{ background-color: #F2DEDE; }
   .btn-active-info.active{ background-color: #D9EDF7; }

   .btn-active-primary.active,
   .btn-active-primary.active.focus,
   .btn-active-primary:has(input:checked).focus,
   .btn-active-primary:has(input:checked){ background-color: #0d6efd; color: #FFF; }


   /* ==========================================================================
	   ICONS
	  ========================================================================== */

   .icon{
	   display: inline-block;
	   vertical-align: middle;
   }

   .icon-logo{
	   display: inline-block;
	   width: 1em;
	   height: 1em;
	   vertical-align: middle;
	   background: url("../img/logo.png") no-repeat 50% 50%;
	   background-size: 100% auto;
   }

   .icon-circle-success{
	   width: 12px;
	   height: 12px;
	   border-radius: 50px;
	   background-color: #DFF0D8;
   }

   .icon-circle-danger{
	   width: 12px;
	   height: 12px;
	   border-radius: 50px;
	   background-color: #d9534f;
   }


   .icon-grip{
	   display: inline-block;
	   vertical-align: middle;
   }

   .icon-grip i{
	   display: block;
	   height: 2px;
	   width: 6px;
	   position: relative;
	   margin-top: 2px;
   }

   .icon-grip i:before,
   .icon-grip i:after{
	   content: "";
	   display: block;
	   position: absolute;
	   top: 0;
	   height: 2px;
	   width: 2px;
	   background-color: currentColor;
   }

   .icon-grip i:before{ left: 0; }
   .icon-grip i:after{ right: 0; }



   /*.icon-logo:before{
	   content: "";
	   display: block;
	   position: absolute;
	   left: 0;
	   top: 0;
	   height: 100%;
	   padding-right: 100%;
	   background-color: red;
   }
   */

   /* ==========================================================================
	   LABELS
	  ========================================================================== */

   .label{
	   font-weight: 400;
	   padding: .2em .6em;
   }


   /* ==========================================================================
	   FORM
	  ========================================================================== */

   input[type=radio], input[type=checkbox] {
	   margin-top: 6px; /* correctie voor grotere line-height */
   }

   .form-group:last-child{
	   margin-bottom: 0;
   }

   .form-control:not(.input-lg):not(.input-sm){
	   font-size: 14px;
	   height: 38px;
	   padding: 8px 14px;
	   /*border-radius: 0;*/
   }

   .form-control:focus{
	   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(102, 175, 233, 0.5);
   }

   textarea.form-control:not(.input-lg):not(.input-sm){
	   height: auto;
   }

   .input-sm{
	   font-size: 13px;
	   font-weight: 300;
   }

   select.input-sm{ height: 37px; }

   .input-lg{
	   font-size: 16px;
	   font-weight: 300;
   }

   select.input-lg{ height: 39px; }

   	.dropdown-toggle-select,
	select.form-control:not([multiple]) {
		text-align: left !important;
		padding-right: 30px !important;
		appearance: none !important;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
		background-repeat: no-repeat !important;
		background-position: right .75rem center !important;
		background-size: 16px 12px !important;
	}

   .form-error{
	   box-shadow: 0 0 3px red;
   }

   .help-block{
	   font-size: 85%;
   }

   label{
	   font-weight: 400;
   }

   label.required {
	   position: relative;
   }

   label.required:after {
	   color: #5795bf;
	   display: inline-block;
	   content: "*";
	   font-size: 16px;
	   font-weight: bold;
	   margin-left: 4px;
   }

   .form-horizontal .control-label {
	   text-align: left;
   }

   .form-horizontal label.required:after {
	   position: absolute;
   }


   .multi{
	   display: flex;
	   margin-top: 10px;
   }

   .multi:first-child{
	   margin-top: 0;
   }

   .multi-btns{
	   flex-basis: 82px;
   }

   .multi-field{
	   flex: 1;
	   padding-right: 10px;
   }

   .multi-file{
	   flex: 2;
	   padding-right: 10px;
   }

   .multi .btn-success,
   .multi:first-child .btn-danger{
	   display: none;
   }

   .multi:first-child .btn-success{
	   display: inline-block;
   }


   /* ==========================================================================
	   BOOSTRAP SWITCH
	  ========================================================================== */

   .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
	   transition: margin-left .2s;
   }

   .bootstrap-switch + label{
	   margin-left: 4px;
   }


   /* ==========================================================================
	   BOOSTRAP SLIDER
	  ========================================================================== */

   .slider-selection{
	   background: #84C4E5;
   }


   /* ==========================================================================
	   TABLE
	  ========================================================================== */

   .table th:active {
	   outline: none;
   }

   .table th[align='center']{
	   text-align: center;
   }

   .table form {
	   margin-bottom: 0;
   }

   .table .btn:not(.btn-sm):not(.btn-lg) {
	   padding: 0px 4px;
   }


   /* ==========================================================================
	   WELL
	  ========================================================================== */

   .well{
	   border: none;
	   box-shadow: none;
	   border-radius: 0 !important;
   }

   /* ==========================================================================
	   TAB NAV
	  ========================================================================== */

   .tab-nav{
	   list-style: none;
	   padding-left: 0;
	   margin-bottom: 0;
   }

   .tab-nav > li {
	   display: inline-block;
	   vertical-align: top;
	   position: relative;
   }

   /*.tab-nav > li.active {
	   margin-bottom: -1px;
	   border-bottom: 2px solid #0d6efd;
   }*/

   .tab-nav > li > a {
	   padding: 15px;
	   color: #7a7a7a;
	   display: block;
	   position: relative;
	   text-decoration: none;
   }

   .tab-nav > li.active > a {
	   color: #333;
   }

   .tab-nav > li.active > a:after {
	   content: "";
	   display: block;
	   position: absolute;
	   z-index: 1;
	   left: 0;
	   right: 0;
	   bottom: -1px;
	   height: 2px;
	   background-color: #0d6efd;
   }

   .tab-nav > li > a:hover {
	   background-color: rgba(0,0,0,0.05);
   }


   /* ==========================================================================
	   NAV PILLS / STACKED
	  ========================================================================== */

   .nav-pills > li > a {
	   color: #333;
	   border-radius: 0;
	   position: relative;
   }

   .nav-pills > li.active > a,
   .nav-pills > li.active > a:hover,
   .nav-pills > li.active > a:focus{
	   color: #333;
	   background-color: #F5F5F5;
	   border-left: 4px solid #0d6efd;
	   margin-left: -1px;
	   padding-left: 12px;
   }

   .nav-stacked > li {
	   border: 1px solid #DDD;
   }

   .nav-stacked > li + li {
	   margin-top: 0;
	   border-top: none;
   }


   /* ==========================================================================
	   MODALS
	  ========================================================================== */

   .modal{
	   background-color: rgba(44, 47, 64, 0.8);
   }

   .modal-open{
	   overflow: inherit;
	   padding-right: 0 !important;
   }

   .modal-backdrop{
	   background-color: transparent;
   }

   .modal-backdrop.in {
	   opacity: 0.8;
   }

   .modal-dialog {
	   margin-top: 60px;
   }

   @media screen and (min-width: 1200px) {
	   .modal-xl{
		   width: 1140px;
	   }
   }

   .modal-content{
	   border: none;
	   border-radius: 0;
   }

   .modal-body{
	   padding-top: 30px;
   }

   /* ajaxModal classes */
   .modal-body .admin-top{
	   position: absolute;
	   top: auto;
	   left: 0;
	   bottom: 0;
	   border-top: 1px solid #dae3e9;
   }

   .modal-body .modal-hidden,
   .modal-body .admin-top-left{ display: none !important; }

   .modal-body .admin-section{
	   margin-left: -15px;
	   margin-right: -15px;
	   margin-top: -31px;
	   padding: 30px 0 80px 0;
   }



   .fade {
	  opacity: 0;
	  -webkit-transition: opacity 0.1s linear;
		 -moz-transition: opacity 0.1s linear;
		  -ms-transition: opacity 0.1s linear;
		   -o-transition: opacity 0.1s linear;
			  transition: opacity 0.1s linear;
   }

   .modal.fade .modal-dialog {
		/*transform: translate3d(0px, -5%, 0px);*/
	   /*-webkit-transition: transform 0.1s linear;*/
		  /*-moz-transition: transform 0.1s linear;*/
		   /*-ms-transition: transform 0.1s linear;*/
			/*-o-transition: transform 0.1s linear;*/
			   /*transition: transform 0.1s linear;*/
   }


   /* ==========================================================================
	   TREE
	  ========================================================================== */

   .tree{
	   list-style: none;
	   padding-left: 30px;
	   margin-bottom: 0;
   }

   .tree ol,
   .tree ul{
	   list-style: none;
   }

   .tree li {
	   position: relative;
   }

   .tree ol li:not(.ui-sortable-helper)::before {
	   content: "";
	   position: absolute;
	   border-top: 1px dotted #ccc;
	   display: block;
	   left: -20px;
	   top: 21px;
	   width: 20px;
	   z-index: 0;
   }

   .tree ol li:not(.ui-sortable-helper)::after {
	   content: "";
	   position: absolute;
	   border-left: 1px dotted #ccc;
	   display: block;
	   left: -20px;
	   top: -28px;
	   bottom: 21px;
	   z-index: 0;
   }

   .tree ol li:not(.ui-sortable-helper):last-child::after {
	   bottom: auto;
	   height: 48px;
   }

   .tree-item{
	   display: block;
	   margin: 6px 0;
	   position: relative;
	   z-index: 1;
   }

   .tree-item--child{
	   margin-left: 40px;
   }

   .tree-item--child:before{
	   content: "";
	   position: absolute;
	   display: block;
	   left: -21px;
	   bottom: 18px;
	   width: 20px;
	   height: 25px;
	   border-left: 1px dotted #ccc;
	   border-bottom: 1px dotted #ccc;
   }


   .tree-toggle{
	   display: none;
	   position: absolute;
	   z-index: 1;
	   left: -28px;
	   top: 11px;
	   cursor: pointer;
	   transition: transform .1s ease-in;
   }

   .tree-toggle::before{
	   content: '\f107';
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   width: 18px;
	   height: 18px;
	   border-radius: 18px;
	   color: #FFF;
	   background-color: #999;
	   cursor: pointer;
	   font: normal normal normal 14px/1 FontAwesome;
	   text-decoration: none;
   }

   .tree-toggle:hover::before{
	   background-color: #666;
   }

   .tree-collapsed > .tree-item > .tree-toggle{
	   display: block;
   }

   .tree-expanded > .tree-item > .tree-toggle{
	   display: block;
	   transform: rotate(-180deg);
   }

   .tree-leaf > .tree-item > .tree-toggle{
	   display: none;
   }

   .tree-collapsed > ol {
	   display: none;
   }

   .tree-handle{
	   display: block;
	   position: absolute;
	   z-index: 2;
	   left: 1px;
	   top: 1px;
	   bottom: 1px;
	   padding: 6px;
	   color: #999;
	   transition: all 250ms ease 0s;
   }

   .tree-handle:hover{
	   cursor: move;
	   color: #333;
	   background-color: rgba(0,0,0,0.05);
   }

   .tree-primary{
	   display: block;
	   padding: 6px 15px;
	   border: 1px solid #ddd;
	   color: #334458;
	   background-color: #f5f5f5;
	   text-decoration: none;
	   position: relative;
	   z-index: 1;
	   width: 100%;
	   text-align: left;
	   border-radius: 4px;
   }

   .tree-handle + .tree-primary{
	   padding-left: 25px;
   }

   .tree-primary:focus,
   .tree-primary:hover{
	   color: #334458;
	   background-color: #ebebeb;
	   text-decoration: none;
   }

   .tree-name{
	   display: inline-block;
	   margin-right: 15px;
	   /*width: 30%;
	   max-width: 300px;*/
   }

   .tree > li > .tree-item:first-child > .tree-primary > .tree-name {
	   font-weight: 500;
   }

   .tree-uri{
	   font-size: 12px;
	   color: #999;
	   margin-left: 8px;
   }

   .tree-uri-error{
	   color: #d9534f;
   }

   .tree-actions{
	   position: absolute;
	   z-index: 2;
	   right: 10px;
	   top: 1px;
	   opacity: 0;
   }

   .tree-item:hover .tree-actions{
	   opacity: 1;
   }

   .tree-item .btn:not(.btn-sm):not(.btn-lg){
	   font-size: 16px;
	   padding: 7px 4px;
   }

   .tree-placeholder{
	   height: 43px;
	   border: 1px dotted #bce8f1;
	   background-color: #D9EDF7;
	   margin-left: -1px;
   }

   .tree-placeholder.tree-error,
   .tree-placeholder.mjs-nestedSortable-error{
	   border: 1px dotted #ebccd1;
	   background-color: #f2dede;
   }


   /* ==========================================================================
	   JQUERY UI SORTABLE
	  ========================================================================== */

   .ui-sortable-placeholder{
	   visibility: visible !important;
	   border: 1px dotted #bce8f1;
	   background-color: #D9EDF7;
   }

   /* ==========================================================================
	   PANELS
	  ========================================================================== */

   .panel{
	   border-radius: 0;
	   box-shadow: none;
   }

   .panel-collapsable .panel-heading:hover{
	   cursor: pointer;
	   background-color: rgba(0,0,0,0.10);
   }

   .panel-collapsable .panel-heading:before{
	   content: "\f107";
	   display: inline-block;
	   float: right;
	   margin-top: 3px;
	   font: normal normal normal 18px/1 FontAwesome;
	   transform: rotate(-180deg);
	   -webkit-transition: transform 0.1s ease-in;
	   -moz-transition: transform 0.1s ease-in;
	   -ms-transition: transform 0.1s ease-in;
	   -o-transition: transform 0.1s ease-in;
	   transition: transform 0.1s ease-in;
   }

   .panel-collapsable .panel-heading.collapsed:before{
	   transform: rotate(0deg);
   }

   .panel-heading{
	   padding: 8px 15px;
	   border: none;
   }

   .panel-body{
	   border-top: 1px solid #DDD;
   }

   .panel-body-gray{
	   border: none;
	   background-color: #F5F5F5;
   }

   .panel-body p:last-child,
   .panel-body ul:last-child{
	   margin-bottom: 0;
   }


   /* ==========================================================================
	   OPTIONS - velden pagina
	  ========================================================================== */

   .option{
	   display: none;
   }


   /* ==========================================================================
	   BREADCRUMB
	  ========================================================================== */

   .breadcrumb{
	   float: left;
	   background-color: transparent;
	   padding: 0;
	   font-size: 13px;
   }

   .breadcrumb a{
	   color: #999;
   }

   .breadcrumb .active{
	   color: #CCC;
   }


   /* ==========================================================================
	   SELECT2
	  ========================================================================== */

   .select2-container {
	   width: auto !important;
	   display: block;
   }

   .select2-container:focus,
   .select2-container *:focus {
	   outline: 0 !important;
	   border-color: #66afe9 !important;
	   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(102, 175, 233, 0.5) !important;
   }

   .select2-container .select2-selection--single {
	   height: 38px;
   }

   .select2-container--default .select2-selection--single {
	   /*border-radius: 0;*/
	   border-color: #CCC;
	   background-color: #FFF;
   }

   .select2-container .select2-selection--single .select2-selection__rendered{
	   padding-left: 12px;
   }

   .select2-container--default .select2-selection--single .select2-selection__rendered {
	   color: #555;
	   line-height: 36px;
   }

   .select2-container--default .select2-selection--single .select2-selection__arrow {
	   height: 36px;
   }

   .select2-container--default .select2-selection--multiple {
	   background-color: #FFF;
	   border: 1px solid #CCC;
	   /*border-radius: 0;*/
   }

   .select2-container--default.select2-container--focus .select2-selection--multiple {
	   outline: 0 !important;
	   border-color: #66afe9 !important;
	   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(102, 175, 233, 0.5) !important;
   }

   .select2-container--default .select2-selection--multiple .select2-selection__choice {
	   /*background-color: #fff;*/
	   border: 1px solid #ccc;
	   border-radius: 4px;
   }


   /* ==========================================================================
	   TINYMCE
	  ========================================================================== */

   .mce-tinymce{
	   box-shadow: none !important;
   }

   .mce-branding {
	   display: none !important;
   }

   .mce-toolbar-grp,
   .mce-toolbar-grp .mce-btn{
	   background-color: #f5f5f5 !important;
   }

   .mce-toolbar-grp .mce-btn.mce-active,
   .mce-toolbar-grp .mce-btn.mce-active:hover,
   .mce-toolbar-grp .mce-btn.mce-active:focus,
   .mce-toolbar-grp .mce-btn.mce-active:active{
	   background-color: #555c66 !important;
   }


   /* ==========================================================================
	   FLATPICKR
	  ========================================================================== */

   .js-time[readonly],
   .js-date[readonly],
   .js-datetime[readonly]{
	   background-color: #fff;
   }


   /* ==========================================================================
	   FLEX HELPERS
	  ========================================================================== */

   .d-flex{
	   display: -webkit-box;
	   display: -ms-flexbox;
	   display: flex;
   }

   .flex-grow-1{
	   -webkit-box-flex: 1;
	   -ms-flex-positive: 1;
	   flex-grow: 1;
   }

   @media screen and (min-width: 768px) {
	   .d-sm-flex{
		   display: -webkit-box;
		   display: -ms-flexbox;
		   display: flex;
	   }

	   .flex-grow-sm-1{
		   -webkit-box-flex: 1;
		   -ms-flex-positive: 1;
		   flex-grow: 1;
	   }
   }


   /* ==========================================================================
	   POSITION HELPERS
	  ========================================================================== */

   .position-relative{ position: relative; }
   .position-absolute{ position: absolute; }
   .position-sticky{ position: sticky; }
   .position-static{ position: static; }

   .left-0{ left: 0; }
   .top-0{ top: 0; }
   .right-0{ right: 0; }
   .bottom-0{ bottom: 0; }


   /* ==========================================================================
	   DIMENSIONS HELPERS
	  ========================================================================== */

   @media screen and (min-width: 768px) {
	   .min-height-sm-screen{ min-height: 100vh; }
   }