body
{
    background: #FFFFFF;
    font-family: 'Inter', sans-serif; 
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #333;
}

input 
{
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #333;
}

button
{
    cursor: pointer;
}

.login-container
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #EEF2F7;
    width: 520px;

    padding-left: 40px;
    padding-right: 40px;
}

.login-logo
{
    width: 150px;
    height: 30.94px;
    margin-top: 100px;
}

.login-form
{
    margin-top: 103px;
}

.login-form .login-header
{
    /* Display-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.login-form .login-error
{
    /* Header 4 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    leading-trim: both;
    text-edge: cap;
    letter-spacing: 0.005em;

    color: #BB001B;
}

.login-form label
{
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}

/* Only for text and password input */
.login-form input[type="text"], 
.login-form input[type="password"], 
.login-form input[type="email"]
{
    width: 510px;
    height: 40px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.login-form input[type="checkbox"]
{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border: 1px solid #B8BBBC;
    border-radius: 3px;
}

.submit-button
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    gap: 6px;

    width: 245px;
    height: 40px;
    margin-top: 20px;

    background: #0F458D;
    border-radius: 4px;

    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Base/White */
    color: #FFFFFF;
}

.login-container a 
{
    font-size: 14px;
    font-weight: 400;
    color: #0073E6;
    text-decoration: underline;
    margin-top: 40px;
}

.login-container .form-group-4
{
    display: flex;
    align-items: center; /* Aligns items vertically in the middle */
    gap: 5px; /* Optional: adds a small space between the checkbox and the label */
}

.login-container .copyright
{
    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Base/White */
    color: #333333;

    /* Move to the bottom of the container */
    margin-top: 100px;
}

.login-text
{
    /* Paragraph-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* or 143% */
    letter-spacing: 0.005em;

    color: #667085;   
}

.back-button
{
    /* Button */
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    gap: 6px;

    width: 136px;
    height: 30px;

    background: #EEF2F7;
    border: 1px solid #B7C8DD;
    border-radius: 4px;

    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    color: #0F458D;
}

/******************************************************************************************
    Side bar classes
******************************************************************************************/
.sidebar {
    width: 60px; /* Initial width */
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #0F458D 0%, #0086BB 100%);
    border: 1px solid #B7C8DD;
    transition: width 0.5s; /* Smooth transition for width */

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.01em;

    color: #FFFFFF;
}

.sidebar:hover {
    width: 200px; /* Width after expansion */
}

.menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.menu-item:hover {
    background-color: #0985b6;
}

.icon img {
    width: 30px;
    height: 30px;
}

.icon {
    display: block;
    min-width: 30px; /* Ensure icons align even if sidebar is narrow */
    text-align: center;
    margin-right: 5px;
}

.text {
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    width: 0;
    transition: opacity 0.5s, width 0.5s;
}

.sidebar:hover .text {
    opacity: 1;
    width: auto; /* Allow text to take necessary space */
}

.menu-item.active {
    background-color: #0985b6;
}

.menu-item.disabled {
    pointer-events: none; /* Prevents clicking */
    cursor: default; /* Changes cursor to default to indicate non-interactivity */
}

/******************************************************************************************
    Client: Reporting classes
******************************************************************************************/
.reporting {
    margin-left: 60px; /* Adjust based on your sidebar width */
}

.top-line {
    height: 54px;
    background-color: #0F458D; 

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; /* Aligns children to each end of the container */
    align-items: center; /* Vertically aligns children in the middle */
    padding-right: 20px;

    /* Header-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #F0F0F0;
}

.reporting .content-area {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 54px); /* Adjust based on your top line height */
    min-height: 500px; /* Minimum height to prevent content from being too small */
}

.reporting .content-area .column-header
{
    box-sizing: border-box; /* Include padding and border in the width and height */
    height: 53px;
    background: #EEF2F7;
    border-bottom: 1px solid #B7C8DD;
    margin: 0 -20px;
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 20px;

    display: flex;
    justify-content: space-between; /* Aligns children to each end of the container */
    align-items: center; /* Vertically aligns children in the middle */
   
    /* Header-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #131517;
}

.reporting .content-area .column-header .button-group
{
    display: flex;
    gap: 10px;
}

.reporting .left-column {
    flex: 0 0 30%; /* 30% of the container's width */
    padding: 20px; /* Spacing inside the column */
    max-width: 396px;
    min-width: 200px;
    height: 100%;

    /* A solid border right of the column */
    border-right: 1px solid #ccc;
}

.reporting .form-group {
    margin-bottom: 20px; /* Spacing between form groups */
}

.reporting .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.reporting .form-group select, .reporting .form-group input[type="text"] {
    width: 100%; /* Full width of the column */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the width and height */
    -webkit-appearance: none; /* Normalize appearance across different browsers */
    -moz-appearance: none;
    appearance: none;
}

.reporting .form-group select {
    background-image: url('../images/dropdown_arrow.svg'); /* Path to your dropdown arrow image */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
}

.reporting .right-column {
    /* Styling for the right column */
    flex: 1; /* Takes the remaining space */
    padding: 20px;
}

.reporting .unit-details {
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B7C8DD;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.reporting .unit-details {
    /* Header-3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #131517;
}

.reporting .unit-details .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.reporting .unit-details .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reporting .stat-box {
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B7C8DD;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.reporting .stat-left {
    width: 80%; /* Adjust as needed */
    padding: 15px;

    /* A solid border right of the column */
    border-right: 1px solid #ccc;
}

.reporting .stat-left .header-row {
    width: 100%; /* Adjust as needed */
    margin-bottom: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center; /* Vertically align items in the middle */
    justify-content: space-between; /* Place one item on each end */
}

.reporting .stat-left label {
    display: flex;
    gap: 10px;
    align-items: center; /* Align label text and checkbox */
    margin-right: 20px;
}

.reporting .stat-right {
    padding: 15px;
    width: 20%; /* Adjust as needed */
}

.reporting .stat-right .total-number {
    text-align: left;
}

.reporting .stat-right .total-number span {
    display: block; /* Make each span a block element */
}

.reporting .stat-left canvas 
{
    width: 100%;
    max-height: 300px;
}

/******************************************************************************************
    Client: Settings classes
******************************************************************************************/
.settings {
    margin-left: 60px; /* Adjust based on your sidebar width */
}

.settings .content-area {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 54px); /* Adjust based on your top line height */
    min-height: 500px; /* Minimum height to prevent content from being too small */
}

.settings .content-area .header
{
    box-sizing: border-box; /* Include padding and border in the width and height */
    height: 53px;
    width: 100%;
    background: #EEF2F7;
    border-bottom: 1px solid #B7C8DD;
    margin-bottom: 20px;
    padding: 20px;

    display: flex;
    justify-content: space-between; /* Aligns children to each end of the container */
    align-items: center; /* Vertically aligns children in the middle */
   
    /* Header-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #131517;
}

/******************************************************************************************
    Admin: database classes
******************************************************************************************/
.database {
    margin-left: 60px; /* Adjust based on your sidebar width */
}

.database .content-area {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 54px); /* Adjust based on your top line height */
    min-height: 500px; /* Minimum height to prevent content from being too small */
}

.database .content-area .column-header
{
    box-sizing: border-box; /* Include padding and border in the width and height */
    height: 53px;
    background: #EEF2F7;
    border-bottom: 1px solid #B7C8DD;
    margin-bottom: 20px;
    padding: 20px;

    display: flex;
    justify-content: space-between; /* Aligns children to each end of the container */
    align-items: center; /* Vertically aligns children in the middle */
   
    /* Header-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #131517;
}

.database .left-column {
    box-sizing: border-box; /* Include padding and border in the width and height */
    flex: 0 0 15%; /* 15% of the container's width */
    max-width: 396px;
    min-width: 150px;
    height: 100%;

    /* A solid border right of the column */
    border-right: 1px solid #ccc;
}

.database .subpage-button {
    box-sizing: border-box; /* Include padding and border in the width and height */
    padding: 18px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    background-color: #ffffff; /* Default background color */
    transition: background-color 0.3s; /* Animation effect for color change */

    display: flex;
    justify-content: space-between; /* Aligns text and icon */
    align-items: center;
}

.database .subpage-button:hover {
    background-color: #EEF2F7; /* Color when hovered */
}

.database .subpage-button.active {
    background-color: #EEF2F7; /* Color when hovered */
}

.database .subpage-button:nth-child(2) {
    margin-top: -20px;
}

.database .subpage-button .arrow-icon {
    height: 16px; /* Or your desired size */
    width: auto;
    /* Additional styling if needed */
}

.database .right-column {
    /* Styling for the right column */
    flex: 1; /* Takes the remaining space */
    min-width: 550px;
}

.database .database-table {
    margin-top: -20px;
    width: 100%; /* Full width of the container */
    border-collapse: collapse; /* For cleaner table borders */
}

.database .database-table th, .database-table td {
    border-bottom: 1px solid #ddd; /* Table cell border */
    padding: 8px; /* Padding inside cells */
    text-align: left; /* Align text to left */
    height: 19px;
}

.database .new-content select {
    width: 100%; /* Full width of the column */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the width and height */
}

.database .new-content .delete-button
{
    margin-top: 8px;
    margin-left: 10px;
}

.database .database-table .select-column
{
    display: none;
}

.database .database-table th:first-child, .database .database-table td:first-child {
    width: 10px;
}

.database .database-table th:last-child, .database .database-table td:last-child {
    width: 100px;
}

.database .database-table th {
    background-color: #EEF2F7; /* Header background */
}

.database .sort-arrow {
    cursor: pointer; /* Indicates that arrow is clickable */
}

.database .content-area .button-group
{
    display: flex;
    gap: 5px;
    align-items: center; /* Vertically aligns children in the middle */
}

.database .content-area .column-header .button-group button
{
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

.database .content-area .table-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
}

.input-error-exists {
    border: 1px solid #FFFF00!important;
}

.input-error {
    border: 1px solid #BB001B!important;
}

.database .content-area .delete-confirm {
    background-color: #BB001B!important;
    border: 1px solid #BB001B!important;
    color: white!important;
}

.database .content-area .new-content
{
    padding: 20px;
    padding-top: 0px;
}


.database .content-area .new-content label
{
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}

/* Only for text and password input */
.database .content-area .new-content input[type="text"], 
.database .content-area .new-content input[type="email"], 
.database .content-area .new-content input[type="password"], 
.database .content-area .new-content input[type="date"], 
.database .content-area .new-content textarea
{
    width: 100%;
    height: 40px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
}

.database .content-area .new-content input[type="checkbox"]
{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border: 1px solid #B8BBBC;
    border-radius: 3px;
}

.database .content-area .new-content .image-upload input[type="file"]
{
    display: none;
}

.database .content-area .new-content .image-upload input[type="text"], 
.database .content-area .new-content .image-upload input[type="date"]
{
    width: 60%;
}

.database .content-area .new-content .image-upload button
{
    height: 30px!important;
    margin-bottom: 10px;
    
}

.database .content-area .new-content .image-upload div
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.database .content-area .new-content .color-chooser div
{
    width: 60%;
    display: flex;
    align-items: center;
    gap: 10px;

    width: 60%;
    height: 40px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.database .content-area .new-content .color-chooser input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 22px;
    height: 20px;
    border-radius: 2px;
    cursor: pointer;
}

.database .content-area .new-content .color-chooser input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.database .content-area .new-content .color-chooser input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0px;
}

.database .content-area .new-content .color-chooser .color-code {
    display: inline-block;
    margin-left: 10px;
}

.database .content-area .new-content textarea
{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 150px;
    min-height: 100px;
    padding: 10px;
}

.database .content-area .new-content .unit-table
{
    width: 100%;

    margin-top: 20px;
    margin-bottom: 20px;
    
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    border-collapse: collapse;
    box-sizing: border-box;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
}

.database .content-area .new-content tr {
    display: table-row;
    vertical-align: middle;
}

.database .content-area .new-content th {
    border-bottom: 1px solid #ddd; /* Table cell border */
    padding: 8px; /* Padding inside cells */
}

.database .content-area .new-content th, .database .content-area .new-content td {
    padding: 4px; 
    padding-left: 8px;
    padding-right: 8px; 
    text-align: left; /* Align text to left */
    height: 19px;
}

.database .content-area .new-content th, .database .content-area .new-content td .table-input {
    height: 30px!important;
    margin: 0px;
}

.database .content-area .new-contente th:nth-child(2), .database .content-area .new-content td:nth-child(2) {
    width: 150px;
}

.database .content-area .new-content th:last-child, .database .content-area .new-content td:last-child {
    width: 100px;
}

.database .content-area .new-content .two-col-container
{
    display: flex;
    flex-direction: row;
    gap: 20px; /* Adjust the gap between columns as needed */    
}

.database .content-area .new-content .sgn-col {
    flex: 1; /* Each child div takes equal space */
}

.database .row-color-box
{
    width: 20px;
    height: 20px;
}

.database .brand-image-preview
{
    width: 50px;
    height: 40px;
    margin-bottom: 10px;
    object-fit: cover;
}

.database .delete-button
{
	height: 30px!important;
	width: 30px!important;
}

.database .search-input {
    flex: 1;
    margin-right: 10px;
    margin-left: 10px;
    padding: 3px;
    width: 300px;
}


/* CSS for pagination controls */
.database .pagination {
    font-size: 12px;
    text-align: center; /* Center align pagination controls */
}

.database .pagination button {
    margin-right: 10px;
    margin-left: 10px;
    height: 25px;
    width: 70px;
    background: #0073E6;
    color: white;
    border: 1px solid #0073E6;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition on hover */
    border-radius: 4px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.database .pagination button:hover {
    background: #2c94fd;
}

/* Optional: Style for disabled button */
.database .pagination button[disabled] {
    background-color: #cccccc;
    cursor: not-allowed;
    border: 1px solid #cccccc;
}

/******************************************************************************************
    Admin: Assets classes
******************************************************************************************/
#asset-container
{
	margin-left: 20px;
	display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the space between boxes */
}

#asset-container .media-box 
{
	height: 212px;
	width: 200px;
	border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
	
    border-radius: 4px;
    box-sizing: border-box;
	
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
	
	cursor: pointer;
	transition: background-color 0.3s ease; /* Smooth transition for color change */
}

#asset-container .media-box .file-input
{
	display: none;
}

#asset-container .media-box .delete-confirm
{
    background: rgba(255, 0, 0, 0.5)!important;
}

#asset-container .media-box .container
{
	width: 178px;
	height: 142px;
	overflow: hidden;
    box-sizing: border-box;
}

#asset-container .media-box .drag-and-drop
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Centers children horizontally */
}

#asset-container .media-box .drag-and-drop-label
{
    width: 100%!important; 
	text-align: center;
    font-weight: 600;
	color: #B7C8DD;
    letter-spacing: 0.03em;
}

#asset-container .media-box.hovered
{
    background-color: #e0e0e0; /* Change to desired hover color */
}

#asset-container .media-box.error
{
    border-color: rgba(255, 0, 0, 0.5)!important;
    background-color: rgba(255, 0, 0, 0.1)!important;
}

#asset-container .media-box.error p
{
	color: rgba(255, 0, 0, 0.5)!important;
}

#asset-container .media-box .drag-and-drop img
{
	width: 100px;
}

#asset-container .media-box img, .media-box video
{
    width: 100%; 
    height: auto; 
}

#asset-container .media-box-header
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
	
	height: 15px;
}

#asset-container .media-box-header p
{
	width: 100%;
	text-align: right;
}

#asset-container .media-box-footer
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
	height: 44px;
}

#asset-container .media-box-footer input
{
	width: 120px;
    height: 22px;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    box-sizing: border-box;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: -0.01em;
    color: #131517;	
	
	overflow: hidden;
    white-space: nowrap;
}

#asset-container .media-box-footer p
{
	height: 20px;
	width: 120px;
	overflow: hidden;
    white-space: nowrap;
}

#asset-container .media-box-footer .delete-button
{
	height: 30px!important;
	width: 30px!important;
}

#asset-container .media-box-footer .type-icon
{
    display: flex;
    flex-direction: row;
    justify-content: center; /* Centers children horizontally */
    align-items: center; /* Vertically aligns children in the middle */
}

#asset-container .media-box-footer .type-icon img
{
	height: 20px;
	width: auto;
	margin: 0px;
}


/******************************************************************************************
    Admin: editor classes
******************************************************************************************/
.editor {
    margin-left: 60px; /* Adjust based on your sidebar width */
}

.editor .content-area {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 54px); /* Adjust based on your top line height */
    min-height: 500px; /* Minimum height to prevent content from being too small */
    min-width: 1000px; /* Minimum width to prevent content from being too small */

    background: #F7F9FB;
}

.editor .content-area .column-header
{
    box-sizing: border-box; /* Include padding and border in the width and height */
    height: 53px;
    background: #EEF2F7;
    border-bottom: 1px solid #B7C8DD;
    padding: 20px;

    display: flex;
    justify-content: space-between; /* Aligns children to each end of the container */
    align-items: center; /* Vertically aligns children in the middle */
   
    /* Header-2 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #131517;
}

.editor .left-column {
    box-sizing: border-box; /* Include padding and border in the width and height */
    background: #F7F9FB;
    width: 200px;
    min-width: 200px;
    height: 100%;

    /* A solid border right of the column */
    border-right: 1px solid #ccc;
}

.editor .subpage-button {
    box-sizing: border-box; /* Include padding and border in the width and height */
    padding: 18px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    background-color: #ffffff; /* Default background color */
    transition: background-color 0.3s; /* Animation effect for color change */

    display: flex;
    justify-content: space-between; /* Aligns text and icon */
    align-items: center;
}

.editor .subpage-button:hover {
    background-color: #EEF2F7; /* Color when hovered */
}

.editor .subpage-button.active {
    background-color: #EEF2F7; /* Color when hovered */
}

.editor .subpage-button:nth-child(2) {
    margin-top: -20px;
}

.editor .subpage-button .arrow-icon {
    height: 16px; /* Or your desired size */
    width: auto;
    /* Additional styling if needed */
}

.editor .right-column {
    /* Styling for the right column */
    flex: 1; /* Takes the remaining space */
    /*min-width: 550px;*/
}

.editor .content-area .button-group
{
    display: flex;
    gap: 5px;
    align-items: center; /* Vertically aligns children in the middle */
}

.editor .content-area .column-header .button-group button
{
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

.editor .slide {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;

    height: 80px;
}

.editor .slide .slide-thumbnail
{
    background-size: cover;
}

.editor .slide.selected .slide-thumbnail
{
    border: 2px solid #0F458D;
    border-radius: 4px;
}

.editor .slide-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    width: 100%;
    height: calc(100vh - 54px - 53px - 20px); /* Subtract the header height */
    
    overflow-y: auto; /* Enable vertical scrolling */
}

.editor .slide button {
    height: 30px;
    width: 30px;
    margin-left: 10px;
    margin-top: 5px;
}

.editor .slide button:first-child {
    margin-top: 0px!important;
}

.editor .slide-number {
    margin-right: 10px;
}

.editor .slide-thumbnail {
    flex-grow: 1;
    text-align: center;
    padding: 10px;
    height: 100%;

    border: 1px solid #B7C8DD;
    border-radius: 4px;
    box-sizing: border-box;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.editor .slide-actions {
    display: flex;
    flex-direction: column;
}

.editor .content-area .new-content tr {
    display: table-row;
    vertical-align: middle;
}

.editor .content-area .new-content th {
    border-bottom: 1px solid #ddd; /* Table cell border */
    padding: 8px; /* Padding inside cells */
}

.editor .main-editor-container {
    border-bottom: 1px solid #B7C8DD;
    background: #EEF2F7;
    height: 600px;
}

.editor .main-editor-view {
    position: relative;
    background-color: white;
    background-size: cover;
    height: 600px;
}

.editor .editable-box {
    box-sizing: border-box; /* Include padding and border in the width and height */
    border: 1px solid black;
    position: absolute;
    top: 40px;
    left: 10px;
    width: 100px; /* Initial size */
    height: 50px;
    min-width: 80px;
    min-height: 60px;
    
    cursor: move;
}

.editor .preview-box {
    box-sizing: border-box; /* Include padding and border in the width and height */
    border: 1px solid black;
    position: absolute;
    top: 40px;
    left: 10px;
    width: 100px; /* Initial size */
    height: 50px;
}

.editor .editor-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    background-color: #F7F9FB;
    border-bottom: 1px solid #B7C8DD;
}

.editor .editor-buttons button
{
    height: 30px;
}

/* Style for the resizable handles */
.editor .editable-box .ui-resizable-handle {
    box-sizing: border-box; /* Include padding and border in the width and height */
    background-color: #FFF;
    border: 1px solid #000;
    width: 10px;
    height: 10px;
    z-index: 90;
}

.editor .editable-box .ui-resizable-se {
    right: -5px;
    bottom: -5px;
}

.editor .editable-box .ui-resizable-sw {
    left: -5px;
    bottom: -5px;
}

.editor .editable-box .ui-resizable-nw {
    left: -5px;
    top: -5px;
}

.editor .editable-box .ui-resizable-ne {
    right: -5px;
    top: -5px;
}

.editor .box-label {
    box-sizing: border-box; /* Include padding and border in the width and height */
    position: absolute;
    top: -20px;
    left: 10px;
    height: 20px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px;
    
    color: white;
    border-radius: 3px 3px 0px 0px;
    
    font-family: 'Inter';
    font-style: normal;
    letter-spacing: 0.005em;
    font-weight: 400;
    line-height: 15px;
}

.editor .sound-box, .editor .sound-box-preview
{
    border-color: #00A2E8;
}

.editor .sound-box-label
{
    background: #00A2E8;
    border-color: #00A2E8;
}

.editor .action-box
{
    border-color: #7F7F7F;
}

.editor .action-box-label
{
    background: #7F7F7F;
    border-color: #7F7F7F;
}

.editor .button-box, .editor .button-box-preview
{
    border-color: #9300BB;
}

.editor .gif-box, .editor .gif-box-preview
{
    border-color:rgb(178, 187, 0);
    background-size: cover;
}

.editor .gif-box-label
{
    background: rgb(178, 187, 0);
    border-color: rgb(178, 187, 0);
}

.editor .video-box, .editor .video-box-preview
{
    border-color:rgb(28, 130, 255);
    background-size: cover;
}

.editor .video-box-label
{
    background: rgb(28, 130, 255);
    border-color: rgb(28, 130, 255);
}

.editor .button-box-label
{
    background: #9300BB;
    border-color: #9300BB;
}

.editor .form-field-box
{
    background-color: white;
    border-color: #00BB50;
    padding: 1px;
}

.editor .action-box-preview
{
    border: none;
    padding: 1px;
}

.editor .form-field-box-preview
{
    border: none;
    padding: 1px;
}

.editor .form-field-box-label
{
    background: #00BB50;
    border-color: #00BB50;
}

.editor .scratch-field-box
{
    border-color: #DDA002;
    background-size: cover;
}

.editor .scratch-field-box-preview
{
    border: none;
    background-size: cover;
}

.editor .scratch-field-box-label
{
    background: #DDA002;
    border-color: #DDA002;
}

.editor .element-properties 
{
}

.editor .property-row {
    display: flex;
    align-items: center;
    height: 40px;
    min-width: 900px;
    width: 100%;
    border-bottom: 1px solid #B7C8DD;
}

.editor .property-row .side-line
{
    height: 100%;
    width: 10px;
}

.editor .property-row > div {
    margin-right: 20px;
}

.editor .side-line-button {
    background: #9300BB;
}

.editor .property-row-button {
    background: #DFB3EB;
}

.editor .side-line-sound {
    background: #00A2E8;
}

.editor .property-row-sound {
    background: #99D9EA;
}

.editor .side-line-action {
    background: #7F7F7F;
}

.editor .property-row-action {
    background: #D1D1D1;
}

.editor .side-line-form-field {
    background: #00BB50;
}

.editor .property-row-form-field {
    background: #B3EBCB;
}

.editor .side-line-scratch-field {
    background: #DDA002;
}

.editor .property-row-scratch-field {
    background: #F5E3B3;
}

.editor .side-line-gif {
    background: rgb(178, 187, 0);
}

.editor .property-row-gif {
    background: rgb(224, 226, 178);
}

.editor .side-line-video {
    background: rgb(28, 130, 255);
}

.editor .property-row-video {
    background: rgb(208, 229, 255);
}

.editor .side-line-counting {
    background: rgb(255, 126, 28);
}

.editor .property-row-counting {
    background: rgb(254, 237, 223);
}

.editor .button-editor-delete
{
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 1px solid #667085;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 27px;
    margin-left: auto; /* Pushes the button to the right */
    margin-right: 10px;
}

.editor .button-editor-delete-confirm
{
    background: rgba(255, 0, 0, 0.5);
}

.editor .property-row label
{
    margin-right: 10px;
}

.editor .property-row input[type="text"],
.editor .property-row input[type="number"],
.editor .property-row select
{
    width: 200px;
    height: 20px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding-left: 10px;
    box-sizing: border-box;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.editor .form-field-text-input
{
    width: 100%;
    height: 100%;
    border: none;
}

.editor .resolution-settings
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.editor .resolution-settings label
{
    margin-right: 10px;
    font-size: 12px;
}

.editor .resolution-settings input
{
    width: 60px;
    height: 24px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding-left: 10px;
    box-sizing: border-box;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: #131517;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.saved-message 
{
    color:rgba(0, 0, 0, 0.8);
    padding-top: 5px;
    padding-left: 5px;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in-out; /* Transition effect for opacity */
}

.saved-message.show 
{
    opacity: 1; /* Fade in */
}


.editor .modal 
{
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Ensure the modal appears on top of other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.editor .modal  #assetList {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of thumbnails */
    gap: 10px; /* Add some spacing between thumbnails */
    flex: 1;
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    padding-top: 15px;
}

.editor .modal  .asset-item {
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px; /* Adjust spacing between asset items */
}

.editor .modal .header 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor .modal .thumbnail
{
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.editor .modal-content {
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    margin: 20% auto; /* Center the modal vertically and horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    max-width: 600px; /* Maximum width of the modal */
    min-width: 400px; /* Minimum width of the modal */
}

.editor .modal .asset-name {
    display: block;
    margin-top: 5px; /* Adjust spacing between thumbnail and name */
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate long names */
    white-space: nowrap; /* Prevent line breaks */
    max-width: 100px; /* Maximum width for the name */
}
  
.editor .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
}
  
.editor .close:hover,
.editor .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* CSS for pagination controls */
.editor .modal .pagination {
    margin-top: 20px; /* Adjust spacing between asset list and pagination controls */
    text-align: center; /* Center align pagination controls */
}

.editor .modal .pagination button {
    margin-right: 10px;
    margin-left: 10px;
    height: 30px;
    width: 80px;
    background: #0073E6;
    color: white;
    border: 1px solid #0073E6;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition on hover */
    border-radius: 4px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

.editor .modal .pagination button:hover {
    background: #2c94fd;
}

/* Optional: Style for disabled button */
.editor .modal .pagination button[disabled] {
    background-color: #cccccc;
    cursor: not-allowed;
    border: 1px solid #cccccc;
}

/* Style for the search input */
.editor .modal .search-input {
    flex: 1;
    margin-right: 10px;
    padding: 6px;
}

/******************************************************************************************
    General classes
******************************************************************************************/
.width-80p
{
    width: 80%!important;
}

.width-50px
{
    width: 50px!important;
}

.width-100px
{
    width: 100px!important;
}

.width-300px
{
    width: 300px!important;
}

.width-100p
{
    width: 100%!important;
}

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

.rmrg-10
{
    margin-right: 10px;
}

.rmrg-20
{
    margin-right: 20px;
}

.tmrg-10
{
    margin-top: 10px;
}

.tmrg-20
{
    margin-top: 20px;
}

.tmrg-30
{
    margin-top: 30px;
}

.tmrg-40
{
    margin-top: 40px;
}

.tmrg-60
{
    margin-top: 60px;
}

.tmrg-80
{
    margin-top: 80px;
}

.bmrg-20
{
    margin-bottom: 20px;
}

.bmrg-30
{
    margin-bottom: 30px;
}

.bmrg-40
{
    margin-bottom: 40px;
}

.bmrg-60
{
    margin-bottom: 60px;
}

.bmrg-80
{
    margin-bottom: 80px;
}

.fnt-8 {
    font-size: 8px;
}

.fnt-10 {
    font-size: 10px;
}

.fnt-12 {
    font-size: 12px;
}

.fnt-14 {
    font-size: 14px;
}

.fnt-18 {
    font-size: 18px;
}

.fnt-36 {
    font-size: 36px;
}

.fntw-400 {
    font-weight: 400;
}

.fntw-500 {
    font-weight: 500;
}

.fntw-600 {
    font-weight: 600;
}

.fntw-700 {
    font-weight: 700;
}

.button-blue
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;

    background: #0073E6;
    border-radius: 4px;
    border: 1px solid #0073E6;

    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Base/White */
    color: #FFFFFF;
}

.button-red
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    
    background-color: #BB001B;
    border: 1px solid #BB001B;
    border-radius: 4px;

    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Base/White */
    color: white;
    
}

.button-white
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;

    background: #FFFFFF;
    border: 1px solid #B7C8DD;
    border-radius: 4px;

    /* Paragraph/P3 */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 143% */
    color: #0F458D;
}

.button-arrow
{
    padding: 5px!important;
}

.hidden
{
    visibility: hidden;
}

.clickable
{
    cursor: pointer;
}

.center-aligned
{
}

.invisible
{
    display: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure the overlay appears on top of other elements */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* Semi-transparent overlay */
    display: none; /* Initially hidden */
}

.cursor-default
{
    cursor: default!important;
}

.cursor-pointer
{
    cursor: pointer!important;
}