html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

mark {
    background-color: yellow;
    padding: 0;
    margin: 0;
}

/* Card styles */
.card-body{
    padding: 1.3rem;
}

.text-headline, .text-headline a {
    font-weight: bold;
    text-align: left;
    padding: 10px 0;
    color: rgb(226, 0, 116);
}

.label-wrap {
    text-wrap: wrap;
    display: flex;
}

h3.section-title {
    font-size: 1.2em;

    /* margin: 0.5em 0; */
    margin-bottom: 1em;
    color: rgb(226, 0, 116);
}

h3.section-title-detail {
    font-size: 1.2em;
    color: rgb(0, 0, 0);
}

h4{
    font-size: 1em;
}

h5 {
    font-size: 1em;
}

.text-bold {
    font-weight: bold;
}

.text-size-small {
    font-size: 0.875em;
}

.text-color-magenta {
    color: rgb(226, 0, 116) !important;
}

.text-color-petroleum {
    color: rgb(64, 144, 159) !important;
}

.nav-link:hover,
.dropdown-item:hover {
  color: rgb(226, 0, 116) !important;
}


.kategorie-popis {
    /* padding-left: 28px; */
    color: #888;
}

h4.obor-title {
    font-size: 1.1em;
    color: #666;
}

.d-none {
    display: none !important;
}

/* FORMS */
#form-calc .form-control, #form-char .form-control, #form-char-b .form-control, #form-koef .form-control, #form-vaha .form-control {
    width: 80px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: center;
}

.form-check-input-red{
    margin-left: 5px !important;
}

.form-check-input-red:checked{
    background-color: darkred !important;
    border-color: darkred !important;
    color: darkred !important;
}

.form-check-input-red::selection{
    background-color: rgba(139,0,0,0.1) !important;
    color: darkred !important;
}

.form-check-input-red:focus {
  /*border-color: rgba(140, 152, 164, 0.25);*/
   /*background-color: rgba(139,0,0,0.1) !important;*/
  
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.25);
}

.dragging {
    opacity: 0.5;
    border: 2px dashed #999;
    background-color:darkred;
}

.argument-drop-target {
    background-color: #a94442 !important;
    border: 2px dashed #a94442;
}

.argument-list {
    transition: background-color 0.3s ease, border 0.3s ease;
}

/*.argument-item.drag-over {
    border: 2px dashed darkred;
    background-color: #f8d7da;
}*/

/*.argument-item.drag-over {
    border: 2px dashed #0d6efd;
    background-color: #e6f0ff;
}
.argument-list.drag-target {
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    padding: 8px;
    background-color: #f0f8ff;
}*/



/* DRAG AND DROP */
.argument-item.drag-over {
    border: 2px dashed #0d6efd;
    background-color: #e6f0ff;
}

.argument-list.drag-target {
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    background-color: #f8fbff;
    padding: 8px;
}



.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Argument detail - Toggle */
.argument-toggle:hover {
    color: #0d6efd;
}

/* Argumenty - Background colors */
.bg-arg-filter {
    background-color: #fff9ed; /* velmi světlá oranžová */
}
.bg-arg-free {
    background-color: #f3fcf6; /* velmi světlá zelená */
}

/* MODAL */
.modal-dialog {
    max-width: 40%;
    /*margin: 2rem auto;*/
}



.btn-outline-primary {
  --bs-btn-color:  rgb(226, 0, 116);
  --bs-btn-border-color: rgb(226, 0, 116);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: rgb(226, 0, 116);
  --bs-btn-hover-border-color: rgb(226, 0, 116);
  --bs-btn-focus-shadow-rgb: 10, 191, 83;
  --bs-btn-active-color: white;
  --bs-btn-active-bg: rgb(226, 0, 116);
  --bs-btn-active-border-color: rgb(226, 0, 116);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(226, 0, 116);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgb(226, 0, 116);
  --bs-gradient: none;
}

/* Button Toggle Collapse */
.btn-toggle-collapse .when-expanded{display:none;}
.btn-toggle-collapse.collapsed .when-collapsed{display:inline;}
.btn-toggle-collapse.collapsed .when-expanded{display:none;}
.btn-toggle-collapse:not(.collapsed) .when-collapsed{display:none;}
.btn-toggle-collapse:not(.collapsed) .when-expanded{display:inline;}