/* ***** Main style ***** */

/* Global var */
:root {
    /* Color */
    --clrBorderBtn: gray;
    --clrShadow_btn: gray;
    --clrBk_Form: #f2f2f2;
    --clrFr_Form: black;
    --clrBlueSerenitys: #182736;
    --clrBrownSerenitys: #8a4c32;
    --clrModalHeader: crimson;
    --clrRedModalHeader: crimson;
    --clrConfirmation_ModalHeader: green;
    --clrGreen_GoodText: green;
    --clrLightGreen: #009973;
    --clrModalFooter: #8a4c32;
    --clrSwornStatement: #026efd;
    --clrSearchAgency: aquamarine;
    --clrSearchAgency2: rgb(129, 192, 171);
    --clrAquamarine: aquamarine;
    --clrOrange: #ffa366;
    --clrWarning: red;
    --clrGreen: green;
    --clrImportant: #026efd;
    --clrImportantYellow: #FFC107;
    --clrBk_Offer: #f2f2f2;
    --clrBk_Special_Offer: #e6ccff;
    --clrBk_box:#f5ebdd;
    --clrSerenitys : #182736;
    --clrLightSerenitys: #ffff;

    /* Size */
    --szBorderModal: 1.8px;

    /* Zoom */
    --scZoom: scale(1.1);
}

/* Footer Background color */
.clBkBrown { background-color: var(--clrBrownSerenitys); }

@font-face {
    font-family: libelSuit;
    src: url(../Font/libel-suit/libel-suit-rg.otf);
}

@media screen and (max-width: 991px) {
    h5 {
        font-family: Arial, Helvetica, sans-serif;
        /*font-size: calc(13px + 0.5vw);*/
    }
}

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

a { text-decoration: none; }


.clText_Size {
    font-size: calc(10px + 0.35vw);
}

.halftone-blue {
    color: #131d29;
}

.itc {
    font-family: "ITC Avant Garde Gothic Pro";
}

p, label, li{
    color: black;
    font-family: "Helvetica";
    font-size: calc(10px + 0.35vw);
}

button {
    font-size: calc(10px + 0.35vw);
}

span {
    font-family: "Helvetica";
}

#id_Footer span {
    font-family: "Helvetica";
}

#id_Footer a {
    font-family: "Helvetica";
}

@media screen and (min-width: 768px) {
    #id_Footer a {
        font-size: 1.1vw;
    }
}

@media screen and (max-width: 767px) {
    #id_Footer a {
        font-size: calc(12px + 0.35vw);
    }
}

p.text-white, h3.text-white, h6.text-white {
    font-family: "Helvetica";
}


div.transparentBox {
    background-color: #ffffff;
    opacity: 0.92;
}


.justify {
    text-align: justify;
    text-justify: inter-word;
}

.bg-blue {
    background-color: #131d29;
    color: white;
}


.btn-round {
    border-radius: 50%;
}

.info {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0%;
    padding-bottom: 0%;
}

.fixed-foo {
    background: #8a4c32;
    bottom: 0;
    position: fixed;
    width: 100%
}

.clLineHeight {
    line-height: 15px;
}

/* Style thin buttons */

.clBtn_Second {
    box-shadow: 4px 4px var(--clrShadow_btn);
}

.clBtn_Second:hover {
    box-shadow: 2px 2px var(--clrShadow_btn);
    opacity: 0.8;
    color: black;
    background-color: white;
}

/* Style large buttons */

.clBtn_Lg {
    background-color: var(--clrBlueSerenitys);
    box-shadow: 4px 4px var(--clrShadow_btn);
    color: white;
}

.clBtn_Lg_Colorless {
    background-color: var(--clrBlueSerenitys);
    box-shadow: 4px 4px var(--clrShadow_btn);
}


.clBtn_Lg:hover {
    box-shadow: 2px 2px var(--clrShadow_btn);
    opacity: 0.8;
    color: black;
    background-color: white;
}


/* Form style */
.form-control {
    background-color: var(--clrBk_Form);
    color: var(--clrFr_Form);
    box-shadow: 3px 2px var(--clrShadow_btn);
}


.clFitContent {
    width: min-content;
}

.clFit {
    width: fit-content;
}
.clFitMax {
    width: max-content;
}
.zoom {
    padding: 9px;
    border: solid var(--clrBlueSerenitys);
    transition: transform .9s;
    /* Animation */
}


.zoom:hover {
    transform: var(--scZoom);
}

@media screen and (min-width: 856px) {
    .containerForm {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1265px) {
    .containerForm {
        max-width: 100%;
    }
}

.clBtn_Pro {
    background-color: var(--clrBlueSerenitys);
    width: 180px;
    height: 50px;
}

.clBtn_Idx {
    background-color: var(--clrBlueSerenitys);
    min-width: 80px;
    height: 40px;
    vertical-align: middle;
}

li {
    font-family: Arial, Helvetica, sans-serif;
}


.clBorder_Modal {
    border-color: var(--clrBrownSerenitys);
    border-width: var(--szBorderModal);
}

[type=checkbox] {
    background-color: var(--clrBk_Form);
    box-shadow: 1.5px 1.5px var(--clrShadow_btn);
}

[type=radio] {
    background-color: var(--clrBk_Form);
}


/* Responsive style that can be applied when we need to have 2 buttons side by side (example : "previous" and "next" buttons  */

@media screen and (max-width: 499px) {
    .clBtn_Side {
        padding: 10px 40px;
    }
}

@media screen and (min-width: 500px) {
    .clBtn_Side {
        padding: 15px 70px;
    }
}



.clBtn_Secondary {
    background-color: var(--clrBlueSerenitys);
    box-shadow: 4px 4px var(--clrShadow_btn);
    color: white;
}

.clBtn_Secondary:hover {
    box-shadow: 2px 2px var(--clrShadow_btn);
    opacity: 0.8;
    color: black;
    background-color: white;
}


.clHead_Modal {
    background-color: var(--clrModalHeader);
    color: white;
}

.clConfirmationHead_Modal {
    background-color: var(--clrConfirmation_ModalHeader);
    color: white;
}

.clFoot_Modal {
    background-color: var(--clrModalFooter);
}

.modal-title {
    color: white;
}

@media screen and (max-width: 522px) {
    .companyNbOftenants {
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 320px) and (max-width: 321px) {
    .companyNbOftenants {
        margin-bottom: 1rem;
    }
}

.clImg_Size {
    max-width: 17rem;
    max-height: 15rem
}

/* Login button */
.clBtn_Lg p {
    color: white;
}

.clBtn_Login:hover {
    opacity: 0.5;
}

/* Background images Private landlord */

.clBkProblem_PrivateLandlord {
    background-image: url("../Images/Illustrations/brokenWindow.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}


@media screen and (max-width: 767px) {

    .clBkSolution_PrivateLandlord {
        background-image: url("../Images/Illustrations/happyContract.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: 15%;
    }
}

@media screen and (min-width: 768px) {
    .clBkSolution_PrivateLandlord {
        background-image: url("../Images/Illustrations/happyContract.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
}

/* Background images information Private Landlord */

.clBkInformation_PrivateLandlord {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images Pro Landlord */

@media screen and (min-width: 768px) {

    .clBkSolution_ProLandlord {
        background-image: url("../Images/Illustrations/happyContract.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
}

@media screen and (max-width: 767px) {
    .clBkSolution_ProLandlord {
        background-image: url("../Images/Illustrations/happyContract.jpg");
        background-position: bottom;
        background-attachment: fixed;
        background-size: cover;
        background-position: 15%;
    }
}


/* Background images subscription Private Landlord */



.clBkSubscription_ProLandlord {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images new Pro subscriber */

.clBkNewProSubscriber {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images new Pro subscriber inform */

.clBkNewProSubscriber_Inform {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images new Pro subscriber enquire */

.clBkNewProSubscriber_Enquire {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images new Pro subscriber update */

.clBkNewProSubscriber_UpdateProfile {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Background images tenant update his profile */

.clBkTenantUpdateProfile {
    background-image: url("../Images/Houses&Buildings/house1.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}


.clSwornStatement {
    color: var(--clrSwornStatement);
}

.clBtn {
    background-color: var(--clrBlueSerenitys);
    box-shadow: 4px 4px var(--clrShadow_btn);
    color: white;
}

.clBtn:hover {
    background-color: var(--clrBlueSerenitys);
    box-shadow: 4px 4px var(--clrShadow_btn);
    color: black;
    background-color: white;
}


.clBtn_Log {
    margin-bottom: 3%;
}


.clMarginTransparentBox {
    margin-top: 9%;
    margin-bottom: 9%;
}

.clMargin6TransparentBox {
    margin-top: 6%;
    margin-bottom: 6%;
}

.clMarginTransparentBoxMain {
    background-color: #ffffff;
    opacity: 0.94;
    margin-top: 6.25%;
    margin-bottom: 6.25%;
}


@media screen and (max-width: 767px) {
    .clTab {
        padding-left: 1rem;
    }

    .clTab-2 {
        padding-left: 1.5rem;
    }
}

@media screen and (min-width: 768px) {
    .clTab {
        padding-left: 3rem;
    }

    .clTab-2 {
        padding-left: 6rem;
    }
}


@media screen and (max-width: 767px) {
    .clCancelMb0 {
        padding-bottom: 1.5rem;
    }
}

@media screen and (min-width: 768px) {
    .clCancelMb0 {
        padding-bottom: 1.2rem;
    }
}



@media screen and (max-width: 767px) {
    .clTabMt {
        margin-top: 5%;
    }
}

@media screen and (min-width: 768px) {
    .clTabMt {
        padding-left: 8%;
        margin-top: 1.5rem;
    }
}

.clBkSearchAgency {
    background-color: var(--clrSearchAgency);
}
.clBkSearchAgency2 {
    background-color: var(--clrSearchAgency2);
}

.clBkAquamarine {
    background-color: var(--clrAquamarine);
}

.clBkOrange {
    background-color: var(--clrOrange);
}

@media screen and (max-width: 767px) {
    .indent {
        text-indent: 1rem;
    }
}

@media screen and (min-width: 768px) {
    .indent {
        text-indent: 3rem;
    }
}

.clWarning {
    color: var(--clrWarning);
}

.clIcon {
    border: none;
    background: none;
}

.clIcon img {
    width: 100%;
}

@media screen and (width: 320px) {
    .clCompanyPasswd {
        margin-top: 0.7rem;
    }
}

.clText_Problem {
    color: var(--clrWarning);
}

.clAdvantages {
    color: var(--clrGreen);
}

.clText_Important {
    color: var(--clrImportant);
}

@media screen and (max-width: 1000px) {
    .clSerenityS {
        color: var(--clrSerenitys);
        font-family: libelSuit;
        font-size: calc(16px + 0.35vw);
    }
}

@media screen and (min-width: 1001px) {
    .clSerenityS {
        color: var(--clrSerenitys);
        font-family: libelSuit;
        font-weight: bold;
        font-size: calc(16px + 0.35vw);
    }
}

.clBold {
    font-weight: bold;
}

.clBlue {
    color: var(--clrBlueSerenitys);
}

.clSerenityS_Light {
    color: var(--clrLightSerenitys);
    font-weight: lighter;
    font-family: libelSuit;
}

.clLightGreen {
    color: var(--clrLightGreen);
}

.clGood_Text {
    color: var(--clrGreen_GoodText);
}

.clText_Red {
    color: red;
}

.clBrown {
    color: var(--clrBrownSerenitys);
}

.clAqua {
    color: aqua;
}

.clOrange {
    color: var(--clrOrange);
}

.clSlogan {
    background-color: yellow;
    font-weight: bold;
    font-size: larger;
}

.clSloganSerenityS {
    color: var(--clrSerenitys);
    font-weight: bolder;
    font-size: x-large;
    font-family: libelSuit;
}

.clSuperImportant {
    background-color: yellow;
    font-weight: bold;
}


@media screen and (max-width: 767px) {
    .clCancelTab {
        padding-left: 1rem;
    }

    .clCancelTab-2 {
        padding-left: 1.5rem;
    }
}

@media screen and (min-width: 768px) {
    .clCancelTab {
        padding-left: 0rem;
        text-align: justify;
        text-justify: inter-word;
    }

    .clCancelTab-2 {
        padding-left: 0rem;
    }
}

@media screen and (max-width: 767px) {
    .clCancelIndent {
        text-indent: 1rem;
    }
}

@media screen and (min-width: 768px) {
    .clCancelIndent {
        text-indent: 0rem;
    }
}

.clImportantYellow {
    color: var(--clrImportantYellow);
}


.clGrey {
    color: grey;
}

.clPink {
    color: #ff99bb;
}

.clBkBeige {
    background-color: #f5f5dc;
}

.cl1Rem {
    width: 1rem;
}

.clHideDiv {
    display: none;
}

.clShowDiv {
    display: block;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.clPaddingRight {
    padding-right: 10mm;
}

/* Padding */
@media screen and (min-width: 576px) {
    .clPadding {
        padding: 10mm;
    }
}

@media screen and (max-width: 575px) {
    .clPadding {
        padding: 5mm;
    }
}

/* Padding top */
@media screen and (min-width: 576px) {
    .clPaddingTop {
        padding-top: 10mm;
    }
}

@media screen and (max-width: 575px) {
    .clPaddingTop {
        padding-top: 5mm;
    }
}

/* Padding bottom */
@media screen and (min-width: 576px) {
    .clPaddingBottom {
        padding-bottom: 10mm;
    }
}

@media screen and (max-width: 575px) {
    .clPaddingBottom {
        padding-bottom: 5mm;
    }
}

/* Padding cross axis*/
@media screen and (min-width: 576px) {
    .clPadding-x-axis {
        padding-right: 10mm;
        padding-left: 10mm;
    }
}

@media screen and (max-width: 575px) {
    .clPadding-x-axis {
        padding-right: 5mm;
        padding-left: 5mm;
    }
}

@media screen and (min-width: 576px) {
    .clPadding-x-axis-idx {
        padding-right: 5mm;
        padding-left: 5mm;
    }
}

@media screen and (max-width: 575px) {
    .clPadding-x-axis-idx {
        padding-right: 1mm;
        padding-left: 1mm;
    }
}

.clTitle{
    text-align: center;
    color: var(--clrImportant);
    font-weight: bold;
}

.fontSize_xLarge{
    font-size: x-large;
}

/* Btn close alert info */
.clBtnClose {
    background-color: var(--clrBlueSerenitys);
    color: white;
    min-width: 100px;
    border-width: 2px;
    border-color: #bfbfbf;
    border-style: solid;
    border-radius: 10px;
    box-shadow: 5px 5px 8px rgb(97, 104, 104);
    color: whitesmoke;
}
.clBtnClose:hover {
    background-color: var(--clrBlueSerenitys);
    color: white;
    opacity: 0.6;
}

/* Offer background color */
.clBk_Offer {
    background-color: var(--clrBk_Offer);
}

.clBk_Special_Offer {
    background-color: var(--clrBk_Special_Offer);
}

/* Login */
.clModalHeader_CodeLogin {
    background-color: red;
    color: white;
}
.clModalFooter_CodeLogin {
    background-color: lightgray;
}