/* .table_header, .table_row {
    display: grid;
    height: 20px;    
}

.table_header.edit_template, .table_row.edit_template { 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr 2fr;
}

.table_data[data-column-id="0"]{
    display:none;
} */

/* CSS variables */
:root {
    --primary-font: 'Anuphan', sans-serif;
    --font-weight-regular: 400;
    --font-weight-title: 700;
    --primary-color: #005db6;
    --primary-color-50: #1176e0;
    --primary-color-25: #a9c7ff;
    --primary-color-15: #d6e3ff;
    --primary-color-10: #ecf0ff;
    --secondary-color: #006a68;
    --secondary-color-50: #028583;
    --tertiary-color: #865300;
    --error-color: #ba1a1a;
    --background-color: #fdfbff;
    --pure-white-color: #fff;
    --neutral-color-100: #1a1c1e;
    --neutral-color-70: #515153;
    --neutral-color-50: #77777a;
    --neutral-color-10: #e0e2ec;
    --headline-large: 32px;
    --headline-medium: 24px;
    --body-large: 16px;
    --body-medium: 14px;
    --primary-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

body {
    font-family: var(--primary-font);
    font-size: var(--body-large);
    font-weight: 400;
    color: var(--neutral-color-70);
    padding: 24px;
    background: linear-gradient(0deg, rgba(236, 240, 255, 1) 35%, rgba(255, 255, 255, 1) 100%);
    background-attachment: fixed;
}

.header,
.footer {
    display: flex;
    padding: 25px 0;
    align-items: center;
    justify-content: center;
}
.footer {
    justify-content: flex-end;
}

.header-logos {
    display: flex;
    align-items: center;
    gap: 10px;
}

.netprofiler-logo {
    height: 35px;
}

.leadscope-logo {
    height: 20px;
}

.clickable input {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

#myGridStart,
.ag-header-row.ag-header-row-column {
    font-size: var(--body-medium);
}

body > div {
    max-width: 1450px;
    padding: 20px 0;
    margin: auto;
    display: none;
}

#start .start_view,
#template .template_view,
#edit .edit_view,
#select .select_channels {
    display: block;
}

.header_title {
    font-weight: var(--font-weight-title);
    font-size: var(--headline-medium);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
}
.sub_header {
    display: flex;
    justify-content: space-between;
}

.header-h1 {
    font-weight: var(--font-weight-title);
    font-size: var(--headline-large);
    margin: 20px 0;
}
.header-line {
    height: 1px;
    background-color: var(--neutral-color-70);
    margin-top: -32px;
    position: absolute;
    width: 393px;
    border: none;
}

#start,
#editCampaign,
#editTemplate,
#edit {
    margin-top: 0;
    padding-top: 10px;
}

.btn {
    cursor: pointer;
    padding: 10px 24px;
    border-radius: 40px;
    text-align: center;
    font-size: var(--body-medium);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    color: var(--background-color);
}

.btn-primary:hover {
    background-color: var(--primary-color-50);
    box-shadow: var(--primary-box-shadow);
}

.btn-primary.disabled {
    background-color: var(--neutral-color-50);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--background-color);
    color: var(--primary-color);
    border: 1px solid var(--neutral-color-70);
}

.btn-secondary:hover {
    background-color: var(--primary-color-10);
    box-shadow: var(--primary-box-shadow);
}

.flex-columns {
    display: flex;
    justify-content: space-between;
}

.channelCard {
    cursor: pointer;
    background-color: var(--secondary-color);
    /* border: 1px solid #ccc; */
    margin: 0 60px 0 0;
    border-radius: 15px;
    /* width: 100px; */
    text-align: center;
    color: var(--pure-white-color);
    padding: 20px 30px;
    text-align: center;
    font-size: var(--body-medium);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

.channelCard:hover {
    background-color: var(--secondary-color-50);
    box-shadow: var(--primary-box-shadow);
}

.clickable {
    /* text-decoration: underline; */
    background-color: var(--background-color);
    color: var(--primary-color);
}

.ag-center-cols-container div {
    border-bottom-width: 0px;
}

.editable {
    background-color: var(--background-color);
    cursor: text;
    border: 1px solid var(--neutral-color-10) !important;
    border-radius: 10px;
    /* margin: 0px 5px; */
}
.editable_fields {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.editable_fields > div {
    padding: 20px;
    background-color: var(--pure-white-color);
}

.channels {
    background-color: var(--pure-white-color);
    display: flex;
    flex-direction: row;
    padding: 20px 0 20px 20px;
}
#editCampaign .footer {
    background-color: var(--pure-white-color);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 20px;
}
.editable_fields > div label {
    padding-right: 30px;
    vertical-align: middle;
}
.editable_fields > div input,
.editable_fields > div textarea {
    border: 1px solid var(--neutral-color-50);
    border-radius: 5px;
    padding: 5px;
    height: 25px;
    font-family: var(--primary-font);
    font-size: var(--body-large);
}
.editable_fields > div textarea {
    height: 100px;
    width: 500px;
}

.ag-ltr .ag-cell {
    border-right-width: 0px;
}

.editable .ag-cell-focus {
    border-color: var(--primary-color) !important;
    padding: var(--ag-grid-size);
    /* height: calc(var(--ag-row-height) + var(--ag-grid-size) * 3); */
    background-color: var(--pure-white-color);
}

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: var(--pure-white-color);
    border-bottom: 1px solid var(--neutral-color-50);
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: var(--neutral-color-10);
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: var(--primary-color) !important;
    color: #ffffff;
}

/* Overlayer */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--neutral-color-100);
    opacity: 0.5;
    z-index: 10;
}
.overlay {
    width: 1400px;
    max-width: 100vw;
    height: 600px;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: calc((100vw - 1400) / 2);
    z-index: 20;
    border-radius: 10px;
    padding: 20px;
}
.overlay .btn {
    width: 210px;
    margin: 10px auto;
    padding: 10px;
}
.overlay .title {
    font-size: var(--body-medium);
    color: var(--neutral-color-70);
    padding: 20px;
}
.close_overlay {
    font-family: 'Material Icons';
    width: 0;
    height: 0;
    position: absolute;
    top: 9px;
    right: 24px;
    cursor: pointer;
}

#myGridStart .ag-root-wrapper {
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
}

/* Add icons to table */
[col-id='copy']:not(.ag-header-cell) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ContentCopyIcon' aria-label='fontSize large'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px;
}
[col-id='copy']:not(.ag-header-cell):hover {
    cursor: pointer;
}
[col-id='delete']:not(.ag-header-cell) {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 0V1H16V3H15V16C15 17.1 14.1 18 13 18H3C1.9 18 1 17.1 1 16V3H0V1H5V0H11ZM3 16H13V3H3V16ZM5 5H7V14H5V5ZM11 5H9V14H11V5Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}
[col-id='delete']:not(.ag-header-cell):hover {
    cursor: pointer;
}

#editCampaign .footer {
    justify-content: flex-end;
    gap: 20px;
}
#deleteCampaign,
#createXLS,
#buttonAddCampaign,
#buttonEditTemplate,
#buttonAddChannel,
#addChannel {
    display: flex;
    gap: 11px;
}

.breadcrumb,
.breadcrumb a {
    color: var(--neutral-color-70);
    text-decoration: none;
    font-size: var(--body-medium);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-active {
    color: var(--neutral-color-100);
}

#editIntroText {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.shadow-wrapper {
    background-color: var(--pure-white-color);
    box-shadow: var(--primary-box-shadow);
}
.category {
    padding: 20px;
}

.editable_fields input:focus-visible,
.editable_fields textarea:focus-visible {
    outline: var(--primary-color-50) auto 1px;
}

.ag-root-wrapper.ag-layout-normal.ag-ltr {
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
}