/* ********************************************************************************************************** */
/*                                                                                                            */
/*                               OUTILS DE FILTRE ORANGE SJOU + RESPONSIVE                                    */
/*                                                                                                            */
/* ********************************************************************************************************** */
 /*
 #######    ###    #          #######    #######    ######      #####  
 #           #     #             #       #          #     #    #     # 
 #           #     #             #       #          #     #    #       
 #####       #     #             #       #####      ######      #####  
 #           #     #             #       #          #   #            # 
 #           #     #             #       #          #    #     #     # 
 #          ###    #######       #       #######    #     #     #####
 */


input {
    color: black !important;
    opacity: 1 !important;
    font-weight: bold !important;
    font-style: normal !important;
    font-family: "helvetica Neue", Arial, Helvetica, Times, serif !important;
    font-size: 16px !important;
}
/* 20170912 */
.RadCombobox, .RadComboBox_Metro, .rcbScroll {
    cursor: pointer !important;
}

.rcbList li {
    font-size: 16px !important;
}

.btn {
    font-size: 16px;
    font-weight: bold;
}

.btn-search-inside-textbox .btnIconFontAwesome-square {
    /* left à -5px dans master.less supprimer??? */
    left: 0px;
}

#ctl00_MainContentPlaceHolder_ctl01_Panel3,
#ctl00_MainContentPlaceHolder_ctl01_Panel2,
#ctl00_MainContentPlaceHolder_ltlAlert_cbodTypeSearch .rcbReadOnly {
    background: white !important;
}

/* Container de btn, input, ou autre outils de filtrage en FLEXBOX */
body form .timeline-filter-wrapper,
body form .timeline-filter-wrapper .btn-search-timeline,
body form .actualites-search .btn-search-inside-textbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
	justify-content: flex-end;
    align-content: center;
	align-items: flex-start;
	padding-left: 15px;
	padding-right: 15px;
}

    body form .timeline-filter-wrapper > *,
    body form .timeline-filter-wrapper .btn-search-timeline > *,
    body form .actualites-search .btn-search-inside-textbox > * {
        padding-top: 0 !important;
	margin: 2px 1px;
        font-size: 16px;
}

        body form .timeline-filter-wrapper > * > * {
            padding-top: 0 !important;
	border: none;
            font-size: 16px;
}
	
        body form .timeline-filter-wrapper > * *:not(a) {
}

.input-search-wrapper {
	height: 45px;
     -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 auto !important;
          flex: 2 1 auto !important; 
}

    .input-search-wrapper span {
        width: 100% !important; /*il y a un 160px en ligne que je ne trouve pas*/
}

#ctl00_MainContentPlaceHolder_ctl01_Panel2 {
	/*margin: 0;*/
     -webkit-box-flex: 0 !important;
      -ms-flex: 0 1 auto !important;
          flex: 0 1 auto !important; 
}

#ctl00_MainContentPlaceHolder_ctl01_Panel3 {
	/*margin: 0;*/
     -webkit-box-flex: 0 !important;
      -ms-flex: 0 1 auto !important;
          flex: 0 1 auto !important; 
}
/*---- Drop down design  ----*/
.RadComboBoxDropDown_Metro {
    color: black !important;
    border-color: black !important;
    overflow: visible !important;
}

    .RadComboBoxDropDown_Metro .rcbScroll ul li {
        font-size: 1em;
}
/*---- end Drop down design ----*/



.RadComboBox_Metro .rcbReadOnly .rcbInputCell {
    background-color: #ffffff !important;
}

.btn-search-inside-textbox .RadComboBox_Metro, .timeline-filter-wrapper .RadComboBox_Metro {
    border: none !important;
}

#ctl00_MainContentPlaceHolder_ltlAlert_cbodTypeSearch {
    border: 1px solid black !important;
}

.tl_filter_category input:hover, .btn-search-inside-textbox .RadComboBox input:hover {
    cursor: pointer !important;
}

.tl_filter_category .rcbFocused, .tl_filter_category .rcbHovered, .tl_filter_category .rcbHovered .rcbReadOnly .rcbInputCell,
.tl_filter_category .rcbFocused .rcbReadOnly .rcbInputCell {
    border-color: #000000 !important;
}

.RadPicker table {
    background-color: white;
}

.tl_filter_category > table > tbody > tr > td.rcbInputCell.rcbInputCellLeft {
    height: 44px;
    border-color: black;
}
/* Dropdown icone Timeline*/
.rcbArrowCell a {
    width: 24px !important;
    height: 24px !important;
    background-image: url('Images/svg/triangleDown.svg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* Dropdown icone actualités*/
.actualites-search .RadComboBox .rcbActionButton {
    /* dans master.less à compenser*/
    top: 0;
    padding: 0 2px !important;
    height: 100% !important;
}

.rcbActionButton #ctl00_MainContentPlaceHolder_ctl02_cbodTypeSearch_Arrow.p-i-arrow-60-down::before {
    content: '' !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url('Images/svg/triangleDown.svg') !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}
/*--- Select du Drop down type actu ---*/
#ctl00_MainContentPlaceHolder_ctl02_cbodTypeSearch > span {
    /*padding top à 10px ailleurs à supprimer*/
	padding: 0;
}

.filtersActus .DropDownStyleFO > span > input {
    height: 40px;
    padding-left: 5px;
    position: relative;
}

.DropDownStyleFO .rcbInner.rcbReadOnly {
    height: 45px;
    border: 1px solid black !important;
    background: white;
    padding-left: 5px;
}
/*---  end Select du Drop down type actu ---*/

html body .row .RadInput_Metro .riTextBox {
    border-color: black;
    font-size: 16px;
	color: black;
}
/* --- formatage des date picker --- */
.datepicker-icon-inside {
    height: 45px !important;
    border: 1px solid black !important;
    min-width: 160px !important;
}

    .datepicker-icon-inside .rcCalPopup {
        /* dans master.less : left à 5px ?? */
    left: 0;
    background-image: url('Images/svg/calendar_month.svg') !important;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center !important;
}
    /* datePicker effet Hover : icone blanche sur fond noir à voir
.datepicker-icon-inside .rcCalPopup:hover{
    background: black;
    background-image: url('Images/svg/calendar_month_white.svg') !important;  
    background-size: 80% 80%; 
    background-repeat: no-repeat;
    background-position: center !important;
}
*/

.datepicker-icon-inside .RadInput_Metro .riTextBox {
    width: 100% !important;
    border: 0 !important;
    height: auto !important;
}

    .datepicker-icon-inside > table.rcTable > .rcInputCell .RadInput_Metro .riTextBox {
    border: none !important;
}

    .datepicker-icon-inside > table.rcTable > tbody > tr > td:nth-child(2) {
    /*width:45px  !important;*/
    border: 0 !important;
}

        .datepicker-icon-inside > table.rcTable > tbody > tr > td:nth-child(2) a {
            margin: 0 !important;
            height: 43px !important;
            width: 43px !important;
    border: 0 !important;
}

.RadComboBox_Metro .rcbArrowCell {
    border-color: black !important;
    color: #000;
    background-color: #fff !important;
    background-size: 40%;
}
/* ------ Boutons de filtres export et listView ------ */
.btn-orange-icon-mosaique, .btn-orange-icon-mosaique-selected {
	width: 45px;
    background-image: url("Images/svg/events_agenda.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

    .btn-orange-icon-mosaique:hover, .btn-orange-icon-mosaique-selected {
        background: black !important;
        border: black !important;
    background-image: url("Images/svg/events_agenda_white.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 80% 80% !important;
}

.timeline-filter-wrapper #btnExport {
    width: 45px; 
    height: 45px; 
    background-color: white;
    background-image: url("Images/svg/printer.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

    .timeline-filter-wrapper #btnExport:hover {
        background: black;
        border: black;
    background-image: url("Images/svg/printer_white.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

    .timeline-filter-wrapper #btnExport input:focus {
    outline: none;
}

.timeline-filter-wrapper .RadButton {
    border-radius: 0 !important;
}

.timeline-filter-wrapper .RadButton,
.timeline-filter-wrapper .RadComboBox {
    height: 45px !important;
}

.timeline-filter-wrapper .btn-search-timeline,
.timeline-filter-wrapper .btn-orange-icon-mosaique,
.timeline-filter-wrapper #btnExport {
    border-color: black !important;
}

/*centrage du input Rechercher*/
    .timeline-filter-wrapper .btn-search-timeline input {
        height: 40px !important;
}


/* input 'rechercher' de la zone actualité */
span#ctl00_MainContentPlaceHolder_ctl02_txtdSearch_wrapper {
    /*Peut s'étirer pour occuper l'espace restant*/
    /*width:auto !important;*/
     -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 auto !important;
          flex: 2 1 auto !important; 
}
/*input rechercher nom event*/
.input-search-wrapper span {
    /*Peut s'étirer pour occuper l'espace restant*/
     -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 auto !important;
          flex: 2 1 auto !important; 
}

input#ctl00_MainContentPlaceHolder_ctl02_btnSearch {
    width: auto !important;
	padding: 0 10px;
	/*margin-left: 4px !important;*/
    background: black !important;
    border-color: black;
    color: white !important;
    font-size: 16px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

    input#ctl00_MainContentPlaceHolder_ctl02_btnSearch:hover {
        background: #48b1ea !important;
        border-color: #48b1ea !important;
}
/* zone Mots clés Actualité flexible*/
.filtersActus > div:nth-child(4) {
    width: auto !important;
     -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 auto !important;
          flex: 2 1 auto !important; 
}

    .filtersActus > div:nth-child(4) span {
    width: 100%;
}

/* --- filter page OUTILS "mots clés" */
#ctl00_MainContentPlaceHolder_ltlAlert_cbodTypeSearch {
     -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important; 
}

html body #ctl00_MainContentPlaceHolder_ltlAlert_Panel1 {
     -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 auto !important;
          flex: 2 1 auto !important; 
}

    html body #ctl00_MainContentPlaceHolder_ltlAlert_Panel1 span#ctl00_MainContentPlaceHolder_ltlAlert_txtdSearch_wrapper {
	width: 100% !important;
}

.actualites-search .btn-square-orange input {
    border-color: black !important;
    background: black !important;
}

    .actualites-search .btn-square-orange input:hover {
        background: #48b1ea !important;
        border-color: #48b1ea !important;
}
/* --- END filter page OUTILS "mots clés" */

/* ----- START : CALENDAR POP UP 'ORANGE INTERACTIVE COMPONANT' SJOU ----- */
.RadCalendar {
    background-color: #FFFFFF;
        margin-top: 15px;
    color: black;
    border: 1px solid black !important;
    padding: 20px !important;
    }

.RadCalendarPopupShadows > .rcShadTR,
.RadCalendarPopupShadows > .rcShadBL,
.RadCalendarPopupShadows > .rcShadBR {
    /*Masquage des ombres (img png) du RadCalendar*/
        display: none !important;
    }

.RadCalendar_Metro .rcMain {
        border: none !important;
    }

.RadCalendar caption, .RadCalendarTimeView caption {
        display: none;
    }

.RadCalendar .rcTitlebar .rcTitle {
    text-transform: none !important;
}

    .RadCalendar .rcTitlebar .rcTitle::first-letter {
        text-transform: uppercase;
        !important;
    }

.RadCalendar .rcFastNext, .RadCalendar_Metro .rcFastNext {
    background: url(/App_Themes/AgoraEvent/Metro/Grid/PagingLast.gif) no-repeat top left !important;
    background-size: 100% !important;
}

.RadCalendar .rcFastPrev, .RadCalendar_Metro .rcFastPrev {
    background: url(/App_Themes/AgoraEvent/Metro/Grid/PagingFirst.gif) no-repeat top left !important;
    background-size: 100% !important;
}

.RadCalendar .rcNext, .RadCalendar_Metro .rcNext {
    background: url(/App_Themes/AgoraEvent/Metro/Grid/PagingNext.gif) no-repeat top left !important;
    background-size: 100% !important;
}

.RadCalendar .rcPrev, .RadCalendar_Metro .rcPrev {
    background: url(/App_Themes/AgoraEvent/Metro/Grid/PagingPrev.gif) no-repeat top left !important;
    background-size: 100% !important;
}

.RadCalendar .rcTitlebar table td, .RadCalendarTimeView th {
    background-color: #FFFFFF !important;
    font-weight: bold;
       font-size: larger;
    color: black !important;
       line-height: 32px;
       padding: 3px;
    }

.RadCalendar .rcTitlebar, .RadCalendar_Metro .rcWeek th {
    border: none !important;
    }

.RadCalendar .rcMainTable .rcRow th {
        display: none;
    }

.RadCalendar .rcMainTable .rcRow td {
    background-color: #FFFFFF !important;
    border-color: black !important;
        padding: 10px;
        border: none;
        /*border-top: 1px solid;
        border-left: 1px solid;*/
    }

.RadCalendar .rcMain .rcWeek th {
        text-transform: capitalize;
        padding: 4px;
    background-color: #FFFFFF !important;
    color: black !important;
        font-weight: bold !important;
        text-align: center !important;
    }

.RadCalendar .rcMainTable .rcWeek .rcViewSel {
        display: none;
    }

.RadCalendar .rcNext, .RadCalendar_Metro .rcNext {
        /*background: url('/App_Themes/AgoraEvent/Metro/Grid/PagingNext.gif') no-repeat top left !important;*/
        background-size: 100% !important;
    }

    .RadCalendar .rcFastNext, .RadCalendar_Metro .rcFastNext {
       /* background: url('/App_Themes/AgoraEvent/Metro/Grid/PagingLast.gif') no-repeat top left !important;*/
        background-size: 100% !important;
    }

.RadCalendar .rcPrev, .RadCalendar_Metro .rcPrev {
       /* background: url('/App_Themes/AgoraEvent/Metro/Grid/PagingPrev.gif') no-repeat top left !important;*/
        background-size: 100% !important;
    }

.RadCalendar .rcFastPrev, .RadCalendar_Metro .rcFastPrev {
        /*background: url('/App_Themes/AgoraEvent/Metro/Grid/PagingFirst.gif') no-repeat top left !important;*/
        background-size: 100% !important;
    }

    .RadCalendar_Metro .rcTitlebar .rcPrev:hover,
    .RadCalendar_Metro .rcTitlebar .rcNext:hover,
    .RadCalendar_Metro .rcTitlebar .rcFastPrev:hover,
.RadCalendar_Metro .rcTitlebar .rcFastNext:hover {
    border: none;
    }

.RadCalendarMonthView {
    background-color: #FFFFFF;
    }
    
    .RadCalendar .rcMainTable .rcRow td a {
    color: black;
    font-weight: bold !important;
}

.RadCalendar .rcMainTable .rcRow td.rcOtherMonth a {
    color: #CCCCCC !important;
}

.RadCalendar .rcMainTable {
    border-collapse: collapse !important;
    }

    .RadCalendar .rcMainTable tr.rcRow td:not(.rcOtherMonth) {
        border: 1px solid black !important;
    }

    .RadCalendar .rcMainTable .rcRow td a:hover,
    .RadCalendar .rcMainTable .rcRow td:hover,
    .RadCalendar .rcMainTable .rcRow td:hover a {
        color: white !important;
        background-color: black !important;
        font-weight: bold !important;
    }

.RadCalendar_Metro .rcRow td.rcSelected {
    background-color: black !important;
    }

.customRadgrid .rcWeek th, .customRadgrid .rcMain .rcWeekend a {
        font-weight: bold;
        color: black;
    }

.RadCalendar_Metro .rcFastPrev, .RadCalendar_Metro .rcPrev, .RadCalendar_Metro .rcFastNext, .RadCalendar_Metro .rcNext {
        background-position: 0 !important;
    }
/* --- END CALENDAR POP UP --- */

/*  ------------------------ GESTION RESPONSIVE DES FILTRES --------------------------- */
@media only screen and (max-width: 1279px) {
}

@media only screen and (max-width: 1199px) {
    /*
    html body .row .RadInput_Metro .riTextBox{
        width: 100% !important;
        -webkit-box-flex: 2 !important;
          -ms-flex: 2 1 auto !important;
              flex: 2 1 auto !important; 
    }
    */

}
    
@media only screen and (max-width: 990px) {
    /*alignement des btns rechercher, liste et export à droite*/

}

@media only screen and (max-width: 767px) {
    /* Hide filters button list and export */
    .timeline-filter-wrapper #ctl00_MainContentPlaceHolder_ctl01_tl_filter_switchView,
    .timeline-filter-wrapper #btnExport {
        display: none;
    }

    .tl_filter_category {
        width: 100% !important;
    }

    #ctl00_MainContentPlaceHolder_ctl02_cbodTypeSearch {
        width: 100% !important;
    }
}

@media only screen and (max-width: 547px) {
    #ctl00_MainContentPlaceHolder_ctl01_Panel2,
    #ctl00_MainContentPlaceHolder_ctl01_Panel3,
    #ctl00_MainContentPlaceHolder_ctl02_Panel2; #ctl00_MainContentPlaceHolder_ctl02_Panel3 {
         -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important; 
    }

    .datepicker-icon-inside {
        width: 100% !important;
    }

    #ctl00_MainContentPlaceHolder_ctl01_tl_filter_startdate_wrapper > table:nth-child(2),
    #ctl00_MainContentPlaceHolder_ctl01_tl_filter_enddate_wrapper > table:nth-child(2) {
        width: 100% !important;
    }

    .datepicker-icon-inside .RadInput_Metro {
        /*margin: 0;*/
        width: 100% !important;
    }
}

@media only screen and (max-width: 540px) {
    /* Container de btn, input, ou autre outils de filtrage */
    .timeline-filter-wrapper,
    .timeline-filter-wrapper .btn-search-timeline input,
    {   
        /*-webkit-flex-flow: column wrap;
        flex-flow: column wrap;*/
    }   
    /*  --------      datePicker - sur un meme ligne et full witdh  ---------  */


    #ctl00_MainContentPlaceHolder_ctl01_Pane11 .input-search-wrapper span.RadInput {
        width: 200px;
    }

    #ctl00_MainContentPlaceHolder_ctl01_Panel3,
    #ctl00_MainContentPlaceHolder_ctl01_Panel2, 
    #ctl00_MainContentPlaceHolder_ctl01_Pane11 {
         -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important; 
    }

    #ctl00_MainContentPlaceHolder_ctl02_Panel3,
    #ctl00_MainContentPlaceHolder_ctl02_Panel2 {
         -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important; 
    }

    #ctl00_MainContentPlaceHolder_ctl02_Panel3,
    #ctl00_MainContentPlaceHolder_ctl02_Panel2 {
         -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important; 
    }



    #ctl00_MainContentPlaceHolder_ctl02_rdpSearchFrom_wrapper > table:nth-child(2),
    #ctl00_MainContentPlaceHolder_ctl02_rdpSearchTo_wrapper > table:nth-child(2) {
        width: 100% !important;
    }

    /*
    #ctl00_MainContentPlaceHolder_ctl01_Panel3 > div,
    #ctl00_MainContentPlaceHolder_ctl01_Panel2 > div{  
        width: 100% !important;
    }
    */
    #ctl00_MainContentPlaceHolder_ctl01_tl_filter_startdate_wrapper, #ctl00_MainContentPlaceHolder_ctl01_tl_filter_enddate_wrapper {
        width: 100% !important;
    }
}

/* ********************************** END OUTILS DE FILTRE DE RECHERCHE ORANGE SJOU ************************************** */


/* ********************************** ROLLOVER SUR BTN ORANGE SJOU ************************************** */

.btn-search-timeline {
    background: black !important;
}

    .btn-search-timeline.rbHovered {
        background: #48b1ea !important;
        border-color: #48b1ea !important;
}

span.RadButton_Bootstrap.rbSkinnedButton:hover,
span.RadButton_Bootstrap.rbLinkButton:hover,
span.RadButton_Bootstrap.rbVerticalButton:hover,
span.RadButton_Bootstrap.rbSkinnedButton:focus,
span.RadButton_Bootstrap.rbLinkButton:focus,
span.RadButton_Bootstrap.rbVerticalButton:focus {
    /* box shadow Telerik à comprenser (halo de 1px interne sur btn rechercher de la Timeline) */
    box-shadow: unset !important;
}

.btn-search-timeline > input {
    color: white !important;
}
/* **********************************  END ROLLOVER SUR BTN ORANGE SJOU ************************************** */


/* --- MENU EXPORT ---- */
.timeline-filter-wrapper #menuExport {
    border: 1px solid black;
    box-shadow: none;
    /* 20170907 SJOU */
    z-index: 10;
    right: 0;
    top: 46px;
}

    .timeline-filter-wrapper #menuExport input {
    height: 100%;
}

        .timeline-filter-wrapper #menuExport input:hover {
    background-color: black;
    color: white;
}

    .timeline-filter-wrapper #menuExport span {
    padding: 0;
}
/* --- END MENU EXPORT ---- */

.tl_filter_category .rcbInputCell input {
    height: 100%;
}


/*********************************/
/*FIX UNIQUEMENT POUR MOZILLA */
/*********************************/
@-moz-document url-prefix() {
    body form .timeline-filter-wrapper .datepicker-icon-inside, body form .btn-search-inside-textbox .datepicker-icon-inside {
        width: auto !important;
    }

    .caret {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-100%);
    }
}

html body .RadInput_Metro .riError, html body .RadInput_Error_Metro {
    background: none !important;
}