:root {
  --bs-font-sans-serif: Montserrat;
  --bs-link-color: var(--bs-tek-bg);
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
	font-weight: normal;
  src: local("Montserrat"), url("../fonts/Montserrat-Regular.otf") format("opentype");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
	font-weight: 500;
  src: local("Montserrat"), url("../fonts/Montserrat-Medium.otf") format("opentype");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
	font-weight: bold;
  src: local("Montserrat"), url("../fonts/Montserrat-Bold.otf") format("opentype");
}

body { background-image: url(../images/background.png);
  background-attachment: fixed;
  background-repeat: repeat;
}

.myshadow { box-shadow: 4px 4px 8px rgba(var(--bs-body-color-rgb), 0.8) !important}
.myshadow:hover { box-shadow: 4px 4px 16px rgba(var(--bs-body-color-rgb), 0.8) !important}


input { padding: 0.15rem 0.5rem; border-radius: 0.375rem;
  border: var(--bs-border-width) solid var(--bs-primary)}
input:not([type="radio"]):focus { outline: 0; box-shadow: inset -1px -1px 4px var(--bs-primary)}

.btn-close { --bs-btn-close-bg: none; 
  background-image: url(../icons/close.png); background-size: 100%}

.btn img {width: 26px; height: 26px; opacity: .5}
.btn:hover img {opacity: 1}

.border-tek { --bs-border-opacity: 1;
  border-color: rgba(var(--bs-tek-rgb), var(--bs-border-opacity)) !important;
}

.btn-tek {
  --bs-btn-color: #fff;
  --bs-btn-bg: #FF7276;
  --bs-btn-border-color: #FF7276;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #df5256;
  --bs-btn-hover-border-color: #df5256;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #df5256;
  --bs-btn-active-border-color: #df5256;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #FF7276;
  --bs-btn-disabled-border-color: #FF7276;
}

.btn-outline-tek {
  --bs-btn-color: #FFF;
  --bs-btn-border-color: #FF7276;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #FF7276;
  --bs-btn-hover-border-color: #FF7276;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #FF7276;
  --bs-btn-active-border-color: #FF7276;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FF7276;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FF7276;
  --bs-gradient: none;
}

.pagination {
  /* --bs-pagination-padding-x: 0.75rem; */
  /* --bs-pagination-padding-y: 0.375rem; */
  /* --bs-pagination-font-size: 1rem; */
  /* --bs-pagination-color: #fff; */
  /* --bs-pagination-bg: var(--bs-tek-bg); */
  --bs-pagination-border-width: 2px;
  --bs-pagination-border-color: var(--bs-tek-bg);
  /* --bs-pagination-border-radius: var(--bs-border-radius); */
  /* --bs-pagination-hover-color: var(--bs-link-color); */
  --bs-pagination-hover-bg: var(--bs-tek-bg);
  --bs-pagination-hover-border-color: var(--bs-tek-bg);
  /* --bs-pagination-focus-color: var(--bs-link-hover-color); */
  --bs-pagination-focus-bg: var(--bs-tek-bg);
  /* --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-tek-bg);
  --bs-pagination-active-border-color: var(--bs-tek-bg);
  /* --bs-pagination-disabled-color: var(--bs-secondary-color); */
  --bs-pagination-disabled-bg: var(--bs-gray-600);
  --bs-pagination-disabled-border-color: var(--bs-tek-bg);
  justify-content: center;
}

label { --bs-text-opacity: 1;
  color: rgba(var(--bs-tek-rgb), var(--bs-text-opacity)) !important;
  font-weight: 700 !important;
}
.fade { transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1)}

#card1 .card-header, #card1 .card-footer { background-color: #025ea1}
#card2 .card-header, #card2 .card-footer { background-color: #283895}
#card3 .card-header, #card3 .card-footer, .bg-info { background-color: #43688f !important}
.bg-danger, .text-bg-danger { background-color: #FF7276 !important}

#metod1 .modal-header, #metod1 .modal-footer { background-color: #025ea1}
#metod2 .modal-header, #metod2 .modal-footer { background-color: #283895}
#metod3 .modal-header, #metod3 .modal-footer { background-color: #43688f}


.checked {
  background-color: var(--bs-tek-bg-subtle);
}
.checked::after { content: ''; position: absolute; 
  top: 0; right: 0; margin-right: -10px; margin-top: -5px; width: 32px; height: 32px; 
  background-image: url(../icons/bookmark-check-fill.png); background-size: 100%;
}

.closed::after { content: ''; position: absolute; 
  top: 0; right: 0; margin-right: -10px; margin-top: -5px; width: 32px; height: 32px; 
  background-image: url(../icons/bookmark-x-fill.png); background-size: 100%;
}

#chapters .btn:hover { background-color: RGBA(var(--bs-tek-rgb), .5)}

p.img { text-align: right; font-style: italic; font-size: 0.7em}

.order-answer, .match-answer {cursor: pointer}
.order-answer.move, .match-answer.move {background-color: var(--bs-warning-bg-subtle)}

.out-result input { display: none}