@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');


.manrope{
    font-family: 'Manrope', sans-serif;
}

:root {
    --primary-color: #1E1E1E;
    --secondary-color: #FFFFFF;
    --white: #FFFFFF;
    --red-caution: #FF1A0C;
    --success: #55aa00;
    --cancel: #ffe600cf;
  }


body {
    background-color: #F3F3F3;
    color: var(--primary-color);
    font-family: 'Inter', sans-serif;
}

.container-main{
    max-width: 1194px;
}

.text-dark-oak {
    color: var(--primary-color);
}

.background-dark-oak {
    background-color: var(--primary-color);
    background: var(--primary-color) !important;
}

.text-hidden {
    color: #999EA1;
}

.description-text {
    color: var(--primary-color);
    font-size: 16px;
}

.no-outline {
    outline: none !important;
}

.card{
    background-color: var(--white);
    border-radius: 5px;
    padding: 10px;
}

#side-bar {
}

.layout-border{
    border-color: var(--primary-color);
}

.theme-border{
    border-color: var(--primary-color);
}

.theme{
    background-color: var(--primary-color);
    background: var(--primary-color) !important;
}

.theme-text{
    color: var(--primary-color);
}


.menu-item {
    display: flex;
    align-items: center;
    transition: ease-in-out;
    transition-duration: 100ms;
    padding: 10px 20px 10px 20px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
}

.menu-item-active {
    color: var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
}

.menu-item > svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.gray{
    background-color: #FAFAFA;
}

.light-gray{
    color: #A4A4A4;
}

.dark-gray{
   color: #87888C;
}

.graphit{
    color: #454545;
}

.navigation a:hover{
    padding-left: 28px;
}

.log-out,
.log-out a:hover{
    color: #FF1A0C;
}

.outfit{
    font-family: 'Outfit', sans-serif;
}

.inter{
    font-family: 'Inter', sans-serif;
}

.poppins{
    font-family: 'Poppins', sans-serif;
}

.body-color{
    color: var(--primary-color);
}

.icon-wrapper:hover path{
    fill: #fff;
}

.icon-wrapper:hover svg{
    transform: scale(1.15);
    transition: ease-in-out;
    transition-duration: 150ms;
}

.button-primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.button-secondary {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.button{
    transition: ease-out;
    transition-duration: 150ms;
    border: solid 1px var(--primary-color);
    color: var(--primary-color);
    border-radius: 2px;
    padding: 4px 6px;
}

.button:hover{
    transform: scale(1.05);
    background-color: var(--primary-color);
    color: var(--white);
}


.delete-button {
    border: solid 1px var(--red-caution);
    color: var(--red-caution);
}
.delete-button:hover {
    background-color: var(--red-caution);
}

.delete-text {
    color: var(--red-caution);
}
.delete-text:hover {
    text-decoration: underline;
    cursor: pointer;
}

.cancel-button {
    border: solid 1px var(--cancel);
    color: var(--cancel);
}
.cancel-button:hover {
    background-color: var(--cancel);
}

.create-button {
    border: solid 1px var(--success);
    color: var(--success);
}
.create-button:hover {
    background-color: var(--success);
}

.box-xl{
    width: 848px !important;
}

.box-lg{
    width: 578px;
    height: auto;
}

.box-sm{
    width: 300px;
    height: auto;
}

.black-1{
    color: #121212;
}

.black-2{
    color: #292D32;
}

.black-3{
    color: #000C14;
}

.gray-1{
    color: #A0A0A0;
}

.gray-2{
    color: #B5B7C0;
}

.gray-3{
    color: #505050;
}

.yellow-1{
    color: #FEB95A;
}

.aqua-1{
    color: #24D3BD;
}

.aqua-2{
    color: #20AEF3;
}

.aqua-3{
    color: #16C098;
}

.pink-1{
    color: #EB36D5;
}

.box-shadow-primary{
    box-shadow: 0px -1px 24px rgba(149, 157, 165, 0.2);
}

.box-shadow-secondary{
    box-shadow: 0px 0px 14px 9px rgba(0, 0, 0, 0.04);
}

.box-shadow-1{
    box-shadow: 0px 17px 24px rgba(149, 157, 165, 0.2);;
}

.box-shadow-2{
    box-shadow: 0px 10px 60px rgba(226, 236, 249, 0.5);
}

.state-ok{
    background: rgba(131, 239, 187, 0.26);
    border: 0.5px solid #93E8AA;
    border-radius: 4px;
}

.green-1{
    color: #29C943;
}

.red-1{
    color: #FB344F;
}

.bg-delete{
    background-color: #FB344F !important;
}

.border-table{
    border-top: 1px solid #EEEEEE !important;
}

#myTable_wrapper{
    max-width: 100%;
}

.button-1{
    background: var(--primary-color);
    border-radius: 12px;
    padding: 16px 14px;
    color: #FFFFFF;
}

.button-2{
    background: rgba(108, 93, 211, 0.39);
    box-shadow: 0px 0px 14px 12px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    color:  var(--primary-color);
    padding: 12px 20px;
}

.button-3{
    background: var(--primary-color);
    box-shadow: 0px 0px 14px 12px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    color:  #ffffff;
    padding: 12px 50px;
}

.button-4{
    background: var(--primary-color);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 12px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: 400;
    min-width: 105px;
}

.button-5{
    background: #87888C;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 10px 14px;
    color: #ffffff;
    font-weight: 300;
    font-size: 12px;
    min-width: 104px;
}

.button-6{
    background: var(--primary-color) !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 10px 14px;
    color: #ffffff;
    font-weight: 300;
    font-size: 12px;
    min-width: 104px;
}

.button-1:hover{
    background: #FFFFFF;
    color: var(--primary-color);
}

.active{
    color: #000000;
    font-weight: 600;
    font-size: 22px;
}

.dataTables_empty {
    color: #797979;
}
.dataTables_empty:hover {
    background-color: white;
}

.dataTables_length{
    display: none;
}

#myTable .sorting{
    font-weight: 500;
}

.odd td,
.even td{
    box-shadow: none !important;
}

.odd td:hover,
.even td:hover,
.odd td:active,
.even td:active,
.odd td:focus,
.even td:focus{
    box-shadow: none !important;
}

.sorting_1{
    box-shadow: none;
}

#myTable tr td:first-child{
    padding-left: 38px !important;
}

#myTable.table-1 tr td{
    padding-top: 20px;
    padding-bottom: 20px;
}

#myTable tr td{
    padding-top: 16px;
    padding-bottom: 16px;
}

#myTable tr th:first-child{
    padding-left: 38px !important;
}

.table-head tr th{
    border-bottom: 1px solid #EEEEEE !important;
    padding-bottom: 18px;
}

.srt{
    background: rgba(131, 239, 187, 0.26);
    border: 0.5px solid #93E8AA;
    border-radius: 4px;
    color: #29C943;
    text-align: center;
    padding: 4px 20px;
    font-size: 10px;
    font-weight: 500;
}

table.dataTable thead>tr>th.sorting{
    padding-left: 10px;
}

table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after{
    display: none !important;
}

#myTable_info{
    padding-left: 36px !important;
    color: #B5B7C0;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

#myTable{
    border-bottom: 1px solid #EEEEEE;
}

.settings{
    margin-left: 26px !important;
}

.paginate_button{
    background: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    border-radius: 4px !important;
    color: var(--primary-color) !important;
    font-size: 12px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.current{
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px !important;
    color: var(--secondary-color) !important;
}

#myTable_paginate,
#myTable_info{
    padding-bottom: 40px;
}

#myTable_info{
    padding-top: 36px;
}

#myTable_paginate{
    padding-top: 30px;
}

#myTable_paginate{
    padding-right: 28px;
}

#myTable_filter input{
    background: #F9FBFF !important;
    border-radius: 10px !important;
    outline: none !important;
    border-color: rgba(173, 173, 173, 0.12);
    padding: 5px;
    position: absolute;
    right: 30px;
    top: -72px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc{
   background-image: none !important;
}

table.dataTable > thead .sorting_desc {
    color: rgb(38, 38, 253);
}

table.dataTable > thead .sorting_asc {
    color: rgb(255, 62, 62);
}

#myTable_wrapper{
    border-bottom-left-radius: 10px;
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.display tbody tr.even>.sorting_1{
    background-color: rgba(255, 255, 255, 0) !important;
    box-shadow: none !important;
}

.ui-state-default{
    border: none;
}

tbody tr.ui-state-default,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even{
    background-color: #fff !important;
}

tbody tr.ui-state-default:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover,
table.dataTable.display tbody tr.odd>.sorting_1:hover,
table.dataTable.display tbody tr.even>.sorting_1:hover{
    background-color: #EDEDED !important;
}

table.dataTable.display tbody.health_declaration tr:last-child>.sorting_1,
table.dataTable.display tbody.overview tr:last-child>.sorting_1,
tbody.overview tr:last-child td:first-child{
    border-bottom-left-radius: 30px !important;
}

#myTable .health_declaration tr:last-child td:first-child{
    border-bottom-left-radius: 30px !important;
}

table.dataTable.display tbody.health_declaration tr:last-child td:last-child,
tbody.health_declaration tr:last-child td:last-child{
    border-bottom-right-radius: 30px !important;
}

table.dataTable.display tbody.overview tr:last-child td:last-child{
    border-bottom-right-radius: 10px !important;
}

table.dataTable.display tbody.overview tr:last-child>.sorting_1{
    border-bottom-left-radius: 10px !important;
}

table.health_declaration{
   border-bottom: 0px !important;
}

#myTable tbody.overview tr td{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

#myTable.overview{
    border-bottom: 0px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    color: #fff !important;
    transition: ease-out;
    transition-duration: 300ms;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: var(--primary-color) !important;
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--primary-color);
}

.max-w-form{
    max-width: 840px;
}

.max-w-form-package {
    width: 990px;
}

input#id_title{
    width: 100% !important;
    margin-bottom: 16px !important;
}

.form-item select,
input#id_title,
input#id_name,
input#generic_product_name,
input#solar_panel_name,
input#inverter_name,
input#charging_box_name,
input#battery_name,
input#mount_name,
.question-form input.form,
input.form,
select.form{
    width: 256px;
    height: 40px !important;
    border-radius: 5px;
    border: 1px solid #C6C6C6;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 6px;
    transition: ease-in-out;
    transition-duration: 300ms;
}

.form-wrapper label{
    margin-bottom: 8px;
    font-family: 'Manrope' !important;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    color: #505050;
}

.form-wrapper input{
    margin-bottom: 16px !important;
}

form#fill_text input,
form#only_text input{
    width: 100% !important;
}

form#only_text textarea,
form#fill_text textarea{
    height: 116px !important;
    border-radius: 5px;
    border: 1px solid #C6C6C6;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    padding: 12px 12px 12px 6px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 6px;
    padding-bottom: 12px;
    transition: ease-in-out;
    transition-duration: 300ms;
}


.reset-password-input input:hover,
.reset-password-input input:focus,
.reset-password-input input:active,
.reset-password-input input:focus-visible,
.form-item select:hover,
.form-item select:focus,
.form-item select:active,
.form-item select:focus-visible,
input#id_title:hover,
input#id_title:focus,
input#id_title:active,
input#id_title:focus-visible,
form#fill_text textarea:hover,
form#fill_text textarea:focus,
form#fill_text textarea:active,
form#fill_text textarea:focus-visible,
form#only_text textarea:hover,
form#only_text textarea:focus,
form#only_text textarea:focus-visible,
form#only_text textarea:active,
form#only_text input:hover,
form#only_text input:focus,
form#only_text input:active,
input#id_name:hover,
.question-form input.form:hover,
input#id_name:focus,
.question-form input.form:focus,
input#id_name:active,
.question-form input.form:active,
input.form:hover,
input.form:focus,
input.form:active,
select.form:hover,
select.form:focus,
select.form:active{
    border: 1px solid var(--primary-color);
    outline: none !important;
}



.form-image{
    background: rgba(200, 192, 255, 0.28);
    border: 1px solid #7B7B7B;
    border-radius: 5px;
    width: 256px;
    height: 116px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center !important;
    outline: none !important;
    z-index: 20;
    padding: 20px 24px !important;
}

.image_placeholder{
    background-color: rgba(209, 207, 220, 0.28) !important;
    border: 1px solid #7B7B7B !important;
    border-radius: 5px !important;
    width: 212px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    padding-top: 16px;
    padding-bottom: 18px;
}

img.product-image{
    max-width: 108px;
    max-height: 108px;
}

.option_wrapper{
    background: #FFFFFF !important;
    border: 1px solid #8B8B8B !important;
    box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.06) !important;
    border-radius: 3px !important;
    padding: 6px;
    max-height: 28px;
    max-width: 28px;
}

.textarea,
textarea#comments,
textarea#comments_q{
    background: #FFFFFF;
    border: 1px solid #C6C6C6;
    border-radius: 5px;
    min-height: 116px;
    font-size: 12px;
    color: #121212;
    font-family: 'Manrope', sans-serif;
    padding: 12px 12px 14px 14px;
}

textarea#comments_q{
    min-height: 48px;
}

.textarea:hover,
.textarea:focus,
.textarea:active,
textarea#comments:hover,
textarea#comments:focus,
textarea#comments:active,
textarea#comments_q:hover,
textarea#comments_q:focus,
textarea#comments_q:active{
    border: 1px solid var(--primary-color);
    outline: none !important;
}

.box{
    max-width: 256px;
    min-height: 212px;
    background-color: rgba(108, 93, 211, 0.25);
    box-shadow: 0px 1px 15px 7px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    padding: 36px 20px 24px;
}

input.form-control{
    background: #FFFFFF !important;
    border: 1px solid #C6C6C6;
    border-radius: 5px;
    width: 348px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 10px 12px 14px;
}

input.form-control:hover,
input.form-control:active,
input.form-control:focus{
    border: 1px solid var(--primary-color);
    outline: none !important;
}

#news_form .django-ckeditor-widget textarea{
    width: 100% !important;
    border: 1px solid #C6C6C6;
    padding: 12px 10px 14px 12px;
    border-radius: 5px;
    min-height: 198px !important;
    height: 198px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #475363;
}

#news_form .django-ckeditor-widget textarea:hover,
#news_form .django-ckeditor-widget textarea:active,
#news_form .django-ckeditor-widget textarea:focus{
    border: 1px solid var(--primary-color);
    outline: none !important;
}

#news_form .form{
    max-width: 835px !important;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #475363;
}


a.paginate_button{
    transition: ease-out;
    transition-duration: 300ms;
    background-color: var(--secondary-color);
}

a.paginate_button:hover{
    background-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

a.paginate_button.disabled{
    display: none !important;
}

input[type=checkbox] {
    width: 12px !important;
    height: 12px !important;
    margin-right: 6px;
    margin-left: 6px;
}

.form-dropdown-wrapper {
    width: 256px !important;
    height: 40px !important;
    border-radius: 5px;
    border: 1px solid #C6C6C6;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 6px;
    transition: ease-in-out;
    transition-duration: 300ms;
    background-size: 1.5em 1.5em;
    background-color: #fff;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    cursor: pointer;
}

.form-dropdown-toggler svg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 25%;
    right: 0;
}

.form-dropdown {
    background: #fff;
    border: 1px solid #C6C6C6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    left: 0;
    right: 0;
    top: 100%;
    padding: 15px;
}

.form-dropdown:hover,
.form-dropdown:active,
.form-dropdown:focus{
    border: 1px solid var(--primary-color);
}

.form-dropdown-wrapper:active,
.form-dropdown-wrapper:hover,
.form-dropdown-wrapper:focus{
    border: 1px solid var(--primary-color);
}

.form-dropdown label{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.form-dropdown label:hover{
    color: var(--primary-color);
}


.button-add{
    color: #0066C5;
    text-decoration: underline;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    margin-top: 8px;
}

.ui-dialog{
    font-family: 'Manrope', sans-serif;
}

.ui-dialog-titlebar{
    background-color: var(--primary-color) !important;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.click__confirm{
    font-size: 14px;
    font-weight: 400;
    color: #121212;
}

.color-supplier-name{
    width: 100% !important;
}

.ui-button .ui-icon{
    background-image: url(/static/images/icons/exit_icon.png) !important;
}

.ui-icon-closethick{
    background-position: 0;
}

button.ui-button{
    border: none !important;
}

button.ui-button:hover{
    background: none !important;
}

.ui-dialog-buttonset button{
    background-color: #7B7B7B;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    transition: ease-out;
    transition-duration: 300ms;
}

.ui-dialog-buttonset button:last-child{
    background-color: var(--primary-color);
}

.ui-dialog-buttonset button:last-child:hover{
    background-color: var(--primary-color) !important;
}

.ui-dialog-buttonset button:hover{
    transform: scale(1.05);
    background-color: #7B7B7B !important;
    color: #FFF !important;
}

#click__confirm_1 input.form,
#click__confirm_2 input.form,
#click__confirm_3 input.form,
#click__confirm_4 input.form,
#click__confirm_5 input.form,
#click__confirm_6 input.form{
    width: 93% !important;
}

div.success_message.message{
    color: #16C098 !important;
    font-size: 12px !important;
    margin-top: 8px;
}

.ui-state-default a{
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

form#question-form label[for="id_name"],
form#only_text div label[for="id_content_name"]{
    font-family: 'Manrope' !important;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    color: #505050;
}

.question-form{
    display: flex !important;
    flex-direction: column !important;
    cursor: grabbing;
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 20px 20px 26px 38px;
    box-shadow: 0px 10px 60px rgba(226, 236, 249, 0.5);
    margin-bottom: 16px;
}

.question-form input.form{
    width: 100% !important;
    margin-bottom: 12px;
    margin-top: 8px;
}

form#fill_text input#id_title{
    margin-top: 8px !important;
}

.active-link{
    background-color: var(--primary-color) !important;
    color: #FFF;
}

.active-link path{
    fill: #fff !important;
}

.dot{
    background-color: #06B6D4;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-2{
    background-color: #8B5CF6;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-wrapper{
    width: 254px !important;
}

.form-item input[type=checkbox]{
    margin: 0 !important;
}

.go-back{
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    background-color: var(--primary-color);
    position: absolute;
    padding: 8px 20px 8px 20px;
    border-radius: 15px;
}

.bg-navy{
    background-color: #003049 !important;
}

.navy{
    color: #003049;
}

.navy-1{
    color: #00004D;
}

input#id_file{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 999;
    cursor: pointer;
}

.modal{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 30vh;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    padding-left: 35%;
    padding-right: 35%;
}

.modal-content{
    padding: 20px;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0px 0px 12px;
    text-align: center;
}

.margin-0-auto{
    margin: 0 auto !important;
}

.reset-password-input input{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #C6C6C6;
    border-radius: 5px;
    padding: 10px 16px;
}

.reset-password-box{
    width: 402px !important;
}

form.click__confirm label{
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
}

form.click__confirm input{
    margin-top: 8px !important;
}

.login-bg {
    background-image: url('../images/login-thumbnail.png');
}

li.list-decimal{
    margin-bottom: 8px;
    font-family: 'Manrope' !important;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    color: #505050;
}

.image_placeholder{
    margin-bottom: 16px;
}

#product_packages_form input.form {
    width: 100% !important;
}

input.gallery-form {
    opacity: 0;
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    cursor: pointer;
}

#product_packages_form #id_products {
    width: 100%;
}

.custom-checkbox-wrapper label {
    width: 100%;
    display: flex;
    align-items: center;
}

.custom-checkbox-wrapper input[type="checkbox"] {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px !important;
    margin: 0;
    margin-right: 12px !important;
    position: relative;
    width: 30px !important;
}

.custom-checkbox-wrapper input[type="checkbox"]::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
}

.custom-checkbox-wrapper input[type="checkbox"],
.custom-checkbox-wrapper input[type="checkbox"]::after {
    transition: all 100ms ease-out;
}

.custom-checkbox-wrapper input[type="checkbox"]::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
}

.custom-checkbox-wrapper input[type=checkbox] {
    cursor: default;
}

.custom-checkbox-wrapper input[type=checkbox]:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
}

.custom-checkbox-wrapper input[type=checkbox]:checked {
    background-color: #6e79d6;
}

.custom-checkbox-wrapper input[type=checkbox]:checked::after {
    background-color: #fff;
    left: 13px;
}

.custom-checkbox-wrapper :focus:not(.focus-visible) {
    outline: 0;
}

.custom-checkbox-wrapper input[type=checkbox]:checked:hover {
    background-color: #535db3;
}

#product_packages_form input.form-image {
    height: 30px !important;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 10 !important;
    padding: 0 !important;
    width: 120px !important;
    opacity: 0 !important;
    cursor: default !important;
  }

.textarea textarea {
    width: 100%;
    height: 160px;
    border: 1px solid #C6C6C6;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 14px
}

.textarea textarea:focus {
    border: 1px solid var(--primary-color);
    outline: none !important;
}

.answer-form{
    display: flex !important;
    flex-direction: column !important;
    cursor: grabbing;
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 10px 60px rgba(226, 236, 249, 0.5);
    margin-bottom: 16px;
}

#success-message-delete,
.success-message {
    color: #32cd32;
    font-size: 18px;
    font-weight: 600;
}

.preview-img {
    width: 100%;
    height: 242px;
    border-radius: 4px;
    object-fit: cover;
}

.custom-input-wrapper input {
    width: 100% !important;
}