/* BS3 */
/* Variables */
:root {
  --light: #f4f6fa;
  --dark-light: #dadcde;
	--dark-gray: #555;
  --dark: #232e3c;
  --blue: #206bc4;
  --dark-blue: #071F32;
  --primary: var( --dark-blue );
  --azure: #4299e1;
  --indigo: #4263eb;
  --info: var( --indigo );
  --purple: #ae3ec9;
  --pink: #d6336c;
  --red: #d63939;
  --danger: var( --red );
  --orange: #f76707;
  --warning: var( --orange );
  --yellow: #f59f00;
  --lime: #74b816;
  --green: #2fb344;
  --success: var( --green );
  --teal: #0ca678;
  --cyan: #17a2b8;
  --black: #000000;
  --white: #ffffff;
}

/* WRAPPER */
html{ /* Sticky footer styles */ position: relative; min-height: 100%; }
#admin-wrapper{ margin: 60px 15px }
#admin-wrapper.display-nav #canvas { -webkit-transform: translateX( 330px ); -moz-transform:translateX( 330px );-ms-transform: translateX( 330px ); -o-transform:translateX( 330px ); transform:translateX( 330px );}
#admin-wrapper .content{ padding: 0 }

/*  Dropdown menus */
.dropdown-menu > li  { color: var( --white ); }
.dropdown-menu > li > a{ width: 310px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus { background-color: var( --black ); background-image: none;color: var( --white );}
.navbar-nav .open .dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus { background-color: var( --black ); background-image: none;color: var( --white );}
.dropdown-menu > li > ul > li > a{ background-color: var( --white ); color: var( --black ); }
.dropdown-menu > li > ul.list-inline{ margin-left: 40px; }
.dropdown-menu > li > ul > li > span > a { color: var( --white ); }
.dropdown-menu > li > ul > li > a:hover { background-color: var( --black ); background-image: none; color: var( --white );}

/* Submenu fix for B3 */
.dropdown-submenu{ position:relative; padding:2px 5px; }
.dropdown-submenu > .dropdown-menu{ top: 0; left: 100%; margin-top: -6px; margin-left: -1px; }
.dropdown-submenu:hover > .dropdown-menu{ display: block; }
.dropdown-submenu > a:after{ display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: var( --black ); margin-top:5px; margin-right:5px; }
.dropdown-submenu:hover > a:after{ border-left-color: var( --gray-color ); }
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left > .dropdown-menu{ left:-100%; margin-left: 10px; }

/* Navbar custom dropdown menu */
body > .header .navbar { margin-left: 0;}
body > .header .navbar span#zone4{ min-width: 180px; display: inline-block; }
.main-header > .navbar { margin-left: 0; }
.navbar-brand > img { display: inline; }
.navbar-brand > span.fa-external-link{ font-size: 50%; padding-top: 2em; }
.navbar-brand{ padding-top: 7px; }
.navbar-nav > .tasks-menu > .dropdown-menu { width:310px; padding: 0!important; margin: 0 !important; top: 100%; border: 1px solid var( --gray-color ); -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; }
.navbar-nav > .tasks-menu > .dropdown-menu:after { bottom: 100%; left:10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: var( --white ); border-width: 10px; margin-left: 0; }
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu { margin: 0; padding: 0; list-style: none; overflow-x: hidden;}
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > a { display: block; white-space: nowrap; /* Prevent text from breaking */ border-bottom: 1px solid #f4f4f4; padding: 10px;}

/* USER MENU */
.navbar-nav.navbar-right:last-child { margin-right:20px;}
.navbar-nav > .user-menu > .dropdown-menu { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 1px 0 0 0; border-top-width: 0; width: 280px; left: -140px; left: -40px;}
.navbar-nav > .user-menu > .dropdown-menu li a, .navbar-nav > .user-menu > .dropdown-menu li button.btn-link { text-align: left; color:var( --black );}
.navbar-nav > .user-menu > .dropdown-menu li a:hover, .navbar-nav > .user-menu > .dropdown-menu li button.btn-link:hover { color:var( --white );}
.navbar-nav > .user-menu > .dropdown-menu li button.btn-link:hover { background-color: var( --black ); background-image: none;color: var( --white );text-decoration:none}
.navbar-nav > .user-menu > .dropdown-menu li button.btn-link { padding: 3px 20px; border-width:0 }
.navbar-nav > .user-menu > .dropdown-menu li button.btn-link .fa { margin-right: 10px }
.navbar-nav > .user-menu > .dropdown-menu:after { bottom: 100%; right: 10px; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: var( --white ); border-width: 10px; margin-left: -10px;}
.navbar-nav > .user-menu > .dropdown-menu ul.list-inline { padding-left: 15px }

/* Login page */
#login-page { margin: 0px -15px; background: var( --primary ) url("../../images/admin/skin/images/bg_login1.svg"); background-size: cover; background-attachment: fixed; height: 100vh; overflow: hidden; }
#login-page img#logoLogin { position:absolute; top: 50px; left: 50px; }
.login-box .login-logo{ margin-bottom: 0; color: var( --white ) }
.login-box .login-logo a{ color: var( --white ) }
.avatar { margin-top: -70px; padding-bottom: 20px; }
.avatar img { padding: 5px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);}
.login-wrapper #footer{ display: none; }

/* Header */
.home{ background-color:var( --white ) !important; color:var( --white ); margin: 0; display:block; }
.home > a > i{ color: var( --black ) !important; }
.user-image{ margin-right: 5px }

/* Dashboard */
div.widget .box-body{ max-height: 350px; overflow: hidden }
a.dashboard-title{ color:var( --white ) !important; }

/* Card headers forms and buttons */
div.box-tools > * { display:inline-block; }

/* Footer */
#footer{ background: none repeat scroll 0 0 var( --black ); color: var( --white ); margin-bottom: 0; /* Sticky footer styles */ position: absolute; bottom: 0; width: 100%; overflow: hidden;
  /* The height of the footer should be less than 60px because this is the value of the bottom margin on #admin-wrapper. If needed you can force it.
  height: 60px;
  */
}
#footer > a{ color: var( --white ); font-size: 80%; }
.footer-lutece{ background-color: var( --white ); margin: 0; padding: 15px 5px; float: right }
#login #footer{ display: none;} /* Footer not displayed in login page */

/* 	Helpers classes   */
/* BS + Styles */
/* .form-inline{ display: inline-block;} */
.d-flex{ display: flex !important;}
.align-items-center{ align-items: center; }
.justify-content-around{ justify-content: space-around; }
.justify-content-between{ justify-content: space-between; }
/* Msg styles         */
.msg-success{ color: var( --success ); font-weight: 700; }
.msg-warning{ color: var( --warning ); font-weight: 700; }
.msg-danger{ color: var( --danger ); font-weight: 700; }
.msg-info{ color: var( --info ); font-weight: 700; }

.empty{ display: flex; justify-content: center;  flex-direction: column;  align-items: center; }
.empty-title{  margin-top: 15px;}

/* CSS for copyElementToClipboard commons Freemarker Macro */
.copy-content{ position: relative; width:100%; display: inline-block; }
p.copy-content:hover{ cursor: copy; }
.copy-icon:after, .copy-content:hover:after{ cursor: pointer; content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>'); position: absolute; margin-left:5px; top:5px; width:15px; right:5px }
.copy-content.copy-btn:after{ content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>'); border: 1px solid var( --black ); border-radius:5px;  padding:1px 3px; position: absolute; margin-left:5px; top:0; width:20px; right:5px }
.copy-content.no-hover:hover:after{ content: ''; }

pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */}

.fa-hover:hover{ cursor: pointer }

/* Add class for input text in box > box-header > box-tools */
.input-xs, .form-horizontal .form-group-xs .form-control { border-radius: 3px; font-size: 12px; height: 22px; line-height: 1.5; padding: 1px 10px;}
.btn-primary, .btn-danger, .btn-info, .btn-default, .btn-success, .btn-warning{ background-image: none; border: 0; }

/* thumbnail list                           */
div.thumbnail img.thumbnail{ max-height: 80px; min-height: 100px; }
div.thumbnail div.caption{ background: var( --gray-color ); }

/* Image size for thumbnails                */
.thumbnail-xs{ width:16px; }
.thumbnail-sm{ width:32px; }
.thumblist-md{ width:64px; }
.thumblist-lg{ width:128px; }

/* thumbnail list                           */
/* Image size for thumbnails                */
.thumbnail-xs{ width:16px; }
.thumbnail-sm{ width:32px; }
.thumbnail-md{ width:64px; }
.thumbnail-lg{ width:128px; }

/* Default */
td{ vertical-align: middle;}

/* Margins                                  */
/* No margin                                */
.no-margin{ margin: 0; }
/* Append right and left 2px space          */
.spaced{ margin: 0 2px; }

/* Documentation */
#lutece-doc-link{ position: fixed; bottom: 15px; right: 15px;}

/* Pager XS Sized                           */
.pager-xs{ margin: 2px 5px; }
.pager-xs > li > a{ padding: 1px 8px; }

/* Lutece extra-icons                        */
.icon-lutece-logo{ background: url( ../img/lutece-logo.png); width: 18px; height: 18px }

/* 	Insert services                          */
div.insert-service{ margin: 10px; }
div.insert-service div.pagination{ height: auto; }

/*	Pagination                               */
ul.pagination{ margin-top: 0; }

/* Plugins list                               */
.plugin{ min-height: 300px; max-height: 300px; }

/* Admin Site                                 */
.admin-site{  padding: .2rem .5rem; }
.admin-menu{ display: flex; justify-content: space-between; align-items: center; margin: 0 inherit; padding:0 inherit;}
.admin-menu > * { margin: 0; padding: 0;}
.admin-site .breadcrumb-item{ font-size: 1.4rem }
.admin-site-toolbar{ margin-top: -1rem }
.extend-menu-item{ width: 100%; display: flex; justify-content: space-between; min-width: 180px; }

iframe#preview {display: block; overflow: auto; padding: 0; margin:-10px auto; border: 2px solid var( --gray-color ); max-height:400px}
#preview.open{ position:fixed; width:100% !important; height:100vh !important; max-height:100vh !important; top:0; left:0; z-index: 9999; }
#fullscreen.open{ position:fixed; top:0; right: 15px; z-index: 10000; padding: 5px; }

/* Portlets                                   */
li.portlet-type a:hover{ background:var( --primary ) url(); color:var( --white );}
#content-portlet{ padding: 0 10px; }
#preview{ left: 0; width: 100%; height: 850px; min-height: 850px; position: relative; z-index: 0; }
.richtext{ width:100%; }

.manage-portlet label{ font-size: .8em;}
.portlet-options.col-sm-1{ width: 5.333%; } 
.portlet-options.col-sm-2{ width: 6.333%; }
.manage-portlet .col-sm-3{ width: 20%; }
.portlet-options .radio, .portlet-options .form-check, .manage-portlet .custom-control{ display: inline-block;} 
.display-options .form-check{ display: inline-flex; }
.portlet-toolbar{ position: relative; background-color: var( --dark-light ); padding: 15px 0 0 }

/* Site Map                                   */
.sitemap{  min-height: 80vh; padding: 15px }
.jstree-classic a.jstree-search ,.jstree-default a.jstree-search ,.jstree-apple a.jstree-search{ background-color: var( --primary ) !important; color:var( --white ) !important; font-style: normal; text-decoration: underline; padding: 0 10px !important;}
.jstree-classic .jstree-clicked { padding: 0 5px !important; }

/* button scroll to top */
#scroll { position:fixed; right:60px; bottom: 60px; cursor: pointer; width: 50px; height: 50px; background-color: var( --primary ); text-indent:-9999px; display: none; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px}
#scroll span { position:absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -12px; height:0; width:0; border: 8px solid transparent; border-bottom-color: var( --white ); }
#scroll:hover { background-color:var( --warning ); opacity:1; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)" }

/* Polipop Library */
#lutecepop{z-index: 1050;}

/* ----------------------------------------------------------------------
	PLUGINS ADMIN added styles
---------------------------------------------------------------------- */
/* 	Plugin DOCUMENT           */
.document-toolbar{ background-color:var( --gray-color ); border:5px var( --black ) edge; padding:10px ;margin:-20px 5px 5px 0; border-radius:8px; -moz-box-shadow: 0px 5px 5px 0px var( --dark-gray ); -webkit-box-shadow: 0px 5px 5px 0px var( --dark-gray ); -o-box-shadow: 0px 5px 5px 0px var( --dark-gray ); box-shadow: 0px 5px 5px 0px var( --dark-gray ); filter:progid:DXImageTransform.Microsoft.Shadow(color=var( --dark-gray ), Direction=180, Strength=5);}
.table-document tr:hover td{ background:var( --gray-color ) !important; }

/* 	Plugin EXTEND             */
#extender-content .list-group{ margin-bottom: 0; }
#extender-content .list-group-item{ border-color: transparent; padding: 4px 2px }
#extender-content .list-group-item .btn-link{ padding: 0; text-align: left; }
.extend-action-menu{display: flex; justify-content: space-between; align-items: center;}
.list-group-item-action{ padding:.5rem; font-size: .8rem }
.list-group-item-action .extend-action-menu .btn-xs{ padding:.2rem; }

/* 	Plugin SUGGEST           */
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 4.4%; background-color: var( --white ); padding: 1% 2% 1% 2%; -moz-box-shadow: 0px 5px 5px 0px var( --dark-gray ); -webkit-box-shadow: 0px 5px 5px 0px var( --dark-gray );-o-box-shadow: 0px 5px 5px 0px var( --dark-gray );box-shadow: 0px 5px 5px 0px var( --dark-gray );filter:progid:DXImageTransform.Microsoft.Shadow(color=var( --dark-gray ), Direction=180, Strength=5);}
.span-fixed{ z-index: 9998; position: fixed; }
.badge-waiting { border-radius: 20px; font-size: 15px; padding: 5px 9px; -moz-box-shadow: 0px 5px 5px 0px var( --dark-gray ); -webkit-box-shadow: 0px 5px 5px 0px var( --dark-gray ); -o-box-shadow: 0px 5px 5px 0px var( --dark-gray );box-shadow: 0px 5px 5px 0px var( --dark-gray );filter:progid:DXImageTransform.Microsoft.Shadow(color=var( --dark-gray ), Direction=180, Strength=5);}
.modal-top{ top:20% !important; }

/* Plugin FILES2DOCS        */
/* Error                    */
.red{ border : 1px solid var( --danger ); background-color: var( --danger ); }
/* Current                  */
.green{ border: 1px solid var( --success ); background-color: var( --success ); }
/* Complete                 */
.blue{ border: 1px solid var( --primary ); background-color: v; }
.progressName{ font-size: 8pt; font-weight: 700; color: var( --dark-gray ); width: 323px; height: 14px; text-align: left;	white-space: nowrap; overflow: hidden; }
.progressBarInProgress, .progressBarComplete, .progressBarError{ font-size: 0; width: 0; height: 2px; background-color: var( --primary ); margin-top: 2px; }
.progressBarComplete{ width: 100%; background-color: var( --success ); visibility: hidden; }
.progressBarError{ width: 100%; background-color: var( --danger ); visibility: hidden; }
.progressBarStatus{ margin-top: 2px; width: 337px ; font-size: 7pt; font-family: Arial, Helvetica, sans-serif; text-align: left; white-space: nowrap; }

/* Asynchronous Upload */
.list-file-item{ display: flex; align-items: center; padding-bottom: 5px }
.list-file-item div > label{ display: flex; justify-content: space-between; margin: 0 5px; }
.list-file-item div > label > .uploaded_check{ margin: auto 5px }
.list-file-item div .truncate{ margin-right: auto } 
.list-file-item figure{ flex-shrink: 0; }
.list-file-item figure + div{ flex-grow: 1 ; margin-left: auto }

/* Plugin THEME             */
#preview-frame-container{ display:none }
#back-to-preview{ position: fixed; right: 150px; top: 80px; z-index: 999 }
#back-to-preview a{ display: block; padding: 15px 20px; background: var( --black );color: var( --white ); text-decoration: none; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px }
#preview-frame{ border-radius: 50px ; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 8px solid var( --dark-gray ); position:fixed; background: var( --dark-gray ); width:90%; height:800px; top:60px; left:60px; overflow: auto; z-index: 999; box-shadow: -3px 3px 50px var( --success ); -webkit-box-shadow: -3px 3px 50px var( --success ); -moz-box-shadow: -3px 3px 50px var( --success ); padding: 20px }
.oyh {overflow-y: hidden }
.callout-theme{	padding: 6px 30px 6px 15px; margin-right: 15px }
.card-theme{ overflow: hidden; position: relative; border: 1px solid var( --gray-color ); border-radius: 8px; text-align: center; padding: 0; background-color: var( --primary ); color: var( --white ); margin: 15px auto }
.card-theme.header-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 70px; border-bottom: 1px var( --white ) solid; z-index: 1 }
.card-theme .card-header{ border-bottom: 4px solid var( --black ) }
.card-theme.default-theme .card-header{ border-bottom-color: var( --success )  }
.card-theme.default-theme { border: 1px solid var( --success ) }
.card-theme .avatar { position: relative; padding: 15px 0; z-index: 100 }
.card-theme .card-content{ padding: 20px 0 }
.card-theme .card-content h2{ padding: 10px 0; font-weight: bold; border-bottom: 2px solid var( --white ); color:var( --white ) }
.card-theme .card-content h2 a{ color: var( --white ) }
.card-theme ul li{ margin-left: 20%; text-align: left }
.card-theme li a{color: var( --white )}
.card-theme .avatar img{ width: 100px; height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(0,0,30,0.8) }
.card-theme.default-theme .avatar img{ border-color:  var( --success ) }
.theme-selected{ display: none }
.card-theme.default-theme .theme-selected{ display: block; width: 200px; background: var( --success ); text-align: center; line-height: 50px; letter-spacing: 1px; font-weight: bold; font-size: 16px; color: var( --white ); box-shadow: 0 0 3px rgba(0,0,0,.3); position: absolute; top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.header .navbar-header .logo{ display: none; }
  .navbar-nav > .user-menu > .dropdown-menu { left: -50px; }
  .navbar-nav > li > a { padding: 15px 10px; line-height: 20px; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .main-header .logo{ width:80px }
    .navbar-nav > li > a { padding: 15px 8px; line-height: 20px; font-size: 90% }
    .navbar-nav > .user-menu > .dropdown-menu { left: -150px; width: 220px; margin-top: 20px; }
    .navbar-nav > .user-menu .user-image { width: 15px; height: 15px; margin-right: 5px; }
    .navbar-nav.navbar-right:last-child { margin-right: 2px; }
}

/* Small Devices, Tablets */
@media only screen and ( max-width : 768px ) {
    #admin-wrapper { margin-top: 75px; }
    #admin-wrapper > .content-header > .breadcrumb { position: relative; margin-top: 25px; top: 0; right: 0; float: none; background: var( --gray-color );}
}

@media screen and ( max-width: 560px ) {
	 #admin-wrapper{ margin: 2px; }
}

/* Extra Small Devices, Phones */
@media only screen and ( max-width : 480px ) {
  body{ padding-top: 60px;}
  .navbar-nav > .tasks-menu { width: 100%; }
  .navbar-nav > .tasks-menu > .dropdown-menu { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important ;}
  .navbar-nav > .tasks-menu > .dropdown-menu { position: relative; top: 0; left: 0; width:100%; }
  .navbar-nav > .tasks-menu > .dropdown-menu:after { border-bottom-color: var( --white ); border-width: 0; margin-left: 0; }
  .btn-toolbar{margin:0 auto;width:100%;}
}

/* Custom, iPhone Retina */
@media only screen and ( max-width : 320px ) {
    .header .navbar-header .navbar-brand small{ display: none; }
}