/*  ------------------------------- Table Of Contents ---------------------------------
1.  #General
    1.1 Fonts
    1.2 Text Colors
2.  #Typography
    2.1 Load Fonts
3.  #Grid
4.  #Fields
    4.1 Buttons
5.  Popups
    5.1 Image Popup
6.  Responsive
---------------------------------------------------------------------------------------
*/

.cl-details {
    background-image: url(../assets/details.svg);
    max-width: 350px;
    width: 100%;
    height: 700px;
    background-size: cover;
    background-repeat: no-repeat;
}

body:not(.path-user) div[data-lastpass-icon-root] {
    display: none;
}

/**
* -------------------------------------------------------------------------------------
* 1. #General
* -------------------------------------------------------------------------------------
*/

.form-item,
.form-actions {
    margin: 0 !important;
}

.cl-main-content {
    padding-top: 28px !important;
    padding-bottom: 60px !important;
    width: 100%;
}

.region-content {
    padding: 0 !important;
}

.cl-center-width {
    margin: 0 auto;
    width: 100%;
    max-width: 1310px;
    padding: 0 15px;
}

.cl-content-width {
    margin: 0 auto;
    width: 100%;
    max-width: 780px;
    padding: 0 15px;
}

.cl-edit-center-width {
    max-width: 343px;
    margin: 0 auto;
}

.cl-center-width-4 {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
    padding: 0 15px;
}

body .ajax-progress {
    display: none !important;
}

input[type='radio'] {
    accent-color: #000;
}

select:focus,
input:focus,
textarea:focus {
    outline: none !important;
    border-color: initial !important;
    box-shadow: none !important;
}

p {
    margin-bottom: 16px;
}

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

/* Masonry Grid */
.cl-masonry-grid {
    max-width: 750px;
    opacity: 0;
    /* Add animation properties */
    animation: fadeIn 0.1s ease-in; 
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {  
    from {  
        opacity:0;  
    }  
 
    to {  
        opacity:1;  
    }  
 }

.cl-masonry-grid:after {
    content: '';
    display: block;
    clear: both;
}

.cl-masonry-grid-item {
    max-width: 367px;
    width: 100%;
    margin-bottom: 16px;
    height: auto;
}


/**
* -------------------------------------------------------------------------------------
* 2. #Typography
* -------------------------------------------------------------------------------------
*/


/* 2.1 Fonts */

@font-face {
    font-family: 'GothamHTF-Book';
    src: url('../fonts/GothamHTF-Book.woff') format("woff"), 
        url('../fonts/GothamHTF-Book.ttf') format("truetype"), 
        url('../fonts/GothamHTF-Book.svg') format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Light';
    src: url(../fonts/GothamHTF-Light.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Thin';
    src: url(../fonts/GothamHTF-Thin.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Book';
    src: url('../fonts/GothamHTF-Book.woff') format("woff"),
        url('../fonts/GothamHTF-Book.ttf') format("truetype"),
        url('../fonts/GothamHTF-Book.svg') format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Ultra';
    src: url(../fonts/GothamHTF-Ultra.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Medium';
    src: url(../fonts/GothamHTF-Medium.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamHTF-Bold';
    src: url(../fonts/GothamHTF-Bold.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

a {
    text-decoration: none;
    font-family: GothamHTF-Medium, Sans-serif;
    color: #000;
}

a:hover {
    color: #000;
}
  
body {
    background-color: #fff;
    font-family: GothamHTF-Light, Sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    padding-top: 94px !important;
}

.cl-bold {
    font-family: GothamHTF-Medium, Sans-serif;
}

.cl-light {
    font-family: GothamHTF-Light, Sans-serif;
}

.cl-text-10px {
    font-size: 10px;
    line-height: 1;
}

.cl-text-12px {
    font-size: 12px;
    line-height: 18px;
}

.cl-text-15px {
    font-size: 15px;
    line-height: 1;
}

.cl-text-16px {
    font-size: 16px;
    line-height: 1;
}

.cl-mt16px {
    margin-top: 16px !important;
}

.cl-mb16px {
    margin-bottom: 16px !important;
}

.cl-mr16px {
    margin-top: 16px;
}

.cl-align-left {
    text-align: left;
}

.cl-align-center {
    text-align: center;
}

.cl-align-right {
    text-align: right;
}

.cl-title-2 {
    margin-top: 16px;
}

.cl-text-underline {
    text-decoration: underline;
}

.cl-h1,
.cl-h2,
.cl-h3,
.cl-h4,
.cl-h5,
.cl-h6 {
    font-family: GothamHTF-Medium, Sans-serif;
    color: #000000;
    margin: 0;
}

.cl-h1 {
    font-size: 42px;
    line-height: 43px;
}

.cl-h2 {
    font-size: 36px;
    line-height: 37px;
}

.cl-h3 {
    font-size: 24px;
    line-height: 26px;
}

.cl-h4 {
    font-size: 20px;
    line-height: 23px;
}

.cl-h5 {
    font-size: 16px;
    line-height: 18px;
}

.cl-h6 {
    font-size: 18px;
    line-height: 19px;
}

.cl-text-center {
    text-align: center;
}

.cl-text-right {
    text-align: right;
}

.form-control:disabled {
    background-color: #f1f1f1;
    opacity: 0.4;
}


/* 1.1 Text Colors */

.cl-text-grey {
    color: #00000080;
}

.cl-text-grey-light {
    color: rgba(0, 0, 0, 0.35);
}

body .cl-black-bg {
    background-color: #000 !important;
}

.cl-text-black-light {
    color: rgba(0, 0, 0, 0.5);
}

.cl-text-green {
    color: #179432;
}

.cl-text-lightgreen {
    color: #00CE7C;
}

.cl-text-red {
    color: #E02020;
}

.cl-text-black {
    color: #000;
}

.cl-text-gold,
.cl-text-yellow {
    color: #9F8012;
}


/**
* -------------------------------------------------------------------------------------
* 3. #Grid
* -------------------------------------------------------------------------------------
*/

.cl-grid-2 {
    display: grid;
    align-content: flex-end;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    grid-gap: 0 17px;
}

.cl-grid-3 {
    display: grid;
    align-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    grid-gap: 0 16px;
}

.cl-grid-4 {
    display: grid;
    align-content: flex-start;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    grid-gap: 21.5px;
}

.cl-col-2-full {
    grid-row-start: 1;
    grid-row-end: 10;
}

.cl-flexbox {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
}

.cl-flexbox-column {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: flex-start;
}

.cl-flexbox-1 {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cl-optins-area .cl-flexbox-1 {
    margin-bottom: 12px;
}

.cl-optins-area>div:last-of-type {
    margin-bottom: 16px;
}

.cl-flexbox-2 {
    align-items: flex-start;
}

.cl-flexbox-2>* {
    flex: 0 0 50%;
}

.cl-flexbox-2>*:first-child {
    text-align: left !important;
}

.cl-flexbox-2>*:last-child {
    text-align: right;
}

.cl-flexbox-full {
    flex: 0 0 100%;
}

.cl-fields-col-2 {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 19px) / 2));
    justify-content: space-between;
}

.cl-fields-col-2-auto {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
}

.cl-fields-col-3-wrapper #edit-expiration-date,
.cl-fields-col-3-wrapper #edit-date-of-birth,
.cl-fields-col-3-wrapper .cl-birth-input-wrapper {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 26px) / 3));
    justify-content: space-between;
    padding: 0 !important;
}

.cl-float-left {
    float: left;
    width: calc(50% - 8px);
}

.cl-float-right {
    float: right;
    width: calc(50% - 8px);
}

.phone-container>div:first-child {
    flex: 0 0 120px;
}

.phone-container>div:last-child {
    flex: 0 0 calc(100% - 136px);
}

.email-container>div {
    flex: 0 0 calc(50% - 8px);
}

.email-container,
.phone-container {
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}

.cl-grey-section {
    padding: 16px 16px 0 16px;
    background: #F1F1F1;
    border-radius: 6px;
    margin-bottom: 16px;
}

.cl-grey-section .cl-select-type-4 select {
    background-color: #fff !important;
}


/**
* -------------------------------------------------------------------------------------
* 4. #Fields
* -------------------------------------------------------------------------------------
*/

input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M1.21855 12.5C0.974102 12.5 0.760213 12.41 0.57688 12.23C0.393547 12.05 0.30188 11.84 0.30188 11.6V2.3C0.30188 2.06 0.393547 1.85 0.57688 1.67C0.760213 1.49 0.974102 1.4 1.21855 1.4H2.2116V0.5H3.20466V1.4H8.3991V0.5H9.39216V1.4H10.3852C10.6297 1.4 10.8435 1.49 11.0269 1.67C11.2102 1.85 11.3019 2.06 11.3019 2.3V11.6C11.3019 11.84 11.2102 12.05 11.0269 12.23C10.8435 12.41 10.6297 12.5 10.3852 12.5H1.21855ZM1.21855 11.6H10.3852V5.15H1.21855V11.6ZM1.21855 4.25H10.3852V2.3H1.21855V4.25Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: 12px 11px;
    padding-right: 0px;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    -webkit-appearance: none;
}

.form-select {
    background-image: url(../assets/arrow-down.svg);
    background-size: 12px;
}

select {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.cl-input-type-2 input,
.cl-input-type-2 input:focus {
    min-width: 65px;
    height: 34px;
    padding: 10px !important;
    background-color: #F1F1F1 !important;
    border: 0.5px solid #808080 !important;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    background-image: none !important;
}

.cl-input-type-2 label {
    color: rgba(0, 0, 0, 0.5);
    font-family: GothamHTF-Light, Sans-serif;
    font-style: normal;
    margin-bottom: 5px;
}

.cl-price-field-style .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -10px !important;
}

.cl-price-field-style label {
    margin-bottom: 15px !important;
}

.cl-price-field-style input {
    max-width: 70px;
}

.cl-search-type {
    margin-bottom: 16px;
}

.cl-search-type select {
    border-radius: 4px;
    border: 0.5px solid #808080 !important;
    background-color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
    padding: 8px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url('../assets/arrow-down.svg')!important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center right 10px !important;
}

.cl-search-type label {
    color: rgba(0, 0, 0, 0.5);
    font-family: GothamHTF-Light, Sans-serif;
    margin-bottom: 5px;
}

.cl-search-type .form-item {
    position: relative;
}

.cl-search-type-content {
    border: 0.5px solid #aaa;
    padding: 9px 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #fff;
    margin-top: -2.5px !important;
}

.cl-search-type input,
.cl-search-type input:focus {
    min-width: 65px;
    height: 32px;
    padding: 4.5px 20px 4.5px 42px !important;
    background-color: #fff !important;
    border: 0.5px solid #808080 !important;
    border-radius: 4px;
    font-size: 13px;
    line-height: 23px;
    color: #000;
    background-repeat: no-repeat;
    background-position: center left 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'%3E%3Cpath d='M17.4 18L10.825 11.425C10.325 11.8583 9.74201 12.1958 9.07603 12.4375C8.41004 12.6792 7.70137 12.8 6.95 12.8C5.1473 12.8 3.62163 12.175 2.37298 10.925C1.12433 9.675 0.5 8.16667 0.5 6.4C0.5 4.63333 1.125 3.125 2.375 1.875C3.625 0.625 5.1375 0 6.9125 0C8.6875 0 10.1958 0.625 11.4375 1.875C12.6792 3.125 13.3 4.63458 13.3 6.40375C13.3 7.11792 13.1833 7.80833 12.95 8.475C12.7167 9.14167 12.3667 9.76667 11.9 10.35L18.5 16.9L17.4 18ZM6.925 11.3C8.27917 11.3 9.43021 10.8208 10.3781 9.8625C11.326 8.90417 11.8 7.75 11.8 6.4C11.8 5.05 11.326 3.89583 10.3781 2.9375C9.43021 1.97917 8.27917 1.5 6.925 1.5C5.55695 1.5 4.3941 1.97917 3.43645 2.9375C2.47882 3.89583 2 5.05 2 6.4C2 7.75 2.47882 8.90417 3.43645 9.8625C4.3941 10.8208 5.55695 11.3 6.925 11.3Z' fill='black'/%3E%3C/svg%3E") !important;
}


.cl-client-select {
    height: 50px;
    background-color: #F1F1F1;
    border-radius: 10px;
    font-family: GothamHTF-Medium, Sans-serif;
    min-height: 50px;
    padding: 7.5px 16px;
    width: 100%;
    line-height: 32px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url('../assets/arrow-up-down.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 12px 24px !important;
    background-position: center right 19px !important;
}

.cl-select-type-2 {
    font-size: 12px;
    line-height: 13px;
    background-color: #F1F1F1 !important;
    border-radius: 10px;
    height: 41px;
    padding: 14px 47px 14px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url('../assets/arrow-down.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center right 16px !important;
}

.cl-select-type-3 {
    font-size: 14px;
    line-height: 18px;
    color: #272727;
    border-radius: 10px;
    height: 39px;
    width: 100%;
    padding: 10px 47px 10px 16px;
    display: flex;
    align-items: center;
    background-color: #F1F1F1 !important;
    justify-content: flex-start;
    background-image: url('../assets/arrow-down.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center right 12px !important;
}

.cl-select-type-4 select {
    border-radius: 4px;
    border: 0.5px solid #808080 !important;
    background-color: #F1F1F1 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
    padding: 8px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url('../assets/arrow-down.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center right 10px !important;
    margin-bottom: 16px;
}

.cl-select-type-4 label {
    color: rgba(0, 0, 0, 0.5);
    font-family: GothamHTF-Light, Sans-serif;
    margin-bottom: 5px;
}

.cl-select-type-5 select {
    border-radius: 4px;
    border: 0.5px solid #808080 !important;
    background-color: #F1F1F1 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
    padding: 8px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url('../assets/arrow-down.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    background-position: center right 10px !important;
    margin-bottom: 16px;
}

.cl-select-type-5 label {
    color: rgba(0, 0, 0, 0.5);
    font-family: GothamHTF-Light, Sans-serif;
    margin-bottom: 5px;
}

.cl-checkbox-type-1 {
    margin-bottom: 19px !important;
}

.cl-checkbox-type-1:checked {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M3.90272 8.5L0 4.67726L1.0701 3.62909L3.90272 6.40366L9.9299 0.5L11 1.54817L3.90272 8.5Z' fill='black'/%3E%3C/svg%3E") !important;
    background-size: 11px 9px !important;
    background-position: center !important;
}

.cl-checkbox-type-1 {
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    border: 1px solid #808080 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}

.cl-checkbox-type-1+label {
    margin-left: 5px;
    font-family: GothamHTF-Light, Sans-serif;
}

.cl-checkbox-type-2 {
    display: flex;
    align-items: center;
}

.cl-checkbox-type-2 label {
    margin-bottom: 0;
    margin-left: 10px;
}

.cl-checkbox-type-2 input:checked {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M3.90272 8.5L0 4.67726L1.0701 3.62909L3.90272 6.40366L9.9299 0.5L11 1.54817L3.90272 8.5Z' fill='black'/%3E%3C/svg%3E") !important;
    background-size: 11px 9px !important;
    background-position: center !important;
}

.cl-checkbox-type-2 input {
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    border: 2px solid #000 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.cl-checkbox-type-2 input+label {
    font-family: GothamHTF-Medium, Sans-serif;
}

label,
.label {
    display: block;
    font-family: GothamHTF-Medium, Sans-serif;
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 15px;
}

.cl-radio-type-1 {
    width: 100%;
}

.cl-radio-type-1 .fieldset-legend {
    color: rgba(0, 0, 0, 0.5);
    font-family: GothamHTF-Light, Sans-serif;
    font-style: normal;
    margin-bottom: 9px !important;
    display: block;
}

.cl-radio-type-1 .form-type-radio {
    display: flex;
    align-items: center;
    margin-bottom: 12px !important;
}

.cl-radio-type-1 .form-type-radio input {
    width: 18px;
    height: 19px;
    border-radius: 50%;
    margin-right: 4px;
}

.cl-radio-type-1 .form-type-radio label {
    font-family: GothamHTF-light, Sans-serif;
    margin: 0;
    line-height: 1;
}

.form-item {
    width: 100%;
}

.cl-select-type-1,
.cl-input-type-1 {
    width: 100%;
}

.cl-select-type-1 select {
    font-family: GothamHTF-Medium, Sans-serif;
    min-height: 50px;
    padding: 16px 29px 16px 12px;
    color: #000000;
    border-radius: 4px;
    width: 100%;
    font-size: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none !important;
    margin-bottom: 16px;
}

.cl-input-type-1 input {
    font-family: GothamHTF-Medium, Sans-serif;
    min-height: 50px;
    padding: 16px 29px 16px 12px;
    color: #000000;
    border-radius: 4px;
    width: 100%;
    font-size: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none !important;
    margin-bottom: 16px;
    background-image: none !important;
}

.cl-input::-webkit-input-placeholder {
    /* Edge */
    font-family: GothamHTF-Light, Sans-serif;
    background-color: #00000033 !important;
}

.cl-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: GothamHTF-Light, Sans-serif;
    background-color: #00000033 !important;
}

.cl-input::placeholder {
    font-family: GothamHTF-Light, Sans-serif;
    background-color: #00000033 !important;
}


/* Switcher  Redesign */

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

.form-switch-wrapper span:first-child {
    margin-right: 7px;
}

.form-switch-wrapper span:last-child {
    margin-left: 7px;
}

.form-switch {
    margin: 0;
    padding: 0;
}

.form-switch .cl-toggle-type-1 {
    cursor: pointer;
    width: 44px;
    height: 25px;
    border-radius: 29px;
    border: none;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-size: 29px;
    background-position: center left -2px;
    background-color: #808080;
    margin: 0;
}

.cl-toggle-type-1:checked {
    background-color: #179432;
    border-color: #179432;
    background-position: center right -2px !important;
}

.cl-toggle-type-2 {
    padding: 0 !important;
    margin-bottom: 16px;
}

.cl-toggle-type-2 .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.cl-toggle-type-2 .form-check-input {
    cursor: pointer;
    width: 44px;
    height: 25px;
    border-radius: 29px;
    border: none;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-size: 29px;
    background-position: center left -2px;
    background-color: #808080;
    margin: 0;
}

.cl-toggle-type-2 .form-check-input:checked {
    background-color: #179432;
    border-color: #179432;
    background-position: center right -2px !important;
}

.cl-toggle-type-2 label {
    margin-bottom: 0;
}

.cl-textarea-type-1 textarea {
    padding: 8px;
    background-color: #F1F1F1 !important;
    border: 0.5px solid #808080 !important;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 18px;
    min-height: 200px;
}

.cl-textarea-type-1 .form-control::placeholder {
    color: #000;
}

.cl-textarea-type-1 label {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px;
    font-family: GothamHTF-Light, Sans-serif;
    color: rgba(0, 0, 0, 0.5);
}

.cl-textarea-type-1 .bottom-label {
    float: right;
    margin-top: -10px;
    font-size: 11px;
    line-height: 18px;
}

.cl-date-type-wrapper input[type="date"]::before {
    content: attr(placeholder);
    position: absolute;
    color: #272727;
    left: 11px;
}

.cl-date-type-1 {
    width: 100%;
}

.cl-date-type-1 input[type="date"] {
    width: 100%;
    height: 34px;
    padding: 8px;
    background-color: #F1F1F1;
    border: 0.5px solid #808080 !important;
    border-radius: 4px;
    background-size: 17px 16px !important;
    margin-bottom: 16px;
}

.cl-date-type-1 label {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px;
    font-family: GothamHTF-Light, Sans-serif;
    color: rgba(0, 0, 0, 0.5);
}

.cl-date-type-2 {
    width: 100%;
    height: 39px;
    padding: 11px 13px 11px 16px !important;
    background-color: #F1F1F1;
    border-radius: 10px;
    border: none;
    background-position: center right 15px !important;
}

.cl-image-type-1 {
    margin-bottom: 16px !important;
}

.cl-image-type-1 label {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px;
    font-family: GothamHTF-Light, Sans-serif;
    color: rgba(0, 0, 0, 0.5);
}

.cl-image-type-1 .image-widget .btn-primary {
    height: auto;
    width: auto;
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    border: none !important;
    border-radius: 6px;
    background-color: #00CE7C !important;
    color: #fff;
    margin: 8px 0 0 0;
    opacity: 1 !important;
}

.cl-multi-select-type-1 {
    width: 100%;
}

.cl-multi-select-type-2 div.choices__inner {
    border: 0.5px solid #808080;
}

.cl-multi-select-type-2 .choices__list--dropdown {
    border: 0.5px solid #808080;
}

.cl-multi-select-type-2 label {
    font-family: GothamHTF-Light, Sans-serif;
    color: #00000080;
    margin-bottom: 6px;
}

.cl-multi-select-type-3 div.choices__inner {
    border: 0.5px solid #808080;
    background-color: #F1F1F1;
    min-height: 42px !important;
    padding: 8px 25px 0 8px;
    background-position: right 8px top 17px;
}

.cl-multi-select-type-3 .choices__list--dropdown {
    border: 0.5px solid #808080;
    background-color: #F1F1F1;
}

.cl-multi-select-type-3 label {
    font-family: GothamHTF-Light, Sans-serif;
    color: #00000080;
    margin-bottom: 6px;
}

.cl-multi-select-type-3 .choices[data-type*='select-one'] .choices__button {
    top: 12px;
}

.cl-multi-select-type-3 .choices__inner .choices__input {
    background-color: transparent !important;
    border: none;
}

.cl-multi-select-type-3 .choices__input {
    border-bottom: 0.5px solid #808080;
}

.cl-multi-select-type-3 .choices__list--multiple .choices__item {
    background: #C4C4C4 !important;
}

.cl-multi-select-type-3 .choices[data-type*='select-one'] .choices__input {
    padding-left: 40px;
    background-image: url(../assets/search-black.svg);
    background-repeat: no-repeat;
    background-position: center left 16px;
    background-size: 16px;
}

.cl-multi-select-type-3 ::-webkit-input-placeholder {
    background-color: #000 !important;
}

.cl-multi-select-type-3 :-ms-input-placeholder {
    background-color: #000 !important;
}

.cl-multi-select-type-3 ::placeholder {
    background-color: #000 !important;
}


/* Client edit Page Navigation */

.cl-edit-nav {
    align-items: center !important;
    padding-bottom: 8px;
    border-bottom: 0.5px solid #808080;
}

.cl-edit-nav-btns {
    display: flex;
    gap: 16px;
    margin-left: auto;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
}

.cl-edit-nav-btns a {
    text-decoration: none;
}

/* 4.1 Buttons */

.cl-btns-wrapper>*:first-child {
    margin-bottom: 16px;
}

.cl-btn-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 32px;
    font-family: 'GothamHTF-Medium', Sans-serif;
    width: auto;
    padding: 7.5px 12px;
    color: #fff !important;
    background-color: #00CE7C !important;
    border-radius: 6px;
    border: none;
}

body .cl-cancel-btn-2 {
    color: #000 !important;
    font-family: 'GothamHTF-Book', Sans-serif;
    font-size: 14px;
    line-height: 32px;
    text-decoration: underline;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0;
    opacity: 1 !important;
    height: auto;
}

body .cl-btn-2-edit {
    height: auto;
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px 8px 30px;
    border: none !important;
    border-radius: 6px;
    background-color: #000 !important;
    background-size: 14px 13px;
    background-image: url(../assets/edit.svg);
    background-repeat: no-repeat;
    background-position: center left 12px;
    color: #fff;
    margin: 0;
    opacity: 1 !important;
}

body .cl-btn-2 {
    font-family: GothamHTF-Light, Sans-serif;
    height: auto;
    width: auto;
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    border: none !important;
    border-radius: 6px;
    background-color: #00CE7C !important;
    color: #fff !important;
    margin: 0;
    opacity: 1 !important;
}

.cl-btn-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: GothamHTF-Light, Sans-serif;
    color: #fff !important;
    background-color: #00CE7C !important;
    border-radius: 6px;
    border: none;
    padding: 9.5px 12px;
}

body .cl-btn-4 {
    font-family: GothamHTF-Light, Sans-serif;
    height: auto;
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    border: none !important;
    border-radius: 6px;
    background-color: #000 !important;
    color: #fff !important;
    margin: 0 auto;
    opacity: 1 !important;
}

.cl-read-more span,
.cl-read-more a {
    color: #00CE7C;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #00CE7C;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
    display: inline-block;
}

.cl-action-btn-wrapper {
    margin-top: 40px;
    display: flex;
}

.cl-btn-primary,
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: GothamHTF-Light, Sans-serif;
    width: 100%;
    height: 47px;
    color: #fff;
    background-color: #00CE7C !important;
    border-radius: 6px;
    border: none;
}

.cl-btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: GothamHTF-Light, Sans-serif;
    width: 100%;
    height: 47px;
    background-color: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 6px;
}

.cl-btn-black-border {
    font-size: 14px;
    line-height: 32px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 6px;
    border: 1px solid #000;
    color: #000 !important;
    font-family: GothamHTF-Light, Sans-serif;
}

.cl-btn-black {
    font-size: 14px;
    line-height: 32px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 6px;
    background-color: #000;
    color: #fff !important;
    font-family: GothamHTF-Light, Sans-serif;
}

.cl-btn-green {
    font-size: 14px;
    line-height: 32px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 6px;
    background-color: #00CE7C !important;
    color: #fff !important;
    font-family: GothamHTF-Light, Sans-serif;
}

.cl-edit-btn {
    width: 24px;
    height: 24px;
    margin-left: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00CE7C;
    border-radius: 6px;
    cursor: pointer;
}

.cl-close-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M0.836744 11.2895L0.0797882 10.4434L4.24304 5.78952L0.0797882 1.13567L0.836744 0.28952L5 4.94337L9.16326 0.28952L9.92021 1.13567L5.75696 5.78952L9.92021 10.4434L9.16326 11.2895L5 6.63567L0.836744 11.2895Z' fill='black'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    border: 0.5px solid #000000;
    border-radius: 6px;
    cursor: pointer;
}

.cl-disabled-edit-btn {
    opacity: 0.4;
    pointer-events: none;
}

.cl-accordion-item .cl-edit-btn {
    width: 28px;
    height: 28px;
}

.cl-edit-btn:after {
    content: '';
    width: 11px;
    height: 11px;
    background-image: url(../assets/edit.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.cl-tag-btns {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}

.cl-tag-btns span {
    padding: 4px 12px;
    color: #454545;
    background-color: #99EBCB;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.cl-plus-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    min-width: 50px;
    height: 50px;
    background-color: #00CE7C;
    border-radius: 6px;
    margin-left: 16px;
}

.cl-plus-btn:before {
    content: '';
    width: 17px;
    height: 15px;
    background-image: url('../assets/plus.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.cl-plus-icon:before {
    content: '';
    width: 16px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: cover;
}

.cl-add-more {
    margin-left: auto;
    padding-left: 20px;
    background-image: url('../assets/plus-circle.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 16px 15px;
    cursor: pointer;
}

.cl-remove-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 12px 0 25px;
    min-width: 27px;
    height: 27px;
    background-image: url('../assets/close-white.svg');
    background-repeat: no-repeat;
    background-position: center left 10px;
    background-size: 10px;
    background-color: #000;
    border-radius: 6px;
    margin-left: auto;
    margin-bottom: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}


/**
* -------------------------------------------------------------------------------------
* 4. #Accordion Style
* -------------------------------------------------------------------------------------
*/

.cl-accordion-wrapper {
    margin-top: 16px;
}

.cl-accordion-item {
    background-color: #F1F1F1;
    border-radius: 10px !important;
    padding: 16px 19px;
    display: flex;
    flex-direction: column;
}

.cl-accordion-item+.cl-accordion-item {
    margin-top: 16px;
}

.cl-accordion-item-disabled {
    opacity: 0.4;
}

.cl-accordion-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
}

.cl-accordion-item-content {
    transition: 0.7s ease;
    max-height: 800px;
    overflow: hidden;
}

.cl-accordion-header-right {
    display: flex;
    align-items: center;
}

.cl-accordion-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: 13px;
    line-height: 14px;
}

.cl-accordion-date span {
    white-space: nowrap;
    padding-top: 3px;
}

.cl-accordion-title {
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    font-family: GothamHTF-Medium, Sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cl-accordion-title object {
    margin-right: 18.5px;
}


/* Triangle */

.cl-accordion-btn-triangle {
    width: 15px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='7' viewBox='0 0 15 7' fill='none'%3E%3Cpath d='M7.5 7L0 0H15L7.5 7Z' fill='black'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: 15px 7px !important;
    background-position: center center;
    transition: all 0.2s ease-in-out;
    margin: 0 !important;
}

.cl-accordion-btn-triangle.collapsed {
    transform: rotate(-180deg);
}

.notes-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 30px;
    background-image: url(../assets/icons/note.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.purchase-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 22px;
    background-image: url(../assets/icons/purchase.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
}

.location-icon:before {
    content: '';
    display: block;
    min-width: 20px;
    height: 27px;
    background-image: url(../assets/icons/location.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 18px;
}

.whatsapp-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 24px;
    background-image: url(../assets/icons/whatsapp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.crm-icon:before {
    content: '';
    display: block;
    min-width: 25px;
    height: 25px;
    background-image: url(../assets/icons/crm.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.wechat-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 22px;
    background-image: url(../assets/icons/wechat.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.telegram-icon:before {
    content: '';
    display: block;
    min-width: 25px;
    height: 24px;
    background-image: url(../assets/icons/telegram.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.sms-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 23px;
    background-image: url(../assets/icons/sms.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.message-icon:before {
    content: '';
    display: block;
    min-width: 24px;
    height: 20px;
    background-image: url(../assets/icons/message.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 16px;
}

.cl-block {
    display: block;
}

.cl-accordion-item .cl-accordion-more {
    font-size: 10px;
    line-height: 11px;
    text-transform: uppercase;
    color: #808080;
    display: flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
    margin-top: 16px;
    width: auto;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

.cl-accordion-item .cl-accordion-more:after {
    content: '';
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.40172 1.67912C0.194174 1.46144 0.200298 1.12221 0.415572 0.911819C0.630847 0.701425 0.97794 0.695439 1.20068 0.898281L7.23052 6.79144L13.0493 0.898282C13.2721 0.69544 13.6192 0.701426 13.8344 0.91182C14.0497 1.12222 14.0558 1.46144 13.8483 1.67913L7.23052 8.25L0.40172 1.67912Z' fill='%23808080'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 10px;
    transform: rotate(-180deg);
}

.cl-accordion-item .cl-accordion-more.less:after,
.cl-accordion-item .cl-accordion-more.purchase-more::after {
    transform: rotate(0deg);
}


/* tabs section */

.cl-info-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: -6px;
}

.cl-info-tabs a {
    flex: 0 0 calc(50% - 8px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'GothamHTF-Medium', 'sans-serif';
    font-size: 16px;
    line-height: 32px;
    padding: 0 16px 16px;
    text-align: center;
    color: #000;
    text-decoration: none !important;
}

.cl-info-tabs a:after {
    display: block;
    content: '';
    height: 6px;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    position: absolute;
    bottom: 0;
}

.cl-info-tabs a.active:after {
    background-color: #000000;
}


/* Table style */

.cl-table-style thead {
    background-color: #f1f1f1;
    font-family: GothamHTF-Medium, sans-serif;
    color: #000;
}

.cl-table-style thead tr {
    padding: 0 8px;
}

.cl-table-style th,
.cl-table-style td {
    padding-top: 20px;
    padding-bottom: 20px;
    white-space: nowrap;
}

.cl-table-style tbody tr {
    border-bottom: 1px solid #808080;
}

.cl-table-style tbody tr td:first-child {
    color: #454545;
}

.cl-table-style-wrapper {
    width: 100%;
    overflow-x: auto;
}

.cl-table-style-2 {
    line-height: 12px;
    font-size: 11px;
    width: 700px;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
}

.cl-table-style-2 thead {
    background-color: #f1f1f1;
    font-family: GothamHTF-Medium, sans-serif;
    color: #000;
    font-style: italic;
}

.cl-table-style-2 thead tr {
    padding: 0 10px;
    border-bottom: 0px solid transparent;
}

.cl-table-style-2 th,
.cl-table-style-2 td {
    padding-top: 24px;
    padding-bottom: 24px;
    white-space: nowrap;
}

.cl-table-style-2 tbody {
    font-size: 12px;
    line-height: 18px;
}

.cl-table-style-2 tbody tr {
    border-bottom: 1px solid #808080;
}

.cl-client-loyalty .cl-table-style-wrapper thead:before,
.cl-client-loyalty .cl-table-style-wrapper thead:after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #808080;
    display: block;
    position: absolute;
    left: 0;
}

.cl-client-loyalty .cl-table-style-wrapper thead:before {
    top: 0;
}

.cl-client-loyalty .cl-table-style-wrapper thead:after {
    bottom: 0;
}

.clientela-majorel-log-form {
    padding: 0 16px;
}

.clientela-majorel-log-form .form-item {
    margin-top: 16px !important;
}

.clientela-majorel-log-form .form-submit {
    margin: 0;
    margin: 16px 0;
}
.attention-filter-creater{
    display: flex;
    justify-content: space-between;
}
.attention-filter-creater select {
    margin-right: 10px; 
}


/**
* -------------------------------------------------------------------------------------
* 5. #Pagination
* -------------------------------------------------------------------------------------
*/

.page-item:first-child .page-link {
    background-color: #00CE7C;
    border-color: #00CE7C;
}

.attention-filter-creater{
    display: flex;
    justify-content: space-between;
}
.attention-filter-creater select {
    margin-right: 10px; 
}

/**
* -------------------------------------------------------------------------------------
* 5. #Popups
* -------------------------------------------------------------------------------------
*/

/* 5.1 Image Popup */

.profile-picutre-upload.ui-dialog .ui-dialog-titlebar {
    background-color: #F1F1F1;
    padding: 16px 10px !important;
}

.profile-picutre-upload.ui-dialog .ui-dialog-title {
    color: #000;
    font-family: GothamHTF-Medium, Sans-serif;
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin: 0px !important;
    line-height: 22px;
}

.profile-picutre-upload.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 16px;
    right: 10px;
    padding: 0;
    width: 24px;
    height: 23px;
    border-radius: 6px;
    border: none !important;
    opacity: 1;
    background-color: #f1f1f1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='25' viewBox='0 0 26 25' fill='none'%3E%3Crect x='1' y='1' width='24' height='23' rx='6' fill='%23F1F1F1'/%3E%3Cpath d='M8.83673 18L8.07977 17.1538L12.243 12.5L8.07977 7.84615L8.83673 7L13 11.6538L17.1632 7L17.9202 7.84615L13.7569 12.5L17.9202 17.1538L17.1632 18L13 13.3462L8.83673 18Z' fill='black'/%3E%3Crect x='1' y='1' width='24' height='23' rx='6' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    color: #000;
    margin: 0;
}

.profile-picutre-upload.ui-dialog  ::-webkit-file-upload-button {
    border-radius: 6px !important;
    border: 1px solid var(--clientela-black, #000);
    background: var(--clientela-off-grey, #F1F1F1);
    height: 30px;
    padding: 0 12px;
    margin-right: 16px;
    margin-bottom: 21px;
}
.profile-picutre-upload.ui-dialog .ui-dialog-content {
    padding: 16px;
}

.profile-picutre-upload.ui-dialog label {
    display: none !important;
}

.profile-picutre-upload.ui-dialog .btn-primary {
    margin: 0;
    height: 38px;
    font-size:  13px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.65px;
    margin-bottom: 21px;
}

.profile-picutre-upload.ui-dialog .image-widget-data span {
    margin-bottom: 16px;
}

.profile-picutre-upload.ui-dialog .image-widget-data input {
    border: none !important;
}

.profile-picutre-upload.ui-dialog .image-widget-data span a {
    color: #000 !important;
}

.profile-picutre-upload.ui-dialog .simple-status-messages {
    width: 94%;
    right: 3%;
    top: 50px;
    display: flex;
    justify-content: space-between;
}

.profile-picutre-upload.ui-dialog .simple-status-messages .messages--error {
    display: flex;
    justify-content: space-between;
}
.profile-picutre-upload .simple-status-messages .messages--error> div {
    width: calc(100% - 20px);
}

.profile-picutre-upload .simple-status-messages .messages--error> span {
    font-size: 0;
    text-indent: -1000px;
    width: 15px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M1.15385 16L0 14.7692L6.34615 8L0 1.23077L1.15385 0L7.5 6.76923L13.8462 0L15 1.23077L8.65385 8L15 14.7692L13.8462 16L7.5 9.23077L1.15385 16Z' fill='%23E02020'/%3E%3C/svg%3E%0A");
}
/* 5.2 Delete Popup */
.delete_popup.ui-dialog .ui-dialog-titlebar {
    background-color: #F1F1F1;
    padding: 16px 10px !important;
}

.delete_popup.ui-dialog .ui-dialog-title {
    color: #000;
    font-family: GothamHTF-Medium, Sans-serif;
    font-size: 17px;
    text-align: center;
    width: 100%;
    margin: 0px !important;
    line-height: 22px;
}

.delete_popup.ui-dialog .ui-dialog-titlebar-close {
    display: none !important;
}

.delete_popup.ui-dialog .ui-dialog-content {
    padding: 0 !important;
    min-height: auto !important;
}

.delete_popup.ui-dialog .cl-delete-popup-btns {
    display: flex !important;
    padding: 16px !important;
    /* justify-content: space-between; */
    gap: 10px;
    align-items: center;
    width: 100%;
}

.delete_popup.ui-dialog .cl-delete-popup-btns a:first-child {
    font-size: 13px;
    line-height: normal;
    text-transform: none;
    color: white !important;
    border-radius: 4px;
    background: #00CE7C;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 10px !important;
    height: 38px;
    font-family: GothamHTF-Light, Sans-serif;
    text-decoration: none !important;
    width: 56%;
    cursor: pointer;
}

.delete_popup .cl-delete-popup-btns a:last-child {
    font-size: 13px;
    line-height: normal;
    text-transform: none;
    color: #000 !important;
    border-radius: 4px;
    text-decoration: underline !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 10px !important;
    height: 38px;
    font-family: GothamHTF-Light, Sans-serif;
    width: 35%;
    cursor: pointer;
}


/**
* -------------------------------------------------------------------------------------
* 6. #Responsive
* -------------------------------------------------------------------------------------
*/

@media screen and (max-width: 1100px) {
    body {
        padding-top: 77px !important;
    }
}

@media screen and (max-width: 767px) {
    .cl-content-width {
        max-width: 400px;
    }

    body {
        padding-top: 77px !important;
    }

    .cl-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 17px;
    }

    .cl-float-left,
    .cl-float-right {
        float: none;
        width: 100% !important;
    }

    .cl-grid-2 {
        grid-template-columns: 2fr;
    }

    .cl-main-content .cl-grid-2>div:nth-of-type(2) {
        order: 1;
    }

    .cl-main-content .cl-grid-2>div:nth-of-type(1) {
        order: 2;
        grid-row-start: none;
        grid-row-end: none;
    }

    .cl-main-content .cl-grid-2>div:nth-of-type(3) {
        order: 3;
    }

    #cl-client-communication-email .cl-message-content .cl-edit-nav-title {
        width: 40%;
    }
}