/*
 * Feuille ecran unique du www (media="screen"), chargee par Core/UI/templates/main.php.
 * Fusion du 2026-11-05 des 22 feuilles chargees auparavant par css/css.php, dans le meme
 * ordre : la cascade est inchangee. Une region par ancien fichier (repliable dans VS Code).
 * L'impression est dans print.css.
 */

/* #region polices locales */
/*
 * Hebergees dans htdocs/fonts depuis le 2026-11-06, a la place de Google Fonts : aucune requete
 * vers un tiers, donc aucune adresse IP de visiteur transmise a Google (RGPD).
 * Fichiers telecharges tels que Google les servait (woff2, decoupes par unicode-range : un
 * sous-ensemble n'est telecharge que si la page contient un de ses caracteres). Licence OFL :
 * fonts/OFL-*.txt.
 * Graisse 400 seulement, comme l'ancien appel Google : bold et 500 restent simules par le
 * navigateur, le rendu est inchange.
 * La version Google (v17, v51) est dans le nom : un fichier ne change jamais de contenu, d'ou
 * le cache d'un an sans empreinte (.htaccess). Une mise a jour = un nouveau nom.
 * dm-sans-v17-latin-400.woff2 est precharge par main.php : a mettre a jour ensemble.
 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-v17-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mot STRIPE du bouton d'abonnement (SubscriptionPart.php) : telechargee sur cette page seulement */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-v51-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* #endregion */

/* #region reset2.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

button, input, select {
    margin: 0
}

html {
    box-sizing: border-box
}

*, *::before, *::after {
    box-sizing: inherit
}

img, video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

a {
    text-decoration:none;
    color:black;
}
/* #endregion */

/* #region main18.css */
html,
body {
    font-family: "DM Sans";
    font-size: 15px;
    min-height: 100vh;
    background: transparent;
}

html {
    overflow-y: scroll;
}

body {
    display: flex;
    flex-direction: column;
    opacity: 0;
}

h1,
h2,
h3,
h4 {
    color: #2e2e2e;
}

h1 {
    font-size: 25px;
    padding: 20px 0 8px;
}

h2 {
    font-size: 18px;
    padding: 8px 0;
}

h3 {
    font-size: 18px;
    padding: 8px 0;
}

p {
    margin: 10px 0;
    text-align: justify;
}

li {
    margin-left: 40px;
    list-style-type: disc;
}

.img-container {
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #888;
}

.img-container img {
    border-radius: 8px;
}

.navbar {
    background-color: #2f3338;
    color: rgba(255, 255, 255, 0.55);
}

.body {
    flex-grow: 1;
}

.link {
    color: #5985f4;
}

.link:hover {
    color: #193c95;
}

.alert {
    width: 100%;
    margin: 10px 0px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid transparent;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.table {
    margin: 15px 0;
}

.table td {
    padding: 4px 8px;
    border-bottom: 1px solid #cccccc;
    vertical-align: middle;
}

.table tr:last-child td {
    border-bottom: none;
}

.form-label {
    display: block;
}

.form-control {
    padding: 5px 8px;
    margin: 5px 0;
    width: 250px;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control[type="checkbox"],
.form-control[type="radio"] {
    width: auto;
    margin: 0 10px 0 0 !important;
}

.form-control[type="color"] {
    padding: 0 3px;
    margin: 5px 0;
    width: 100px;
}

.form-control[disabled="disabled"] {
    background-color: #ebebeb;
}

.form-error {
    margin-bottom: 10px;
    margin-left: 5px;
    color: #b92735;
    font-size: 12px;
}

.form-legend {
    display: block;
    font-size: 0.8em;
}

.name-field {
    display: none;
}

.contact-message {
    width: 400px;
    height: 200px;
}

.inline-form {
    display: inline;
    margin-right: 10px;
}

.inline-form input,
.inline-form select {
    margin-right: 10px;
}
.inline-form input[type="submit"] {
    position: relative;
    top: -2px;
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 3px 0;
    padding: 2px 6px;
    font-size: 1rem;
    border-radius: 0.25rem;
    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;
}

.btn:hover {
    color: #212529;
}

.btn-sm {
    margin: 1px 0;
    padding: 0px 4px;
    font-size: 0.9em;
}

.btn-primary {
    color: #fff;
    background-color: #3d8bff;
    border-color: #3d8bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0a55c5;
    border-color: #0b51bb;
}

.btn-disabled {
    color: #fff;
    background-color: #858585;
    border-color: #858585;
    cursor: default;
}

.btn-disabled:hover {
    color: #fff;
    background-color: #858585;
    border-color: #858585;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.btn-success {
    color: #fff;
    background-color: #55c23a;
    border-color: #55c23a;
}

.btn-success:hover {
    color: #fff;
    background-color: #447e36;
    border-color: #447e36;
}

.btn-warning {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    color: #fff;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn-switch {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: #2a2e31;
    margin: 3px 0;
    padding: 2px 6px;
    width: 100px;
    font-size: 1rem;
    color: #fff;
    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;
    border-right: 1px solid #636363;
    border-radius: 0;
}

.btn-switch:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-switch:last-child {
    border-right: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/*
.btn-switch-left {
    border-right: 1px solid #636363;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-switch-middle {
    border-right: 1px solid #636363;
    border-radius: 0;
}
    

.btn-switch-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
    */

.btn-switch-active {
    background-color: #3d8bff;
}

.btn-switch-not-active:hover {
    background-color: #505050;
}

.img-btn {
    line-height: 1;
    padding: 2px;
    margin-right: 8px;
    width: 28px;
    height: 28px;
}

.img-btn img {
    width: 24px;
    height: 24px;
}

.wrapper {
    opacity: 0.9;
    color: #000;
    padding: 2px 5px;
    font-weight: bold;
}

.wrapper:hover {
    opacity: 0.6;
    cursor: pointer;
}

.wrapper-secondary {
    opacity: 0.7;
}

/*
.wrapper-primary:after{
    display:inline-block;
    width:20px;
    height:20px;
    position:relative;
    top:6px;
    content:'';
    background-image:url('../img/feather/chevron-down.svg');
    background-size: contain;
}

.wrapper-secondary:after{
    display:inline-block;
    width:20px;
    height:20px;
    position:relative;
    top:6px;
    content:'';
    background-image:url('../img/feather/chevron-up.svg');
    background-size: contain;
}

*/

.explain {
    position: relative;
    z-index: 0;
    margin: 20px 0;
    padding: 5px 10px;
    background-color: #e4f4ff;
    border: 1px solid #9dd6ff;
    border-radius: 10px;
    width: 100%;
}

.explain-title {
    font-weight: bold;
    color: #4b5691;
}

.explain p {
    margin: 0;
    padding: 4px 0;
    font-size: 0.8em;
    color: #4b5691;
}

.actionCard {
    padding: 10px 0;
    border-bottom: 1px solid #dadada;
    overflow-x: auto;
}

.actionCard-disabled {
    background-color: #f1f1f1;
}

.actionCard-header {
    display: flex;
}

.actionCard-title {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.actionCard-action {
    display: flex;
    align-items: center;
}
.actionCard-primaryAction,
.actionCard-secondaryAction {
    margin-left: 10px;
}

.actionCard-secondaryAction,
.actionCard-hiddenContent {
    display: none;
}

.actionCard-visibleContent {
    margin-bottom: 10px;
}

.actionCard-hiddenContent {
    padding: 0 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: rgba(238, 238, 238, 0.233);
}

.role-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 80%;
    border-radius: 4px;
    color: #000000;
    font-size: 0.65em;
    background-color: #fff;
    font-weight: bold;
}

.role-badge-not-acces {
    color: #ff3232;
}

.role-badge-acces {
    color: #5583d8;
}

.role-badge-manage {
    color: #50aa39;
}

.role-badge-admin {
    color: #9e258a;
}

.operator-color {
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
    left: 10px;
    border-radius: 12px;
}

.selectDate-form {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.smartphone-dateselector {
    display: none;
}

.selectDate-links-group {
    text-align: center;
    padding-top: 5px;
    display: flex;
    justify-content: center;
}
.selectDate-links-group a {
    margin-left: 5px;
    margin-right: 5px;
}

.planning-slot {
    display: inline-block;
    margin: 1px;
    margin-right: 2px;
    padding: 5px 6px;
    border-radius: 4px;
    background-color: #ccd8ff;
}

.planning-hour {
    display: inline-block;
    width: 47px;
    padding: 2px 3px;
    font-size: 0.9em;
}

.planning-hour::placeholder {
    color: rgb(199, 199, 199);
    font-size: 0.8em;
}

.change-details {
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    color: #888;
    font-size: 0.8em;
}

.changes-months-list {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.changes-months-list-element {
    margin: 3px;
    width: 130px;
}

.operator-link {
    color: #000;
    text-decoration: none;
}

.operator-link:hover {
    color: #3b4254;
    text-decoration: underline;
}

.operator-hours-count {
    display: inline-block;
    margin-left: 5px;
}

.color-picker-group {
    display: flex;
    justify-content: center;
}

.color-picker-button {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 4px;
    cursor: pointer;
}

.operator-avatar-group {
    display: flex;
    flex-wrap: wrap;
}

.operator-avatar {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 4px;
    width: 100px;
    height: 90px;
    border-radius: 10px;
    cursor: pointer;
}

.avatar-name {
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    font-size: 0.9em;
}

.planning-plus-description {
    margin: 10px 20px;
    padding: 20px;
    border: 1px solid #226326;
    border-radius: 5px;
    background-color: #ecfff0;
}

.planning-plus-description li {
    list-style-type: none;
    line-height: 1.5em;
}

.planning-plus-description li:before {
    content: "\2714";
    color: green;
    padding-right: 8px;
}

.img-plans {
    margin-top: 10px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

.float-left {
    float: left;
}

/*

.company-select {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.company-select:hover {
    background-color: #f0f0f0;
}

.company-select .icon {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

*/

.company-select {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    z-index: 1001; /* toujours au-dessus */
}

.company-select:hover {
    background-color: #f0f0f0;
}

.company-select .icon {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* Menu flottant */
.company-menu {
    width: 95%;
    margin: 8px auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    display: none; /* caché par défaut */
    z-index: 1000;
}

.company-menu a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #111;
    font-size: 14px;
    border-radius: 4px;
    margin: 1px;
    background: #fff;
}

.company-menu a:hover {
    background: #aaccff;
}
/* #endregion */

/* #region modal1.css */
.operatorHours-modal-activator {
    z-index: 20;
    width: 100%;
    background-color: none;
}

.operatorHours-modal-activator:hover {
    z-index: 30;
    border: 1px solid #000;
    cursor: pointer;
    box-shadow: 0 0 2px #000, 0 0 4px #000;
}

.operatorHours-modal {
    position: fixed;
    display: none;
    z-index: 40;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    border:1px solid #ccc;
    overflow: auto;
}

.operatorHours-modal-closer {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    color: #fff;
    background-color: #dc3545;
    border-color: 1px solid #dc3545;
}

.operatorHours-modal-closer:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.operatorHours-modal-closer-icon {
    position: relative;
    top: -3px;
    font-size: 20px;
}

.operatorHours-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.operatorHours-modal-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 30px 20px;
    background-color: #eee;
    border-radius: 5px;
}

.operatorHours-modal-date,
.operatorHours-modal-operator,
.operatorHours-modal-hoursFields,
.operatorHours-modal-reset,
.operatorHours-modal-complementaryFields {
    margin:5px 0;
}

.operatorHours-modal-date {
    text-align:center;
    font-weight:bold;
}


.operatorHours-modal-reset {
    margin-top:0px;
    cursor:pointer;
}

.operatorHours-modal-reset:hover {
    color:#b02a37;
}



.operatorHours-modal-complementaryFields input, 
.operatorHours-modal-complementaryFields select {
    display:block;
    margin:auto;
    margin-top:5px;
    width:300px;
} 
/* #endregion */

/* #region dashboard/db-container2.css */
.db-container {
    display:flex;
    width:100%;
    align-items: stretch;
    min-height:100vh;
    overflow: hidden;
}
/* #endregion */

/* #region dashboard/db-dateselector.css */
.dateselector-icon {
    width:12px;
}
/* #endregion */

/* #region dashboard/db-formContainer.css */
.db-formContainer {
    margin:16px 8px;
    padding:8px 16px;
    border:1px solid #ddd;
    border-radius:4px;
}
/* #endregion */

/* #region dashboard/db-header.css */
.header {
    border-bottom: 1px solid #eee;
}

.header-title {
    font-size: 20px;
    font-weight:bold;
}

.header-subMenu {
    display: flex;
    align-items: center;
}

.header-subMenu-link {
    font-size: 13px;
    font-weight: bold;
    color: #717171;
    padding: 8px 12px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.header-subMenu-link.current {
    color: #1B86FF;
    border-bottom: 2px solid #1B86FF;
}

.header-subMenu-link:hover {
    color: #1B86FF;
}

.header-selectForm {
    margin-right: 8px;
    padding: 4px 4px;
}


.header-subMenu-button {
    display: flex;
    align-items: center;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0 8px;
    padding: 2px 6px;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.header-subMenu-button img {
    height:16px;
    margin-right:4px;
}


.header-subMenu-button.primary {
    color: #fff;
    background-color: #3d8bff;
    border-color: #3d8bff;
}

.header-subMenu-button.primary:hover {
    color: #fff;
    background-color: #0a55c5;
    border-color: #0b51bb;
}

.header-subMenu-button.danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.header-subMenu-button.danger:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}
/* #endregion */

/* #region dashboard/db-main3.css */
.db-main {
    flex-grow: 15;
    /*background-color:#eee;*/
    padding: 0 8px;
    max-width: 1000px;
    min-width: 0;
}
/* #endregion */

/* #region dashboard/db-nav4.css */
.db-nav {
    display:flex;
    flex-flow: column;
    justify-content: space-between;
    min-width: 300px;
    max-width: 300px;
    width:300px;
    background-color:rgb(6, 0, 55);
    font-size:13px;
}

.db-nav-section, .db-nav-top-section {
    border-bottom:1px solid rgba(255,255,255,0.2);
}

.db-nav-header {
    display:flex;
    justify-content: center;
    align-items: center;
    height:52px;
    color:#dfdfdf;
    font-size:15px;
    font-weight:bold;
    text-decoration: none;
}

.db-nav-header:hover {
    color:#2767eb;
}


.db-nav-toggler{
    display:none;
}



.db-nav-link {
    display:flex;
    align-items: center;
    height:32px;
    color:rgb(255, 255, 255);
    text-decoration: none;
    opacity:0.7;
}

.db-nav-link:hover, .db-nav-link-current {
    background-color:rgb(42, 34, 110);
    opacity:1;
}

.db-nav-icon-container {
    display:flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    width:50px;
}

.db-nav-icon {
    display:inline-block;
    height:16px;
    text-align:center;
}

.db-nav-separator {
    margin:12px 0;
    height:1px;
    border-top:1px solid rgba(255,255,255,0.2);
}


.db-nav-bottom-link {
    display:inline-block;
    padding:8px;
    color:#bbb;
    border-bottom:1px solid transparent;
}

.db-nav-bottom-link:hover {
    color:rgb(255, 255, 255);
}
/* #endregion */

/* #region dashboard/db-part2.css */
.db-part {
    padding:16px;
}
/* #endregion */

/* #region dashboard/db-subnav2.css */
.db-subnav {
    height:48px;
    padding:0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    background-color:#fff;
}

.db-subnav-title {
    font-size:14px;
    font-weight:bold;
}

.db-subnav-element {
    margin-right:32px !important;
}

.db-subnav-link-group {
    height:100%;
    display:flex;
    align-items: stretch;
}

.db-subnav-link {
    display:flex;
    align-items: center;
    margin:0 12px;
    font-size: 14px;
    border-bottom:3px solid #fff;
    cursor:pointer;
}

.db-subnav-link:hover, .active-link {
    border-bottom:3px solid #3d8bff;
}
/* #endregion */

/* #region dashboard/db-title1.css */
.db-title {
    display:flex;
    align-items: center;
    flex-wrap: nowrap;
    width:100%;
    height:48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    background-color:#fff;
    overflow-x:auto;
}



.db-title-element {
    margin-right:16px;
    white-space: nowrap;
}



.db-title-text {
    font-size: 20px;
    font-weight:bold;
}
/* #endregion */

/* #region visitor/visitor-features2.css */
.section-features {
    padding:64px 0;
}


.visitor-features {
    display:flex;
    justify-content: space-between;
    align-items:stretch;
    flex-wrap: wrap;
}

.feature-title {
    margin:24px 0 44px;
    width:100%;
    font-size:48px;
    text-align:center;
}

.feature-card {
    width:30%;
    border:1px solid #cfcfcf;
    border-radius:4px;
}


.feature-card-title {
    font-size:18px;
    padding:16px 16px 8px;
}


.feature-card-text {
    padding:8px 16px;
}

.feature-card-text-light {
    padding:8px 16px;
    color:#999;
}

.feature-end {
    margin:32px 0 16px;
    font-size:24px;
}
/* #endregion */

/* #region visitor/visitor-footer.css */
.visitor-footer {
    padding:32px 0;
    border-top:1px solid #eee;
}


.visitor-footer .visitor-container {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 0;
}

.visitor-footer-link {
    display:inline-block;
    padding:8px 16px;
}

.visitor-footer-link:hover {
    color:rgb(123, 123, 123);
}
/* #endregion */

/* #region visitor/visitor-hero2.css */
.section-hero {
    padding:180px 0;
    background-color:#c5d8ff;
}


.visitor-hero {
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.visitor-hero .hero-right-part{
    width:50%;
}

@media all and (max-width: 800px) {
    .visitor-hero .hero-right-part{
        display:none;
    }
}


.visitor-hero .main-text {
    font-size:36px;
    padding-bottom:24px;
    font-weight:bold;
}

.visitor-hero .subtext {
    font-size:20px;
}

.visitor-hero .mpp-name {
    color: #2767eb;
    font-weight:bold;
    font-size:1.1em;
}




.visitor-hero ul {
    padding-left:32px;
}

.visitor-hero li {
    list-style-type: none;
    line-height:1.5em;
}

.visitor-hero li::before {
    content: "\2714";
    padding-right:8px;
}


.visitor-hero-btn-container {
    margin-top:48px;
    margin-bottom:20px;
    text-align:center;
}



.visitor-hero-btn {
    padding:16px 32px;
    font-size:24px;
    color: #fff;
    border:1px solid #2767eb;
    background-color:#2767eb;
    border-radius:4px;
    transition: color .15s ease-in-out;
    transition: border .15s ease-in-out;
    transition: background .15s ease-in-out;
    box-shadow: 0 0 0 rgba(39,103,235, 0.4);
    animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(39,103,235, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(39,103,235, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(39,103,235, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(39,103,235, 0.4);
        box-shadow: 0 0 0 0 rgba(39,103,235, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(39,103,235, 0);
        box-shadow: 0 0 0 10px rgba(39,103,235, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(39,103,235, 0);
        box-shadow: 0 0 0 0 rgba(39,103,235, 0);
    }
}

.visitor-hero-btn:hover {
    color: #fff;
    border:1px solid #0d4ed0;
    background-color:#0d4ed0;
}


.visitor-hero-img {
    border-radius:4px;
    border:1px solid #eee;
}
/* #endregion */

/* #region visitor/visitor-login.css */
.form-container {
    width:500px;
    margin:0 auto;
    padding-bottom:64px;
}

#login-form .form-vertical {
    padding-bottom:24px;
}

#login-form .form-input-group {
    display:flex;
    flex-direction: column;
    margin-top:24px;
}

#login-form .form-label {
    margin-bottom:4px;
    color:rgb(105, 105, 105);
}

#login-form .form-input-medium {
    width:100%;
    height:48px;
    padding:12px 8px;
    border:1px solid #666666;
    border-radius:4px;
    font-size:18px;
}

#login-form .form-input-medium:hover, #login-form .form-input-medium:focus-visible {
    border:1px solid #2767eb;
    outline:1px solid #2767eb;
}

#login-form .form-vertical .btn {
    margin-top:8px;
    height:48px;
    font-size:18px;
    border-radius:4px;
    font-weight:bold;
    color: #fff;
    border:1px solid #2767eb;
    background-color:#2767eb;
    border-radius:4px;
    cursor:pointer;
    transition: color .15s ease-in-out;
    transition: border .15s ease-in-out;
    transition: background .15s ease-in-out;
}

#login-form .form-vertical .btn:hover {
    color: #fff;
    border:1px solid #0d4ed0;
    background-color:#0d4ed0;
}






.form-table td {
    padding:4px 0;
    border-top:1px solid #ccc;
}

/*
.form-table tr:last-child td {
    padding:4px 8px;
    border-bottom:none;
}
*/

.form-table .form-label {
    display: block;
}

.form-table .form-control {
    display:block;
    padding: 4px 8px;
    margin: 4px 0;
    margin-left:12px;
    width: 250px;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-table .form-control[type=checkbox], .form-control[type=radio] {
    width: auto;
    margin: 0 12px 0 0 !important;
}

.form-table .form-control[type=color] {
    padding: 0 4px;
    margin: 4px 0;
    width: 100px;
}

.form-table .form-control[disabled=disabled] {
    background-color:#ebebeb;
}

.form-table .form-error {
    margin-bottom: 10px;
    margin-left: 5px;
    color: #b92735;
    font-size: 12px;
}

.form-table .form-legend {
    display: block;
    font-size: 0.8em;
}
/* #endregion */

/* #region visitor/visitor-main6.css */
.visitor-title {
    margin-top:48px;
    font-size:32px;
}


.visitor-container {
    max-width:1024px;
    margin:auto;
}

.visitor-container-small {
    width:600px;
    padding:24px;
    border:1px solid rgba(84, 186, 223, 0.5);
    border-radius:16px;
    background-color:#fff;
    margin:120px auto 32px;
}

@media all and (max-width: 800px) {
    .visitor-container-small {
        width:95vw;
        margin:12px auto;
    }
}


.small-container-brand {
    text-align:center;
}


.small-container-brand a{
    color:#2767eb;
    font-weight:bold;
    font-size:32px;
}

@media all and (max-width: 800px) {
    .small-container-brand a{
        font-size:24px;
    }
}

.visitor-container-small h1{
    text-align:center;
}

.visitor-container-small form{
    margin:48px auto;
}

.visitor-container-small table{
    max-width:380px;
    margin:24px auto;
}
/* #endregion */

/* #region visitor/visitor-nav6.css */
.visitor-nav {
    border-bottom:1px solid #7b7b7b;
    z-index:2;
}

.visitor-nav .visitor-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 0;
    z-index:2;
}

.visitor-nav .left-part {
    display:flex;
    align-items:center;
}


.visitor-nav .right-part {
    display:flex;
    align-items:center;
    gap:8px;
    z-index:2;
    background-color:white;
    height:auto;
}


.visitor-nav .logo-link {
    display:flex;
    align-items:center;
}

.visitor-nav .logo-img {
    display:inline-block;
    margin-right:12px;
    width:32px;
    height:32px;
}

.visitor-nav .logo-text {
    color: #2767eb;
    font-weight:bold;
    font-size:18px;
}


.db-nav-toggler{
    display:none;
}


.visitor-nav .nav-link {
    font-size:15px;
    padding:4px 8px;
    color: #2d2d2d;
    font-weight:bold;
    transition: color .15s ease-in-out;
    transition: border .15s ease-in-out;
    transition: background .15s ease-in-out;
}

.visitor-nav .nav-link:hover {
    color: #676767;
}

.visitor-nav .nav-btn {
    font-size:15px;
    margin:4px 8px;
    padding:4px 8px;
    font-weight:bold;
    transition: color .15s ease-in-out;
    transition: border .15s ease-in-out;
    transition: background .15s ease-in-out;
}

.visitor-nav .nav-btn-outline {
    color: #2d2d2d;
    border:1px solid #2d2d2d;
    border-radius:4px;
}

.visitor-nav .nav-btn-outline:hover {
    color: #2767eb;
    border:1px solid #2767eb;
}

.visitor-nav .nav-btn-primary {
    color: #fff;
    border:1px solid #2767eb;
    background-color:#2767eb;
    border-radius:4px;
}

.visitor-nav .nav-btn-primary:hover {
    color: #fff;
    border:1px solid #0d4ed0;
    background-color:#0d4ed0;
}
/* #endregion */

/* #region visitor/visitor-plans.css */
.section-plans {
    padding:64px 0;
    border-bottom:1px solid #eee;
}



.plans-title {
    margin:24px 0 44px;
    width:100%;
    font-size:48px;
    text-align:center;
}



.visitor-plans .mpp-name {
    color: #2767eb;
    font-weight:bold;
}


.price-table {
    margin: 32px auto;
}

.price-table td {
    border: 1px solid #999;
    padding: 5px 10px;
}

.price-table .small {
    font-size: 0.9em;
    color: #555;
    margin: 3px 10px;
    text-align: justify;
}

.price-table .inc {
    text-align: center;
    font-size: 1.2em;
}

.price-table .inc-yes {
    background-color: #d3f5d0;
    color: #076900;
}

.price-table .inc-no {
    background-color: #fadedc;
    color: #d10e00;
}
/* #endregion */

/* #region visitor/visitor-quotes.css */
.section-quotes {
    padding:64px 0;
}



.quotes-title {
    margin:24px 0 44px;
    width:100%;
    font-size:48px;
    text-align:center;
}




.visitor-quotes .quote {
    display: flex;
    margin: 24px;
    padding: 12px;
}

.visitor-quotes .quote-name {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 48px;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 24px;
    padding: 0;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    font-weight: bold;
    color: white;
    background-color: #3d8bff;
}


.visitor-quotes .quote-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.visitor-quotes .rating {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    color: #FFE400;
    font-size: 1.5em;
}
/* #endregion */

/* #region visitor/visitor-video.css */
.section-video {
    padding:64px 0;
    background-color:#dbe7ff;
}



.video-title {
    margin:24px 0 44px;
    width:100%;
    font-size:48px;
    text-align:center;
}


.visitor-video .iframe-container {
    display: flex;
    justify-content: center;
}

.visitor-video iframe {
    
    margin-bottom: 40px;
    border: 1px solid black;
    box-shadow: 1px 1px 10px #999;
    width: 960px;
    height: 540px;
}
/* #endregion */

/* #region smartphone5.css */
@media all and (max-width: 800px) {


    /* new */

    .db-container, .db-nav, .db-main {
        display:block;
        min-width:auto;
        max-width:100%;
        width:100%;
    }

    .db-nav-top-section {
        display:flex;
        justify-content:space-between;
        align-items: center;
        padding:0 16px;
    }


    .db-nav-section {
        display:none;
    }

    .db-nav-link {
        height:40px;
        font-size:1.2em;
    }

    .db-nav-icon {
        height:20px;
    }



    
    
    .db-nav-toggler{
        display:block;
        float:right;
        margin-right:10px;
        opacity:0.7;
        width:20px;
    }


    .visitor-container {
        padding:0 8px;
    }

    .visitor-nav .visitor-container {
       flex-direction: column;
    }

    .visitor-container .left-part {
        display: flex;
        justify-content: space-between;
        padding:0 16px;
        width:100%;
    }

    .visitor-container .left-part .navbar-toggler-icon {
        width:30px;
    }

    .visitor-container .right-part {
        display:none;
        flex-direction: column;
        gap:0px;
        width:100%;
    }


    .visitor-container .right-part .nav-link, .visitor-container .right-part .nav-btn {
        display:block;
        text-align:center;
        padding:8px 0;
        margin:8px;
        width:95%;
    }


    .footer-container .visitor-container {
        display:block;
    }
    .visitor-footer-link{
        display:block;
    }






    .visitor-hero {
        font-size:0.9em;
    }

    .visitor-hero-btn {
        font-size:18px;
    }

    .feature-card {
        width:100%;
        margin:16px;
    }


    .visitor-quotes .quote{
        display:block;
    }




    .smartphone-dateselector {
        display:flex;
    }

    .desktop-dateselector {
        display:none;
    }



    /**********************/




    .footer {
        padding-top:10px;
    }



    #nti-x{
        display:none;
    }

    .navbar-header {
        padding-top:10px;
        padding-bottom:10px;
    }

    .navbar-body {
        display:none;
    }


    .navbar-left, .navbar-right{
        display:block;
    }
    
    .nav-link{
        width:100%;
        margin:0;
        padding:10px 10px;
    }


    .body-container { 
        padding-left:10px;
        padding-right:10px;
    }


    .operator-avatar-group {
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
    }

    .form-control {
        width: 200px;
    }
    
    .form-control[type=color] {
        width: 100px;
    }

}
/* #endregion */