input, select, .form-control {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #f8f8f8;
    color: #575757;
}

.info-card {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 8px 24px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

div.status {
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
    padding: 6px 8px;
}

html {
    height: 100%;
}
body {
    background: #F5F6F7;
    color: #2D2524;
    /* Важливі зміни: */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Мінімальна висота - весь екран */
    margin: 0; /* Прибираємо стандартні відступи */
}
a {
    color: #F19000;
}
h1{
    font-size: 22px;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin-bottom: 25px;
}
header{

    padding: 10px 10px 20px;
}
.np {
    padding: 0;
}
.form-control {
    height: 50px;
    padding: 11px 12px;
    font-size: 16px;
}
#logo {
    width: 250px;
    margin: 20px 0;
}
.btn {
    font-size: 14px;
    border-radius: 15px;
    padding: 8px 20px !important;
}
.btn-primary {
    color: #fff;
    background: #FF971D;
    border:1px solid #FF971D;
}
/* moved to admin-theme.css */
/*
.data_container {
    background: #fff;
    padding-top: 2px;
    padding-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
    min-height: 500px;
    height: 100%;
    margin-bottom: 0 !important;
}
*/
.page_container, .page_offer_container {
    padding: 24px;
    background: #fff;
    display: block;
    border-radius: 5px;
    min-height: 800px !important;
}
.admin .page_container{
    background: transparent;
    max-width: 1332px;
    width: 100%;
}
footer{
    padding: 24px;
    font-size: 16px;
    background-color:#fff;
}
#logout {
    display: flex;
    justify-content: center;
    margin-bottom: 0px !important;
}
#admin_nav li{
    display: inline-block;
}

.multiselect {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    background: #e7e7e7;
    border: 1px solid #ddd;
    padding: 17px;
}
.pdt15 {
    padding-top: 15px;
}
.pdt0 {
    padding-top: 0px !important;
}
.mt0 {
    margin-top: 0 !important;
}
.nav-tabs li a.error{
    background: #d2532c;
}
.form-control{
    border: 1px solid #E5E7E8;
    color: #787486;
}
.checkcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input:not([type=file]) {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkcontainer [type=file] {
    position: relative;
    opacity: 1;
    cursor: default;
    height: unset;
    width: unset;
    padding: 10px !important;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #FF971D;
}
.checkcontainer input:checked ~ .checkmark.required {
    background-color: #B1B5B8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked > .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container_check .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.radiocontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radiocontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.radiocontainer .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {
    background-color: #FF971D;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocontainer .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {
    top: 6px;
    left: 6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: white;
}

label {
    font-weight: 400;
}
table.dataTable thead th, table.dataTable thead td {
    border-left: 0px solid #F5F6F7;
    background: #EFF0F6;
}

.dataTable>tbody>tr>td {
    border-right: 0px solid #fff !important;
    border-left: 0px solid #fff !important;
}
.colorselector_div {
    width: 50px;
    height: 25px;
    background: #F5F6F7;
    border: 1px solid #ccc;
}
.block_bg{
    padding: 20px;
    background: #f7f7f7;
    border-radius:10px;
}
.block_bg legend{
    width: unset;
    padding: 0 10px;
    font-size: 18px;
}
.dropdown {
    display: inline-block;
    position: relative;
    margin-right: 40px !important;
}
#dataTable td:last-child{
    text-align: right;
}
.dataTables_wrapper .dataTables_info, .dataTables_length {
    font-size: 12px;
}
.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
    font-size: 12px;
}
.npt .form-group, .npt{
    padding-top: 0 !important;
}
.details_md {
    padding:15px 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    min-height: 50px;
    margin-bottom: 15px;
}
.details_md span {
    padding: 10px;
    /* text-decoration: underline; */
    background: #f0f0f0;
    margin: 0 10px;
}
.prize_div .col-lg-3 {
    padding: 10px;
    border:1px solid #ddd;
    border-radius: 10px;
    cursor:POINTER;
}
.prize_div .active {
    background: #f0f0f0;
}
.flex_stretch{
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.flex-justified{
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}
#export_manual_draw {
    height: 50px;
    padding-top: 11px !important;
    width: 120px;
    border-radius: 5px;
    font-size: 18px;
}
.yellow {
    color: yellow;
}
#dataTable {
    width: 100% !important;
}
#delete_codes {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    #delete_codes:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }
    .flex-start {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
@media (min-height: 1080px){
    body{
        height: 100vh;
    }
}
@media (min-width: 1200px){
    .container {
        width: 1560px;
        min-height: unset;
    }
    .admin .container {
        width: 100%;
    }
}

.original-field-container, 
.original-field-hidden { 
    display: none !important; 
}

.access-toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin: 15px 0;
    clear: both;
}

.form-grid + .access-toggle-container,
.form-grid > .access-toggle-container {
    grid-column: 1 / -1; 
}

.switch-label {
    font-weight: 600; 
    color: #333;
    font-size: 14px;
    margin: 0;
    padding-right: 20px;
}

.switch-row {
    display: flex; 
    align-items: center;
    width: auto; 
    flex-shrink: 0;
}

.switch-text {
    color: #666;
    font-size: 13px;
    margin-right: 15px;
    white-space: nowrap;
}

.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.slider {
    position: absolute;
    inset: 0;
    background-color: #A0A0A0;
    border-radius: 20px;
    transition: 0.3s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 16px; 
    width: 16px; 
    left: 2px; 
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.switch.active .slider { 
    background-color: #FF8D00; 
}

.switch.active .slider:before { 
    transform: translateX(18px); 
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 40px !important; 
}

.pwd-toggle, .pwd-eye {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 10;
    font-size: 16px;
    transition: color 0.2s ease;
    line-height: 1;
}

.pwd-toggle:hover, .pwd-eye:hover {
    color: #333;
}

.has-error-border { 
    border: 2px solid red !important; 
}