@font-face {
  font-family: "Be Vietnam Pro Medium";
  src: url("../font/BeVietnamPro-Medium.ttf");
}


:root {
  --chonotime-font-size: 12px;
  --chonotime-font-weight: 400;
  --chonotime-font-family: 'Be Vietnam Pro Medium', "Open Sans", "Tahoma", "Arial", "sans-serif";
  --chonotime-font-color: #020036;
  --chonotime-font-height: 1.15;
  font-size: 14px;
}

* {
  box-sizing: border-box;
  font-family: var(--chonotime-font-family);
  opacity: 1;
}

html, body {
  height: 100%;
}

body {
  background-image: url('../img/Visuel_Workplace_UX.jpg');
  background-size: 100% auto;
  margin: 0;
  font-weight: var(--chonotime-font-weight);
  font-size: var(--chonotime-font-size);
  line-height: var(--chonotime-font-height);
  color: var(--chonotime-font-color) !important;
  padding: 0;
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}

svg, img {
  vertical-align: middle;
}

img {
  border-style: none;
}

h1, h4 {
  text-align: center;
}

.h4 {
  font: normal normal 600 12px/20px 'Poppins' !important;
}

label {
  font-weight: normal;
}

label[aria-invalid=polite] {
  color: var(--accent-red);
}

input {
  width: 100%;
  height: 25px;
  margin-top: 4px;
  border: 1px solid var(--strong-blue);
  border-radius: 2px;
  background: #fff;
  padding: 4px 8px;
  opacity: 1;
}

input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid #75aee9;
  background-color: #fff;
  height: 15px;
  margin: 2px;
  vertical-align: middle;
  float: left;
}

.pageTitle{
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 40px;
}

.form-control:not([readonly]):hover, .form-group.cw-customControlGroup:not([readonly]):hover, .form-group .cw-customControlGroup:not([readonly]):hover {
  cursor: text;
}

.form-control:focus, .form-group.cw-customControlGroup:focus, .form-group .cw-customControlGroup:focus {
  color: #020036;
  background-color: #fff;
  border-color: #4793e1;
  outline: 0;
  box-shadow: none;
}

#connexionMainContent #ctimeForm .form-control:hover, 
#connexionMainContent #ctimeForm .form-group.cw-customControlGroup:hover, 
#connexionMainContent #ctimeForm .form-group .cw-customControlGroup:hover, 
.form-group #connexionMainContent #ctimeForm .cw-customControlGroup:hover, 
#connexionMainContent #ctimeForm .form-control:focus,
 #connexionMainContent #ctimeForm .form-group.cw-customControlGroup:focus, 
 #connexionMainContent #ctimeForm .form-group .cw-customControlGroup:focus, 
 .form-group #connexionMainContent #ctimeForm .cw-customControlGroup:focus {
    background-color: #fff;
}

.form-control, .form-group.cw-customControlGroup, .form-group .cw-customControlGroup {
    display: block;
    width: 100%;
    height: calc(1.14em + 1.72rem + 2px);
    padding: .86rem .86rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.14;
    color: #4c515d;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #8f939a;
    border-radius: .3571rem;
    transition: none;
}

input.form-control, input.form-group.cw-customControlGroup, 
.form-group input.cw-customControlGroup, 
select.form-control, 
select.form-group.cw-customControlGroup, 
.form-group select.cw-customControlGroup, 
textarea.form-control, 
textarea.form-group.cw-customControlGroup, 
.form-group textarea.cw-customControlGroup {
    letter-spacing: normal;
}

#connexionMainContent #ctimeForm .form-control:hover, 
#connexionMainContent #ctimeForm .form-group.cw-customControlGroup:hover, 
#connexionMainContent #ctimeForm .form-group .cw-customControlGroup:hover, .form-group #connexionMainContent 
#ctimeForm .cw-customControlGroup:hover, 
#connexionMainContent #ctimeForm .form-control:focus, 
#connexionMainContent #ctimeForm .form-group.cw-customControlGroup:focus, 
#connexionMainContent #ctimeForm .form-group .cw-customControlGroup:focus, 
.form-group #connexionMainContent #ctimeForm .cw-customControlGroup:focus {
    background-color: #fff;
}

.cw-texteTresAllege, 
.footer, 
.form-group>label:not(.cw-texteImportant):not(.cw-texteRubrique)  {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #656870;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

button, select {
  text-transform: none;
}

.btn {
  color: #FFFFFF ;
  text-transform: uppercase;
  border-radius: 7px;
  height: 42px;
  padding: 0 24px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  line-height: 1.14;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-weight: 700;
}

.btn.btn-primary {
  background: #1e0087;
}

.btn:not(:disabled):not(.disabled), button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
  cursor: pointer;
}

#connexionMainContent {
  width: 309px;
  min-height: 585px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 2px;
}

#connexionMainContent header {
  flex-grow: 1;
}

#connexionMainContent main {
  flex-grow: 2;
}

#connexionMainContent .btn-primary, #connexionMainContent .submitBtnContainer {
  width: 100%;
  font-size: 1.143rem;
  height: 52px;
  line-height: 52px;
}

.btn.long-text-btn{
  font-size: 0.900rem !important;
}

#connexionMainContent .btn-primary span {
  display: inline-block;
  line-height: normal;
}

#chronotime-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#chronotime-logo {
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 112px;
  background-image: url('../img/Chronotime_UX.png');
  background-size: contain;
}

#logoCtimeContainer {
  height: calc(100% - 160px);
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  margin: 80px 0;
}

#logoCtimeContainerResponsive {
  display: none;
}

#cw-nexPublica {
  position: absolute;
  left: 80px;
  bottom: 0px;
  width: 285px;
  height: 62px;
  background-image: url('../img/Nexpublica_UX_Blanc.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.backgroundMainContent {
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 1;
}

.backgroundScroll {
  width: 100%;
  height: calc(100% - 160px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 80px 0;
  overflow: auto;
}

.logoClient {
  text-align: center;
  width: 301px;
  background-image: url('../img/Chronotime_UX.png');
  height: 111px;
  background-repeat: no-repeat;
  background-size: contain;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #303F48;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:focus,
a:hover{
  text-decoration: underline;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.login-pf-page, .card-pf, #kc-content, #kc-content-wrapper, .backgroundConnection {
  height: 100vh;
  width: 100vw;
}

.connexionBody {
  display: flex;
}

.backgroundConnection {
  background-image: url('../img/Visuel_Workplace_UX.jpg');
  background-size: cover;
  background-position-x: 20%;
  background-position-y: 20%;
}

.errrMsg, 
#kc-error-message {
  color: #F7453F;
  text-align: left;
  font-weight: bold;
  padding: 0 6px;
  margin: 6px 0;
  text-align: justify;  
  margin-bottom: 10px;
  display: block;

}

#connexionMainContent footer {
  flex-grow: 0;
  display: block;
}

.footer.row {
  margin: 0 !important;
  width: 100%;
  padding: 0 27px;
}

.footer.row div {
  padding: unset;
}

.footer .cw-loginLien {
  font-size: 0.857rem !important;
  color: #020036;
}


.cw-icon-24,
.cw-icon-24 svg {
    width: 24px;
    height: 24px;
}


.cw-icon-28,
.cw-icon-28 svg {
    width: 28px;
    height: 28px;
}

.cw-icon-16,
.cw-icon-16 svg {
    width: 16px;
    height: 16px;
}

.cw-icon-12,
.cw-icon-12 svg {
    width: 12px;
    height: 12px;
}

.d-none{
  display: none;
}