/*
Theme Name: Mockups idizbox
Theme URI: https://idizbox.com
Author: iDizBox
Author URI: https://idizbox.com
Description: idizbox - 2025
Version: 1.00
Text Domain: idbxboostrap1
*/

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-Book.eot');
    src: url('fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-Book.woff2') format('woff2'),
        url('fonts/CircularStd-Book.woff') format('woff'),
        url('fonts/CircularStd-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-BookItalic.eot');
    src: url('fonts/CircularStd-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-BookItalic.woff2') format('woff2'),
        url('fonts/CircularStd-BookItalic.woff') format('woff'),
        url('fonts/CircularStd-BookItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-Medium.eot');
    src: url('fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-Medium.woff2') format('woff2'),
        url('fonts/CircularStd-Medium.woff') format('woff'),
        url('fonts/CircularStd-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-MediumItalic.eot');
    src: url('fonts/CircularStd-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-MediumItalic.woff2') format('woff2'),
        url('fonts/CircularStd-MediumItalic.woff') format('woff'),
        url('fonts/CircularStd-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-Bold.eot');
    src: url('fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-Bold.woff2') format('woff2'),
        url('fonts/CircularStd-Bold.woff') format('woff'),
        url('fonts/CircularStd-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-BoldItalic.eot');
    src: url('fonts/CircularStd-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-BoldItalic.woff2') format('woff2'),
        url('fonts/CircularStd-BoldItalic.woff') format('woff'),
        url('fonts/CircularStd-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-Black.eot');
    src: url('fonts/CircularStd-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-Black.woff2') format('woff2'),
        url('fonts/CircularStd-Black.woff') format('woff'),
        url('fonts/CircularStd-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/CircularStd-BlackItalic.eot');
    src: url('fonts/CircularStd-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/CircularStd-BlackItalic.woff2') format('woff2'),
        url('fonts/CircularStd-BlackItalic.woff') format('woff'),
        url('fonts/CircularStd-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
  --bg_color: #F5F5F5;              /* BACKGROUND */
  --h_color: #1C1C1C;               /* H1, H2, H3, ... NOIR */
  --txt_color: #1C1C1C;             /* TEXTE, ... NOIR */
  --color_white: #FFFFFF;           /* BLANC */
  --color_1: #4038EA;               /* BLEU */
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible !important;
}

body {
    background-color: var(--bg_color);
    color: var(--txt_color);
    font-family: 'Circular Std', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: initial;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mobile_only {
    display: none;
}

:focus {
    outline: 0!important;
}

a, a:visited, a:focus {
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.nopadding { padding: 0; }
.no-padding-left {padding-left: 0;}
.no-padding-right {padding-right: 0;}
.padding_t10 { padding-top: 10px; }
.padding_t15 { padding-top: 15px; }
.padding_t20 { padding-top: 20px; }
.padding_t25 { padding-top: 25px; }
.padding_t30 { padding-top: 30px; }
.padding_t40 { padding-top: 40px; }
.padding_t50 { padding-top: 50px; }
.padding_t60 { padding-top: 60px; }
.padding_t70 { padding-top: 70px; }
.padding_t80 { padding-top: 80px; }
.padding_t100 { padding-top: 100px; }
.padding_t115 { padding-top: 115px; }
.padding_t120 { padding-top: 120px; }
.padding_t150 { padding-top: 150px; }
.padding_b10 { padding-bottom: 10px; }
.padding_b15 { padding-bottom: 15px; }
.padding_b20 { padding-bottom: 20px; }
.padding_b22 { padding-bottom: 22px; }
.padding_b30 { padding-bottom: 30px; }
.padding_b40 { padding-bottom: 40px; }
.padding_b50 { padding-bottom: 50px; }
.padding_b60 { padding-bottom: 60px; }
.padding_b70 { padding-bottom: 70px; }
.padding_b80 { padding-bottom: 80px; }
.padding_b90 { padding-bottom: 90px; }
.padding_b120 { padding-bottom: 120px; }
.padding_b150 { padding-bottom: 150px; }
.padding_all30 { padding: 30px; }
.margin_t5 { margin-top: 5px; }
.margin_t10 { margin-top: 10px; }
.margin_t15 { margin-top: 15px; }
.margin_t20 { margin-top: 20px; }
.margin_t30 { margin-top: 30px; }
.margin_t40 { margin-top: 40px; }
.margin_t50 { margin-top: 50px; }
.margin_t60 { margin-top: 60px; }
.margin_t70 { margin-top: 70px; }
.margin_t80 { margin-top: 80px; }
.margin_t120 { margin-top: 120px; }
.margin_b10 { margin-bottom: 10px; }
.margin_b15 { margin-bottom: 15px; }
.margin_b20 { margin-bottom: 20px; }
.margin_b25 { margin-bottom: 25px; }
.margin_b30 { margin-bottom: 30px; }
.margin_b40 { margin-bottom: 40px; }
.margin_b50 { margin-bottom: 50px; }
.margin_b60 { margin-bottom: 60px; }
.margin_b70 { margin-bottom: 70px; }
.margin_b80 { margin-bottom: 80px; }
.margin_b120 { margin-bottom: 120px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
    position: relative;
    font-weight: bold;
    line-height: initial;
}

.h1, h1 {
    font-size: 24px;
}

h1.h1_huge {
    font-size: 38px;
}

.h2, h2 {
    font-size: 24px;
}

h1.h1_big {
    font-size: 38px;
}

.h1_sub {
    color: var(--color_1);
    font-size: 16px;
    font-weight: 500;
}

.h1_subtitle {
    font-size: 16px;
    color: #707070;
    font-weight: 400;
}

.title_dot {
    color: var(--color_1);
}

.overflow_hidden {
    overflow: hidden;
}

.btn, .btn:active, .btn:visited, .btn:focus {
    background-color: var(--color_1);
    color: var(--color_white);
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 16px;
    line-height: inherit;
    font-weight: bold;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.btn:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2015fa;
}

.btn_big, .btn_big:active, .btn_big:visited, .btn_big:focus {
    padding: 10.75px 20px;
}

.btn_100, .btn100 {
    width: 100%;
}

.row_cflex {
    display: flex;
    align-items: center;
}

/**********************************************/
/**********************************************/
/*                   NAVBAR                   */
/**********************************************/
/**********************************************/

.navbar-default {
    background-color: #FFFFFF;
    border: 0;
    margin-bottom: 30px;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.navbar-right {
    margin-right: 0px;
}

.menu_row {
    display: flex;
    column-gap: 15px;
}

.top_menu_left, .top_menu_right {
    background-color: var(--color_white);
    border-radius: 15px;
}

.top_menu_left {
    min-width: 260px;
}

.top_menu_right {
    width: 100%;
    height: 70px;
}

.navbar-brand {
    float: left;
    height: 60px;
    padding: 17px 40px;
    font-size: 18px;
    line-height: 20px;
}

#main_menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

#main_menu ul li {
    display: inline-block;
    padding: 10px 5px;
}

#main_menu ul li:first-of-type {
    padding-left: 0;
}

.simple_menu a, .navbar-default .navbar-nav>li.simple_menu a {
    color: #1C1C1C;
    font-size: 16px;
    font-weight: bold;
    padding: 11px 15px;
    background-color: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
    line-height: normal;
    margin-top: 8px;
    margin-left: 5px;
    margin-right: 5px;
}

.simple_menu a svg, .navbar-default .navbar-nav>li.simple_menu a svg {
    margin-right: 15px;
}

.simple_menu a:hover, .simple_menu a.active, 
.navbar-default .navbar-nav>li.simple_menu a:hover, .navbar-default .navbar-nav>li.simple_menu a.active {
    background-color: #EDEFFE;
    color: var(--color_1);
    text-decoration: none;
}

.simple_menu a:hover svg path, .simple_menu a.active svg path,
.navbar-default .navbar-nav>li.simple_menu a:hover svg path, .navbar-default .navbar-nav>li.simple_menu a.active svg path {
    fill: var(--color_1);
}

.isbtn_menu {
    padding: 14px 20px;
}

.user_top_container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-right: 0px;
}

.user_noimg_cont {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 2px solid #F84B69;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    background-color: #F84B69;
}

.user_img_cont {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;
    border: 2px solid #4038EA;
    display: inline-flex;
}

img.user_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a.user_top_in {
    color: #1C1C1C;
    font-weight: bold;
    margin-left: 15px;
    text-decoration: none;
}

a.user_top_in svg {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    margin-top: -2px;
}

a.user_top_in svg path {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

a.user_top_in:hover, a.user_top_in.active, .user_menu ul li a:hover {
    color: #F84B69;
}

a.user_top_in:hover svg path, a.user_top_in.active svg path, .user_menu ul li a:hover svg path {
    fill: #F84B69;
}

a.user_top_in.active svg {
    transform: rotate(-180deg);
}

.user_menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 10px;
    width: 240px;
    min-height: 100px;
    background-color: #FFFFFF;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: 300ms;
    z-index: 99;
    -webkit-box-shadow: 2px 2px 0px 1px #4038ea;
    box-shadow: 2px 2px 0px 1px #4038ea;
    border-radius: 0px 0px 15px 15px;
    pointer-events: none;
}

.user_menu.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.user_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user_menu ul li {
    display: block;
    padding: 15px;
    border-bottom: 1px solid #F0F1F5;
}

.user_menu ul li:last-of-type {
    border-bottom: 0;
}

.user_menu ul li a {
    color: #1C1C1C;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/**********************************************/
/**********************************************/
/*                FORMULAIRES                 */
/**********************************************/
/**********************************************/

.cool_input_block {
    position: relative;
}

.cool_input_block input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    font-weight: 500;
    font-size: 14px;
    color: #1C1C1C;
    width: 100%;
    padding: 15.25px 10px;
    border-radius: 10px;
    border: 1px solid #B9B9B9;
    outline: none;
}

.cool_input_block select {
    background-repeat: no-repeat;
    background-position: 96% 50%;
    background-size: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.891' height='7.501'%3E%3Cpath fill='%23B9B9B9' d='M7.45 7.501a2.416 2.416 0 0 1-1.714-.709L.22 1.28a.75.75 0 0 1 0-1.06.75.75 0 0 1 1.06 0l5.512 5.511a.925.925 0 0 0 1.306 0L13.61.22a.75.75 0 0 1 1.061 0 .75.75 0 0 1 0 1.061L9.159 6.792a2.416 2.416 0 0 1-1.709.709Z' data-name='vuesax/linear/arrow-down'/%3E%3C/svg%3E");
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 500;
    padding: 15.25px 26px 15.25px 10px;
    border: 1px solid #B9B9B9;
    border-radius: 10px;
    width: 100%;
}

.cool_input_block span.placeholder {
    position: absolute;
    margin: 15px 0;
    padding: 0 4px;
    color: #B9B9B9;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    top: 0;
    left: 10px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.cool_input_block input:not(:placeholder-shown) + span.placeholder, 
.cool_input_block input:focus + span.placeholder,
.cool_input_block textarea:not(:placeholder-shown) + span.placeholder, 
.cool_input_block textarea:focus + span.placeholder {
    transform: scale(0.8) translateY(-28px);
    background: var(--color_white);
    color: #B9B9B9;
    font-weight: 500;
    white-space: nowrap;
}

.cool_input_block_select span.placeholder {
    transform: scale(0.8) translateY(-28px);
    background: var(--color_white);
    color: #B9B9B9;
    font-weight: 500;
}

.cool_input_block input:focus, .cool_input_block textarea:focus {
    color: #1C1C1C;
    border-color: #B9B9B9;
}

.cool_input_block input:focus + span.placeholder, .cool_input_block textarea:focus + span.placeholder {
    color: #B9B9B9;
}

.cool_input_block input::placeholder, .cool_input_block textarea::placeholder {
    color: transparent;
    opacity: 0;
}

.cool_input_block input:-ms-input-placeholder, .cool_input_block textarea:-ms-input-placeholder {
    color: transparent;
    opacity: 0;
}

.cool_input_block input::-ms-input-placeholder, .cool_input_block textarea::-ms-input-placeholder {
    color: transparent;
    opacity: 0;
}

.cool_input_block .after_placeholder {
    position: absolute;
    margin: 11px 0;
    padding: 0 4px;
    color: #637A9A;
    display: flex;
    align-items: center;
    font-size: 15px;
    top: 0;
    left: 10px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
    display: none;
}

.cool_input_block input:focus .after_placeholder {
    display: block;
}

.cool_input_block textarea {
    width: 100%;
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    color: #1C1C1C;
    width: 100%;
    padding: 15.25px 10px;
    border-radius: 10px;
    border: 1px solid #B9B9B9;
}

span.input_svg_before {
    position: absolute;
    margin: 15px 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    top: 0;
    left: 5px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
}

.cool_input_block_date span.placeholder {
    left: 35px;
}

.cool_input_block_date input {
    padding: 15.25px 10px 15.25px 30px;
}

.cool_input_block_date input:not(:placeholder-shown) + span.placeholder, .cool_input_block_date input:focus + span.placeholder, .cool_input_block_date textarea:not(:placeholder-shown) + span.placeholder, .cool_input_block_date textarea:focus + span.placeholder {
    transform: scale(0.8) translateY(-28px) translateX(-32px);
}

.tswitch_container {
    position: relative;
}

.tswitch_container label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0px;
    font-weight: 500;
    font-size: 14px;
    width: fit-content;
}

.tswitch_container label > input {
    display: none;
}

.tswitch_container label .tswitch_val {
    color: #1C1C1C;
    display: inline-block;
    margin-left: 10px;
}

.tswitch_container label .tswitch_val .tswitch_unchecked {
    color: var(--color_1);
}

.tswitch_container label .tswitch_val .tswitch_checked {
    display: none;
    color: #5DB24C;
}

.tswitch_container label i {
    display: inline-block;
    width: 50px;
    height: 30px;
    border-radius: 20px;
    vertical-align: middle;
    transition: 0.25s 0.09s;
    position: relative;
    background: var(--color_1);
}

.tswitch_container label i:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  transition: 0.15s;
}

.tswitch_container label > input:checked + i {
    background-color: #5DB24C;
}

.tswitch_container label > input:disabled + i {
    background: #bbbbbb;
}

.tswitch_container label > input.tswitch_checkbox_ob:checked + i {
    background-color: #EB4D38;
}

.tswitch_container label > input.tswitch_checkbox_ob:checked + i + .tswitch_val .tswitch_checked,
.tswitch_container label > input.tswitch_checkbox_ob:checked + i + .tswitch_val .tswitch_unchecked {
    color: #EB4D38;
}

.tswitch_container label > input:checked + i:after {
    transform: translateX(20px);
}

.tswitch_container label > input:checked + i + .tswitch_val .tswitch_checked {
    display: inline-block;
}

.tswitch_container label > input:checked + i + .tswitch_val .tswitch_unchecked {
    display: none;
}

.tooltip-inner {
/*
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
*/
    min-width: 200px;
    text-align: left;
}

.info_small a {
    color: #4038ea;
    text-decoration: none;
    display: block;
    width: 15px;
    height: 15px;
    border: 1.5px solid #4038ea;
    line-height: 13px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    border-radius: 100px;
}

.info_small.info_abspos_topright {
    position: absolute;
    top: 0;
    right: 0;
}

.input100 {
    width: 100%;
}

input.pretty_checkbox[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

input.pretty_checkbox[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: 25px;
    color: inherit;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-align: left;
    margin-bottom: 10px;
    font-size: 14px;
}

input.pretty_checkbox[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #1C1C1C;
    position: absolute;
    left: 0;
    top: 2px;
    opacity: 1;
    border-radius: 4px;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input.pretty_checkbox[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

label.container_checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 600;
    font-size: 14px;
}

.container_checkbox input {
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
    opacity: 0;
}

.container_checkbox .checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #FFFFFF;
    border: 1px solid #1C1C1C;
    border-radius: 4px;
}

.container_checkbox:hover input ~ .checkmark {
    background-color: #1C1C1C;
}

.container_checkbox input:checked ~ .checkmark {
    background-color: #1C1C1C;
    border: 1px solid #1C1C1C;
}

.container_checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container_checkbox input:checked ~ .checkmark:after {
    display: block;
}

.container_checkbox .checkmark:after {
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.optin-container, .checkbox-container {
    margin-top: 5px;
    margin-bottom: 10px;
}

/**********************************************/
/**********************************************/
/*                  MODALS                    */
/**********************************************/
/**********************************************/

.cds_title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--color_1);
}

.section_modal {
    background-color: var(--color_white);
    border-radius: 15px;
    padding: 15px;
    position: relative;
    margin-bottom: 15px;
}

.modal-backdrop {
    background-color: #172054;
}

/**********************************************/
/**********************************************/
/*                CONNEXION                   */
/**********************************************/
/**********************************************/

.connexion_container {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
}

.login_container {
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.login_container_in {
    width: 350px;
}

.login_logo {
    margin-bottom: 60px;
}

.page_connexion_container h1 {
    font-size: 30px;
}

.btn_connexion, .btn_connexion:active, .btn_connexion:visited, .btn_connexion:focus {
    padding: 13.75px 20px;
}

.idb_login .cool_input_block input {
    font-size: 16px;
    padding: 14.25px 10px;
}

span.password_showhide {
    position: absolute;
    top: 0;
    right: 10px;
    height: 49px;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.idb_login .cool_input_block input:not(:placeholder-shown) + span.placeholder + span.password_showhide, .idb_login .cool_input_block input:focus + span.placeholder + span.password_showhide {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.login_pic {
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-color: #4038ea;
}

.row_ip_codes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
}

.row_ip_codes input {
    font-size: 18px;
    font-weight: bold;
    color: var(--color_1);
    width: 50px;
    text-align: center;
    background-color: var(--color_white);
    border: 1px solid var(--color_1);
    padding: 12.5px 5px;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.row_ip {
    display: none;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.alert-success {
    color: var(--color_1);
    background-color: #e6e5fd;
    border-color: var(--color_1);
}

.alert-danger {
    color: #EB4D38;
    background-color: #fdeae7;
    border-color: #EB4D38;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.modal_add_projet_title {
    font-size: 32px;
    font-weight: bold;
    color: #4038ea;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    color: #1C1C1C;
    opacity: 0.4;
    display: block;
}

.modal_title {
    color: #4038ea;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

select.inputbb {
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-size: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5.695' viewBox='0 0 10 5.695'%3E%3Cpath d='M17.661,22.911a.646.646,0,0,1-.242-.044.671.671,0,0,1-.22-.154l-4.359-4.359a.606.606,0,0,1-.165-.473.677.677,0,0,1,.187-.473.552.552,0,0,1,.473-.187.828.828,0,0,1,.451.209L17.661,21.3l3.875-3.875a.719.719,0,0,1,.473-.2.521.521,0,0,1,.473.2.485.485,0,0,1,.187.462.857.857,0,0,1-.209.484l-4.337,4.337a.671.671,0,0,1-.22.154.646.646,0,0,1-.242.044Z' transform='translate(-12.674 -17.215)' fill='%234038ea'%3E%3C/path%3E%3C/svg%3E");
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 10px 25px 10px 20px;
    border: 2px solid #4038ea;
    border-radius: 10px;
    color: #1C1C1C;
}

select.inputbb::-ms-expand{
    display: none;
}

/****************************************/
/************* SINGLE PROJET ************/
/****************************************/

.maquette_cont {
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #D9D9D9;
    position: relative;
}

.progress_bar_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    z-index: 2;
}

.maquette_contimg {
    width: 100%;
    padding-top: 50%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #4038ea;
}

.maquette_infos {
    padding: 15px;
    border-top: 1px solid #D9D9D9;
    position: relative;
}

.maquette_infotop, .maquette_infobot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a.maquette_islink {
    display: block;
    text-decoration: none;
}

.maquette_infotitre {
    font-size: 16px;
    font-weight: bold;
    color: #25385E;
    max-width: 296px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.maquette_infobot {
    color: #637A9A;
    font-size: 13px;
    margin-top: 10px;
}

.maquette_date {
    font-weight: 400;
}

.maquette_bot_actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 78px;
    background-color: rgba(255, 255, 255, 0.93);
    display: none;
}

.maquette_infoactions {
    cursor: pointer;
}

.maquette_infoactions svg {
    vertical-align: middle;
}

.maquette_infoactions:hover svg path {
    fill: #25385E;
}

.maquette_bot_actionsin {
    padding: 15px;
}

.maquette_bot_actionsclose {
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    z-index: 2;
}

.maquette_copy_link_container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maquette_copy_link {
    transition: 0.2s all ease-in-out;
    overflow: hidden;
    padding: 0;
    border: 1px solid;
}

.maquette_copy_link svg {
    display: inline-block;
    margin-right: 8px;
    vertical-align: text-top;
}

.maquette_copy_linkbtn_cont {
    position: relative;
    height: 40px;
    width: 240px;
    text-align: center;
}

span.maquette_copy_linkbtn_normal, span.maquette_copy_linkbtn_copied {
    display: block;
    text-align: center;
    line-height: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 0.2s all ease-in-out;
}

span.maquette_copy_linkbtn_copied {
    opacity: 0;
    top: 100%;
    color: white;
    background-color: #0075EB;
}

.maquette_copy_link.copied .maquette_copy_linkbtn_normal {
    top: -100%;
}

.maquette_copy_link.copied .maquette_copy_linkbtn_copied {
    top: 0%;
    opacity: 1;
    color: white;
}

.btn_delete_maqsolo_cont {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-size: 12px;
}

.btn_delete_maqsolo, .btn_delete_projet {
    justify-content: center;
    color: #ef5b5b;
    display: none;
    cursor: pointer;
}

.btn_delete_maqsolofirst, .btn_delete_projetfirst {
    color: #25385E;
    justify-content: center;
    cursor: pointer;
}

.btn_delete_projetsolo_cont {
    font-size: 12px;
}

.proposition_upload {
    height: 100%;
}

.image_upload_content {
    display: none;
    text-align: center;
    position: relative;
}

.image_upload_input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    left: 0;
    top: 0;
}

.image_upload_wrap {
    border: 1px dashed #4038ea;
    position: relative;
    border-radius: 10px;
    text-align: center;
}

.image_upload_wrap h3 {
    pointer-events: none;
    font-size: 15px;
    color: #4038ea;
    padding: 30px 10px;
}

.image_upload_image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.remove_image {
    top: -30px;
    right: 0;
    position: absolute;
    cursor: pointer;
}

.proposition_upload .image_upload_wrap {
    height: 100%;
    padding: 88.75px 30px;
}

.proposition_upload .drag_text {
    height: 100%;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.proposition_upload .image_upload_wrap h3 {
    padding-bottom: 0;
    padding-top: 20px;
}

.new_propositions_loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 256px;
    right: 0;
    background-color: rgb(242 244 249 / 80%);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    display: none;
}

input.maquette_infotitre {
    background: #0000;
    box-shadow: none;
    resize: none;
    padding: 0;
    border: none;
    overflow: hidden;
    width: calc( 100% - 30px );
}

.projet_solo_menucont {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d7d5f5;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}

svg.projet_solo_menucontsvg {
    display: block;
}

.projet_solo_btns_cont {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}

/****************************************/
/****************************************/
/* APERCU DES MAQUETTES
/****************************************/
/****************************************/

.page_standard.page_apercumaquette {
    padding-top: 0;
    padding-left: 0;
}

.full_img {
    width: 100%;
}

/* MAQUETTE > PREVIEW > MENU */

#maquette_actions {
    position: fixed;
    bottom: 0;
    left: 25px;
    right: 25px;
    z-index: 9;
    pointer-events: none;
}

.maquette_actions_inner {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.maquette_actions_innerleft {
    display: flex;
    align-items: center;
}

#maquette_actions .maquette_actions_isaction {
    cursor: pointer;
    pointer-events: all;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

#maquette_actions .maquette_actions_isaction:hover {
    background-color: rgb(255 255 255 / 100%);
}

#maquette_actions .maquette_name_proposition {
    background-color: rgb(255 255 255 / 80%);
    padding: 11.75px 14px;
    border-radius: 100px;
    font-weight: bold;
}

#maquette_actions .maquette_settings_cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 5px;
    border-radius: 100px;
    background-color: rgb(255 255 255 / 80%);
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

#maquette_actions .maquette_share_cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 5px;
    border-radius: 100px;
    background-color: rgb(255 255 255 / 80%);
    border: 1px solid #F5F5F5;
    margin-left: 10px;
    margin-right: 10px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

#maquette_actions .maquette_screensonoff {
    background-color: rgb(255 255 255 / 80%);
    padding: 10px 14px;
    border-radius: 100px;
    font-weight: bold;
    margin-left: 10px;
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}

#maquette_actions .maquette_commentsonoff, #maquette_actions .maquette_commentsonoff_no {
    background-color: rgb(255 255 255 / 80%);
    padding: 7px 7px;
    border-radius: 100px;
    font-weight: bold;
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    max-width: 46px;
    overflow: hidden;
    width: auto;
    white-space: nowrap;
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    font-size: 16px;
    cursor: pointer;
}

#maquette_actions .maquette_prev, #maquette_actions .maquette_next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 5px;
    background-color: rgb(255 255 255 / 80%);
    border-radius: 100px;
    margin-left: 10px;
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.proposition_comments_borders {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    border: 10px solid #F84B69;
    display: none;
    text-align: center;
    z-index: 9;
    pointer-events: none;
}

.comments_on .proposition_comments_borders {
    display: block;
}

.proposition_comments_borders_txt {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #F84B69;
    padding: 0px 8px 8px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0px 0px 10px 10px;
    color: #FFFFFF;
}

.proposition_comments_nbcont {
    position: absolute;
    background-color: #f84b69;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0px 10px 8px 0px;
    border-bottom-right-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    pointer-events: all;
}

.proposition_comments_close {
    position: absolute;
    background-color: #f84b69;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 10px 10px;
    border-bottom-left-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    pointer-events: all;
}

.proposition_comments_borders_gooff {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #ee5b5b;
    padding: 5px 5px 10px 10px;
}

.proposition_comments_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: crosshair;
    display: none;
}

.comments_on .proposition_comments_container {
    display: block;
}

.maquette_commentsonoff, .maquette_commentsonoff_no {
    padding: 9.25px 11.5px;
    overflow: hidden;
    width: auto;
    max-width: 40px;
    white-space: nowrap;
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    font-size: 14px;
    cursor: pointer;
}

.maquette_commentsonoff:hover, .maquette_commentsonoff_no:hover {
    max-width: 180px;
}

.maquette_actions_innerright {
    display: flex;
}

.maquette_commentsonoff span, .maquette_commentsonoff_no span {
    padding-left: 12px;
    padding-right: 5px;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.maquette_commentsonoff:hover span, .maquette_commentsonoff_no:hover span {
    opacity: 1;
}

.maquette_commentsonoff svg, .maquette_commentsonoff_no svg {
    display: inline-block;
    vertical-align: middle;
}

.hotspot_commentaire {
    position: absolute!important;
    width: 40px;
    height: 40px;
}

.ishotspot {
    position: absolute;
    background-color: #f84b69;
    width: 40px;
    font-size: 15px;
    padding: 10.75px;
    text-align: center;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: bold;
    cursor: grab;
    opacity: 0.8;
}

.ishotspot.ison, .ishotspot:hover {
    opacity: 1;
}

.comcontainer {
    width: 350px;
    position: absolute;
    left: 55px;
    background-color: #FFFFFF;
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    padding: 10px;
    display: none;
}

.comcontainer.isvisible {
    display: block;
    z-index: 2;
    cursor: auto;
}

.comcontainer[data-posx="left"][data-posy="top"] {
    left: auto;
    right: 55px;
}

.comcontainer[data-posx="left"][data-posy="bottom"] {
    left: auto;
    right: 55px;
    bottom: 0;
}

.comcontainer[data-posx="right"][data-posy="bottom"] {
    bottom: 0;
}

.commentaire_solo_avatar img {
    width: 34px!important;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #25385E;
}

.commentaire_solo_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.commentaire_solo_name {
    font-size: 12px;
    font-weight: bold;
    margin-left: 55px;
}

.commentaire_solo_date {
    font-size: 11px;
    color: #25385E;
    opacity: 0.7;
    pointer-events: none;
}

.commentaire_actions {
    opacity: 0;
    pointer-events: none;
    position: relative;
    line-height: 1;
}

.commentaire_solo:hover .commentaire_actions {
    opacity: 1;
    pointer-events: auto;
}

/*
.commentaire_solo_cont {
    display: flex;
}
*/

.commentaire_solo_avatar, .commentaire_solo_txt {
    display: inline-block;
    vertical-align: text-top;
}

.commentaire_solo_txt {
    font-size: 14px;
    background-color: #F0F2F8;
    border-radius: 10px;
    padding: 8px 10px;
    margin-left: 6px;
    width: calc( 100% - 45px );
    border-radius: 10px;
}
    
.comcontainer .commentaire_solo_name, .comcontainer .commentaire_actions {
    margin-left: 45px;
}

.commentaire_edit_btn, .commentaire_del_btn {
    display: inline-block;
    margin-right: 10px;
    opacity: 0.5;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.commentaire_edit_btn:hover, .commentaire_del_btn:hover {
    opacity: 1;
}

.btn_delete_com {
    color: #ef5b5b;
    display: none;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.list_commentaire_form {
    margin-left: 6px;
    width: 100%;
}

.list_commentaire_form_edit {
    width: calc(100% - 45px);
    margin-right: 0;
    display: none;
    vertical-align: top;
}

.list_commentaire_new {
    display: flex;
}

.list_commentaire_form .commentaire_new_textarea {
    font-size: 14px;
    border: 0;
    background-color: #f0f2f7;
    height: auto;
    min-height: 34px;
    border-radius: 10px;
    padding: 8px 10px;
    pointer-events: all;
}

.btn_comedit_cancel {
    display: inline-block;
    margin-left: 15px;
    opacity: 0.5;
    cursor: pointer;
    font-size: 12px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn_comedit_cancel:hover {
    opacity: 1;
}

.btn_submit_commentaire_edit {
    border: none;
    background-color: transparent;
    padding: 0;
    color: #f84b69;
    font-size: 12px;
    font-weight: 500;
}

.btn_submit_commentaire_new {
    float: right;
    display: none;
}

label.container_checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 600;
}

.container_checkbox input {
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
    opacity: 0;
}

.container_checkbox .checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #ffffff;
    border: 1px solid #25385E;
    border-radius: 2px;
}

.container_checkbox:hover input ~ .checkmark {
    background-color: #25385E;
}

.container_checkbox input:checked ~ .checkmark {
    background-color: #25385E;
    border: 1px solid #25385E;
}

.container_checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container_checkbox input:checked ~ .checkmark:after {
    display: block;
}

.container_checkbox .checkmark:after {
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.masquer_commentaire_checkin label {
    font-size: 12px;
}

textarea.commentaire_new_textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #25385E;
    border-radius: 10px;
    width: 100%;
    resize: none;
    min-height: 80px;
    padding: 10px;
}

.btn_red, .btn_red:active, .btn_red:visited, .btn_red:focus {
    background-color: #f84b69;
    border-radius: 10px;
}

.hotspot_new .masquer_commentaire_checkin {
    display: none;
}

.commentaire_soloin {
    margin-bottom: 10px;
}

label.container_switch {
    display: inline-block;
    width: 40px;
    height: 20px;
    transform: translateY(50%);
    position: relative;
}

label.container_switch input {
    display: none;
}

.resolu_slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px #f84b69;
    cursor: pointer;
    border: 2px solid #f84b69;
    overflow: hidden;
    transition: 0.4s;
    background-color: #f84b69;
    margin-right: 5px;
}

.resolu_slider:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 30px;
    transform: translateX(-14px);
    transition: 0.4s;
}

label.container_switch input:checked + .resolu_slider:before {
    transform: translateX(14px);
    background-color: #FFFFFF;
}

label.container_switch input:checked + .resolu_slider {
    box-shadow: 0 0 0 2px #32cd32;
    background-color: #32cd32;
    border: 2px solid #32cd32;
}

.com_form_bottom {
    margin-left: -38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.masquer_commentaire_checkin {
    font-size: 14px;
    font-weight: 500;
}

.hotspot_commentaire.hotspot_resolved {
    display: none;
}

.hotspot_commentaire.hotspot_resolved .ishotspot {
    background-color: #32cd32;
}

.maquette_prev, .maquette_next {
    padding: 11px;
    width: 40px;
    text-align: center;
}

.maquette_prev svg, .maquette_next svg {
    display: block;
    vertical-align: middle;
    margin: auto;
}

.maquette_screensonoff {
    display: flex;
    align-items: center;
}

.maquette_screensonoff svg {
    margin-right: 8px;
}

.maquette_screensonoff .propositions_counter {
    margin-left: 6px;
}

a.gotomaquette {
    text-decoration: none;
}

.maquette_forbiddencont {
    height: 100vh;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

#modal_preview_screens .modal-dialog {
    width: 100vw;
    height: auto;
    min-height: calc( 100vh - 30px );
    margin: auto;
    padding: 15px;
    border-radius: 10px;
}

#modal_preview_screens .modal-content {
    height: auto;
    min-height: calc( 100vh - 30px );
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

#modal_preview_screens .modal-header .close, #modal_identification .modal-header .close {
    opacity: 1;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

#modal_preview_screens .modal-body {
    position: relative;
    padding: 15px;
    background-color: #F6F7FC;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.current .maquette_cont {
    border: 1px solid #EF5B5B;
}

.modal-open {
    overflow: hidden!important;
}

#modal_identification .modal-dialog {
    max-width: 460px;
}

.avatar_invite {
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 50%;
    border: 2px solid #25385E;
    text-align: center;
    background-color: #25385E;
    color: #FFFFFF;
}

.mobile_inner {
    max-width: 420px;
/*    height: 855px;*/
    margin: auto;
    position: relative;
    margin-top: 30px;
    padding-top: 60px;
    padding-left: 22px;
    padding-right: 23px;
    padding-bottom: 24px;
}

.mobile_inner:before {
    content: '';
    position: absolute;
    background-image: url(img/iphoneX.png);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.mobile_in {
    overflow: scroll;
    pointer-events: all;
/*    height: 772px;*/
}

.format_mobile .proposition_comments_container {
    width: 377px;
    margin: auto;
}

#maquette_settings_popin, #maquette_share_popin, #maquette_comments_popin {
    display: none;
    position: fixed;
    width: 240px;
    bottom: 75px;
    left: 25px;
    background-color: #FFFFFF;
    z-index: 9;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #F5F5F5;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

#maquette_settings_popin.showme, #maquette_share_popin.showme, #maquette_comments_popin.showme {
    display: block;
}

#maquette_share_popin {
    width: 273px;
}

#maquette_comments_popin {
    top: 45px;
}

.maquette_comments_popin_inner {
    max-height: calc(100vh - 170px);
    overflow: hidden;
    overflow-y: scroll;
}

.maquette_comments_popin_header .close {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 1;
}

.maquette-commentaire-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1.5 / 1; /* Ratio personnalisé */
    margin-bottom: 20px;
    overflow: hidden;
}

.zoom-container {
    width: 100%; /* Zoom en fonction de la taille du conteneur */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.commentaire-marqueur {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 2px solid white;
    cursor: pointer;
}

.commentaire-details {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
    display: none; /* Masquer par défaut */
}

.commentaire:hover .commentaire-details {
    display: block; /* Afficher au survol */
}


.maquette_settings_cont.ison svg path {
    stroke: #f84b69;
}

.maquette_share_cont.ison svg g {
    fill: #f84b69;
}

.blurme {
    filter: blur(12px);
    -webkit-filter: blur(12px);
}

.apercumaquette_inner {
    margin: auto;
}

.inputbb {
    background-color: #FFFFFF;
    border: 2px solid #1C1C1C;
    padding: 8px;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.maquette_settings_colcont {
    position: relative;
}

.maquette_settings_colcircle {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    background-color: #FFFFFF;
    border: 1px solid #1C1C1C;
    border-radius: 100px;
}

.maquette_settings_picker {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    background-color: #1C1C1C;
    border-radius: 0px 5px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#maquette_settings_hex {
    padding: 8px 40px 8px 40px;
}

.maquette_settings_widthcont {
    position: relative;
}

.maquette_settings_widthpx {
    position: absolute;
    right: 10px;
    top: 8px;
    font-weight: bold;
}

#maquette_settings_width {
    padding-right: 33px;
}

/******************************/
/************* 404 ************/
/******************************/

.page_accueil_in {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_accueil_in img {
    width: 200px;
}

.page_apercu_nothing {
    background-color: #4038EA;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffcc02;
}

/******************************/
/******** MEDIA QUERIES *******/
/******************************/

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    
}