@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: "Harabara Mais";
    src: url("../fonts/harabara-mais.otf") format("opentype");
}

/* Override Bootstrap : à priori plus propre que d'overrider les éléments body etc. */
:root {
    --bs-font-sans-serif: 'Open Sans', Arial, sans-serif;
    --bs-body-font-size: .9rem;
    /*--bs-body-bg: #f7f7f7;*/
}
.fs-6 {
    font-size: var(--bs-body-font-size) !important;
}
h1, h2, h3, h4, .nav-link, .tabContainer .btnWithIcon, .popover {
    font-family: Asap;
}
html {
    /*scroll-behavior: auto !important;*/ /* smooth par défaut mais gênant avec MaintainScrollPositionOnPostback */
}
.container {
    display: flex;
    flex-direction: column;
    max-width: 1230px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.btn {
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-color: #1D388B;
    /*--bs-btn-border-color: #0066a3;*/
    --bs-btn-border-color: #0073AD;
    --bs-btn-hover-border-color: #1D388B;
    --bs-btn-active-border-color: #1D388B;
    --bs-btn-border-radius: .25rem;
    --bs-btn-disabled-opacity: 0.4;
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.btn-sm {
    --bs-btn-font-size: .85rem;
}
.btn-primary {
    --bs-btn-bg: #2ba7e5;
    --bs-btn-color: white;
    --bs-btn-hover-bg: #2097ce;
    --bs-btn-active-bg: #2097ce;
}
.btn-secondary {
    --bs-btn-bg: white;
    --bs-btn-hover-bg: #ebebeb;
    /*--bs-btn-hover-color: #0073AD;*/
    --bs-btn-hover-color: #0a58ca;
    --bs-btn-active-bg: white;
    --bs-btn-active-color: #0a58ca;
    --bs-btn-disabled-bg: white;
    --bs-btn-disabled-color: #6c757d;
}
.input-group .btn-secondary {
    --bs-btn-border-color: var(--bs-border-color);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-body-bg);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: #0a58ca;
    --bs-dropdown-font-size: inherit;
}
.dropdown-item {
    font-weight: 500;
    padding: 5px 20px !important;
}
.dropdown-item.active {
    font-weight: 700;
}
.link-primary {
    font-size: 1rem;
    font-weight: 600;
    align-self: center;
}
a.btn[disabled] { /* la balise a ne gère pas :disabled */
    cursor: inherit;
    opacity: var(--bs-btn-disabled-opacity);
}
a.btn.btn-primary[disabled]:hover {
    background-color: #2097ce;
}
.modal {
    --bs-modal-header-padding: .5rem 1rem;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 0;
}
.modal-footer {
    justify-content: space-evenly;
    column-gap: 1.5rem;
}
.popover {
    max-width: 600px;
}
.bi-pencil, .bi-cart3, .bi-box-arrow-in-right, .bi-box-arrow-up-right, .bi-cloud-upload {
    -webkit-text-stroke: .25px;
}
.bi-save, .bi-download, .bi-arrow-clockwise, .bi-search, .bi-image, .bi-ban {
    -webkit-text-stroke: .5px;
}
.bi.bi-chevron-left, .bi.bi-chevron-right, .bi.bi-chevron-down, .bi.bi-check-lg, .bi.bi-x-lg, .bi.bi-arrows-angle-expand, .bi.bi-arrows-angle-contract {
    -webkit-text-stroke: 1px;
}

.navbar {
    --bs-navbar-padding-x: 1.2rem;
    --bs-navbar-padding-y: 0;
    --bs-navbar-brand-padding-y: .6rem;
    --bs-navbar-brand-margin-end: 0;
    /*--bs-navbar-nav-link-padding-x: 1rem;*/ /* Pour avoir comme --bs-dropdown-item-padding-x */
    background-color: white;
    /*border-bottom: 1px solid #e9e9e9;*/
    border-bottom: 1px solid #d9d9d9;
}
.navbar-collapse {
    flex-grow: inherit;
    text-transform: uppercase;
}
.navbar > .container-fluid {
    align-items: stretch;
}
.navbar-collapse {
    align-items: stretch;
}
.nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    --bs-nav-link-font-weight: 500;
    --bs-nav-link-font-size: .95rem;
}
.nav-link.nav-link-selected {
    color: #0073AD;
    font-weight: bold;
}
.navbar-nav .dropdown {
    position: static; /* Pour que les .dropdown-menu puissent avoir une largeur de 100% */
}
.navbar-nav .dropdown-menu {
    top: calc(100% - 2px);
    left: 0;
    padding-top: 0;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    font-size: .9rem;
}
.myAccountDropDown .dropdown-menu {
    top: calc(100% - 2px);
    border-radius: 0;
}
.myAccountDropDown .shortName {
    /*color: #0073AD;*/
}
@media (min-width: 1200px) {
    .navbar .myAccountDropDown {
        margin-left: 220px;
    }
    .navbar-nav .nav-link {
        text-decoration: underline;
        text-underline-offset: .6rem;
        text-decoration-color: white;
        text-decoration-thickness: 0;
        transition: .3s;
    }
    .navbar-nav .nav-link.show {
        color: rgba(0, 0, 0, .8);
        text-decoration-color: rgba(0, 0, 0, .8);
        text-decoration-thickness: 1.5px;
    }
    .navbar .dropdown-menu {
        display: inherit;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
        transition-property: transform, opacity;
        transition-duration: .2s;
    }
    .navbar .dropdown-menu.show {
        opacity: 100;
        transform: scaleY(1);
    }
    .navbar .myAccountDropDown .dropdown-menu {
        transition: none;
    }
    .navbar .myAccountDropDown .dropdown-menu.show {
        transition-property: transform, opacity;
        transition-duration: .2s;
    }
    .navbar-nav .dropdown-item {
        padding-top: .3rem;
        padding-bottom: .3rem;
    }
}
@media (max-width: 1199.98px) {
    .navbar-nav .dropdown-menu {
        border-bottom: none;
    }
}
@media (max-width: 575.98px) {
    .navbar {
        --bs-navbar-padding-x: 0;
    }
}
@media (max-width: 410px) {
    .navbar-brand {
        width: 55px;
    }
}
.form-control {
    padding: .2rem .4rem;
    font-size: inherit;
}
.form-select {
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .4rem;
    font-size: inherit;
}
.searchInput {
    width: 250px !important;
}
.carousel-control-next, .carousel-control-prev {
    width: 5%;
}
/*.carousel-item {
    padding-left: 5%;
    padding-right: 5%;
}*/
.shape3dCarousel {
    height: calc(100vh - 100px);
}
@media (max-width: 767.98px) {
    .shape3dCarousel {
        height: calc(100vh - 150px);
    }
}
.shape3dCarousel .carousel-inner, .shape3dCarousel .carousel-item, .shape3dCarouselImage {
    height: 100%;
}
.shape3dCarouselImage {
    background-size: cover;
    background-position: center;
}
.shape3dCarouselTitle {
    position: absolute;
    z-index: 1;
    bottom: 3rem;
    left: 5rem;
}
.shape3dCarouselTitle h1 {
    font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
    .shape3dCarouselTitle {
        left: 2rem;
    }
}
.shape3dCarouselTitle a {
    margin-top: 1rem;
}
.shape3dCarousel .carousel-indicators {
    left:inherit;
    margin-bottom: -1.5rem;
    margin-right: 2rem;
    max-width: calc(50% - 5rem);
}
.scrollDown {
    scroll-margin: calc(70px - 3rem); /* 70px pour l'en-tête */
    position: absolute;
    z-index: 3;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #f8f8f8;
    bottom: -1.5rem;
    left: calc(50% - 1.5rem);
    box-shadow: 0 2px 10px #36363626;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #0073AD;
}
.shape3dXScrollAnchor {
    scroll-margin-top: 100px;
}
.homeBlocksContainer .myPanel {
    padding: 1rem;
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.homeBlocksContainer h4:not(:first-child) {
    margin-top: 1rem;
    margin-bottom: 0;
}

html, body {
    height: 100%; /* Pour que le footer aille toujours jusqu'en bas */
}
body > form[name="aspnetForm"] {
    min-height: 100%; /* Si on met height: 100%; alors le menu disparaît sur les pages longues */
    display: flex;
    flex-direction: column;
}
input[type=checkbox]:not([disabled]), input[type=checkbox]:not([disabled]) + label, input[type=radio]:not([disabled]), input[type=radio]:not([disabled]) + label {
    cursor: pointer;
}
input[type=text][disabled] {
    background-color: #FCFCFC;
}
h1 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
h2 {
    font-size: 1.5rem;
    font-weight: 600; 
    margin-bottom: .75rem;
}
h2:not(:first-child) {
    margin-top: 1rem;
}
h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
h3:not(:first-child) {
    margin-top: .5rem;
}
h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
h4:not(:first-child) {
    margin-top: .5rem;
}
h1 + h3, h1 + h4 {
    margin-top: .5rem;
}
ul {
    margin-bottom: 0;
}
img + ul, ul + img {
    margin-top: 1rem;
}
/*input[type=checkbox] + label {
    vertical-align: top;
}
input[type=checkbox] + label {
    display: inline;
}*/
footer {
    flex-grow: 1;
    padding: 1.25rem;
    background-color: #212121;
    color: white;
    text-align: center;
}
.fw-600 {
    font-weight: 600;
}
.btn:not(.btn-round) .bi, .btn:not(.btn-round) span.material-icons-round {
    margin-right: .5rem;
}
.btn .material-icons-round {
    vertical-align: middle;
}

.shape3dXMenu {
    position: sticky;
    top: 70px;
    height: 50px;
    z-index: 1019;
    background-color: white;
    border-bottom: 1px solid #d9d9d9;
}
.shape3dXMenu > div {
    height: 100%;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    max-width: 700px;
    margin: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    text-align: center;
}
.shape3dXMenu a {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.675);
    font-weight: 500;
    text-decoration: none;
}
.shape3dXMenu a.active {
    font-weight: 700;
    color: #0073AD;
}
.shape3dXMenu a:hover {
    color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 575.98px) {
  .shape3dXMenu a {
    font-size: .75rem;
  }
}
@media (max-width: 575.98px) {
  .shape3dXMenu a {
    font-size: .75rem;
  }
}

.orderStep > .bi, .myPanel, .myTable {
    /*background-color: #f2f2f2;*/
    background-color: #f8f8f8;
    /*border: 1px solid #e9e9e9;*/
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 10px -3px #36363626;
}
.orderStepsContainer {
    max-width: 100%;
    align-self: center;
	display: flex;
	/*justify-content: center;*/
    align-items: start;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}
.orderStep {
	display: flex;
	flex-direction: column;
    align-items: center;
	color: #0073AD;
    text-decoration: none;
}
.orderStep > .bi {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	text-align: center;
	padding-top: .5rem;
	font-size: 1.5rem;
	margin-bottom: .3rem;
}
a.orderStep:hover {
	text-decoration: none;
}
.orderStepSeparator {
	width: 10rem;
	margin: 1.5rem .5rem 0 .5rem;
	border-top: 1px solid gray;
}
.orderStep.orderStepSelected {
	color: #0073AD;
}
.orderStep.orderStepSelected > .bi {
	color: white;
}
.orderStep.orderStepSelected > .bi {
	/*background-color: #1581A5;*/
	/*background-color: #2097ce;*/
	background-color: #2ba7e5
}
.orderStepSeparatorComplete {
	border-color: #0073AD;
}
.orderStep.orderStepUncomplete {
	color: gray;
}

.orderItem.myPanel {
    padding: .75rem;
}
@media (min-width: 576px) {
    .orderItem.myPanel {
        width: 14rem;
    }
    .orderItem.orderItemCloud {
        width: 20rem;
    }
}
.orderItem.orderItemLite {
    opacity: .66;
    transition: opacity .3s;
}
.orderItem.orderItemLite:hover {
    opacity: 1;
}
.orderItem .nbComputers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: gray;
}
.orderItem .nbComputers input {
    width: 3.5rem;
}
.orderItem input[type=radio] {
    display: none;
}

.orderSummary {
    padding: .6rem;
    border-radius: .6rem;
}
.orderFormule {
    opacity: .8;
    margin-top: 1rem;
    margin-bottom: 0;
    /*height: 3.5rem;*/
    height: 3rem;
    padding-left: .6rem;
    padding-right: .6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid lightgray;
    border-radius: .3rem;
    background-color: #FCFCFC;
    transition: background-color 250ms;
}
.orderItem.orderItemLite .orderFormule {
    background-color: white;
}
@media (min-width: 768px) {
    .downloadShape3dX .myPanel {
        width: 800px;
        max-width: 100%;
    }
}
.downloadShape3dX .orderFormule, .downloadShape3dX select, .downloadShape3dX .btn.btn-primary {
    width: 12rem;
    font-weight: 500;
}
.downloadShape3dX select {
    height: 2.25rem;
}
.orderFormule > span {
    text-align: right;
}
.priceCurrency {
    font-size: .8rem;
    font-weight: normal;
}
.orderFormule:hover, .orderItem.orderItemLite .orderFormule {
    opacity: 1;
    background-color: white;
}
.orderItem.myPanel input[type=radio]:checked + .orderFormule { /* .orderItem.myPanel pour pas que ça s'applique dans UCBlankSelector.aspx */
    height: 3.5rem;
}
.orderItem input[type=radio]:checked + .orderFormule, .orderSummary {
    border: 2px solid #219653;
    background-color: white;
}
.orderItem input[type=radio]:checked + .orderFormule {
    opacity: 1;
}
.orderItem input[type=radio]:checked + .orderFormule > span:first-child {
    font-weight: bold;
}
.orderItem input[type=radio]:checked + .orderFormule .price, .orderItem.orderItemLite .price {
    font-weight: 600;
    font-size: 1.25rem;
}
.exchangeRate {
    color: #0073AD;
    /*font-size: .75rem;*/
    font-size: .875em; /* Comme small */
    border-bottom: 1px solid #0073AD;
}
.orderSummary table td {
    vertical-align: top;
}
.orderSummary table td:first-child {
    padding-right: .3rem;
}
.orderSummary table tr:first-child td {
    padding-top: .3rem;
}
.orderSummary table tr:last-child td:first-child {
    padding-top: .4rem;
    /*vertical-align: top;*/
}
.orderSummary table tr:last-child td:last-child {
    padding-top: .3rem;
    font-size: 1rem;
    font-weight: bold;
}

.purchaseOrderContainer > div {
    width: 34.5rem;
    max-width: 100%;
}
.pnlAdresse {
    position: relative;
    width: 34.5rem;
    max-width: 100%;
}
.pnlAdresse table {
    width: 100%;
}
.pnlAdresse table td:first-child {
    white-space: nowrap;
}
.pnlAdresse table td:last-child {
    width: 100%;
}
/*.pnlAdresse input[type=text] {
    color: black;
    background-color: white;*/
    /*width: 12.5rem;*/
/*}*/
.braintree-sheet__content--form .braintree-form__flexible-fields { /* Pas recommandé : voir https://developer.paypal.com/braintree/docs/guides/drop-in/customization */
    display: block;
}
.recurrentPayment * {
    /*color: gray;*/
}
.recurrentPayment input:disabled + label {
    /*cursor: inherit;*/
}
.recurrentPayment input[type=checkbox]:checked + label, .recurrentPayment input[type=checkbox]:checked + label *
    , .recurrentPayment input[type=checkbox]:checked + label + label, .recurrentPayment input[type=checkbox]:checked + label + label * {
    /*color: inherit;*/
    /*opacity: 1;*/
}
#aRequestPaymentMethod {
    width: 100%;
    padding: .75rem;
    background-color: #219653;
    border-color: #219653;
}
#aRequestPaymentMethod[disabled] {
    opacity: .4;
}

.myPanel {
    padding: 1.25rem;
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
}
.myTable {
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: .6rem;
}
.myTable th {
    text-align: center;
    /*background-color: #2097ce;*/
    background-color: #2ba7e5;
}
.myTable th, .myTable th a:not(.btn) {
    font-weight: 600;
    color: white;
}
.myTable td, .myTable th {
    padding: .3rem .5rem;
/*    border-top: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;*/
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
}
.myTable tr:first-child td, .myTable tr:first-child th {
    border-top-width: 0;
}
.myTable td:first-child, .myTable th:first-child {
    border-left-width: 0;
}
.myTable tr:first-child td:first-child, .myTable tr:first-child th:first-child {
    border-top-left-radius: .6rem;
}
.myTable tr:first-child td:last-child, .myTable tr:first-child th:last-child {
    border-top-right-radius: .6rem;
}
.myTable tr:last-child td:first-child {
    border-bottom-left-radius: .6rem;
}
.myTable tr:last-child td:last-child {
    border-bottom-right-radius: .6rem;
}
.myTable a:not(.btn) {
    color: #0073AD;
    font-weight: 500;
    text-decoration: none;
}

.tableau {
    white-space: nowrap;
}
.tableau > tbody > tr > td {
    padding: 3px 7px;
    vertical-align: middle;
    /*border: 1px solid gray;*/
}
.tableau.tableau-lg > tbody > tr > td {
    padding: .75rem .5rem;
}
.tableau > tbody > tr > td.textareaLabel {
    vertical-align: top;
}
.fileInfo.editMode .tableau > tbody > tr > td.textareaLabel {
    padding-top: 8px;
}
.tableau:not(.tableau-lg) > tbody > tr:first-child > td {
    padding-top: 0px;
}
.tableau:not(.tableau-lg) > tbody > tr:last-child > td {
    padding-bottom: 0px;
}
.tableau:not(.tableau-lg) > tbody > tr > td:first-child {
    padding-left: 0px;
}
.tableau:not(.tableau-lg) > tbody > tr > td:last-child {
    padding-right: 0px;
}
.tableau > tbody > tr > td:nth-child(odd) {
    text-align: right;
    color: #696969;
}
.tableau > tbody > tr > td:nth-child(odd):not(:first-child) {
    /*padding-left: 30px;*/
    border-left: 1px solid #DBDBDB;
}

.tableau.surferProfile > tbody > tr > td.align-top {
    padding-top: 15px;
}
.surferProfile div {
    display: flex;
    width: 400px;
    /*font-size: 14px;*/
}
.surferProfile input[type=checkbox] {
    position: absolute;
    clip: rect(0,0,0,0);
}
.surferProfile label {
    flex-grow: 1;
    flex-basis: 0;
    background-color: white;
    color: #696969;
    padding: 4px 10px;
    text-align: center;
    border: 1px solid #dee2e6;
}
.surferProfile input[type=checkbox]:not(:first-child) + label {
    border-left: none;
}
.surferProfile div + div label {
    border-top: none;
}
.surferProfile input[type=checkbox]:checked + label {
    background-color: #1D388B;
    color: white;
}
.surferProfile select[disabled] {
    background-color: transparent;
    padding: 0;
    border: none;
    --bs-form-select-bg-img: "";
}

.myPanelResult {
    align-self: center;
    align-items: center;
}
.myPanelResult > span.bi {
    text-align: center;
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    padding-top: .5rem;
    font-size: 1.4rem;
    color: white;
    background-color: #219653;
}

.videosTutorialsContainer > div.myPanel {
    padding: .5rem;
    width: 560px;
}

.faqContainer {
    border-bottom: 1px solid lightGray;
}
.faqContainer > a:not(:first-child) {
    border-top: 1px solid lightGray;
}

.btnShare {
    width: 45px;
    height: 45px;
    border-color: #d9d9d9;
    border-radius: 50%;
    background-color: lightgray;
    font-size: 1.5rem;
    /*padding: .25rem 0 0 0;*/
    padding: inherit;
    color: black;
}
.btn.btnShare:hover {
    background-color: white;
    border-color: #d9d9d9;
    color: #0073AD;
}
.btnView {
    width: 60px;
    height: 60px;
    border-color: #d9d9d9;
    border-radius: 50%;
    background-color: lightgray;
}
.btnViewSelected {
    background-color: black !important;
    cursor: inherit;
}
.btn.btnView:not(.btnViewSelected):hover {
    background-color: white;
    border-color: #d9d9d9;
    color: #0073AD;
}
.btnViewProfileRail {
    background-image: url("../BoardDesigner/ButtonsImages/OtlProfileRailGrey.png");
}
.btnViewProfileRail.btnViewSelected {
    background-image: url("../BoardDesigner/ButtonsImages/OtlProfileRail.png");
}
.btnView3D {
    background-image: url("../BoardDesigner/ButtonsImages/3D.png");
}
.btnView3D.btnViewSelected {
    background-image: url("../BoardDesigner/ButtonsImages/3DWhite.png");
}

.btnWithIcon {
    color: #1D388B;
    vertical-align: middle;
    display: inline-flex;
    /*align-items: start;*/
    align-items: center;
    border-radius: 5px;
    padding: 5px;
    font-weight: 500;
    text-decoration: none;
}
.btnWithIcon.dropdown-item {
    border-radius: 0;
}
.btnWithIcon:hover {
    color: #0a58ca;
    /*font-weight: 600;*/
}
.btnWithIcon.btnWithIconSecondary:not(:hover) {
    color: #696969;
}
.btnWithIcon:not(.btnWithIconWithoutText) > span:first-child, .btnWithIcon:not(.btnWithIconWithoutText) > i:first-child  {
    margin-right: .5rem;
}
.dropdown-item.btnWithIcon > span:first-child, .dropdown-item.btnWithIcon > i:first-child, .alert > span:first-child {
    margin-right: 1rem
}
button.btnWithIcon, button.bi {
    border-style: none;
    background: none;
}
button.btnWithIcon:hover, button.bi:hover  {
    background: #f8f9fa;
}
.tabContainer {
    display: flex;
}
.tabContainer.nav-tabs {
    border-bottom: none;
}
.tabContainer .btnWithIcon {
    font-size: 1rem;
    flex-grow: 1;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0;
}
.tabContainer .btnWithIcon:not(.active):not(:hover) {
    color: #696969;
}
.tabContainer.nav-tabs .btnWithIcon {
    padding-left: 20px;
    padding-right: 20px;
}
.tabContainer.nav-tabs .btnWithIcon:hover {
    background-color: inherit;
}
.tabContainer:not(.nav-tabs) .btnWithIcon, .tabContainer .tabSeparator {
    border-bottom: 3px solid #DBDBDB;
    background-color: white;
}
.tabContainer:not(.nav-tabs) .btnWithIcon.active {
    background-color: white;
    border-bottom: 3px solid #1D388B;
}
.tabContainer.nav-tabs .btnWithIcon.active {
    background-color: #f8f8f8;
    border-top: 3px solid #1D388B;
}
.details .tabContainer .btnWithIcon.active {
    background-color: #f8f9fa;
}
.tabContainer .btnWithIcon > span.material-icons-round:first-child {
    font-size: 24px;
}
.tabContainer .tabSeparator {
    background-color: white;
    width: 1px;
    flex-shrink: 0;
    background: linear-gradient(white, 25%, #DBDBDB, 25%, #DBDBDB 75%, white 75%);
}
.tabContainer + .myPanel {
    border: none;
    border-top-left-radius: 0;
}

.btn-round {
    font-size: 1.2rem;
    /*padding: 0.1rem 0 0 .3rem;*/
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}
.btn-resize {
    font-size: 1rem;
    /*padding: 0.1rem 0 0 .3rem;*/
}

.panelRegister {
    background-color: #4AA2CE;
    border-top-left-radius: .6rem;
    border-bottom-left-radius: .6rem;
}
.panelLogin {
    background-color: #f8f8f8;
    border: 1px solid #d9d9d9;
    border-top-right-radius: .6rem;
    border-bottom-right-radius: .6rem;
}
@media (max-width: 575.98px) {
    .panelRegister {
        border-top-right-radius: .6rem;
        border-bottom-left-radius: 0;
    }
    .panelLogin {
        border-bottom-left-radius: .6rem;
        border-top-right-radius: 0;
    }
}

@media (min-width: 576px) {
    .canvasContainer.blankSelectorCanvasContainer:not(.canvasContainerClient) {
        height: calc(100vh - 70px - 10rem);
    }
}
.viewerFrame {
    height: calc(100vh - 70px - 10rem);
    border-style: none;
}
.viewerFrame.viewerFrameClient {
    height: calc(100vh - 10rem);
}

.containerIframe img, .containerIframe iframe, .containerIframe .btn.btn-primary {
    display: none;
}

/* ----------------------------------------------------- Warehouse ------------------------------------------------*/
.containerWarehouse {
    flex-grow: 1;
    max-width: inherit;
}
.containerWarehouse + footer {
    flex-grow: 0;
}
@media (min-width: 768px) {
    .containerWarehouse {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
#carouselPopular, #carouselPopularShapers {
    width: 100%;
    border: none;
    height: 310px;
    position: relative;
    clear: both;
    overflow: hidden;
    background: #f8f8f8;
}
#carouselPopular img, #carouselPopularShapers img {
    visibility: hidden; /* hide images until carousel can handle them */
    cursor: pointer; /* otherwise it's not as obvious items can be clicked */
}
.warehousePreviousNext {
    font-size: 36px;
    color: black;
}
@media (min-width: 768px) {
    .warehouseMyPanelContainer {
        max-width: 40%;
        min-width: 30%;
    }
}
.warehouseViewerContainer {
    height: calc(100vh - 70px - 3rem);
}
.warehouseViewerContainerClient {
    height: calc(100vh);
}
@media (max-width: 767.98px) {
    .warehouseViewerContainerClient {
        height: 100%;
    }
}

.rating > input {
    display: none;
}
.rating > label { 
    color: #ddd;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: 1.25rem;
}
div.rating > label {
    cursor: inherit;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
fieldset.rating:not(:checked) > label:hover, /* hover current star */
fieldset.rating:not(:checked) > label:hover ~ label { /* hover previous stars in list */
    color: #FFD700;
}
fieldset.rating > input:checked + label:hover, /* hover current star when changing rating */
fieldset.rating > input:checked ~ label:hover,
fieldset.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
fieldset.rating > input:checked ~ label:hover ~ label {
    color: #FFED85;
} 

/* ----------------------------------------------------- Old ------------------------------------------------*/
.cadre
{
	border-bottom: blue 1px solid;
	border-left: blue 1px solid;
	border-right: blue 1px solid;
	border-top: blue 1px solid;
}
.texte-12
{
	font-size: 12px;
	color: #000000;
	line-height: 20px;	
}
.mg-14-noir
{
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
}
.mg-14-bleu
{
	font-size: 14px;
	font-weight: bold;
	color: #0073AD;
}

.style18
{
	height: 19px;
	width: 358px;
}

.style20
{
	width: 383px;
}

.style5
{
	width: 464px;
	height: 120px;
}
.style7
{
	width: 464px;
	height: 120px;
}
.style8
{
	height: 18px;
}

.cadre
{
	border-bottom: blue 1px solid;
	border-left: blue 1px solid;
	border-right: blue 1px solid;
	border-top: blue 1px solid;
}
.texte-12
{
	font-size: 12px;
	color: #000000;
	line-height: 20px;
    /*width: 514px;*/
    text-align: left;
}


.texte-12-gras
{
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	
}
.texte-18-gras
{
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
}
.texte-24-gras
{
	font-size: 24px;
	font-weight: bold;
	line-height: 20px;
}
.sous-titre-bleu
{
	font-size: 18px;
	font-weight: bold;
	color: #0073AD;
}
.sous-sous-titre-bleu
{
	font-size: 14px;
	font-weight: bold;
	color: #0073AD;
}
.texte-bleu
{
	color: #0073AD;
}
.texte-12-bleu
{
	font-size: 11px;
	color: #0073AD;
}
.texte-14-bleu
{
	font-size: 14px;
	color: #0073AD;
}
.texte-16-bleu
{
	font-size: 16px;
	color: #0073AD;
}
.texte-18-bleu
{
	font-size: 18px;
	font-weight: bold;
	color: #0073AD;
}
.texte-24-bleu
{
	font-size: 24px;
	font-weight: bold;
	color: #0073AD;
}
.texte-bas
{
	font-size: 9px;
	font-weight: normal;
}
.style12
{
	height: 440px;
}

.style19
{
	width: 358px;
}

.style21
{
	width: 511px;
}
.syle17
{
	font-size: 16pt;
	font-weight: bold;
}
.style1
{
	height: 35px;
}
.style2
{
	width: 274px;
}

.style2
{
	width: 271px;
}
.style111
{
	width: 110px;
}
.style113
{
	height: 12px;
}
.style115
{
}
.style116
{
	height: 16px;
}
.style118
{
	width: 131px;
}
.style119
{
	height: 16px;
	width: 131px;
}
.style120
{
	height: 31px;
}
.style124
{
	height: 20px;
}
.style125
{
	height: 22px;
	width: 131px;
}
.style126
{
	height: 13px;
}
.TitreAdmin
{
	font-size: 24px;
	color: #0073AD;
}

.blink {
  animation: blinker .5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.updateProgress {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color:rgba(127, 127, 127, .5);
}
.updateProgress > div {
	background-color: white;
    border-radius: 5px;
	border: 1px solid lightgray;
	padding: 15px;
    display: flex;
	flex-direction: column;
	align-items: center;
}
.updateProgress img {
	height: 30px;
	width: 30px;
}
.updateProgress > div > div:first-child  {
	font-size: 18px;
	font-weight: bold;
	color: #0073AD;
}
.updateProgress > div > img  {
	margin-top: 15px;
}
.updateProgress > div > div:last-child {
	margin-top: 15px;
	text-align: center;
}