/**
    Test css repris depuis https://yearofmoo.github.io/ngMessages/
    Montrer des erreurs tr�s visuelles
    */
/*
.error-messages.ng-active {
    background:maroon;
    color:white;
    padding:5px;
    border-radius:5px;
    margin-top:15px;
    position:relative;
}
.error-messages.ng-active:after {
    position:absolute;
    top:-10px;
    content:"";
    left:20px;
    border-style:solid;
    border-color:transparent transparent maroon;
    border-width:5px;
} 
*/
/**
    Avec angular-auto-validate (module 'jcs-autoValidate') */
.has-error.error-msg {
    background:maroon;
    color:white;
    padding:5px;
    border-radius:5px;
    margin-top:15px;
    position:relative;
}
.has-error.error-msg:after {
    position:absolute;
    top:-10px;
    content:"";
    left:20px;
    border-style:solid;
    border-color:transparent transparent maroon;
    border-width:5px;
}
.growl {
    /* pour afficher toujours growl devant les autres trucs */
    z-index: 9999 !important;
}

/* petite animations */
.growl-item.ng-enter,
.growl-item.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

.growl-item.ng-enter,
.growl-item.ng-leave.ng-leave-active {
    opacity: 0;
}

.growl-item.ng-leave,
.growl-item.ng-enter.ng-enter-active {
    opacity: 1;
}
/**
http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
Hide inputs of type='number' in chrome
FIXME: assert in other browsers
*/
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;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;

        padding-left: 10px;
        padding-right: 10px;
    }
    /* compenser le padding pour le petit bouton qui toggle le menu */
    #offcanvasMenuButton{ padding-right: 0px;  margin-right: 0px;}

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right
    .sidebar-offcanvas {
        right: -50%; /* 6 columns */
    }

    .row-offcanvas-left
    .sidebar-offcanvas {
        left: -50%; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 50%; /* 6 columns */
    }

    .row-offcanvas-left.active {
        left: 50%; /* 6 columns */
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 50%; /* 6 columns */
    }
}
/* To display an asterisk on the RIGHT of the label */
.control-group.requiredRight .control-label:after {
	color: #d00;
	content: "*";
	font-size: 15px;
	position: absolute;
	margin-left: 8px;
	top: 7px;
}

.control-span {
	font-size: 15px;
	position: absolute;
	margin-left: 8px;
	padding-top: 7px;
}

/* BIG asterix */
.control-group.requiredRightBig .control-label:after {
	color: #d00;
	content: "*";
	position: absolute;
	margin-left: 8px;
	top: 7px;
	font-family: 'Glyphicons Halflings';
	font-weight: normal;
	font-size: 10px;
}

/* To display an asterisk on the LEFT of the label */
.control-group.requiredLeft .control-label:before {
	color: red;
	content: "*";
	font-size: 15px;
	position: absolute;
	margin-left: -15px;
}

/* BIG asterix */
.control-group.requiredLeftBig .control-label:before {
	color: #d00;
	content: "*";
	position: absolute;
	margin-left: 8px;
	top: 7px;
	font-family: 'Glyphicons Halflings';
	font-weight: normal;
	font-size: 10px;
}


/*
FIXME:
 Structure avec best-practices (nommage BEM + SMACSS;  7-1 pattern pour du Sass/ordre d'inlcusion, notamment)
 Et au minimum un csslint+csscomb pour ordrer selon type de propriété les classes CSS + lints de base

 Sinon, en général, best-practices code css: https://github.com/necolas/idiomatic-css
*/

/* http://angular-ui.github.io/bootstrap/  chapitre "CSS" */

/* Coleur Footer Enmvironnement */

.footerPRD {
    background-color: #222222;
    /* gris */
    color: #F4E8D4;
    /* jaune clair */
}

.footerQAS {
    background-color: #e50209;
    /* rouge */
    color: #F4E8D4;
    /* jaune clair */
}

.footerDEV {
    background-color: #f9f2e6;
    /* jaune clair */
    color: #222222;
    /* gris anthracite */
}

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

.navbar-traduc {
    margin-top: 16px;
    color: #ffffff;
}

/* ATTENTION utiliser des IDs est déconseillé dans du CSS en équipe
Ici fait encore sens car on a un SEUL breadcrumb*/

#ncybreadcrumb {
    padding: 10px;
    margin-bottom: 0;
}

/* pour coller haut les dialogs modal */

.modal-dialog {
    margin-top: 0;
}

input[type="checkbox"] {
    margin-top: 10px;
}

/*
contournement asterix rouge de validation.css, pour:
  <span class='requiredSpan'>*</span>
 */

span.requiredSpan {
    color: #d00;
    font-size: 15px;
    margin-left: 8px;
    top: 7px;
}

/***** Gagner de l'espace *****/

#sidebar {
    padding-left: 0;
    padding-right: 5px
}

/*epdir-farm-menu-wrap *[class*='col-']{/!* Sélecteur CSS : http://stackoverflow.com/a/13352103 *!/
    padding-right: 5px;
    padding-left: 5px;
}*/

.panel-body {
    padding: 0px;
}

.btn-icons {
    background-color: transparent;
}

/* ATTENTION sélecteur trop spécifique, déconseillé */

.table-hover > tbody > .selected {
    color: #000000;
}

.selected {
    background-color: #337ab7;
    color: #FFFFFF;
}

.hovered {
    display: block;
    color: #000000;
}

ol.noNumber {
    list-style-type: none;
}

.space-ui-tree-ol {
    margin-bottom: 8px;
}

.space-margin-top {
    margin-top: 40px;
}

.control-label.leftAlign {
    text-align: left;
}

.control-label.rightAlign {
    text-align: right;
}

.textAlignLeft {
    text-align: left;
}
.textAlignRight {
    text-align: right;
}

.col-sm-6.rightAlig {
    text-align: right;
}

.col-md-6.rightAlig {
    text-align: right;
}

.table > thead > tr > th.topAlign {
    vertical-align: top;
}

.modal {
    text-align: center;
    padding: 0 !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.m-cci-btn-xs {
    padding: 1px 10px !important;
    font-size: 12px !important;
    line-height: 0px !important;
    border-radius: 3px !important;
}

/*
    ==============================================\\
        With BEM+SMACSS naming
        (WIP)
    ==============================================//
*/

/*  Utilities
    ===============================
@define 'utilities' */

.u-FontXLarge {
    font-size: x-large !important;
}

.u-HoverPointer:hover {
    cursor: pointer !important;
}

.u-HoverNotAllowedPointer:hover {
    cursor: not-allowed !important;
}

.u-blackBox {
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

/* CODEREVIEW:
    On pourrait utiliser ceci pour une sélection dans une liste. Mais par nature il s'agit plus d'un "module/composant"
    (voir plus bas donc). Le désavantage est qu'utiliser des "m-odules" risque de nécessiter souvent des '!important'
    ou/et des cascades sur des classes de bootstrap (ex: .m-monModule .col-md-4 {...} ).
    En revanche des '!important;' sur des classes "utilities" comme ici sont tout à fait sensées dans la logique BEM
    puisque se voulant "globales"

.u-SelectedRow{ background-color: lightgreen !important;}

    Une alternative ici serait évt. .u-cadastermgr-SelectedRow{} etc. voir avec structure Block__Element--Modifier , soit
    c'est discutable et peu(jamais) vu.
*/

/*@end*/

/*  Base
    =============================== */

.b-Hr {
    border-color: #CC2E22;
}

/* ( Components )
    ================================
    ~= directives, en Angular       */

/*  Modules
    ================================ */

/** @define m-cadastermgr-ParcelsList; strict  */

.m-cadastermgr-ParcelsList {
    /* OU  aussi .m-ParcelsList{}  puis .m-ParcelsList--cadasterMgr */
    /*Block*/
}

.m-cadastermgr-ParcelsList__row:hover {
    cursor: pointer;
}

.m-cadastermgr-ParcelsList__row--selected {
    /*Again, on devrait pouvoir éviter un !important ici, avec une cascade ("OVERRIDES" plus bas)*/
    background-color: lightgreen !important;
}

.m-cadastermgr-ParcelsList__row--selected:hover {
    background-color: #88e588 !important;
}

/*  Exemple suite...  */

.m-cadastermgr-ParcelsList__item {
}

.m-cadastermgr-ParcelsList__item--hasValidationError {
    /*OR .m-cadastermgr-ParcelsList__item.has-ValidationError*/
}

.m-cadastermgr-ParcelsList__item--lastParcelInList {
}

.m-cadastermgr-ParcelsList__footerBlock {
}

/*  OVERRIDES
    @define m-cadastermgr-ParcelsList; weak */

.m-cadastermgr-ParcelsList > .col-md-12 {
    /* ...styles overridés...  */
}

/*@end*/

.green {
    color: green;
}

.m-cci-inlineBk {
    display: inline-block;
    width: auto;
}

.m-cci-bold {
    font-weight: bold !important;
}

.m-cci-text-align-center {
    text-align: center !important;
}

.m-cci-text-align-right {
    text-align: right !important;
}

.m-cci-text-align-left {
    text-align: left !important;
}

.m-cci-label-align-center {
    display: block !important;
    text-align: center !important;
}

.m-cci-label-align-right {
    display: block !important;
    text-align: right !important;
}

.m-cci-label-align-left {
    display: block !important;
    text-align: left !important;
}

.m-cci-display-block {
    display: block !important;
}

/* m-filterButton_true */

.m-filterButton_true {
    background-color: #eeffe7 !important;
    border-color: #adadad !important;
}

.m-filterButton_true:hover, .m-filterButton_true.hover {
    background-color: #dff0d8 !important;
    border-color: #858585 !important;
}

.m-filterButton_true:active, .m-filterButton_true.active {
    background-color: #dff0d8 !important;
    border-color: #000000 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* m-filterButton_false */

.m-filterButton_false {
    background-color: #ffebeb !important;
    border-color: #adadad !important;
}

.m-filterButton_false:hover, .m-filterButton_false.hover {
    background-color: #f2dede !important;
    border-color: #858585 !important;
}

.m-filterButton_false:active, .m-filterButton_false.active {
    background-color: #f2dede !important;
    border-color: #000000 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* m-filterButton_netral */

.m-filterButton_neutral {
    background-color: #fffdef !important;
    border-color: #adadad !important;
}

.m-filterButton_neutral:hover, .m-filterButton_neutral.hover {
    background-color: #fcf8e3 !important;
    border-color: #858585 !important;
}

.m-filterButton_neutral:active, .m-filterButton_neutral.active {
    background-color: #fcf8e3 !important;
    border-color: #000000 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* m-filterButton_default */

.m-filterButton_default {
    background-color: #fff !important;
    border-color: #adadad !important;
}

.m-filterButton_default:hover, .m-filterButton_default.hover {
    background-color: #e6e6e6 !important;
    border-color: #858585 !important;
}

.m-filterButton_default:active, .m-filterButton_default.active {
    background-color: #e6e6e6 !important;
    border-color: #000000 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* / */

.m-cci-container-for-update-warning {
    padding-right: 15px;
    padding-left: 30px;
    padding-top: 30px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .m-cci-container-for-update-warning {
        width: 768px;
    }
}

@media (min-width: 992px) {
    .m-cci-container-for-update-warning {
        width: 992px;
    }
}

@media (min-width: 1200px) {
    .m-cci-container-for-update-warning {
        width: 1200px;
    }
}

.m-cci-row {
    margin-right: -30px;
    margin-left: -30px;
}

.m-cci-row-for-li {
    margin-left: -24px;
}

.m-cci-well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 0px;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.m-cci-well-7 {
    min-height: 20px;
    padding: 7px;
    margin-bottom: 0px;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.m-cci-search-forms-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    margin-top: 25px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.m-btn-success-disabled {
    background-color: lightgrey !important;
    border-color: darkgrey !important;
    color: whitesmoke !important;
}

.m-btn-danger-disabled {
    background-color: lightgrey !important;
    border-color: darkgrey !important;
    color: whitesmoke !important;
}

/** @define  m-communeattendant-TastyTable;  strict  */

.m-communeattendant-TastyTable {
    /*Block*/
}

.m-communeattendant-TastyTable__row {
    /*Element*/
}

.m-communeattendant-TastyTable__row--selected {
    background-color: lightgreen !important;
}

.m-communeattendant-TastyTable__row--cantBeValidated {
    /*  opacity: 0.8 !important;*/
    background-color: #ffc6e6 !important;
}

.m-communeattendant-TastyTable__row--disabled {
    color: #9f9f9f !important;
}

.m-communeattendant-TastyTable__row--disabled:hover {
    color: #9f9f9f !important;
}

.m-communeattendant-TastyTable__workedSurface {
    background-color: #FF6699 !important;
}

/*  OVERRIDES
    @define  m-communeattendant-TastyTable;  weak */

.m-communeattendant-TastyTable__row--disabled .success, .m-communeattendant-TastyTable__row--disabled .warning, .m-communeattendant-TastyTable__row--disabled .danger {
    color: #9f9f9f !important;
}

.m-cci-label-7 {
    padding-top: 7px;
    font-weight: normal;
    margin-bottom: 0;
    vertical-align: middle;
}

.m-cci-margin-top-5px {
    margin-top: 5px !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    vertical-align: middle !important;
}

.m-cci-editable-table > thead > tr > th,
.m-cci-editable-table > tbody > tr > th,
.m-cci-editable-table > tfoot > tr > th,
.m-cci-editable-table > thead > tr > td,
.m-cci-editable-table > tbody > tr > td,
.m-cci-editable-table > tfoot > tr > td {
    vertical-align: top !important;
}

/*@end*/

/**
 Ui-select with angular, dans un ng-form ou form
 ----------------------
 pour rouge autour du input, repris de bootstrap
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);


    REM : sélecteur horriblement spécifique et peu performant. Devrait du coup être en fin de css produit.
    Ici l'important sont les classes issues du plugin ui-select qui garantissent pas trop d'effets de bord et justifient
    son utilisation car on "précise" un plugin tiers.

    form|ng-form & .ng-dirty pour afficher seulement si en modif
*/

form.ng-dirty .ui-select-container.ng-invalid .selectize-input,
    /*<form>*/

ng-form.ng-dirty .ui-select-container.ng-invalid .selectize-input,
    /*<ng-form>*/

[ng-form].ng-dirty .ui-select-container.ng-invalid .selectize-input
    /*<ANY  ng-form ...></ANY>*/

{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

/** WIZARD **/

.wizard a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 5px;
    margin-right: 5px;
    background: #efefef;
    color: #333;
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.wizard a:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #F9F3E9;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.wizard a:after {
    width: 0;
    height: 0;
    /*
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
*/
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}

.wizard a:first-child:before, .wizard a:last-child:after {
    border: none;
}

.wizard a:first-child {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.wizard a:last-child {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.wizard .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}

.wizard a:first-child .badge {
    margin-left: 0;
}

.wizard .current {
    background: #337ab7;
    color: #fff;
}

.wizard .current:after {
    border-left-color: #337ab7;
}

/* ff anti-aliasing bug - http://coderwall.com/p/tpmsta */

.mywizard li {
    position: relative;
    background: #f5f5f5;
    padding-right: 30px;
    padding-left: 5px;
}

.mywizard li a:after, .mywizard li a:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.mywizard li a:after {
    border-color: rgba(245, 245, 245, 0);
    border-left-color: #f5f5f5;
    border-width: 20px;
    top: 50%;
    margin-top: -20px;
    margin-left: -30px;
}

.mywizard li a:before {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #F9F3E9;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
    margin-left: -30px;
}

.mywizard li .badge {
    vertical-align: text-bottom;
    padding-top: 3px;
}

.oauthFrameHidden {
    visibility: hidden;
    display: none;
}

/**
UPLOAD FILE
**/
.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}

form .progress {
    line-height: 15px;
}

.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}

.progress div {
    font-size: smaller;
    background: #337ab7;
    width: 0;
    color : white;
}

.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 250px;
    height: 100px;
    text-align: center;
    padding-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.dragover {
    border: 5px dashed blue;
}

input[type=text]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=text]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.centrage {
    text-align: center;
}

.container{
    width: 100%;
}

.logoalignment{
    width: 100%;
    margin-left: 1%;
}

.menualignmentright{
    margin-right: 1%;
}

.menualignmentborder {
    margin-top: 8px;
}

.alert-success {
    background-color: #05ad08;
    color: #edfeee;
}

/** END WIZARD **/

/*** START Angular-Smart-Table ***/
.st-sort-ascent:before{
    content: '\25B2';
}

.st-sort-descent:before{
    content: '\25BC';
}
/*** END Angular-Smart-Table ***/

/*** START RadioButton for pagination ***/
.fidcomPagination__btnGroup {
    list-style-type:none;
    margin:25px 0 0 0;
    padding:0;
}

.fidcomPagination__btnGroup li {
    float:left;
    margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.fidcomPagination__btnGroup label, .fidcomPagination__btnGroup input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.fidcomPagination__btnGroup input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.fidcomPagination__btnGroup input[type="radio"]:checked + label {
    background:yellow;
}

.fidcomPagination__btnGroup label {
    padding:5px;
    border:1px solid #CCC;
    cursor:pointer;
    z-index:90;
}

.fidcomPagination__btnGroup label:hover {
    background:#DDD;
}

/* ----- Messages d'information sur page accueil ---- */
.info-block {
    border: 2px groove;
    border-color: #cc2e22;
    color: #cc2e22;
}
.info-legend {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
    color: #cc2e22;
    border: none;
    font-size: 1.2em;
}

/*===========================*/
/*input[type="radio"].toggle:checked + label {*/
    /*background-image: linear-gradient(to top,#969696,#727272);*/
    /*box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),*/
    /*0 1px 2px rgba(0, 0, 0, 0.05);*/
    /*cursor: default;*/
    /*color: #E6E6E6;*/
    /*border-color: transparent;*/
    /*text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);*/
/*}*/

/*input[type="radio"].toggle + label {*/
    /*width: 3em;*/
/*}*/

/*input[type="radio"].toggle:checked + label.btn:hover {*/
    /*background-color: inherit;*/
    /*background-position: 0 0;*/
    /*transition: none;*/
/*}*/

/*input[type="radio"].toggle-left + label {*/
    /*border-right: 0;*/
    /*border-top-right-radius: 0;*/
    /*border-bottom-right-radius: 0;*/
    /*background: grey;*/
/*}*/

/*input[type="radio"].toggle-right + label {*/
    /*border-top-left-radius: 0;*/
    /*border-bottom-left-radius: 0;*/
/*}*/
/*** END RadioButton for pagination ***/

/*
    Shame.css
    =========
    http://csswizardry.com/2013/04/shame-css/
    http://csswizardry.com/2013/04/shame-css-full-net-interview/

    Prefix with "_xxx" like in :
     ._myHack{ ... }
*/

._TastyTableRow.selected { color:white !important;}
._TastyTableRow.selected:hover { color:black !important;}