﻿/*
    Styles CSS, CGI.
*/

a, a:link, a:visited { color: #2868A8; }

.csp-uk-tab a {
    color : #404040;
}
/* Active */
.csp-uk-tab > .csp-uk-active > a {
  border-color: #2868A8 ;
  color: #2868A8;
}
/* Disabled */
.csp-uk-tab > .csp-uk-disabled > a {
  color: #999;
}

a:hover { color: #EE3124;  }
h1 a:hover { color :#EE3124 !important}  /*Permet d'overrider un style de défaut provenant du UIKIT*/

#MassiveFiltersLink a,#MassiveFiltersLink a:link,#MassiveFiltersLink a:visited { color: #2868A8!important; }
#MassiveFiltersLink a:hover { color: #EE3124!important;  }

body {
    background: #f7f7f7
}

#Function h1 { color: #404040; }

.HelpIcon { background: url(../imgs/CGI/HeadHelp.png) bottom no-repeat; }
.PrintIcon { background: url(../imgs/CGI/HeadPrint.png) bottom no-repeat; }
.InfoIcon { background: url(../imgs/CGI/info.gif) bottom no-repeat; }
.KeyboardIcon { background: url(../imgs/CGI/HeadKeys.png) bottom no-repeat; }
.UpIcon { background: url(../imgs/CGI/Up.png) bottom no-repeat; }
.DownIcon { background: url(../imgs/CGI/Down.png) bottom no-repeat; }
.DeleteIcon { background: url(../imgs/CGI/RemoveItem.png) bottom no-repeat; }
.PreviousButton { background: url(../imgs/CGI/NavigationPrevious.png) left bottom no-repeat; }
.NextButton { background: url(../imgs/CGI/NavigationNext.png) right bottom no-repeat; }
.GoBackToList { background: url(../imgs/CGI/GoBackToList.png) bottom no-repeat; }
.GoBackToFunction { background: url(../imgs/CGI/GoBackToFunction.png) bottom no-repeat; }
.SearchButton { background: url(../imgs/CGI/HeadSearch.png) bottom no-repeat; }
.ExcelIcon { background: url(../imgs/CGI/Logo_Excel_Mini.gif) no-repeat; background-size: contain; }

.ListButton  
{
    background: url(../imgs/CGI/imgListLarge.png) right bottom no-repeat;
	display: inline-block;	  
	width: 24px; 
	height: 20px;	
	line-height: 20px;  	
	text-indent: -9999em;
	margin-right:15px;
	margin-left:0px;
}
.AdvancedSearch  
{
    background: url(../imgs/CGI/HeadSearch.png) right bottom no-repeat; 
	display: inline-block;	  
	width: 25px; 
	height: 25px;	
	line-height: 25px;  	
	text-indent: -9999em;
	margin-right: 15px;
	margin-left:0px;
}

.CurrentTabActive a, .CurrentTabActive a:link, .CurrentTabActive a:visited { color:#fff; background-color:#333;}


.treeview li.collapsable { background: url(../imgs/CGI/expand.gif) 0 3px  no-repeat; }
.treeview li.expandable  { background: url(../imgs/CGI/collapse.gif) 0 3px  no-repeat; }


.defaultTable thead {background-color: #e8ebf0;}
.defaultTable tfoot {background-color: #e8ebf0;}
.defaultTable tr.navHeader {background-color:#fff;}

/* Les lignes de tables sont zébrés. On ajoute une ligne de fin navheadercenter pour délémiter la table lorsque la dernière ligne est blanche */
.defaultTable tbody tr:nth-child(odd) { background-color:#f0f3f7;}
.defaultTable tbody tr:hover {background-color:#d2ebf5;}

.defaultTable.dblLine tbody tr{background-color:#fff;}
/*Ligne zébrés double */
.defaultTable.dblLine tbody tr:nth-child(4n),.defaultTable.dblLine tbody tr:nth-child(4n-1) { background-color:#f0f3f7;}
.defaultTable.dblLine tbody tr:hover{ background-color:#d2ebf5;}

/*Ligne zèbrer dynamic*/
.defaultTable.dynLine tbody tr{background-color:#fff}
.defaultTable.dynLine tbody tr:hover{ background-color:#d2ebf5;}

.defaultTable.dynLine tbody tr.csp-oddRowBgColor { background-color:#f0f3f7}
.defaultTable.dynLine tbody tr.csp-oddRowBgColor:hover { background-color:#d2ebf5}






/*PATCH pour contrer le tableau non standard qui non pas de <thead> (MassifEmployementProfile)*/

.csp-tbl-navHeader {background-color:#fff!important;} 

.csp-tbl-header 
{
     background-color: #e8ebf0!important;
}


.csp-tbl-footer
{
     background-color: #e8ebf0!important;
}




.navheadercenter
{
     background-color: #e8ebf0;
}

#HeaderFields
{
     background-color: #e8ebf0;
}

#HeaderDetailFields
{
    background-color: #e8ebf0;
}

.csp-tbl-head  tr:nth-child(odd) { background-color:#e8ebf0;}
.csp-tbl-head  tr:hover {background-color:#e8ebf0;}

/* fin patch tableau sans thead*/


/* ***PATCH 
    Dans les traitements massifs et la vérification des totaux, une table est utilisé pour afficher les warnings et erreur en popup.
    Lorsque c'est le cas, il ne faut pas utiliser un affichage zébré car ça réduit la lisibilité
*/
#divError > .sectionErrorItems > .defaultTable tbody tr, 
#divError > .sectionErrorItems > .defaultTable tbody tr:nth-child(odd), 
.sectionErrorItems > table tbody tr, 
.sectionErrorItems > table tbody tr:nth-child(odd) 
{
    background-color:#fff;
}

/* Cette classe est généralement utilisé pour afficher un toatal ou une information
    On l'affichage avec les même couleurs que l'entête
*/
.transparentFooter
{
	background-color:#e8ebf0;
	font-weight: normal;  
}

.firstBreakHeader { background-color: #e8ebf0;	} /* Utilisé par les tables avec bris (ex. Liste des accès aux fonctions)*/


button {
	padding: 2px 12px 4px 12px;
	/*margin-right: 8px;*/
    margin-right: 15px;
	height: 30px;
	font-size: 13px;            
    color:#fff;
    background: #2BB8EF;
    border: 1px solid #13b0ed;
    border-radius:3px;    
}

button:hover {
    color:#fff;
    background: #109fd7;
	cursor: pointer;
    border: 1px solid #0e86b6;
}


.DefaultActionButton {
	color:#fff;
	background:#EE3124;
    border: 1px solid #e72012;
}
 
.DefaultActionButton:hover {
    color:#fff;
    background:#cf1c10;
    border: 1px solid #ae180d;
}

.cspInputTextButton {
	padding: 2px 8px 4px 8px;
	margin-right: 8px;
	height: 24px;
	font-size: 13px;            
    color:#fff;
    background: #2BB8EF;
    border: 1px solid #13b0ed;
    border-radius:3px;
}

button.disabled, button.disabled:hover, .DefaultActionButtonDisabled, .DefaultActionButtonDisabled:hover {
    color:#f7f7f7;
    background: #c0c0c0;
	cursor: default;
    border: 1px solid #b0b0b0;
}


.sectionError { color:#4F88B3; }
.sectionError table {border: 2px solid #4F88B3; }

/*
    On active le survol de la souris seulement s'il y a un événement setFocus
    On utilise la même couleur que les hyperliens
*/
.sectionErrorDesc[onclick*=setFocus]:hover 
{
    color:#EE3124;
    cursor: pointer;
}

.listBoxHead{
    background-color:#e8ebf0;       
}

/* ComboBox - AutoComplete*/
.sectionInputComboWithSearchGroupDisabled {
    border: 1px solid #ddd;
    background-color: #eeeeee;
}

.ui-widget.ui-widget-content {
    border: 1px solid #bbb;
    border-top: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-menu-item.ui-state-focus {
    border: none;
    color: #404040;
    background: #ddd;
    font-weight: normal !important
}
.ui-menu .ui-menu-item .ui-state-hover,
.ui-menu .ui-menu-item .ui-state-active {
    color: #404040;
    background: #eee;
}

.inputComboWithSearch:focus {
    outline: none;
    border: 1px solid #bbb !important;
}

.ui-menu .ui-menu-item-wrapper {
    padding: 6px 10px;
}

.option-disabled {
    background-color: #8080804a;
    font-weight: bold;
}

.csp-icon-eye {
    color: #4F88B3;
    background: #f4f4f4;
    border: 1px solid #ddd;
    margin-left: -4px;
    padding: 4px 5px 6px 5px;
}

.csp-icon-eye-toggle {
    line-height: 16px !important;
    background: #f4f4f4;
    border: 1px solid #ddd;
    margin-left: -1px;
    padding: 3px !important;
}

.csp-input-password {
    width: 100px !important;
}

@-moz-document url-prefix() {
    .csp-icon-eye {
        padding: 4px 5px 6.5px 5px;
    }

    .csp-icon-eye-toggle {
        padding: 3px 3px 4px 3px !important;
    }
}

.csp-input-icon-validated {
    color: #178849;
    margin-left: 15px;
}

.csp-input-icon-validated-img {
    vertical-align: middle;
    font-size: 18px;
}
.csp-input-icon-validated-Text {    
    vertical-align: middle;    
}

.csp-module-caption {
    color: #EE3124;
}

/************* Bannière de consentement des cookies (securiti) *******************/

/*regroupement du bandeau*/
.cc-window.cc-banner {
    padding: 16px 120px;
}

.cc-banner .cc-message {
    padding: 0;
}


@media screen and (max-width: 768px) {
    .cc-window.cc-banner {
        padding: 16px 30px;
        display:flex;
        flex-direction:column;
    }

    .cc-compliance.cc-highlight.cc-regular {
        flex-direction: column;
    }

    .cc-link.cmp-pref-link {
        padding: 0px;
        margin: 0px;
    }

    .cc-compliance a#securitiCmpCookiePrefBtn {
        width: 95%;
        padding: 0px;
        margin: 0px;
    }

    .cc-btn.cc-allow.cc-btn-format {
        margin: 8px;
        width: 95%;
        padding: 0px 8px;
    }
}

.cc-window.cc-banner {
    box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.2);
}

/*Section des boutons*/
.cc-compliance.cc-highlight.cc-regular {
    display: flex;
    align-items: center;
    padding:0;
}

/*bouton tout accepter*/
.cc-compliance a.cc-btn.cc-allow.cc-btn-format {
    order: 2;
    margin-left: 8px;
    margin-bottom:0;
}

.cc-compliance .cc-btn.cc-allow.cc-btn-format:hover {
    color: #fff !important;
    background: #cf1c10 !important;
    border: 1px solid #ae180d !important;
}

.cmp-save-btn:hover {
    color: #fff !important;
    background: #cf1c10 !important;
    border: 1px solid #ae180d !important;
}

a#securitiCmpCookiePrefBtn svg path, a#securitiCmpCookiePrefBtn svg rect, a#securitiCmpCookiePrefBtn svg circle {
    fill: #049854;
}

.cc-btn.cc-dismiss.cc-btn-format{
    display:none;
}

.cc-compliance a#securitiCmpCookiePrefBtn {
    background-color: #2BB8EF;
    color: #FFF;
    font-size: 12px;
    font-weight: 100;
    line-height: 20px;
    height: 32px;
    padding: 0 8px;
    border-width: 1px;
    border-radius: 2px;
    border-style: solid;
    border-color: #13B0ED;
    text-align: center;
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    order: 1;
    text-decoration: none;
    margin-bottom:0;
}

    .cc-compliance a#securitiCmpCookiePrefBtn:hover {
        background-color: #109fd7 !important;
        border: 1px solid #0e86b6 !important;
        color: #fff !important;        
    }

.cmp-pref-link span + span {
    padding: 0px;
}

.cc-compliance a#securitiCmpCookiePrefBtn svg {
    display: none;
}

.cc-link:hover {
    color: #ee3124 !important;
}

/*Titre écran préférence*/
.cmp-body.cmp-multi-level .cmp-modal__header {
    align-items: start;
}

/*bouton enregistrer preference*/
.cmp-save-btn {
    margin: 0px;
}

/* Toogle Switch */
input:checked ~ .slider {
    background-color: #2868A8;
}

input:checked ~ .slider:before {
    transform: translateX(15px);
    left: 4px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMjQwMjcgMy4yMjk4Nkw0LjkyNDUgMC41TDYgMS42MTE3MUwyLjIzODM2IDUuNUwwIDMuMTg2MjhMMS4wNjExNSAyLjAxMTA0TDIuMjQwMjcgMy4yMjk4NloiIGZpbGw9IiMyODY4QTgiLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: center;
}


/*Bouton Choisir un fichier*/
.filePickerInput {
    display: none;
}

.filePickerButtonLabel {
    padding: 4px 12px 4px 12px;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 5px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
    background-color: #2BB8EF;
    color: #fff;
    border: 1px solid #13b0ed;
}

    .filePickerButtonLabel:hover {
        color: #fff;
        background: #109fd7;
        cursor: pointer;
        border: 1px solid #0e86b6;
    }

    .filePickerButtonLabel.disabled, filePickerButtonLabel.disabled:hover {
        color: #f7f7f7;
        background: #c0c0c0;
        cursor: default;
        border: 1px solid #b0b0b0;
    }

.filePickerRightLabel {
    max-width: 200px;
    display: flex inline;
}

.filePickerRightLabelSpan {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.divFilePicker {
    display: inline-block;
    background-color: #f7f7f7;
}