/* General styles */
body {
margin: 0;
padding: 0;
font-feature-settings: 'clig' off, 'liga' off;
font-family: "Nunito Sans";
}
/* header */
header {
display: flex;
justify-content: space-between;
align-items: center;
background: #FFF;
box-shadow: 0px -1px 0px 0px #E6E5E3 inset;
padding: 20px 80px;
}
/* logo */
.logo {
display: flex;
align-items: center;
box-shadow: 0px -1px 0px 0px #E6E5E3 inset;
}
/* language options */
.language-options {
display: flex;
gap: 10px;
}
.language-options a {
color: #313535;
text-align: right;
font-feature-settings: 'clig' off, 'liga' off;
font-family: "Nunito Sans";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 22px;
text-decoration: none;
}
.language-options a:hover {
color: #ff0000;
}
.details-box-default {
margin: 0px 200px;
padding: 10px 0px 10px 50px;
background-color: #ffffff;
}
.details-box-default p {
color: #222;
font-family: "Nunito Sans";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.details-box-yellow-default {
margin: 0px 200px;
padding: 10px 0px 10px 50px;
background-color: #ffffff;
height: 212px;
background: linear-gradient(135deg, #FFD400 0%, #FFC001 100%);
}
.details-box-yellow-default h2 {
color: #222;
font-family: "Nunito Sans";
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: 32px;
width: 50%;
}
.details-box-yellow-default p {
color: #222;
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
width: 50%;
}
.details-box p {
color: #222;
font-family: "Nunito Sans";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.details-box-yellow {
margin: 0px 200px;
padding: 10px 50px 10px 50px;
background-color: #ffffff;
min-height: 212px;
height: auto;
background: linear-gradient(135deg, #FFD400 0%, #FFC001 100%);
}
.details-box-yellow h2 {
color: #222;
font-family: "Nunito Sans";
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: 32px;
width: 50%;
}
.details-box-yellow p {
color: #222;
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
width: 50%;
}
.details-box {
background-color: #FBFDF4;
padding: 5px 5px 5px 50px;
border-radius: 5px;
margin: 0 200px 20px;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
width: 50%;
max-width: 300px;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}
.info-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: white;
background-color: #009640;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.details-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #009640;
}
/* New sections */
.section {
display: flex;
margin: 20px 250px;
}
.section-left {
flex: 1;
padding-right: 20px;
display: flex;
flex-direction: column;
}
.section-right {
flex: 1;
padding-left: 20px;
}
.section h3 {
width: 404px;
color: #222;
font-family: "Nunito Sans";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
/* Input fields */
.input-container-disable {
display: flex;
align-items: center;
box-shadow: 0px -1px 0px 0px #E6E5E3 inset;
}
.input-container-disable label {
margin-right: 10px;
width: 40%;
color: #8F8E8C;
font-family: "Nunito Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 30px;
}
.input-container-disable input[type="text"] {
width: 60%;
padding: 21px;
margin-top: 3px;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0px -1px 0px 0px #E6E5E3 inset;
text-align: right;
}
.input-container {
background-color: #F7F7F7;
margin-bottom: 20px;
padding-left: 10px;
box-shadow: 0px 3px 0px 0px #E6E5E3;
}
.input-container label {
color: #222222;
font-family: "Nunito Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 30px;
padding: 10px;
}
.input-container input[type="text"] {
padding: 10px;
border: 0px solid #ccc;
border-radius: 0px;
box-sizing: border-box;
background-color: #F7F7F7;
width: 100%;
}
.input-container-date {
background-color: #F7F7F7;
margin-bottom: 20px;
padding-left: 10px;
box-shadow: 0px 3px 0px 0px #E6E5E3;
}
.input-container-date label {
color: #222222;
font-family: "Nunito Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 30px;
padding: 10px;
}
.input-container-date input[type="date"] {
padding: 10px;
margin-top: 3px;
border: 0px solid #ccc;
border-radius: 0px;
box-sizing: border-box;
background-color: #F7F7F7;
width: 100%;
}
.input-container-checkbox {
display: flex;
align-items: center;
padding-bottom: 10px;
}
.input-container-checkbox label {
margin-right: 10px;
width: 40%;
color: #8F8E8C;
font-family: "Nunito Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 30px;
}
.input-container-checkbox input[type="text"] {
width: 60%;
padding: 21px;
margin-top: 3px;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.input-container-checkbox input[type="text"] {
padding: 10px;
margin-top: 3px;
text-align: right;
border: 0px solid #ccc;
border-radius: 0px;
}
select {
width: calc(100% - 20px); 
box-sizing: border-box;
border: 0px solid #ccc;
background-color: #F7F7F7;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 20px;
}
 /* Make Select2 dropdown transparent and remove border */
    .select2-container .select2-selection--single {
        background-color: transparent !important;
        border: none !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Adjust the dropdown arrow */
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }

    /* Customize the dropdown options */
    .select2-container--default .select2-results > .select2-results__options {
        background-color: transparent !important;
        border: none !important;
    }

    /* Customize the search box */
    .select2-search--dropdown .select2-search__field {
        background-color: transparent !important;
        border: none !important;
    }

    /* Customize the highlighted option */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #f0f0f0 !important;
        color: #333 !important;
    }

.btn-container {
padding-left: 240px;
}
.save-btn {
padding: 10px 20px;
margin-left: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: "Nunito Sans";
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
background-color: #FFD400;
border: 1px solid #E8C100;
color: #000000;
}
.edit-text {
font-size: 12px;
font-weight: 400;
color: #706F6E;
margin-top: 10px;
margin-bottom: 30px;
}
.input-container-checkbox input[type="checkbox"] {
scale: 1.5;
margin-right: 50px;
accent-color: #FBB913;
}
/* Footer */
footer {
color: #313535;
padding: 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-family: "Nunito Sans";
}
footer .left-text,
footer .right-text {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
footer .left-text span:not(:last-child),
footer .right-text span:not(:last-child) {
margin-right: 30px;
}
footer .left-text::after,
footer .right-text::after {
margin: 0 5px;
color: #fff;
}
footer .left-text:last-child::after,
footer .right-text:last-child::after {
content: none;
}
/* Divider above footer */
.divider {
border-top: 2px solid #F3F3F3;
margin-top: 20px;
}
/* Media query for smaller screens */
@media only screen and (max-width: 768px) {
/* Header */
header {
padding: 20px; 
}
.logo img {
width: 100px; 
height: auto;
}
.language-options {
gap: 15px;
}
/* Details Boxes */
.details-box-yellow,
.details-box-yellow-default{
margin: 20px; 
}
.details-box-default h2,
.details-box-default p,
.details-box-yellow-default h2,
.details-box-yellow-default p,
.details-box h2,
.details-box p,
.details-box-yellow h2,
.details-box-yellow p
{
width: auto; /* Reset width */
font-size: 16px; 
line-height: 22px; 
}
/* Sections */
.section {
margin: 20px; 
flex-direction: column;
}
.section-left,
.section-right {
padding: 0;
}
.input-container,
.input-container-date {
padding: 10px; 
}
.btn-container {
padding-left: 20px; 
}
/* Footer */
footer {
padding: 20px; 
footer .left-text span:not(:last-child),
footer .right-text span:not(:last-child) {
margin-right: 20px; /* Adjusted spacing */
}
/* Divider above footer */
.divider {
margin-top: 10px; 
}
}