.ui-widget {
    .ui-widget {
        font-size: 1em;
    }

    &-content {
        background: $blanc;
        color: #222222;
    }

    &-header {
        background: $blanc;
        color: #222222;

        a {
            color: $gris700;
        }
    }
}




/* FORM */
.formEntete img { vertical-align:middle; }

.bloc-titre { font-weight: bold; }
.bloc.hidelabel .field .form-libelle { display: none; }
.pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }
.bold {font-weight: bold;}



/*
 * jQuery UI Menu 1.8.14
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.5em ;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    background: $brand300;
    /* margin: -1px; */
}


/**
 * SECTION 0 - om-theme/jquery-ui-theme/jquery-ui.custom.css 
 */

 /**
 * Cette feuille de style contient le style principal.
 *
 * @package framework_openmairie
 * @version SVN : $Id: layout_jqueryui_before.css 4348 2018-07-20 16:49:26Z softime $
 */

/**
 * MAIN
 */

/* GENERAL */

img { border: 0 none; }
a, a:active, a:visited, a:hover { text-decoration:none;}
.visualClear { display: none; }
.hiddenStructure { background: none repeat scroll 0 0 transparent; border: medium none; display: block; height: 1px; margin: -1px 0 0 -1px; overflow: hidden; padding: 0; width: 1px; }
.both { clear:both; }

/* STRUCTURE HTML */

 a{
  text-decoration: none;
}
#footer { padding:5px; text-align:center; font-weight:bold; }
#footer span { padding:2px 5px ; }

/* STRUCTURE HTML SPECIFIC */
body.login #content, body.login #footer { margin: 5px 5px 5px 5px; min-width:0; }
body.htmlonly #content { margin: 5px 5px 5px 5px; min-width: 100px; }
body.login #menu { display: none; }



/* CONTENU */
#title { padding:3px 10px; margin-bottom:10px; }
#title_subtext { padding:3px 10px; margin-bottom:10px; }
#title_subtext h2 { font-size:12px; text-transform: capitalize; color:#555555; }
.subtitle { padding:3px 10px; margin-bottom:10px; }
#title h2 img, .subtitle h3 img { vertical-align:bottom; }
.pageDescription { margin:5px 0; }
.pageDescription p { text-align:justify; }
#help { float:right; text-align:right; padding:5px 10px; }
#dialog { display: none; }
div.instructions { margin-bottom: 10px; }
.text-red { color:red; }
.text-green { color:green; }

/*  */
.om-icon-right { float: right !important; }
.om-icon-left { float: left !important; }

/* Dialog */
#dialog-confirm { display:none; }

/* LINK JS CLOSE WINDOW */
#content p.linkjsclosewindow:hover a { text-decoration:none; }

/* LOCALISATION */
#localisation-draggable { width:10px; height:10px; position:absolute; display:block; right:0; bottom:0; background-color:#bcd5e6; text-align:center; }

/* RVB */
#palette { float:left; width:100px; }
#boites { float:right; width:150px; padding:8px; }



/* les champs de gauche du tableau doivent être contenu dans un bloc de classe comboG
 * et les champs de droite dans un bloc comboD
 */
.comboG, .comboD{float:left;}

div.formControls { padding:5px 0; }
//#formulaire form a:focus { outline: 1px dotted; }
input.upload, input.voir, input.localisation, input.rvb, input.mail, input.combog, input.combod { float:left; }
a.upload, a.voir, a.localisation, a.rvb, a.mail, a.combog, a.combod { float: left; }
button.localisation span.ui-button-text { padding:0; }


/**
 * TINYMCE
 *----------------------------------------------------------------------------/

/**
 * TINYMCE - default.
 *
 * Propriétés CSS permettant de faire refléter dans la fiche de visualisation
 * de l'édition la police et la taille de police des chaînes de texte par défaut
 * (sur lesquelles aucun style spécifique n'a été appliqué dans TinyMCE) telles
 * qu'elles apparîssent dans l'édition PDF.
 */
.field-type-htmlstatic .form-content{
    font-family: Helvetica;
    font-size: 12pt;
    padding: 10px;
    line-height: normal;
}

/**
 * TINYMCE - min_maj.
 */
.mce_min, .mce_maj {
    border: 1px dotted #000000;
}
.mce_min {
    text-transform: lowercase;
}
.mce_maj {
    text-transform: uppercase;
}

/**
 * TINYMCE - barcode.
 *
 * Propriétés CSS permettant de visualiser dans la fiche de visualisation
 * de l'édition si la propriété code barres est activée ou non sur une chaîne
 * de caractères.
 */
.mce_codebarre {
    border: 1px dotted black;
    background: #DEDEDE url("../img/barcode.png") no-repeat left top;
    background-position :  0% 0%;
    background-size: 24px;
    padding-left : 28px;
    padding-top:0;
}
.mce_codebarre:after {
    content: "\a  ";
    white-space: pre;
}

/**
 * TINYMCE - pagebreak.
 *
 * Gestion des sauts de page dans les formulaires d'édition : om_lettretype et
 * om_etat. Le saut de page est représenté par <br pagebreak='true' />. Pour
 * que cet élément soit visible en consultation on ajoute en javascript une
 * balise <p class="pagebreak"></p> juste après le <br /> en question pour
 * afficher le saut de page de manière visible. Le br ne pouvant pas être
 * directement stylé via le css.
 */
br[pagebreak="true"] {
    display: none;
}
p.pagebreak {
    border: 1px dashed #000 !important;
    height: 5px;
    padding : 0 !important;
    margin: 0 !important;
    clear: both !important;
}

/**
 * TINYMCE - table_unbreakable_breakable_property.
 *
 * Propriétés CSS permettant de visualiser dans la fiche de visualisation
 * de l'édition si la propriété est activée sur un tableau ou non.
 */
table[nobr="true"] {
    border : 1px dotted #000000;
    background: transparent url("../img/mce_table_unbreakable_breakable_property.png") no-repeat left top;
}


/*
 * TINYMCE - sousetat.
 *
 * Gestion des sous-états dans les fiches de consultation des éditions.
 */
.mce_sousetat {
    background: url("../img/sousetat.png") no-repeat scroll 0 0 / 16px auto #dedede;
    border: 1px dotted black;
    padding-left: 20px;
    padding-top: 0;
}

/**
 * TINYMCE
 *----------------------------------------------------------------------------/





/* TEXTAREA */
textarea {width:99%;}

/* LIST */



/* LOG */
div.log-box { clear:both; bottom:0; left:0; width: 100%;}
div.log-box fieldset { overflow-y:scroll; margin:10px 0; padding:5px; }
div.log-box span.url { font-weight: bold; }
div.log-box span.debug span.type { color:#ff0000; }
div.log-box span.verbose span.type { color:#666666; }
div.log-box span.extra_verbose span.type { color:#999999; }
div.log-box span.type { font-weight: bold; float:right;}

/* generateur */
.gen-error {
    color:#CD0A0A;
    font-weight: bold;
}
.gen-ok {
    color:green;
    font-weight: bold;
}

/**
 * Affichage des fichiers
 */
/* On limite la largeur d'affichage des images dans le snippet de formulaire 'voir' */
#voir img { max-width: 800px; }
/* On affiche le lien de téléchargement d'un fichier */
p.file-infos-block { padding: 3px; }
p.file-infos-block .discreet { color: #868686; font-size: 85%; font-weight: normal; }
/* On affiche un icone mimetype devant le lien de téléchargement de fichier */
p.file-infos-block a.file-download { background-image: url('../img/mimetype-default.png');}
p.file-infos-block a.file-download.mimetype-application-pdf { background-image: url('../img/mimetype-application-pdf.png'); }
p.file-infos-block a.file-download.mimetype-image-jpeg { background-image: url('../img/mimetype-image-jpeg.png'); }
p.file-infos-block a.file-download.mimetype-image-png { background-image: url('../img/mimetype-image-png.png'); }
p.file-infos-block a.file-download.mimetype-image-gif { background-image: url('../img/mimetype-image-gif.png'); }


/* FORM AUTOCOMPLETE */

/* Autocomplete */
.autocomplete-container {
    width: 325px;
}

input.autocomplete,
a.autocomplete,
span.autocomplete {
    float: left;
    display: inline;
    margin-right: 3px;
}

a.autocomplete {
    cursor: pointer;
}

span.autocomplete {
    cursor: help;
}



.autocomplete_criteria,
.autocomplete_table,
.autocomplete_ajout,
.autocomplete_identifiant,
.autocomplete_libelle,
.autocomplete_join,
.autocomplete_group_by,
.autocomplete_where {
    display: none;
}

.autocomplete-italique,
.autocomplete-italique:hover,
.autocomplete-italique:focus,
.autocomplete-italique:active {
    font-style: italic !important;
}

.autocomplete-gras,
.autocomplete-gras:hover,
.autocomplete-gras:focus,
.autocomplete-gras:active {
    font-weight: bold !important;
}

 

/**
 * SECTION 1 - om-theme/jquery-ui-theme/jquery-ui.custom.css 
 */

/*
 * jQuery UI CSS Framework 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* Misc visuals
----------------------------------*/

/*
 * jQuery UI CSS Framework 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=bold&fsDefault=11px&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=d1f2c4&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=489d43&fcHighlight=326b29&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 */

/* Component containers
----------------------------------*/
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget-content a { color: #222222; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active a, .ui-state-active a:link { color: #212121; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #326b29; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }




/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { background: #aaaaaa 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
/*
 * jQuery UI Resizable 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizable#theming
 */
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
 * jQuery UI Selectable 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Selectable#theming
 */
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }

/*
 * jQuery UI Autocomplete 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete { position: absolute; cursor: default; }   

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */




/*
 * jQuery UI Slider 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }


/*
 * jQuery UI Progressbar 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Progressbar#theming
 */
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }


/*
 * jQuery UI Datepicker 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */


 .ui-datepicker {
    padding: 1em;
    display: none;
    @include noBorderShadow;

    .ui-datepicker-header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: .2em 0;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next  {
        order: 1;
        color: $brand700;
        span:before {
            font-size: 1.5rem;
        }
    }


    .ui-datepicker-prev {
        order: 1;
    }

    .ui-datepicker-next {
        order: 3;
    }

    .ui-datepicker-title {
        order: 2;
        margin: 0 ;

    }

    .ui-datepicker-title select {
        font-size: 1em;
        margin: 1px 0;
    }

    select.ui-datepicker-month-year {
        width: 100%;
    }

    select.ui-datepicker-month,
    select.ui-datepicker-year {
        width: 49%;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 .4em;
        tbody tr {
            border-top : solid 1px #ddd;
        }
    }

    th {
        padding: .7em .3em;
        text-align: center;
        font-weight: bold;
        border: 0;
    }

    td {
        border: 0;
        padding: .25em;
    }

    td span,
    td a {
        display: block;
        padding: .2em;
        text-align: right;
        text-decoration: none;
    }

    .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .ui-datepicker-buttonpane button {
        float: right;
        margin: .5em .2em .4em;
        cursor: pointer;
        padding: .2em .6em .3em .6em;
        width: auto;
        overflow: visible;
    }

    .ui-datepicker-buttonpane button.ui-datepicker-current {
        float: left;
    }


    /* with multiple calendars */

    &.ui-datepicker-multi {
        width: auto;

        .ui-datepicker-group {
            float: left;
        }

        .ui-datepicker-group table {
            width: 95%;
            margin: 0 auto .4em;
        }

        .ui-datepicker-group-last .ui-datepicker-header,
        .ui-datepicker-group-middle .ui-datepicker-header {
            border-left-width: 0;
        }

        .ui-datepicker-buttonpane {
            clear: left;
        }
    }

    @for $i from 2 through 4 {
        .ui-datepicker-multi-#{$i} .ui-datepicker-group {
            width: calc(100%/$i);
        }
    }
}


.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0em;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;

    .ui-datepicker-prev,
    .ui-datepicker-next {
        font-size: 1.2em;
        right: 2px;
        left: auto;
    }

    .ui-datepicker-prev:hover,
    .ui-datepicker-next:hover {
        right: 1px;
        left: auto;
    }

    .ui-datepicker-buttonpane {
        clear: right;
    }

    .ui-datepicker-buttonpane button {
        float: left;
    }

    .ui-datepicker-buttonpane button.ui-datepicker-current,
    .ui-datepicker-group {
        float: right;
    }


    .ui-datepicker-group-last .ui-datepicker-header,
    .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }
}



/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none;
    /*sorry for IE5*/
    display
    /**/
    : block;
    /*sorry for IE5*/
    position: absolute;
    /*must have*/
    z-index: -1;
    /*must have*/
    filter: mask();
    /*must have*/
    top: -4px;
    /*must have*/
    left: -4px;
    /*must have*/
    width: 200px;
    /*must have*/
    height: 200px;
    /*must have*/
}