/* CSS Document */

/**** 
Couleur primaire : #0e425f
Couleur primaire 50% : #86A0AF
Couleur textes : #000000
Couleur textes 50% : #666666
Couleur textes placeholder : #5E727D
Couleur de fond : #F5F6FC
Couleur de fond de tableau : #F9F9FF
Couleur suivi inactif : #DADADD

Couleur fond popin blanche : #26477D avec opacity 0.65
Couleur fond popin bleue : #FFFFFF avec opacity 0.65

Couleur fond bleu foncé sur fond bleu : #095DBF

Couleur bordure de champs : #e8eaec
Couleur fond checkbox (on/off) : #EDEEF0
Couleur fond checkbox : #e7e9f0

Couleur valid : #2EB39A
Couleur error : #ECE1E1
Couleur orange : #F88C2D

Stats :
Couleur 1 (violet) : #8676FF
Couleur 2 (rose) : #FF708B
Couleur 3 (jaune) : #FFBA69
***/

html, body { padding:0; margin:0; }
body { background-color:#F5F6FC; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 13px; color:#000000 }
textarea { font-family: 'Montserrat', Arial, sans-serif; }
img, input, select { max-width:100%; }
img { transform: translate3d(0,0,0) }
a { color:#666666; text-decoration:none; transition:color .3s; -webkit-transition:color .3s; }
a:hover, a.on, nav ul li.on > a { color:#000000; }
nav > ul > li.on > a:not(.navLinkIco)::before, #settingsNav a.on::before, h1::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 35px; width: 5px; border-radius: 5px; background-color: #0e425f }
[contenteditable="true"] { outline: none }
.green, .mainColor, a:hover i, a.on i, nav ul li.on > a i, nav ul ul li.on a, .settingUpdateContainer a { color: #0e425f }
.mainColorBg { background-color: #0e425f; color: #FFFFFF }
.grey { color: #5E727D }
.thin { font-weight: 500; font-size: 13px }

h1 { position: relative; font-size: 23px; margin: 0; padding: 10px 20px }
h2 { font-size: 17px; margin: 0 0 30px }
.formAjax h3 { font-size: 13px; font-weight: 600; margin: 0 }
.formAjax h3 i { font-size: 32px; vertical-align: middle; margin-right: 10px }

.fullWidth { width: 100% }

input:not([type='checkbox']):not([type='color']):not(.cr-slider), textarea, .input, select:not(.ui-datepicker-month) { /*background: none;*/ border: #e8eaec 1px solid; height: 45px; border-radius: 5px; padding: 0 10px; font-family: 'Montserrat', sans-serif; font-size: 14px; outline: none; box-sizing: border-box }
textarea { padding: 20px }

#KSiteHeader { position: fixed; left: 0; top: 0; bottom: 0; width: 150px; font-size: 13px; box-sizing: border-box; z-index: 90; }

#KSpinner { position: absolute; top: 50%; left: 50%; margin-top: -23px; margin-left: -23px; }
div[class^='block'] { display: inline-block; box-sizing: border-box; vertical-align: top }
.block30 { width: 28%; margin-right: 2% }
.block33 { width: 33.33333% }
.block70 { width: 70% }

#formBtnAction { position: fixed; bottom: 10px; right: 10px; left: 255px; padding: 20px 0; background-color: #FFFFFF; border-radius: 0 0 12px 12px; z-index: 8 }
#formBtnAction a, #formBtnAction button { font-weight: 500; padding: 17px }
.btn.mainBtn { border-radius: 5px 0 0 5px }

.successContainer { position: fixed; left: 550px; top: 45px; color: #1E851E }
.successContainer i { font-size: 18px; vertical-align: middle }

#file-logo { min-height: 0; height: 100px; width: 100px; border: none }
#file-logo.pictureHolder { background-size: 80px }
#placeholder-logo-0 { height: 80px }
#placeholder-logo-0 img { position: absolute; top: 50%; left: 50%; max-height: 80px; max-width: 80px; transform: translate(-50%, -50%) }
#itemplaceholder-logo-0 { padding: 10px }

.dashedBox { padding: 20px }
.dashedBox, #file-logo { position: relative; overflow: hidden; border-radius: 5px }
.dashedBox::before, #file-logo::before { content:""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 5px; border: 5px dashed #CCCCCC; z-index: 0 }
.dashedBox>* { position: relative; z-index: 1 }


.block.empty { opacity: .35; transition:all .4s; cursor: pointer }
.block.empty:hover { opacity: 1 }

.empty .advisorItem { display: none; }
.advisorItem { position: absolute; width: 170px; height: 170px; border-radius: 170px; left: 50%; top: 0; margin-left: -85px; z-index: 3; opacity: 0; background-color: rgba(255,255,255,.9); transition:all .3s }
.editAgent { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 40px; transform: translate(-50%, -50%); font-size: 26px; padding: 10px; line-height: 50px; text-align: center; transition:all .3s }
.editAgent:hover { background-color: #F6F6F6 }
#advisorContainer .block:hover .advisorItem { opacity: 1 }
.advisorItem:hover { position: absolute; width: 170px; height: 170px; left: 50%; top: 0; margin-left: -85px }

.deleteAgent { display: inline-block; position: absolute; right: 5px; top: 5px; border-radius: 40px; width: 40px; height: 40px; background-color: #CE6348; color: #FFFFFF; transition: all .3s; z-index: 1 }
.deleteAgent:hover { background-color: #C94D2E; color: #FFFFFF }
.deleteAgent i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px }

.contentEdit { display: inline-block; position: relative }
.contentEditBorder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; border-radius: 3px }
.settingUpdateContainer .contentEditBorder { overflow: auto }
.settingUpdateContainer.onEdit .contentEditBorder { overflow: hidden }
.contentEditBorder::before { content: ""; position: absolute; border: 5px dashed #DADDE1; top: -4px; bottom: -4px; left: -4px; right: -4px; z-index: 0 }
.settingUpdateContainer .contentEditBorder::before { top: 0; left: 0; right: 0; bottom: 0; border-style: solid; border-width: 1px; border-radius: 5px }
.settingUpdateContainer.onEdit .contentEditBorder::before { top: -4px; bottom: -4px; left: -4px; right: -4px; border-style: dashed; border-width: 5px }

.contentEdit [contenteditable="true"] { display: inline-block; width: 100%; position: relative; padding: 12px 10px 10px; outline: none }
.contentEdit [contenteditable="true"] > p:first-child { margin-top: 0 }
.contentEdit [contenteditable="true"] > p:last-child { margin-bottom: 0 }
.fixContentEdit { margin: -10px }

.settingUpdateContent label { display: inline-block; padding: 10px 10px 6px; vertical-align: middle }

.logoEmpty { display: none; position: absolute; top: 0; left: 0; width: 130px; height: 130px; text-align: center; font-size: 80px; font-weight: 900; border-radius: 50%; background-color: rgba(255,255,255,1); box-shadow: 5px 5px 20px -10px #000; }
.empty + .logoEmpty { display: block }

.btn.editLogo { position: absolute; top: 10px; right: 10px; padding: 8px; z-index: 9999 }
#file-logo + .logoEmpty + .btn.editLogo { top: 0px; right: 160px }

.btn.rounded { border-radius: 50% }
.btn.rounded i { margin-right: 0 }

.formAjax[data-mod='mes-conseillers'] .ui-file.empty, .formAjax[data-mod='editer-mon-profil'] .ui-file.empty { display: none }
.formAjax[data-mod='mes-conseillers'] .ui-file:not(.empty), .formAjax[data-mod='editer-mon-profil'] .ui-file:not(.empty) { display: inline-block; overflow: inherit; border: none; background-color: transparent; width: 200px }
.formAjax[data-mod='mes-conseillers'] .ui-file:not(.empty) .fileItemPlaceholder, .formAjax[data-mod='editer-mon-profil'] .ui-file:not(.empty) .fileItemPlaceholder { padding: 0 }
.formAjax[data-mod='mes-conseillers'] .ui-file:not(.empty) .filePlaceholderContainer, .formAjax[data-mod='editer-mon-profil'] .ui-file:not(.empty) .filePlaceholderContainer { background-color: transparent }
.formAjax[data-mod='mes-conseillers'] .ui-file.pictureHolder, .formAjax[data-mod='editer-mon-profil'] .ui-file.pictureHolder, #file-logo.pictureHolder { background-image:url(../images/files-placeholder/picture-holder.png); }
.formAjax[data-mod='mes-conseillers'] .ui-file.pictureHolder:hover, .formAjax[data-mod='editer-mon-profil'] .ui-file.pictureHolder:hover, #file-logo.pictureHolder:hover { background-image:url(../images/files-placeholder/picture-holder-hover.png); }

.formAjax[data-mod='mes-conseillers'] .ui-file .fileActions, .formAjax[data-mod='editer-mon-profil'] .ui-file .fileActions { background-color: transparent; overflow: inherit; z-index: 9 }
.formAjax[data-mod='mes-conseillers'] .ui-file .fileActions .btnDelete, .formAjax[data-mod='editer-mon-profil'] .ui-file .fileActions .btnDelete { position: absolute; right: -18px; bottom: -46px; top: auto; font-size: 16px; transform: none }
.empty + .editPic, .btn.addPic { display: none; }
.empty + .editPic + .addPic, .editPic { display: inline-block; }

.colorPicker input[type='color'] { width: 0; height: 0; margin: 0 -6px -10px 0px }
.colorPicker input[type='color'] + i { margin-right: 5px; padding: 5px; border-radius: 7px; color: transparent; font-size: 17px; box-shadow: 0.5px 0.5px 2px -0.8px #666666; vertical-align: middle }
.innerWrapper { padding: 20px }


#passwordVerif { display: none; position: relative; line-height: 50px; height: 50px; font-size: 14px; color: #CCC; border-bottom: #CCC 1px solid; }
#passwordVerif::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; }
#passwordVerif.faible { color: #DE1818; }
#passwordVerif.faible::after { width: 20%; background-color: #DE1818; }
#passwordVerif.moyen { color: #DE6E18; }
#passwordVerif.moyen::after { width: 60%; background-color: #DE6E18; }
#passwordVerif.ok { color: #277115; }
#passwordVerif.ok::after { width: 100%; background-color: #277115; }

#passInputContainer { position: relative }
#passInputContainer i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) }
#passInputContainer #pass.empty + a { display: none; }
#pass { height: 50px; width: 100% }
#pass.check, #pass.error:not(.empty) { background-image: none; }

@keyframes animSpinner {
    0% { transform: rotate(0deg); color: #0e425f; }
	50% { transform: rotate(180deg); color: #000000; }
	100% { transform: rotate(360deg); color: #0e425f; }
}

.Kicon-spinner {
	position: relative;
	display: inline-block;
	font-size: 46px;
	color: #8aa250;
    animation-name: animSpinner;
    animation-duration: 1s;
	animation-timing-function: linear;
    animation-iteration-count: infinite;
}


/**********    Confirm    **********/
.confirmContainer { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 99999; }
.confirmContainer.redBackground { background-color:rgba(235,87,87,.9); }
.confirmContainer.changeStatus { background-color:rgba(0,0,0,.7); }
.confirmTitle { font-size: 17px; margin: 22px 10px; font-weight: 600 }
.confirmText { position: relative; width: 720px; max-width: 100%; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; text-align: center; padding: 10px; background-color: #FFFFFF; font-size: 14px; font-weight: 400; overflow: auto; border-radius: 10px }
.confirmContainer .Kicon-caution { font-size: 60px }
.confirmText a { font-weight: 600 }
.confirmButtons { margin: 38px 0 }
.listObjsToConfirm { overflow: auto; margin-bottom: 15px; font-weight: bold; }
.confirmButtons a i { font-size: 24px; }
/********** End Confirm ***********/

.row.selected .cellSelections, .ui-sortable-helper .cellActions, .ui-sortable-helper .cellSelections, .actionBar .action.delete, .actionBar .action.duplicate, .formAjax, .formAjaxAttr, #KSpinner, select:not(.ui-datepicker-month), input[type='radio'], input[type='file'], .input-langs, .confirmContainer, .tabsContent .tabHide, .ui-select, .ui-select .ui-select-optiongroup, .hide, .table.hide, #customWelcomePage + #main-form + .KItemsList .noItems, .actionBar a.hide, .KSitePrintContainer, #have_background, #have_bg_transparent { display: none; }
.tabsContent .tabHide { display: none !important; }


.ico26 { font-size: 26px; vertical-align: middle }

.left { float: left; }
.right { float: right; }
.clearAll { clear: both; }
.block50 { display: inline-block; vertical-align: top; width: 50%; }
.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.wrapper { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 20px; }

#KSiteHeaderMain { position: fixed; left: 0; top: 0; bottom: 0; width: 255px; overflow: auto }
.logo, .menuTitle { margin-top: 45px }
.menuTitle { color: #5E727D; text-transform: uppercase; margin-left: 27px; font-size: 12px }
#navContent { position: absolute; top: 0; left: 0; right: 0; transition: all .4s; }
#KSiteMiddle, .tutoMainContent { position: relative; padding: 10px; height: 100vh; box-sizing: border-box; margin-left: 245px }
#KSiteContainer { position: relative; background-color: #FFFFFF; height: 100%; overflow: auto; padding: 20px 0; box-sizing: border-box; border-radius: 12px; }
#KSiteContainer main { padding: 0 35px 90px }
#KSiteHeaderMain nav { margin-top: 40px }
nav > ul { padding: 0 }
nav > ul > li { margin-bottom: 15px; position: relative }
nav ul { list-style: none }
nav ul ul { display: none; position: relative; margin: 5px 0 30px 20px; padding: 5px 0 5px 35px }
nav ul ul::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 0; border-right: #0e425f 1px solid; }
nav ul i { display: inline-block; width: 26px; text-align: center; font-size: 26px; vertical-align: middle; margin-right: 10px }
nav ul a { position: relative; display: block; padding: 5px 25px; font-size: 13px }
nav ul ul a { font-size: 12px; padding: 5px }
nav ul li.on ul { display: block }
nav .notif { left: 20px; margin-top: -8px }

#btnLogout { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }

.navLinkIco { position: absolute; right: 0; top: 4px; width: 25px; padding: 5px 11px; margin-top: -1px }
.navLinkIco::before { content: none }
.navLinkIco i { font-size: 16px }

#KNavAccount { display: none; padding-top: 10px }
nav#KNavAccount > ul > li { margin-bottom: 5px }

.listNbPercent > div { display: inline-block; white-space: nowrap; margin: 0 40px 20px 0; text-align: center; }
.listNbPercent > div input { margin-top: 10px; }

.notif { position: absolute; top: 50%; width: 10px; height: 10px; background-color: #FF708B; border: 2px solid #F5F6FC; border-radius: 50%; text-align: center; transform: translate3d(0, 0, 0); animation: animNotif 2s infinite }
@keyframes animNotif {
  20%, 80% { background-color: #FF708B }
  50% { background-color: #F5F6FC }
}




#bottomMenu { position: fixed; bottom: 0; left: 0; padding-bottom: 25px; width: 255px; background-color:#F5F6FC; z-index: -1 }
#bottomMenu i { font-size: 55px; display: block; margin-bottom: 10px  }
#bottomMenu .btn { margin: 0 25px }
#bottomMenu .store { font-size: 16px }
#bottomMenu p { margin: 8px 0 15px }
#bottomMenu::before { content: ""; position: absolute; bottom: 100%; top: -30px; left: 0; right: 0; background-color:#F5F6FC; background: linear-gradient(0deg, rgba(244,245,252,1) 25%, rgba(244,245,252,0) 100%); z-index: -1 }

.btn.logout i { font-size: 25px }
.btn span { display: inline-block; padding: 5px 10px 8px 5px }


button.btn { border: none; font-family: 'Montserrat', sans-serif; }
.btn { position: relative; display: inline-block; border-radius: 5px; }
.cell a.btnBlue, a.btnBlue:hover i, input.btn, button.btn { color: white }
a.btn, button.btn { padding: 13px; font-size: 13px }
input.btn, .btn.withoutIcon { padding: 12px 18px 9px; margin: 0 20px; }
a.btnBlue, input.btnBlue, button.btnBlue { background-color: #0e425f; color: #FFFFFF }
a.btnBlue:hover, input.btnBlue:hover, button.btnBlue:hover { background-color: #0e425f; }
a.btnBlueSec, input.btnBlueSec, button.btnBlueSec { background-color: #FFFFFF; color: #0e425f; border: #0e425f 1px solid }
a.btnBlueSec:hover, input.btnBlueSec:hover, button.btnBlueSec:hover { background-color: #0e425f; color: #FFFFFF }
.btnBlock { display: block }

/*.btn i, #nameAgency span i { position: absolute; top: 50%; left: 24px; transform: translate(-50%, -50%); font-size: 19px; }*/
.btn i { font-size: 26px; vertical-align: middle; margin-right: 5px }
.btn.prev { margin: -5px 0 }
.btn.prev i { margin-right: 0px; margin-left: -5px }
.btn.validPicCrop i { margin-right: 0; font-size: 20px }


#KTopRightMenu { position: absolute; right: 10px; top: 10px; z-index: 999 }
#accountEdit { display: inline-block; padding: 10px; transition: all .3s; cursor: pointer; border-radius: 12px; }
#accountEdit.open, #accountEdit:hover { background-color: #F5F6FC }
#accountEditInfo { display: inline-block; vertical-align: middle; margin: 0 5px 0 12px }
#accountEditInfo strong { font-weight: 600; font-size: 15px }



/**** Main ****/
/*.grid { position: relative; display : grid; grid-template-columns: 1fr 1fr; column-gap: 2.656vw; row-gap: 37px;}
.grid > * { height: 50px; }
*/

.confirmButtons a i.KAicon-cross { font-size: 20px; }
.textMin { font-size: 12px; }
input[type='checkbox'] { vertical-align: middle; }

input::placeholder, textarea::placeholder { color: #AEAEAE;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #AEAEAE;}



#contactForm input, #contactForm textarea { display: block; width: 100%; padding: 15px 20px; margin-bottom: 20px; box-sizing: border-box; }
#contactForm textarea { height: 150px; }
#contactForm {display: block; width: 55%; margin: 0 auto; }
#contactForm a { vertical-align: middle; }
#formInfos { padding: 0 10px; margin-right: 5px; vertical-align: middle; }
#formInfos i { margin-right: 5px; }
input.error, select.error, textarea.error { background-color:#F4EAEA; /*background-image: url("https://wimmov.com/assets/images/cross.svg");*/ border-bottom-color: #FD0D1B !important; }
label.error, p.error, #verifCaptcha.error, .fieldError { color: #FD0D1B; }

input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill, input:-webkit-autofill:hover, select:-webkit-autofill:hover, textarea:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill:focus, textarea:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill:active, textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; }

input.error:-webkit-autofill, select.error:-webkit-autofill, textarea.error:-webkit-autofill, input.error:-webkit-autofill:hover, select.error:-webkit-autofill:hover, textarea.error:-webkit-autofill:hover, input.error:-webkit-autofill:focus, select.error:-webkit-autofill:focus, textarea.error:-webkit-autofill:focus, input.error:-webkit-autofill:active, select.error:-webkit-autofill:active, textarea.error:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #F4EAEA inset !important; }

select:not(.ui-datepicker-month) { display: block; width: 100%; box-sizing: border-box; font-size: 14px; outline: none; }

a.btnCancel { color: #EB5757 }
a.btnCancel:hover { color: #E62E2E }


#mainMyAccount section { background-color: rgba(244,245,252,.5); color: #393939; padding: 20px; margin: 0 auto 20px; border-radius: 10px }
#mainMyAccount h3 { margin: 40px 20px 20px; font-size: 25px; line-height: 24px; text-transform: uppercase; color: #3CC0A7; }
#mainMyAccount h3 span { display: inline-block; vertical-align: middle; font-size: 12px; }

#mainMyAccount h4 { color: #3CC0A7; margin: 30px 0 0; }
.informationSection, .informationBloc { display: grid; grid-template-columns: 1fr 1fr; }
.informationTopSection { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.informationSection p { margin: 0; }
.informationSection h5 { margin: 20px 0 0 0; font-weight: 700; }

.sponsorSection > div { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 190px; padding: 5px 0; align-items: center }
.resendMail { margin-bottom: 5px }
.sponsorSection > div:hover:not(.title) { background-color: #F6F6F6; border-radius: 3px }
.sponsorSection > div > div:not(.last) { padding: 0 5px }
.sponsorItem h5 { display: none; margin: 0; width: 100px }

.blockWithIcon { position: relative; display: inline-block; border: #0e425f 1px solid; border-radius: 3px; padding: 20px 20px 20px 100px; margin-top: 20px; }
.blockWithIcon i { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); font-size: 40px }
.estateInformation input[type='number'] { text-align: center; width: 50px; padding: 0 }
.blockWithIcon.redBlock { border-color: #CA1212 }
.blockWithIcon.minIcon { padding: 0 20px 0 60px }
.blockWithIcon.minIcon i { font-size: 24px; left: 20px }

.paymentBtnLegend { margin-top: -25px; font-size: 11px; margin-bottom: 5px; }

.btnContactAgency { background-color: #0e425f; color : white; padding: 10px 15px; font-size: 14px; }

.red { color: #CA1212; }

.alignRight { text-align: right; }

footer.wrapper { padding: 80px 20px 120px; }
.footerLogo, .footerContent { display: inline-block; vertical-align: middle; }
.footerLogo { width: 120px; }
.footerContent { text-align: left; width: calc(100% - 130px); padding: 0 20px; box-sizing: border-box; font-size: 14px }
footer .btn { margin-right: 35px; }
footer h4 { font-weight: 700; font-size: 20px; margin-bottom: 20px; text-transform: uppercase; }
footer .block50 { vertical-align: middle; text-align: center; }
.contentRS { display: inline-block; text-align: left; }
.contentRS a { margin-right: 10px; }

.linkFooter { font-size: 12px; }
.linkFooter .right a { color: #333333; margin:0 10px; }
.linkFooter a:hover, .linkFooter a.on { color: #0e425f; }
.linkFooter .left { color: #999999; }
.linkFooter .left img { margin-left: 3px; vertical-align: sub; }

.alertSuccess { color: #1E851E }
.alertSuccess i { color: #1E851E; font-size: 24px }

.popinContainer { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999999; }
.popinContent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; background-color: #FFFFFF; padding: 20px; border-radius: 10px; overflow: auto }
.popinContent .grid { column-gap: 20px; row-gap: 30px }

#navMobile, #btnBurgerClose { display: none }

input[type='color'] { height: 36px; width: 34px; vertical-align: middle; margin-right: 10px }

.marginForm { margin: 30px 0 }
.txtMin { font-size: 12px; font-weight: 500 }
.pad10 { padding: 10px; }
#alreadyExists { font-weight: bold; color: #FD0D1B }

label.checkboxLabel { font-size: 12px; }
.ui-checkbox, .ui-radio, .ui-checkbox-toggle { position:relative; display:inline-block; width:18px; height:18px; vertical-align:middle; background-color:#efefef; margin:3px 5px 7px 0; }
.ui-radio, .ui-radio::after { border-radius: 50%; }
.ui-checkbox { border-radius: 3px; }
/*.ui-checkbox::after, label .ui-checkbox.checked::after { color: #efefef; font-size: 17px; left: 0px; position: relative; }*/
label:hover .ui-radio::after { background-color:#EEEEEE; }
label:hover .ui-checkbox::after { color:#EEEEEE; }
.ui-radio::after { content: ""; position:absolute; display:inline-block; width:14px; height:14px; margin:2px; vertical-align:middle; left:0; top:0; }
.ui-checkbox.checked, label .ui-radio.checked::after { background-color:#0e425f; }
.ui-radio.checked::after { background-color:#0e425f; }
.ui-checkbox-toggle { width:45px; height:26px; border-radius: 15px; margin: 0 10px; }
.ui-checkbox-toggle::after { content:""; position: absolute; top:0; left:0; width: 20px; height: 20px; margin:3px; border-radius: 50%; background-color: #FFFFFF; }
.ui-checkbox-toggle.checked { background-color:#0e425f; }
.ui-checkbox-toggle.checked::after { background-color:#FFFFFF; left: 19px; }
.ui-radio::after, .ui-checkbox, .ui-checkbox::after, .ui-checkbox-toggle, .ui-checkbox-toggle::after { transition: all .3s; }

.ui-checkbox { line-height: 18px }

.checkboxHours { display: inline-block; min-width: 70px; }

input[type='checkbox']:checked + div { background-color: #0e425f }
input[type='checkbox']:checked.toggle + div::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #efefef; transform: none; top: 0; margin-left: -1px }
input[type='checkbox']:checked + .ui-checkbox::before, input[type='checkbox']:checked + .ui-checkbox::after { content: ""; position: absolute; height: 3px; border-radius: 3px; background-color: #efefef; }
input[type='checkbox']:checked + .ui-checkbox::before { width: 7px; transform: rotate(45deg); left: 2px; top: 9px; }
input[type='checkbox']:checked + .ui-checkbox::after { width: 13px; transform: rotate(-55deg); right: 1px; top: 7px; }

.okGreen { color: #0e425f }
a:hover [class^="Kicon-"] [class^="path"]::before { color: #0e425f !important }


b { font-weight: 500 }

input.designed { display: none }


/***** ADMIN ****/

.KItemsList { margin: 0 20px; padding-bottom: 65px; overflow: auto }
.KItemsList, .row.fixed { right: 30px }
.table { position: relative; display: grid; align-items: center; align-content: center; grid-row-gap: 15px; font-weight: 500; font-size: 13px }
.row { position: relative; display: contents }
.cell, .hCell { /*position: relative;*/ padding: 14px 10px 13px; box-sizing: border-box; align-self: normal; transition: all .4s }
.hCell { padding: 4px 10px }
.row .cell { background-color: #F9F9FF; transition: all .8s }
.row .cell.cellWithoutBack { background-color: transparent; font-size: 15px; font-weight: 600 }
.row .cell:first-child { border-radius: 5px 0 0 5px }
.row .cell:last-child { border-radius: 0 5px 5px 0 }
.row .lastCell { border-right: none; }
.rowGroup { /*display: table-row-group;*/ display: contents }
.rowGroup/*, .row.fixed*/ { border-radius: 5px; margin: 15px 0 }
.rowGroup:last-child { border-bottom: none }
.row:hover, .tableAttr .row:hover { background-color: rgba(0,0,0,.01); transition: all .3s }
.row.fixed { position: sticky; z-index: 99; padding-top: 10px; background-color: #FFFFFF; width: auto }
.wait { width: 50%; border-radius: 60px; background-color: #E2E3EC; }
.row.deactivate { color:#5E727D; }
.row.deactivate .cell:first-child > div::before, .row.archive .cell:first-child > div::before { position: absolute; content: ""; width: 5px; left: 0; margin: -13px 10px -13px -10px; border-radius: 5px 0 0 5px; top: 0; bottom: 0; }
.row.deactivate .cell:first-child > div, .row.archive .cell:first-child > div { position: relative; padding-left: 5px }
.deactivateTooltip, .archiveTooltip { position: absolute; width: 5px; left: 0; margin: -14px 10px -13px -10px; border-radius: 5px 0 0 5px; top: 0; bottom: 0; }
.row.deactivate .cell:first-child > div::before, .deactivateTooltip { background-color: #F88C2D }
.row.archive .cell:first-child > div::before, .archiveTooltip { background-color: #0e425f }
.row .labelItemState { margin-right: 0; margin-top: -5px; }
.cell a { color: #0e425f }
.cell a.delete, .cell a.deleteList { color: #EB5757 }
.cell > div { display: flex; flex: 1; align-items: center; height: 100% }
.cell.alignCenter > div { justify-content: center }
.cell.lastCell .wait { min-width: 80px }

.cell a { display: inline-block; line-height: 15px; padding: 5px; /*text-align: center; border-radius: 45px;*/ margin: 7px 2px 6px 0; transition:all .5s; -webkit-transition:all .5s; }

.table .row.uiPlaceholerRow, .tableAttr .row.uiPlaceholerRow, .row.selected { background-color: #E5F0F3; }
.uiPlaceholerRow:before { position: absolute; content: ""; width: 0; height: 0; margin-top: -5px; left: -5px; border: 5px solid transparent;  border-left-color: #0e425f; border-right: none; }

.noItems { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) }
.noItems h1::before { content: none }

.actionBar { margin: 20px }
.actionBar .block { margin-left: 15px; line-height: 40px }
.actionBar .block.lh23 { line-height: 23px }
.actionBar a { margin-right: 5px }
.actionBar a, .searchBar, .searchBar i { vertical-align: middle }

.searchBar { position: relative; display: inline-block; height: 40px; box-sizing: border-box; border-radius: 5px; width: 103px; transition: width .4s }
.searchBar input::placeholder { color: #000000 }
.searchBar input:-ms-input-placeholder { color: #000000 }

.searchBar:not(.open):hover { background-color: #F5F6FC }
.searchBar.open { width: 250px; border: #e8eaec 1px solid }
.searchBar input { position: absolute; left: 35px; top: 0; bottom: 0; right: 0; border: none !important; background: none !important; height: 39px !important; padding: 0 !important; -webkit-appearance: textfield; appearance: textfield; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px !important }
.searchBar i { font-size: 22px; line-height: 40px; padding: 0 10px }
.searchBar:not(.open):hover i { color: #0e425f }

.contentGrey { font-size: 13px; font-weight: 500 }

.roundInitials { position: relative; display: inline-block; width: 45px; min-width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; background-color: #0e425f; color: #FFFFFF; margin: -5px 0; text-transform: uppercase; background-size: cover; vertical-align: middle }
.actionModTitle h2 .roundInitials { margin: 0 15px 10px 10px }
#circleArcBlueContent { top: -9px; left: -9px }
.roundInitialNextText { padding-left: 10px }

label { font-size: 12px; color: #5E727D; font-weight: 500 }

.wait { display: inline-block !important; flex: none !important; height: 38px !important; background: linear-gradient(90deg, #E2E3EC 0%, #e9eaf2 15%, #E2E3EC 30%); animation: bgAnimWait 1s linear infinite; transform: translate3d(0, 0, 0); background-size: 200% 200%; }
@-webkit-keyframes bgAnimWait {
    0% { background-position: 100% 100%; }
    80% { background-position: -100% 100%; }
}
@keyframes bgAnimWait {
    0% { background-position: 100% 100%; }
    80%, 100% { background-position: -100% 100%; }
}

a.btnPadding { padding-left: 30px; padding-right: 30px }
.formActions a.btnPadding { padding-left: 60px; padding-right: 60px }

.sharedButtons { font-size: 13px; font-weight: 500; margin-top: 32px }
.agentQRCode { margin-top: 20px }
.agentQRCode .sharedButtons { margin-top: 10px }
.sharedButtons i { font-size: 22px; vertical-align: middle; padding: 0 8px }


.formAjax { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(38,71,125,0.65); transition: background .4s; z-index: 9999; }
.formAjaxContent { position: absolute; right: -100%; top: 0; height: 100%; overflow: hidden; width: 500px; max-width: 100%; border-radius: 12px 0 0 12px; background-color: #FFFFFF; box-sizing: border-box; transition: backgroundColor 1s; display: grid; grid-template-rows: max-content 1fr max-content; grid-template-areas: "aa" "ab" "ac"; }
.actionModTitle { grid-area: aa; padding: 30px 20px 20px; background-color: #FFFFFF }
.actionModTitle h2 { margin: 0 }
.actionModTitle .close { position: absolute; top: 28px; right: 20px }
.formActions { grid-area: ac; padding: 30px 0 30px 20px; background-color: #FFFFFF }
.formActions a.disabled { opacity: .5 }
.KFormContent { position: relative; grid-area: ab; padding: 0 20px; overflow-y: auto; overflow-x: hidden }
.KFormContent .slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 20px; overflow: auto; transform: translateX(0); transition: all .6s }
.KFormContent .slide.hideSlideLeft { transform: translateX(-100%) }
.KFormContent .slide.hideSlideRight { transform: translateX(100%); visibility: hidden }

.formAjax.centerModal .formAjaxContent { right: auto !important; left: 50%; top: 50%; max-height: 95%; height: auto; max-width: 98%; width: 600px; transform: translate(-50%,-50%); border-radius: 12px }
.formAjax.centerModal .actionModTitle { text-align: center; text-transform: uppercase }
.formAjax.centerModal h3 { margin: 30px 0 0px; font-size: 16px }


.fw400 { font-weight: 400 }
.fw500 { font-weight: 500 }

.rowEdited.row .cell, input.rowEdited:disabled, .rowEdited { background-color: #E3F7EC !important; color: #2EB39A !important }
.rowCanceled { background-color: #F9F2EC !important; color: #F88C2D !important }
.rowError { background-color: #ECE1E1 !important; color: #FD0D1B !important }
.errorInputText { display: none; font-weight: 500; color: #FD0D1B; padding: 7px 5px; font-size: 12px; }


label.fullWidth { display: block; padding: 10px 0 10px 15px; background-color: #F9F9FF; border-radius: 5px; line-height: 26px; box-sizing: border-box }
label.fullWidth .ui-checkbox-toggle { float: right }

.grid50 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 10px }

.checkBoxVAlign { display: grid; grid-template-columns: 20px 1fr; grid-column-gap: 10px; align-items: center }

.row.opened .cell { padding-bottom: 240px }

.formAjax.bgBlue { background-color: rgba(255,255,255,.65) }
.bgBlue .formAjaxContent, .bgBlue .actionModTitle, .bgBlue .formActions { background-color: #0e425f; color: #FFFFFF }
.bgBlue .state .stateTitle { color: #87b7ef }
.bgBlue .blue, .bgBlue a.blue, .bgBlue a.blue i, .bgBlue .state.active .stateTitle, .bgBlue .state.actual .stateTitle { color: #FFFFFF }
.bgBlue .roundInitials, .bgBlue a.btnBlue, .bgBlue input.btnBlue, .bgBlue button.btnBlue, .bgBlue .state.finished .bullet, .bgBlue .state.active .bullet, .btn.btnWhite { background-color: #FFFFFF; color: #0e425f; }
.bgBlue .state .bullet, .bgBlue .estateStates .line::before { background-color: #095DBF }
.bgBlue .state.active .bullet::before { color: #0e425f }
.bgBlue a.btnCancel { color: #FFFFFF }

.formAjax[data-action='detail'] .formAjaxContent, .formAjax[data-action='validStateHTML'] .formAjaxContent { width: 700px }

.formComment i { font-size: 60px }
.formComment .t15 { padding-top: 15px }
.formComment .t12 { margin-top: 5px }
.formComment textarea { margin: 20px 0 }
.formComment textarea, textarea#answer { width: 100%; height: 50vh }

.t10 { font-size: 10px }
.t12 { font-size: 12px }
.t15 { font-size: 15px }
.t19 { font-size: 19px }


.shadowTop { box-shadow: 0 -10px 30px -13px #EEE }
.shadowBottom { box-shadow: 0 10px 30px -13px #EEE }
.shadowTop, .shadowBottom { position: relative }

.editable { padding: 10px }
.i32 { font-size: 32px }

#contentEditContainer { margin: 0 20px }
#contentEditContainer h2 { margin: 30px 0 0 }
#contentEditContainer h2 i { font-size: 24px; vertical-align: middle }

input:disabled { border-color: #F9F9FF !important; background-color: #F9F9FF; color: #000000 !important }

.roundIcon { position: relative; display: inline-block; background-color: #FFFFFF; width: 100px; height: 100px; line-height: 90px; margin-bottom: 35px; border-radius: 50%; z-index: 2; }
.roundIcon i { font-size: 60px }
.roundIcon::before, .roundIcon::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255,255,255,.15); border-radius: 50%; z-index: 1 }
.roundIcon::before { margin: -15px }
.roundIcon::after { margin: -30px }


.cell a.statesLink { text-align: left }

.ui-tooltip, .tutoItem { white-space: pre-line; font-weight: 400; z-index: 99999999 !important }
.ui-tooltip.ui-widget.ui-widget-content, .tutoItem { text-align: center; border: none; box-shadow: none; background-color: rgba(27,45,69,.8); color: #FFFFFF; border-radius: 5px; padding: 8px 12px; font-size: 12px; }
.ui-tooltip span.arrow { position: fixed; margin-left: -7px; display : inline-block; height : 0; width : 0; border-right : 7px solid transparent; border-left : 7px solid transparent; }
.ui-tooltip span.arrow.arrowBottom { border-top : 7px solid rgba(27,45,69,.8); }
.ui-tooltip span.arrow.arrowTop { border-bottom : 7px solid rgba(27,45,69,.8); }

#stateFilter { margin-bottom: 20px }
#stateFilter a { position: relative; display: inline-block; padding: 10px 25px }
#stateFilter a.on { color: #0e425f }
#stateFilter a.on::after { content: ""; position: absolute; bottom: 0; left: 25px; right: 25px; border-radius: 3px; height: 3px; background-color: #0e425f }

.padding { padding: 10px }

.radioSelect > label { position: relative; display: grid; grid-template-columns: 18px 1fr; grid-gap: 10px; padding: 10px; margin: 10px 0; background-color: #F5F6FC; border-radius: 10px }
.radioSelect > label > div { display: flex; align-items: center; height: 100% }
.radioSelect p { margin-top: 0 }
.radioSelect .ui-checkbox, .radioSelect .ui-radio, .radioSelect .ui-checkbox-toggle { margin: 0; background-color: #FFFFFF }

.hide { display: none; }

button { cursor: pointer }

.actionBar a:not(.btn) { display: inline-block; height: 40px; color: #000000; font-weight: normal; padding: 0 10px; border-radius: 5px }
.actionBar a:not(.btn):hover { background-color: #F5F6FC }
.actionBar a:not(.btn) > i { font-size: 20px; line-height: 40px; margin-right: 4px; vertical-align: middle }

.KSiteContentPadding { max-width: 1200px; margin: 40px auto 0; padding: 20px }

.itemActive { position: absolute; top: -4px; left: -4px; width: 12px; height: 12px; background-color: #2EB39A; border-radius: 50%; border: #F9F9FF 3px solid; }
.itemActive.error { background-color: #FD0D1B }
.itemActive.unsubscribe { background-color: #F88C2D }

#KPagination { display: inline-block; padding-bottom: 5px; background-color: #F9F9FF; margin: 0 20px; border-radius: 40px }
.paginationLink { font-size: 30px; vertical-align: sub; padding: 10px }
.hidePaginationLink { opacity: .3 }
a.hidePaginationLink { color: #BBBBBB  }

.padding0 { padding: 0 !important }

#KSiteMiddle, .tutoMainContent, #KSiteHeaderMain, #bottomMenu, #navMobile, #btnBurger span, #btnBurger span::before, #btnBurger span::after, #formBtnAction { transition: all .4s }

.itemSync { display: inline-block; padding: 20px; margin: 5px; background-color: #F5F6FC; border-radius: 13px; width: 320px }
.itemSyncTitle { font-size: 17px }
.itemSyncTitle i { font-size: 24px }
.itemSyncButton { text-align: right }
.itemSyncState { float: right; font-weight: normal; font-size: 13px }
.itemSyncState span { vertical-align: middle }
.itemSyncState span.state { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 5px; background-color: #B51818 }
.itemSyncState.active span.state { background-color: #2eb39a }
.itemSyncPages { float: left; margin: 2px 15px }
.itemSyncPages .roundInitials { min-width: auto; width: 38px; height: 38px; line-height: 40px; margin-left: -25px; border: #F5F6FC 5px solid; overflow: hidden; background: #FFFFFF }

@media screen and (max-width: 1520px) {
    #KSiteHeaderMain { width: 230px }
    #KSiteMiddle, .tutoMainContent { margin-left: 220px }
    #formBtnAction { left: 230px }
    #bottomMenu { width: 230px }
    nav ul a { padding: 5px 15px }
    nav ul ul { margin-left: 10px }
    nav .notif { left: 10px }

}
@media screen and (max-width: 910px) {
    
    #KSite { overflow: hidden; }
    #KSiteMiddle { margin-left: 0; padding-top: 0; height: calc(100vh - 65px); z-index: 1 }
    #formBtnAction { left: 10px }
    #KSiteHeaderMain, #bottomMenu { left: -230px; background-color: #F5F6FC; z-index: 9 }
    
    #KSiteHeaderMain { padding-bottom: 77px }
    .menuTitle { margin-top: 20px }
    #effectRoundBlur { display: none }
    #navMobile { position: relative; display: block; padding: 20px 0 }
    #navMobile .logo { margin: 0 }
	#btnBurger { display: inline-block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%) }

    #KSite.menuOpen #KSiteHeaderMain, #KSite.menuOpen #bottomMenu { left: 0 }
    #KSite.menuOpen #KSiteMiddle, #KSite.menuOpen .tutoMainContent, #KSite.menuOpen #navMobile, #KSite.menuOpen #formBtnAction { margin-left: 220px; margin-right: -230px }
    #KSiteHeaderMain .logo { display: none }

	#btnBurger span, #btnBurger span::before, #btnBurger span::after { position: absolute; width: 30px; background-color:#0e425f; height: 3px; border-radius: 5px }
	#btnBurger span { left: 0; top:50%; transform: translateY(-50%) }
	#btnBurger span::before, #btnBurger span::after { content: ""; top: 0; left: 0; transform-origin: 0px 9px; }
	#btnBurger span::before { margin-top: -8px; }
	#btnBurger span::after { margin-top: 8px; }
	.menuOpen #btnBurger span { height: 0; width: 0; }
	.menuOpen #btnBurger span::before { transform: rotate(45deg); }
	.menuOpen #btnBurger span::after { transform: rotate(-45deg); }
	.menuOpen #btnBurger span::before, .open #btnBurger span::after { margin-top: -13px; margin-left: -11px; }
    
    #formBtnAction { left: 10px }
    #bottomMenu i, #bottomMenu img, #bottomMenu span, #bottomMenu p { display: none }
    
    #settingsContainer { top: 130px; left: 10px; bottom: 12px }
}
@media screen and (max-width: 660px) {
    .configFormInfos .block25 { text-align: left; width: 100% }
}
@media screen and (max-width: 630px) {
    #dashboardContainer { grid-template-areas: "d d" "f g" "h i" "a a" "b b" "c c" "e e" "j j"; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr 3fr 4fr 4fr 4fr 130px; }

    .KItemsList { position: relative !important; bottom: auto !important; top: auto !important; left: auto !important; right: auto !important; padding: 0 !important; margin: 0 !important }
    .actionBar div.block { display: none }
}
@media screen and (max-width: 450px) {
    .grid50 { grid-template-columns: 1fr }
}