#archifacile label {
    font-weight: normal;
}

#archifacile .modal {
    cursor: default;
}

#archifacile #bug {
    position: absolute;
    left: 250px;
    top: 65px;
    font-size: 12px;
    z-index: 1;
    border: 1px solid #ccc;
    background-color: #fff;
}

#archifacile #menu {
    float: left;
    overflow: auto;
    width: 250px;
    min-height: 1px; /* Sinon le menu disparait lorsqu'il est vide*/
    /*overflow-y: scroll;*/
    height: calc(100% - 50px);
}

#archifacile #menu > ul {
    margin: 0;
    padding: 0;
}

#archifacile #menu > ul > li > a {
    /* titre*/
    display: block;
    padding: 10px 4px 10px 15px;
    text-decoration: none;
    /*color:#555;*/
    /*border-bottom: 1px solid #ddd;*/
}

#archifacile #menu > ul > li {
    /*float: left;*/
    width: 250px;
    list-style: none;
    background-color: #ffffff;
    /* border: 1px solid #ddd;*/
}

#archifacile #menu li {
    list-style: none;
    margin: 0 25px 0 0;
}

#archifacile #menu > ul > li > ul {
    padding: 8px;
}

#archifacile #menu > ul > li > ul > li {
    padding: 0;
    padding-bottom: 4px;
    margin: 0;
    clear: both;
}

#archifacile #menu > ul > li > ul > li h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    margin-top: 12px;
    margin-left: 4px;
}

#archifacile #menu > ul > li > ul > li img {
    border-radius:4px;
    cursor: pointer;
    border: 1px solid #fff;
}
#archifacile #menu > ul > li > ul > li img:hover {
    border: 1px solid #ccc;
}


#archifacile #menu li label {
    float: left;
    width: 100px;
    height: 30px;
    padding-top: 4px;
    padding-right: 4px;
    text-align: right;
}

#archifacile #menu li select {
    width: 100%;
    height: 30px;
}

#archifacile #menu li select, #archifacile #menu li input[type=text], #archifacile #menu li input[type=number] {
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#archifacile #menu li input[type=range] {
    height: 30px;
}

#archifacile #menu li input[type=text] {
    padding: 2px;
}

#archifacile #menu li input[type=checkbox] {
    width: 20px;
    height: 20px;
}

#archifacile #menu li textarea {
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    width: 100%;
}

#archifacile #menu li button {
    padding-top: 5px;
}

#archifacile #menu li .col2 {
    width: 130px;
    height: 30px;
}

#archifacile #menu li .col100 {
    width: 100%;
    height: 30px;
}

#archifacile #menu li .input-label {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 4px;
}
#archifacile #menu li .input-text {
    width: 140px;
}

#archifacile #menu li .input-range {
    width: 50px;
    float: left;
    margin-right: 4px;
}

#archifacile #menu li .input-edit {
    width: 50px;
    text-align: right;
}

#archifacile #menu li .label-checkbox {
    width: 155px;
    cursor: pointer;
}

#archifacile #menu > ul > li.panel-options li {
   /* padding-bottom: 0;*/
}

#archifacile #menu > ul > li.panel-options, #archifacile #menu > ul > li.panel-aide {
    margin-top: 10px;
}

#archifacile #menu li .panel-checkbox label {
    float: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

#archifacile #menu li .panel-checkbox input {
    vertical-align: bottom;
    margin-right: 4px;
}

#archifacile #viewmenu {
    position: absolute;
    background-color: #f69357;
    display: block;
    left: 250px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

#archifacile #unit {
    position: absolute;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

#archifacile #panel-action > ul > li > button {
    /* margin-top: 5px;*/
}

#archifacile #cvs {
    width: 100px;
    height: 100px;
}

#archifacile #editeur {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}

#archifacile .hide {
    display: none;
}

#archifacile #alert {
    background-color: white;
    width: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px; /* This should be half of the total height of your div */
}

#archifacile #alert p {
    padding: 5px;
}

.oe-rect, .oe-triangle, .oe-trianglerect, .oe-ellipse, .oe-ellipsedemi, .oe-ellipsedemi2,
.oe-ellipsequart, .oe-line, .oe-zoomm, .oe-zoomp, .oe-text {
    background: url('/assets/img/oe-sprites.png') no-repeat;
    display: inline-block;
    zoom: 0.8;
}

.oe-rect {
    background-position: 0 0;
    width: 32px;
    height: 32px;
}

.oe-triangle {
    background-position: -64px 0;
    width: 32px;
    height: 32px;
}

.oe-trianglerect {
    background-position: -32px 0;
    width: 32px;
    height: 32px;
}

.oe-ellipse {
    background-position: -96px 0;
    width: 32px;
    height: 32px;
}

.oe-ellipsedemi {
    background-position: -128px 0;
    width: 32px;
    height: 32px;
}

.oe-ellipsequart {
    background-position: -160px 0;
    width: 32px;
    height: 32px;
}

.oe-zoomp {
    background-position: -192px 0;
    width: 32px;
    height: 32px;
}

.oe-zoomm {
    background-position: -224px 0;
    width: 32px;
    height: 32px;
}

.oe-line {
    background-position: -256px 0;
    width: 32px;
    height: 32px;
}

.oe-text {
    background-position: -288px 0;
    width: 32px;
    height: 32px;
}
.oe-ellipsedemi2 {
    background-position: -320px 0;
    width: 32px;
    height: 32px;
}

#archifacile .tag {
    font-weight: normal;
    line-height: 2;
    font-size: 100%;
}

#archifacile .tag:hover, #archifacile .tag:focus {
    text-decoration: none;
    cursor: pointer;
}

#archifacile .label-default {
    background-color: #bbb;
}

#archifacile .btn-mini {
    padding: 4px;
}

a[data-tooltip] {
    position: relative;
}

a[data-tooltip]::before,
a[data-tooltip]::after {
    position: absolute;
    display: none;
    opacity: 0.85;
}

a[data-tooltip]::before {
    /*
     * using data-tooltip instead of title so we
     * don't have the real tooltip overlapping
     */
    content: attr(data-tooltip);
    background: #000;
    color: #fff;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    /* we don't want the text to wrap */
    white-space: nowrap;
    text-decoration: none;
}

a[data-tooltip]::after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
    display: block;
}

/** positioning **/

/* left tooltip */
a[data-tooltip][data-placement="left"]::before {
    top: -25%;
    right: 100%;
    margin-right: 10px;
}

a[data-tooltip][data-placement="left"]::after {
    border-left-color: #000;
    border-right: none;
    top: 50%;
    right: 100%;
    margin-top: -6px;
    margin-right: 4px;
}

/* right tooltip */
a[data-tooltip][data-placement="right"]::before {
    top: -25%;
    left: 100%;
    margin-left: 10px;
}

a[data-tooltip][data-placement="right"]::after {
    border-right-color: #000;
    border-left: none;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    margin-left: 4px;
}

/* top tooltip */
a[data-tooltip][data-placement="top"]::before {
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
}

a[data-tooltip][data-placement="top"]::after {
    border-top-color: #000;
    border-bottom: none;
    bottom: 100%;
    left: 10px;
    margin-bottom: 4px;
}

/* bottom tooltip */
a[data-tooltip][data-placement="bottom"]::before {
    top: 100%;
    left: 0;
    margin-top: 10px;
}

a[data-tooltip][data-placement="bottom"]::after {
    border-bottom-color: #000;
    border-top: none;
    top: 100%;
    left: 10px;
    margin-top: 4px;
}

#archifacile .open-social, #archifacile .open-social:hover, #archifacile .open-social:focus, #archifacile .open-social:active {
    color: rgba(255, 255, 255, 0);
}

#archifacile .open-info-text {
    text-align: right;
    padding-bottom: 4px;
    line-height: 24px;
}

#archifacile #open-thumbs {
    height: 380px;
    overflow: auto;
}

#archifacile .open-thumbs {
    font-size: 12px;
    text-align: center;
    color: #333;
}

#archifacile .open-thumbs:hover, #archifacile .open-thumbs:active, #archifacile .open-thumbs:focus {
    text-decoration: none;
    color: #333;
}

#archifacile .open-thumbs-selected {
    /*border: solid 1px #428BCA;*/
    background-color: #428BCA;
    color: #fff;
}

#archifacile .open-thumbs-aucun {
    background-color: #EEA236;
    color: #fff;
}

#archifacile .open-thumbs-lecture {
    background-color: #46B8DA;
    color: #fff;
}

#archifacile .open-thumbs-titre {
    text-align: center;
    height: 34px;
    overflow: hidden;
    margin-top: 4px;
}

#archifacile .open-thumbs-dim {
    font-size: 10px;
}

/*------------------objets ----------------------------------*/
#archifacile #objets-thumbs {
    height: 380px;
    overflow: auto;
}

#archifacile #objets-thumbs img {
    max-height: 150px;
}

#archifacile .objets-thumbs {
    font-size: 12px;
    text-align: center;
    color: #333;
}

#archifacile .objets-thumbs:hover {
    text-decoration: none;
}

#archifacile .objets-thumbs-selected {
    /*border: solid 1px #428BCA;*/
    background-color: #428BCA;
}

#archifacile .objets-thumbs-aucun {
    background-color: #EEA236;
    color: #fff;
}

#archifacile .objets-thumbs-lecture {
    background-color: #46B8DA;
    color: #fff;
}

#archifacile .objets-thumbs-utilisation {
    background-color: #3ada36;
    color: #fff;
}

#archifacile .objets-thumbs-titre {
    text-align: center;
    height: 34px;
    overflow: hidden;

}

#archifacile .objets-thumbs-dim {
    font-size: 10px;
}

#archifacile #pers {
    float: left;
    overflow: auto;
    width: 180px;
    cursor: default;
    border-left: solid 1px #ccc;
}

#archifacile .pers-femme, #archifacile .pers-fille {
    background-color: #facdf8;
}

#archifacile .pers-homme, #archifacile .pers-garcon {
    background-color: #b5dfff;
}

#archifacile .pers-VIP {
    background-color: #fff6cf;
}

#archifacile .so-email, #archifacile .so-gplus, #archifacile .so-linkedin, #archifacile .so-twitter, #archifacile .so-facebook {
    background: url(/assets/img/social.png) no-repeat;
}

#archifacile .so-email {
    background-position: -128px 0;
    width: 32px;
    height: 32px;
}

#archifacile .so-gplus {
    background-position: -64px 0;
    width: 32px;
    height: 32px;
}

#archifacile .so-linkedin {
    background-position: -96px 0;
    width: 32px;
    height: 32px;
}

#archifacile .so-twitter {
    background-position: 0 0;
    width: 32px;
    height: 32px;
}

#archifacile .so-facebook {
    background-position: -32px 0;
    width: 32px;
    height: 32px;
}

#archifacile #panel-tableadd > div {
    height: 170px;
}

#archifacile #panel-tableadd > div > a {
    width: 33.3333%;
    float: left;
    display: block;
}

#archifacile .btn-trad {
    float: right;
    cursor: pointer;
    margin-top: 3px;
    margin-left: 6px;
    margin-right: 6px;
}

#archifacile .trad-edit {
    cursor: text;
}

#archifacile .trad-edit:hover {
    background-color: #D4FFD3;
}

#archifacile .shortcut {
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #EEE;
    padding: 4px;
    min-width: 24px;
    display: inline-block;
    text-align: center;
    margin-bottom: 4px;
    font-weight: bold;
}

#archifacile .lg-fr, #archifacile .lg-en, #archifacile .lg-de, #archifacile .lg-es, #archifacile .lg-pt, #archifacile .lg-it {
    background: url(/assets/img/lg.png) no-repeat;
}

#archifacile .lg-fr {
    background-position: 0 0;
    width: 16px;
    height: 11px;
}

#archifacile .lg-en {
    background-position: -16px 0;
    width: 16px;
    height: 11px;
}

#archifacile .lg-de {
    background-position: -32px 0;
    width: 16px;
    height: 11px;
}

#archifacile .lg-es {
    background-position: -48px 0;
    width: 16px;
    height: 11px;
}

#archifacile .lg-pt {
    background-position: -64px 0;
    width: 16px;
    height: 11px;
}

#archifacile .lg-it {
    background-position: -80px 0;
    width: 16px;
    height: 11px;
}

#archifacile #main-navbar {
    height: 66px;
}

#archifacile .navbar {
    border-radius: 0;
}

#archifacile .navbar .nav > li {
    min-height: 66px;
}

#archifacile .navbar .baricon {
    padding: 8px;
    text-align: center;
    min-width: 60px;
    color: #555;
    min-height: 66px; /* pour le drapeaux */
    /*background-color: #f00;*/
}

#archifacile .navbar .glyphicon {
    font-size: 26px;
    color: #555;
    vertical-align: bottom;
    /*color: #f69256;*/
}

#archifacile .navbar .nav-texte {
    margin-top: 4px;
    /*color: #aaaaaa;*/
}

#archifacile .navbar .divider-vertical {
    margin: 0 9px;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #f2f2f2;
}

#archifacile .glyphicon-mirror {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

#archifacile div.tooltip-inner {
    max-width: 650px;
}

#archifacile .btn-demi {
    width: 110px;
    margin-bottom: 6px;
    margin-left: 2px;
    padding: 6px 0;
}

#archifacile .navbar-collapse.collapse {
    display: block !important;
}

#archifacile .navbar-nav {
    margin: 0;
}

#archifacile .navbar-nav > li, #archifacile .navbar-nav {
    float: left !important;
}

#archifacile .navbar-right {
    float: right !important;
}

#archifacile .navbar-nav.navbar-right:last-child {
    margin-right: 16px !important;
}

@media (max-width: 991px) {
    #archifacile #main-navbar {
        height: 40px;
        min-height: 40px;
    }

    #archifacile .navbar .baricon {
        min-height: 40px;
        min-width: 40px;
    }

    #archifacile .navbar .glyphicon {
        font-size: 22px;
    }

    #archifacile .navbar .nav-texte {
        display: none;
    }

    #archifacile .navbar .divider-vertical {
        display: none;
    }

    #archifacile .navbar .nav > li {
        /*min-width: 40px;*/
        min-height: 40px;
    }

    #archifacile .navbar > li {
        min-height: 30px;
    }

    #archifacile .navbar b {
        display: none;
    }

    #archifacile #menu {
        /*width: 150px;*/
    }
}

#archifacile .modal-dialog-full {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
}

#archifacile .modal-content-full {
    height: 100%;
    border-radius: 0;
}

/* ------SIDEBAR ------- */

#archifacile #menu #sidebar-back a {
    color:#fff;
    background-color: #5bc0de;
}
#archifacile #menu #sidebar-back a:hover {
    background-color: #39b3d7;
}

#archifacile .sidebar {
    cursor: default;
    /*padding:8px;*/
    margin-bottom: 16px;
}

#archifacile .sidebar .list-group {
    margin-bottom: 0;
}

#archifacile .sidebar .list-group-item {
    margin-bottom: -1px;
    /*background-color: #dfc286;*/
}

#archifacile .sidebar .subitem {
    padding-left: 20px;
    margin-bottom: 0;
}

#archifacile .sidebar .list-group-item:first-child, #archifacile .sidebar .list-group-item:last-child {
    border-radius: 0;
}

#archifacile a.lock {
    color: #999;
}

#archifacile #sidebar-info {
    min-height: 30px;
}

#archifacile .list-group-item .shortcut {
    display: none;
}

#archifacile .list-group-item:hover .shortcut {
    display: inline;
}

#archifacile .btn .shortcut {
    visibility: hidden;
    padding: 0;
    margin: 0;
    margin-right: 4px;
    /*float: right;*/
}

#archifacile .btn:hover .shortcut {
    visibility: visible;
    padding: 0;
    margin: 0;
    margin-right: 4px;
    /*float: right;*/
    color: #666;
}

#archifacile .sp-replacer {
    width: 130px;
    border: none;
    background-color: transparent;
    padding: 0;
}

#archifacile .sp-preview {
    width: 100px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    padding: 2px;
}

#archifacile .sp-dd {
    padding-top: 8px;
}

#archifacile .sp-palette-container {
    max-width: 100px;
}

#archifacile input {
    color: #333;
}

#archifacile .notifyjs-corner {
    top: 70px;
}

#archifacile .patternpick-popup {
    position: absolute;
    z-index: 100;
    width: 132px;
    height: 100px;
    border: solid 1px #f0c49B;
    background-color: #ECECEC;
    margin-top: 30px;
    max-height: 152px;
    overflow-y: scroll;
}

#archifacile .patternpick-canvas {
    width: 100%;
    /*height: 100%;*/
    background-color: #fff;
    border: 0;
    cursor: pointer;
}

#archifacile .trait-preview-canvas {
    width: 98px;
    height: 28px;
    background-color: #fff;
    border: 0;
    cursor: pointer;
}

/* SKIN */

#archifacile .navbar, #archifacile .nav > li > .dropdown-menu {
    background-color: #f8f8f8;
}

/* Couleur des textes des icones*/
#archifacile #navbar .baricon {
    color: #aaa;
}

#archifacile #navbar a:hover, #archifacile #navbar a:focus {
    background-color: #ddd;
}

#archifacile #navbar .glyphicon, #archifacile #viewmenu .glyphicon {
    color: #555;
}

#archifacile #menu .skin-panel {
    margin-top: 0; /*trait blanc*/
    margin-bottom: 10px;
}

#archifacile .skin-head, #archifacile .skin-head:hover, #archifacile #viewmenu {
    background-color: #f0ad4e;
    font-weight: bold;
    color: #333;
    border: 0;
}

#archifacile #menu .skin-body {
    background-color: #fff;
    color: #333;
    border: solid 1px #ccc;
    margin-bottom: -1px;
    /*margin-right: -1px;*/
}

#archifacile #menu a.skin-body:hover {
    background-color: #ddd;
}

#archifacile #menu a.skin-body.active {
    background-color: #ccc;
}

#archifacile #editeur canvas {
    /*border-left: solid 2px #ccc;*/
}

#panel-chat {
    position: absolute;
    z-index: 999;
    width: 250px;
    height: 300px;
    left: -1000px;
    top: -1000px;
}

#panel-chat .panel-body {
    height: 202px;
    overflow-y: scroll;
}

#archifacile canvas:focus {
    outline-width: 0;
}

#archifacile #modal-nouveau .thumbnail {
    text-align: center;
    text-decoration: none;
    color: #000;
    line-height: 40px;
    cursor: pointer;
}

#archifacile .options-palette-color {
    display: block;
    width: 32px;
    height: 32px;
    border: solid 1px #ccc;
    margin: 4px;
    float: left;
    cursor: pointer;
}

#archifacile .multispan {
    line-height: 33px;
    margin-left: 100px;
}

#archifacile .multispan-item {
    background-color: #ddd;
    padding: 6px;
    cursor: pointer;
    font-size: 16px;
}

#archifacile .multispan-add {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
}

#archifacile .multispan-item-selected {
    background-color: #404040;
    color: #fff;
}

/* PAS #archifacile car il n'est pas dans le div archifacile */
.sp-palette-container {
    max-width: 100px;
}