.background-color { background-color: white; }
.text-color { color: #121212; }

.control { text-align: right; margin-top: 13px; line-height: 25px; display: block; position: relative; }
.control .label { font-size: 13px; padding: 3px; display: inline-block; }
.error-msg { font-size: 12px; display: none; }

.control.error { color: #CD0000; }
.control.error .input, .control.error .select { border: solid 1px #CD0000; box-shadow: 0 0 2px #CD0000; }
.control.error .error-msg { display: inline-block; }

.input, .select { border: 1px solid #C8C8C8; box-sizing: border-box; border-radius: 15px; width: 100%; background-color: white; color: #121212; font-size: 15px; }
.input { padding: 10px; }
.select { padding: 8px 10px; }
.input[disabled], .select[disabled] { border: 1px solid #F1F1F1; background-color: #F1F1F1; }
.input:focus { outline: none !important; border: 1px solid #0460E4; box-shadow: 0 0 2px #0460E4; }


.button { border: solid 2px #E40428; background-color: #E40428; color: white; border-radius: 15px; padding: 9px; font-weight: 500; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.button[disabled] { border: solid 2px #BE0321; background-color: #BE0321; }

.button-secondary { background-color: transparent; border: 2px solid #00C1D4; color: #00C1D4; }
.button-secondary[disabled] { background-color: #F1F1F1; border: 2px solid #00C1D4; color: #00C1D4; }

.button-secondary-fill { background-color: transparent; background-color: #00C1D4; border: 2px solid #00C1D4; color: white; }
.button-secondary-fill[disabled] { background-color: #00C1D4; border: 2px solid #00C1D4; color: white; opacity: 0.7; }

.button-success { background-color: #A2C11C; border: 2px solid #A2C11C; color: white; }
.button-success[disabled] { background-color: #A2C11C; border: 2px solid #A2C11C; color: #A2C11C; opacity: 0.8; }

.button-upload { position: absolute; left: 0; top: 0; bottom: 0; padding: 0 12px; border-radius: 15px; border: none; background-color: #0460E4; color: white; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.upload-section { position: relative; }
.upload-section input[type=text] { padding-left: 55px; padding-right: 40px; }
.upload-section .site-upload-remove-icon { position: absolute; right: 0; bottom: 0; top: 0; display: none; align-items: center; justify-content: center; background: transparent; border: none; padding: 0 10px; cursor: pointer; }

.page-title { font-weight: 800; font-size: 18px; }

.small-text { font-size: 13px; font-weight: 600; }
.link { color: #0460E4; text-decoration: none; }

/*@media (prefers-color-scheme: dark) {
    body { background-color: #555; }
    .background-color { background-color: #555; }
    .text-color { color: #AAA; }
    .input { border: 1px solid #333; background-color: #333; color: white; }
    .button { border: solid 1px #BE0321; background-color: #BE0321; }
    .link { color: #85B7FF; }
}*/

.ltr { direction: ltr; }

.divide-2 { display: flex; gap: 15px; }
.divide-2 > * { flex: 1; }
.divide-2.v-center { align-items: center; }

.block { display: block; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-center { display: flex; align-items: center; gap: 10px; }

.gap-8 { gap: 8px; }

.relative { position: relative; }

.alert { position: relative; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: .25rem; font-size: 12px; font-weight: 500; line-height: 25px; text-align: justify; }
.alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.alert-success { color: #0abb87; background-color: #0abb8715; border-color: #0abb8715; }
.alert-danger { color: #dc3545; background-color: #dc354515; border-color: #dc354515; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.alert-light { color: #818182; background-color: #fefefe; border-color: #fdfdfe; }
.alert-dark { color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; }

.no-decoration, .no-decoration:active, .no-decoration:hover, .no-decoration:focus { text-decoration: none; }

.element-error { border: solid 1px #CD0000; box-shadow: 0 0 2px #CD0000; }

.no-resize { resize: none; }

.hide { display: none; }
.w100p { width: 100%; }

.w25 { width: 25px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w65 { width: 65px; }
.w80 { width: 80px; }
.w85 { width: 85px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w135 { width: 135px; }
.w150 { width: 150px; }
.w155 { width: 155px; }
.w200 { width: 200px; }
.w250 { width: 250px; }

.margin-top-small { margin-top: 5px; }
.margin-top { margin-top: 10px; }
.margin-top-medium { margin-top: 20px; }
.margin-top-large { margin-top: 30px; }
.margin-top-x-large { margin-top: 40px; }
.margin-remove { margin: 0; }
.margin-bottom-remove { margin-bottom: 0; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }

.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.6); display: flex; opacity: 0; visibility: hidden; justify-content: center; align-items: center; transition: all 100ms ease-in; backdrop-filter: blur(5px); z-index: 1000; }
.modal.show { opacity: 1; visibility: visible; transition: all 100ms ease-in; }
.modal .modal-title { font-weight: 600; text-align: center; font-size: 16px; }
.modal-content { background-color: white; width: 100%; max-width: 380px; display: flex; flex-direction: column; overflow-x: auto; align-items: center; border: 2px solid #A2C11C; border-radius: 15px; padding: 30px; position: relative; max-height: 80vh; }
.modal.modal-error .modal-content { border-color: #E40428; }
.modal.modal-info .modal-content { border-color: #00C1D4; }

@media (max-width: 640px) {
.modal-content { margin-top: 30px; }
}


.modal-content .close-modal { width: 24px; height: 24px; position: absolute; left: 10px; top: 10px; cursor: pointer; }
.modal-content p.message { font-weight: 600; font-size: 16px; margin: 25px 0 0; }
.modal-content .button { margin-top: 20px; min-width: 120px; }
.modal-content .description { margin-top: 7px; margin-bottom: 5px; }

.table { width: 100%; }
.table th { padding: 8px 0; border-bottom: 1px solid #EEEEEE; color: #676D7C; font-weight: 600; text-align: right; }
.table td { padding: 8px 0; color: #676D7C; font-weight: 600; text-align: right; }
.table-icon { width: 35px; height: 35px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }


.label-tag { background: #F7F7F7; border-radius: 10px; padding: 6px 15px; display: inline-block; color: #888; font-size: 13px; font-weight: 600; }
.label-tag-success { background: rgba(162, 193, 28, 0.1); color: #A2C11C; }
.label-tag-danger { background: rgba(251, 16, 54, 0.1); color: #FB1036; }
.label-tag-warning { background: rgba(252, 218, 5, 0.1); color: #D3B600; }
.label-tag-cyan { background-color: rgba(0, 193, 212, 0.1); color: #00C1D4; }
.label-tag-purple { background-color: rgba(33, 5, 252, 0.1); color: #2105FC; }
.label-tag-done { background-color: rgba(36, 221, 150, 0.1); color: #24DD96; }

.label-tag-baked{ background-color: rgba(247, 10, 101, 0.1); color: #F70A65; width: 55px !important; }
.label-tag-frozed { background-color: rgba(4, 96, 228, 0.1); color: #0460E4; width: 55px !important; }

/* Radio and checkbox */
.radio, .checkbox { display: inline-block; height: 18px; width: 18px; overflow: hidden; margin-top: 2px; margin-left: 7px; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; border: 1px solid #cccccc; transition: 0.2s ease-in-out; transition-property: background-color, border; }
.checkbox { border-radius: 5px; }
.radio { border-radius: 50%; }
.radio:focus, .checkbox:focus { outline: none; border-color: #A2C11C; }
.radio:checked, .checkbox:checked, .checkbox:indeterminate { background-color: #A2C11C; border-color: transparent; }
.radio:checked:focus, .checkbox:checked:focus, .checkbox:indeterminate:focus { background-color: #A2C11C; }
.radio:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); }
.checkbox:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }
.checkbox:indeterminate { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); }
.radio:disabled, .checkbox:disabled { background-color: #f8f8f8; border-color: #e5e5e5; }
.radio:disabled:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); }
.checkbox:disabled:checked { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); }
.checkbox:disabled:indeterminate { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); }

.animate-loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #FB1036;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1500ms linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ios-switch { display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ios-switch i { position: relative; display: inline-block; margin-right: .5rem; width: 46px; height: 26px; background-color: #e6e6e6; border-radius: 23px; vertical-align: text-bottom; transition: all 0.3s linear; }
.ios-switch i::before { content: ""; position: absolute; left: 0; width: 42px; height: 22px; background-color: #fff; border-radius: 11px; transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1); transition: all 0.25s linear; }
.ios-switch i::after { content: ""; position: absolute; left: 0; width: 22px; height: 22px; background-color: #fff; border-radius: 11px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24); transform: translate3d(2px, 2px, 0); transition: all 0.2s ease-in-out; }
.ios-switch:active i::after { width: 28px; transform: translate3d(2px, 2px, 0); }
.ios-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.ios-switch input { display: none; }
.ios-switch input:checked + i { background-color: #A2C11C; }
.ios-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.ios-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }