@import url('//fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); .messagelist tr.unread td.subject { font-weight: 700; } .xlarry .widescreen .messagelist td.subject { white-space: nowrap; } /* LOGIN */ #login_lws * { font-family: 'Open Sans', sans-serif !important; color: #222529; position: relative; } #login_lws strong { font-weight: 600; } #login_lws input[type="text"]:focus-visible, #login_lws input[type="password"]:focus-visible, #login_lws input[type="submit"]:focus-visible, #login_lws button:focus-visible, #login_lws a:focus-visible { outline: none; } #login_lws select { box-shadow: none; } .hide { display: none; } .show { display: block !important; } #login_lws hr { margin: 30px 0; border: 0; border-top: 1px solid #AEB1BE; border-bottom: 1px solid #AEB1BE; width: 100%; } #login_lws .mb0 { margin-bottom: 0 !important; } #login_lws .input-group-prepend { display: none; } body.task-login, body.task-login #layout { overflow: auto; background: #fff !important; } body.task-login #layout::-webkit-scrollbar { display: none; } body.task-login #layout { -ms-overflow-style: none; scrollbar-width: none; } #login_lws.content-index { display:flex; flex-direction: row; flex-wrap: nowrap; gap: 0; align-items: center; width: 100%; min-height: 100%; } #login_lws .exclu { display: flex; align-items: center; justify-content: center; width: 100%; background-color: #F2F6FF; align-self: stretch; } /*.exclu .content { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; width: 560px; }*/ #login_lws .exclu .content { text-align: center; } #login_lws .exclu .content img { width: 800px; max-width: 90%; height: auto; } /*.exclu .content .title { font-size: 30px; line-height: 40px; font-weight: 600; color: #fff; text-align: center; } .exclu .content .accroche { font-size: 18px; line-height: 28px; font-weight: 400; color: #fff; text-align: center; }*/ #login_lws #login-form { margin: unset; top: unset; width: 100%; max-width: 100%; } #login_lws .form-connect { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 720px; background-color: #FFF; align-self: stretch; } #login_lws .form-connect .content { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; width: 480px; } #login_lws .form-connect .content img.logo_lws { width: 160px; height: 42px; } #login_lws .form-connect .content img.webmail_lws { width: 100px; height: 87px; } #login_lws .form-connect .content div.form-bg-white { background-color: #fff; } #login_lws .form-connect .content div.form-bg-blue { background-color: #F2F6FF; } #login_lws .form-connect .content div[class^="form-bg-"] { display: flex; flex-direction: column; gap: 0; justify-content: center; align-items: center; width: 100%; padding: 30px 40px; margin-top: 20px; border-radius: 8px; } #login_lws .form-connect .content div[class^="form-bg-"] .title { font-size: 30px; line-height: 40px; font-weight: 700; text-align: center; margin-bottom: 0; } #login_lws .form-connect .content div[class^="form-bg-"] .ss_title { font-size: 16px; line-height: 26px; font-weight: 600; text-align: center; } #login_lws .form-connect .content div[class^="form-bg-"] .under-hr { font-size: 16px; line-height: 26px; font-weight: 600; text-align: center; margin-bottom: 0; } #login_lws .form-connect .content div[class^="form-bg-"] .under-hr a { font-weight: 600; } #login_lws .form-connect .content div[class^="form-bg-"] div.form-field { position: relative; width: 100%; margin-top: 20px; } #login_lws .form-connect .content div[class^="form-bg-"] div.form-field div.error-message { display: none; background-color: #FFE6E6; border: 1px solid #DF423B; border-top: 0; border-radius: 0 0 4px 4px; padding: 8px 20px; } #login_lws .form-connect .content div[class^="form-bg-"] div.form-field div.error-message img.warning { position: relative; top: 1px; width: 15px; height: 13.5px; } #login_lws .form-connect .content div[class^="form-bg-"] div.form-field div.error-message p { font-size: 15px; line-height: 22px; color: #DF423B; margin: 0; } #login_lws .form-connect .content div[class^="form-bg-"] input, #login_lws .form-connect .content div[class^="form-bg-"] select, #login_lws .form-connect .content div[class^="form-bg-"] button { width: 100%; height: 48px; border-radius: 4px; font-size: 16px; line-height: 50px; padding: 0 20px; margin: 0; } #login_lws .form-connect .content div[class^="form-bg-"] input:focus, #login_lws .form-connect .content div[class^="form-bg-"] select:focus { color: #222529 !important; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="text"], #login_lws .form-connect .content div[class^="form-bg-"] input[type="password"] { width: 100%; border: 1px solid #AEB1BE; background: #fff !important; color: #222529; } #login_lws .form-connect .content div[class^="form-bg-"] .password-field input { padding: 0 50px 0 20px; } #login_lws .form-connect .content div[class^="form-bg-"] select { width: 100%; border: 1px solid #AEB1BE; background: #fff; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="text"]::placeholder, #login_lws .form-connect .content div[class^="form-bg-"] input[type="password"]::placeholder { color: #868998; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="text"]:focus, #login_lws .form-connect .content div[class^="form-bg-"] input[type="password"]:focus { border-color: #4A87FF; box-shadow: none; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="submit"] { border: 1px solid #1E499B; background-color: #1E499B; font-size: 18px; line-height: 48px; text-transform: capitalize !important; color: #fff; font-weight: 600; margin-top: 20px; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="submit"]:focus, #login_lws .form-connect .content div[class^="form-bg-"] input[type="submit"]:hover { background-color: #0C2A6A; color: #fff !important; box-shadow: none; } #login_lws .form-connect .content div[class^="form-bg-"] .placeholder-in-border { visibility: hidden; display: block; position: absolute; top: 17px; left: 15px; font-size: 16px; line-height: 26px; padding: 0 8px; background: linear-gradient(to bottom, #F2F6FF, #F2F6FF 52%, #fff 52%, #fff 100%); transition: top 0.1s ease-in-out, font-size 0.1s ease-in-out; width: max-content; max-width: calc(100% - 42px); } #login_lws .form-connect .content div[class^="form-bg-"] a { font-size: 16px; line-height: 26px; font-weight: 400; color: #4A87FF; text-align: center; text-decoration: underline; margin-top: 20px; } #login_lws .form-connect .content div[class^="form-bg-"] .choice { height: 12px; width:100%; border-bottom: solid 2px #222529; text-align: center; } #login_lws .form-connect .content div[class^="form-bg-"] .choice span { background: #fff; position: relative; top: 0; padding: 0 12px; font-size: 16px; line-height: 26px; } #login_lws .form-connect .content div[class^="form-bg-"] .g-button { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 15px; justify-content: center; align-items: center; border: 2px solid #AEB1BE; background: #fff; } #login_lws .form-connect .content div[class^="form-bg-"] .g-button img { width: 20px; height: 20px; } #login_lws .form-connect .content div[class^="form-bg-"] form.connect { margin: 0; } #login_lws .form-connect .content .under-form { position: relative; width: 480px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } #login_lws .form-connect .content .select-field select { appearance: none; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNS4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAxMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMTE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMyMjI1Mjk7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMCwxLjZjMC0wLjQtMC4yLTAuOS0wLjQtMS4xYy0wLjQtMC4yLTAuNi0wLjQtMS4xLTAuNHMtMC45LDAuMi0xLjEsMC40TDEwLDcuNkwyLjYsMC41DQoJQzItMC4xLDEuMS0wLjEsMC41LDAuNUMwLjIsMC43LDAsMS4xLDAsMS42YzAsMC4yLDAuMiwwLjYsMC40LDAuOWw4LjUsOC4xQzkuMSwxMC44LDkuNiwxMSwxMCwxMXMwLjktMC4yLDEuMS0wLjRsOC41LTguMQ0KCUMxOS44LDIuMiwyMCwxLjgsMjAsMS42eiIvPg0KPC9zdmc+DQo=), #FFF !important; background-repeat: no-repeat !important; background-size: 12px 7px !important; background-position: top 21px right 20px !important; cursor: pointer; } #login_lws .form-connect .content .select-field select:focus, #login_lws .form-connect .content .select-field select:focus-visible { outline: 0; } #login_lws .form-connect .content .under-form .select-lang { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: left; align-items: center; gap: 8px; font-size: 16px; line-height: 26px; font-weight: 400; cursor: pointer; } #login_lws .form-connect .content .under-form .select-lang span#current-lang { width: max-content; max-width: 100%; } #login_lws .form-connect .content .under-form .select-lang img.flag { width: 25px; height: 25px; } #login_lws .form-connect .content .under-form .select-lang img.chevron { width: 12px; height: 6.5px; transition: transform 0.5s ease-in-out; } #login_lws .form-connect .content .under-form .select-lang.open img.chevron { transform: rotate(180deg); } #login_lws .form-connect .content .under-form .choice-lang { display: none; position: absolute; top: 30px; left: -17px; min-width: 150px; max-width: 250px; background: #fff; border: 2px solid #AEB1BE; z-index: 99; } #login_lws .form-connect .content .under-form .choice-lang > div { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 5px 15px; cursor: pointer; width: calc(100% - 30px); } #login_lws .form-connect .content .under-form .choice-lang > div img { width: 25px; height: 25px; } #login_lws .form-connect .content .under-form .choice-lang > div:not(:last-child) { border-bottom: 1px solid #AEB1BE; } #login_lws .form-connect .content .under-form .choice-lang > div:hover { background: rgba(236, 236, 236, 0.5); } #login_lws .form-connect .content .under-form .webmail, #login_lws .form-connect .content .under-form .panel { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: right; align-items: center; gap: 8px; } #login_lws .form-connect .content .under-form .webmail img { width: 25px; height: 21px; } #login_lws .form-connect .content .under-form .panel img { width: 15px; height: 15px; } #login_lws .form-connect .content .under-form .webmail a, #login_lws .form-connect .content .under-form .panel a { width: max-content; max-width: 100%; font-size: 16px; line-height: 26px; font-weight: 400; color: #4A87FF; text-decoration: underline; white-space: nowrap; } #login_lws .form-connect .info-secure { position: absolute; width: calc(100% - 60px); bottom: 30px; left: 30px; display: flex; justify-content: center; } #login_lws .form-connect .info-secure .primary-info { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 8px; justify-content: center; align-items: center; cursor: pointer; } #login_lws .form-connect .info-secure .primary-info img.warning { width: 20px; height: 18px; } #login_lws .form-connect .info-secure .primary-info p { font-size: 16px; line-height: 26px; font-weight: 400; margin: 0; width: max-content; max-width: 100%; } #login_lws .form-connect .info-secure .primary-info p strong { font-weight: 700; } #login_lws .form-connect .info-secure .primary-info img.info-img { width: 16px; height: 16px; } #login_lws .form-connect .info-secure.open { position: relative; bottom: 0; left: 0; padding: 0 30px; margin-top: 40px; } #login_lws .form-connect .info-secure.open .primary-info img.chevron { transform: rotate(180deg); } /** Close Eye **/ #login_lws .form-connect .content div[class^="form-bg-"] div.password-field { position: relative; } #login_lws .form-connect .content div[class^="form-bg-"] div.password-field img.eye { position: absolute; top: 0; right: 5px; width: 48px; height: auto; cursor: pointer; padding: 15px; } /** Placeholder Move **/ #login_lws .form-connect .content div[class^="form-bg-"] input[type="text"]:focus::placeholder, #login_lws .form-connect .content div[class^="form-bg-"] input[type="password"]:focus::placeholder { color: transparent; } #login_lws .form-connect .content div[class^="form-bg-"] input[type="text"]:focus + .placeholder-in-border, #login_lws .form-connect .content div[class^="form-bg-"] input[type="password"]:focus + .placeholder-in-border { visibility: visible; font-size: 16px; color: #4A87FF; top: -14px; } #login_lws .form-connect .content div[class^="form-bg-"] .placeholder-in-border.place-move { visibility: visible; font-size: 16px; color: #4A87FF; top: -14px; } #login_lws .form-connect .content div[class^="form-bg-"] input.f-elem:not(:focus) + .placeholder-in-border.place-move { color: rgb(95,99,104); } /* Select Option */ html body.task-login .popover, html.dark-mode body.task-login .popover { background-color: #fff; border-color: #1E499B; cursor: pointer; } body.task-login .popover .listing li:hover { background: #ececec; cursor: pointer !important; } body.task-login .popover .listing li:first-of-type a { padding: 10px 0 5px; } body.task-login .popover .listing li:last-of-type a { padding: 5px 0 10px; } html.dark-mode body.task-login .popover .listing li a { color: #222529; } body.task-login .popover .listing li a { font-size: 16px; line-height: 28px; padding: 5px 0; cursor: pointer; } body.task-login .popover ul.listing li { border: 0; border-radius: 0; } html.dark-mode body.task-login .popover-body::-webkit-scrollbar { display: none; } html.dark-mode body.task-login .popover-body { -ms-overflow-style: none; scrollbar-width: none; } body.task-login .popover .listing li a.selected { background: #eee; } body.task-login .popover .listing li a.selected:before { content: '' !important; } html.dark-mode.layout-phone body.task-login .popover-header, html.dark-mode.layout-small body.task-login .popover-header { background: #1E499B; } /* Auto Complete Field */ body.task-login input[type="text"]:autofill, body.task-login input[type="password"]:autofill, body.task-login input[type="text"]:autofill:hover, body.task-login input[type="password"]:autofill:hover, body.task-login input[type="text"]:autofill:focus, body.task-login input[type="password"]:autofill:focus, body.task-login input[type="text"]:autofill:active, body.task-login input[type="password"]:autofill:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; background-color: white !important; } body.task-login input[type="text"]:-webkit-autofill, body.task-login input[type="password"]:-webkit-autofill, body.task-login input[type="text"]:-webkit-autofill:hover, body.task-login input[type="password"]:-webkit-autofill:hover, body.task-login input[type="text"]:-webkit-autofill:focus, body.task-login input[type="password"]:-webkit-autofill:focus, body.task-login input[type="text"]:-webkit-autofill:active, body.task-login input[type="password"]:-webkit-autofill:active { -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0px 1000px white inset !important; transition: background-color 5000s ease-in-out 0s; } /** Responsive Page **/ @media (min-width: 1921px) { #login_lws .form-connect { max-width: 40%; } } @media (max-width: 1399px) { #login_lws .exclu .content img { width: 80%; height: auto; } } @media (min-width: 1100px) AND (max-height: 770px) { body.task-login { zoom: 0.95; } } @media (min-width: 1100px) AND (max-height: 730px) { body.task-login { zoom: 0.85; } } @media (min-width: 1100px) AND (max-height: 650px) { body.task-login { zoom: 0.8; } #login_lws .form-connect { padding: 40px 0; } } @media (min-width: 1100px) AND (max-height: 580px) { body.task-login #layout { height: auto; } } @media (min-width: 1100px) AND (max-height: 849px) { #login_lws .form-connect .info-secure { position: relative; width: 100%; bottom: unset; left: unset; margin-top: 30px; } #login_lws .form-connect .info-secure .primary-info { width: 100%; justify-content: center; } } @media (max-width: 1099px) AND (max-height: 770px) { body.task-login { zoom: 0.9; } } @media (max-width: 1099px) AND (max-height: 700px) { body.task-login { zoom: 0.85; } } @media (max-width: 1099px) AND (max-height: 660px) { body.task-login { zoom: 0.8; } } @media (max-width: 1099px) AND (max-height: 620px) { body.task-login { zoom: 0.9; } #login_lws .content-index { padding: 40px 0; } body.task-login #layout { height: auto; padding: 40px 0; } } @media (max-width: 1099px) { #login_lws .content-index.pad-screen { padding: 40px 0; } #login_lws .exclu { display: none; } #login_lws .form-connect { max-width: 100%; min-height: 100vh; padding: 0; } #login_lws .form-connect .content div.form-bg-blue { background-color: #FFF; } #login_lws .form-connect .content div[class^="form-bg-"] .placeholder-in-border { background: #fff; } #login_lws .form-connect .content div[class^="form-bg-"] { margin-top: 0; padding: 10px 40px 0; } #login_lws .form-connect .info-secure { position: relative; bottom: unset; left: unset; margin-top: 30px; } } @media (max-width: 599px) { #login_lws .form-connect .content { width: 340px; } #login_lws .form-connect .info-secure { width: 340px; position: relative; bottom: unset; left: unset; margin-top: 30px; } #login_lws .form-connect .info-secure .primary-info img.warning, #login_lws .form-connect .info-secure .primary-info img.info-img { display: none; } #login_lws .form-connect .info-secure .primary-info p { text-align: center; } #login_lws .form-connect .info-secure .primary-info p strong { display: block; } #login_lws .form-connect .content .under-form { width: 340px; flex-direction: column; justify-content: center; gap: 20px; } #login_lws .form-connect .content .under-form > div { justify-content: center !important; } #login_lws .form-connect .content div[class^="form-bg-"] { margin-top: 0; padding: 10px 40px 0; } } @media (max-width: 469px) { #login_lws .form-connect { background: #fff; } #login_lws .form-connect .content { max-width: 90%; } #login_lws .form-connect .content div[class^="form-bg-"] { padding: 0; background-color: transparent; } #login_lws .form-connect .content .under-form { flex-direction: column; gap: 20px; } #login_lws .form-connect .content .under-form .choice-lang { left: 50%; transform: translateX(-50%); } }