@import url("../fonts/font-awesome.css");
@import url("../fonts/chopin-script.css");

html, body { padding: 0; margin: 0; border: 0; font-family: 'Open Sans', sans-serif; }
html {overflow: hidden; }
/*#container { min-width: 640px; min-height: 480px; overflow: auto; }*/
#container { position: absolute; top:0; left:0; right:0; bottom:0; padding: 0; margin: 0; border: 0; }
#header { position: absolute; top:0; left:0; right:0; height: 50px; padding: 0; margin: 0; border: 0; z-index: 999; box-shadow: 0 1px 5px 1px grey; }
#content { position: absolute; top:50px; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; border: 0; z-index: 9; }
#container-left { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; padding: 0; margin: 0; border: 0; border-right: 2px #000000 outset; }
#container-right { position: absolute; left: 250px; right:0; bottom:0;  top:0;  padding: 5px 0 0 0; margin: 0; border: 0; overflow: hidden; }
#container-full { position: absolute; left: 0; right:0; bottom:0;  top:0;  padding: 0; margin: 0; border: 0; }
#fullScreen { display: none; position: absolute; left: 0; right: 0;  top:0; bottom: 0; background-color: #fff; z-index: 9999}

footer { position: absolute; bottom: 0; left:0; right: 0; height: 40px; background: none; margin: 0 !important; color: #9d9d9d; }

/* region Footer */
footer div + div p,
footer a {
    text-align: center;
    color: inherit;
}

footer #copyright {
    font-family: 'Chopin Script', serif;
    font-size: 130%;
    position: absolute;
    right: 0;
    z-index: 999;
    padding: 5px 20px;
}

footer a:hover {
    color: #ffffff;
}

footer .footer-collapsed {
    z-index: 998;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    left: 2000px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
}
footer:hover .footer-collapsed,
footer #copyright:hover + .footer-collapsed,
footer .footer-collapsed:hover {
    left: 0;
    z-index: 10;
}
/* endregion */

/* region Header */
#header .container {
    width: 100%;
}
#header .navbar {
    border-radius: 0;
    border: none;
    opacity: 0.8;
}
#header .logo-site {
    font-size: 35px;
}

#header-actions {
    float: right;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}
#connexion-btn {
    color: #9d9d9d;
}
#connexion-btn:hover {
    color: #fff;
    background-color: transparent;
}
.navbar-inverse {
    background-color: rgba(34, 34, 34, 0.9);
}

button {
    border: none;
    background: inherit;
    padding: 0;
    margin: 0;
}
/* endregion */

/* region Accordéon */
/* region treeview */
.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ol.angular-ui-tree-nodes {
    padding-bottom: 5px;
}

ol a, ol i {
    color: #515151;
}
ol .actions .btn {
    background-color: rgba(255, 255, 255, 0.58);
    border-color: #6e6e6e;
    font-size: 80%;
}
.angular-ui-tree-handle {
    cursor: default;
}

/* Permet de ne pas afficher la zone vide si la liste est vide et que le drag&drop n'est pas permis pour la remplir */
.ui-tree-empty-placeholder-disabled > div.angular-ui-tree-empty {
    display: none;
}

ol.angular-ui-tree-nodes {
    padding-bottom: 0;
}

ol.angular-ui-tree-nodes li {
    min-height: 22px;
}

/* region Animation : relentit bcp l'exécution */
/*
#container-left li {
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
    opacity: 1;
    top: 0;
}
#container-left li.ng-hide, /* on filter */
/*#container-left li.ng-leave.ng-leave-active /* on remove */
/*{
    opacity: 0;
    top: -50px;
    height: 0;
}*/
/*#container-left li {
    -webkit-animation: enter 1025ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    animation: enter 1025ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    display: block;
    position: relative;
}
@-webkit-keyframes enter {
    from {
        opacity: 0;
        height: 0;
        left: -70px;
    }
    75% {
        left: 15px;
    }
    to {
        opacity: 1;
        height: 30px;
        left: 0;
    }
}
@keyframes enter {
    from {
        opacity: 0;
        height: 0;
        left: -70px;
    }
    75% {
        left: 15px;
    }
    to {
        opacity: 1;
        height: 30px;
        left: 0;
    }
}

#container-left li.ng-hide-add-active,
#container-left li.ng-leave-active {
    -webkit-animation: leave 1025ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    animation: leave 1025ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    display: block;
    position: relative;
}
@-webkit-keyframes leave {
    to {
        opacity: 0;
        height: 0;
        left: -70px;
    }
    25% {
        left: 15px;
    }
    from {
        opacity: 1;
        height: 30px;
        left: 0;
    }
}
@keyframes leave {
    to {
        opacity: 0;
        height: 0;
        left: -70px;
    }
    25% {
        left: 15px;
    }
    from {
        opacity: 1;
        height: 30px;
        left: 0;
    }
}*/
.collection-treeview-container {
    position: absolute;
    top: 0; left:0; right:0; bottom:0;
}
/* endregion Animation */

.angular-ui-tree-empty {
    background: none;
    content: "Aucune donnée";
}

.angular-ui-tree-drag .hide-on-drag {
    display: none;
}
.angular-ui-tree-drag td {
    padding-right: 10px;
}
/* endregion treeview */

.action-row {
    background-color: rgba(165, 165, 165, 0.5);
    position: absolute;
    height: 60px;
    top:0; left:0; right:0;
}

.action-row .not-selected {
    /*color: #68FF84;*/
    opacity: 0.65;
}

.action-row .btn {
    padding: 3px;
}

.action-row input,
.action-row form /*.form-group */i {
    line-height: 28px;
    height: 28px;
    font-size: 80%;
}

.actualite-liste li > div {
    padding: 1px 8px;
}

.accordion-container > div:nth-of-type(1).actualite-content {
    bottom: 5px;
}

.actualite-historique {
    border-top: dashed 2px;
}
/* endregion Accordéon */

/* region Body */
#img-background {
    margin-top: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.logo-site {
    font-family: 'Chopin Script', serif;
}

.over-image {
    background-color: rgba(255, 255, 255, 0.7);
}

a {
    color: #333;
}

/* utile car sinon le ol ne prend pas toute la largeur du conteneur mais du contenu */
/*#container-left .accordion-container*/ .mCustomScrollbar
{
    width: 100%;
    position: absolute; /* utilisé dans collection > container-left */
}

#container-right > div,
#container-full > div {
    padding: 0 20px;
}

#container-right h2,
#container-full h2 {
    margin-bottom: 25px;
}

#container-right .mCSB_container,
#container-full .mCSB_container {
    min-height: 100%;
}

#container-right .row:first-child {
    padding-top : 10px;
}

.center-block {
    width: 380px;
    height: 80%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
}
.login-block {
    margin-bottom: 10px;
    padding: 0 20px;
}
.center-block h2 {
    padding: 15px 0;
    margin: 15px 0;
}
.center-block form {
    padding: 20px 0;
}
.center-block .over-image {
    border-radius: 11px;
    color: #333;
    position: relative;
}

.note {
    margin-top: 6px;
    padding: 0 1px;
    font-size: 80%;
    line-height: 15px;
    color: #999;
    text-align: right;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: pointer;
}
/* endregion Body */

/* region form */
form a {
    color: #717171;
}

label.input.input-icon {
    display: block;
    position: relative;
}

label.input.input-icon i {
    position: absolute;
    top: 6px;
    width: 29px;
    height: auto;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #c0c2c7;
    right: 5px;
    padding-left: 3px;
    border-left: 2px solid #c0c2c7;
}

label.input.small-input input {
    height: 28px;
}

label.input.small-input i {
    top: 4px;
    font-size: 12px;
}

label.textarea {
    width : 100%;
}
label.textarea textarea {
    width : 100%;
    resize: vertical;
}

label {
    color: #333;
    width: 100%;
}

form label span.required {
    color: #ac2d27;
    font-weight: lighter;
    font-style: italic;
}

textarea {
    resize: vertical;
}

form .file-preview-frame {
    display: table;
    margin: 10px;
    height: 160px;
    border: 1px solid #d5d5d5;
    box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.1);
    padding: 3px;
    float: left;
    text-align: center;
}
form .file-preview-frame:hover {
    background-color: #F5F5F5;
}

/* Suppression des spinner de firefox sur les input number */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.chosen-container {
    font-size: inherit;
}
.chosen-container-single .chosen-single {
    height: 34px;
    line-height: 28px;
    padding: 4px 0 4px 8px;
}

.state-error + div.chosen-container > a,
.state-error + div.chosen-container > ul {
    background: #f0c6bd none repeat scroll 0 0;
    border-color: #e9a89a;
}

/* region md-select */
md-content{
    border-radius: 4px;
}

md-input-container {
    margin: 0;
    width: 100%;
}

md-select,
md-select.form-control {
    /*background: rgba(0, 0, 0, 0) linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%) repeat scroll 0 0 padding-box;*/
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    height: 32px;
    overflow: hidden;
    padding: 0 0 0 8px;
}
md-select:hover {
    background-color: #e6e6e6;
}

md-select.md-default-theme .md-select-value,
md-select.md-default-theme:focus:not([disabled]) .md-select-value,
md-select .md-select-value,
md-select:focus:not([disabled]) .md-select-value {
    border-bottom: none;
}

.md-select-value .md-select-icon::after {
    color: grey;
}

md-input-container label.md-required:not(.md-container-ignore)::after {
    content: "";
}
/* endregion md-select */

md-checkbox.md-default-theme.md-primary.md-checked:not([disabled]) .md-icon,
md-checkbox.md-primary.md-checked:not([disabled]) .md-icon {
    background-color: rgba(146, 146, 146, 0.54);
}
md-checkbox.md-default-theme.md-primary:not([disabled]):not(.md-checked) .md-icon,
md-checkbox.md-primary:not([disabled]):not(.md-checked) .md-icon {
    border-color: #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

md-checkbox.delete-checkbox {

}

form .tree-node a.btn {
    background: none !important;
}

md-radio-group.layout-row md-radio-button {
    margin-right: 40px;
}

form .form-group .collection-treeview-container {
    position: relative;
}

form md-switch {
    margin: 0;
}

/* region colorpicker */
.colorpicker-component .input-group-addon i {
    display: inline-block;
    cursor: pointer;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

form div.colorpicker-component {
    max-width: 220px;
}
/* endregion colorpicker */
/* endregion form */

/* region show */
article h1,
.show-element h1 {
    width : 100%;
    text-align: center;
}
article img {
    max-width : 100%;
}
article .article-date,
.show-element .date, .close-window {
    font-size: 150%;
    font-weight: bold;
    text-align: right;
}
article .article-description,
.show-element .description {
}
.show-element .private-description {
    border-top: solid 1px #6c6e74;
    margin-top: 20px;
    padding-top: 20px;
}

.close-show { cursor: pointer; }
.close-window, #information { position: absolute; cursor: pointer; z-index: 3; }
#information { left: 0; }

.show-element img {
    max-width: 100%;
}
.close-window { right: 5px; }

#img-media { margin-top: -8px; }

/* region affichage des informations */
#informations-zone {
    position: absolute;
    left: -400px; bottom: 0; top: 40px; padding: 10px;
    width:400px;
    background-color: #fff;
    color: #000;
    border-right: #000 solid 1px;
    border-top: #000 solid 1px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    z-index: 4;
}
#informations-zone .created-at {
    position: absolute;
    bottom: 0;
    padding-right: 5px;
}
/* endregion affichage des informations */
/* endregion show */

/* region Angular */
.ngAnimate-fade.ng-hide {
    opacity: 0;
}

.ngAnimate-fade.ng-hide-remove,
.ngAnimate-fade.ng-hide-add {
    display: block !important;
}

.ngAnimate-fade.ng-hide-remove {
    transition: all linear 500ms;
}
/* endregion Angular */

/* region Erreurs */
.error-bottom-block {
    padding-top: 10px;
    width: 100%;
}
.error-description {
    text-align: center;
}
.error-description .error-code {
    font-size: 4em;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: -2px;
    font-weight: 800
}
.error-description .error-meaning {
    font-size: 2em
}
.error-description .todo {
    margin-top: 5px
}
/* endregion Erreurs */

#errorzone, #infozone {
    display: none;
}


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

a:focus :not(:hover){
    color: inherit;
}

/* modale des summernote (link, picture, etc.) */
.modal-backdrop {
    z-index: inherit;
}

/* region table */
table {
    width: 100%;
}
th {
    text-align: center;
}
th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    height: 50px;
    vertical-align: middle;
}
tbody tr:nth-child(even) {
    background-color: rgba(225, 225, 225, 0.31);
}
tbody tr:hover {
    background-color: #ffffff;
}
thead tr {
    background-color: rgba(57, 73, 171, 0.2);
}
/* endregion table */