:root{
  --custom1: #ecd3d4;
  --custom2: #a3262b;
  --custom3: #821e22;
  --custom4: #eaeaea;
  --custom-grey1: #fafafa;
}

.link {
  cursor: pointer;
}

.text-justify {
  text-align: justify;
}

.pb-10 {
  padding-bottom: 7rem;
}
.pb-7 {
  padding-bottom: 5rem;
}
.mt-6 {
  margin-top: 6rem;
}

.mt-minus-2 {
  margin-top: -2rem;
}
.nav-title-author {
  font-size: 1.2rem; 
  color: #999999;
}

.border {
  border-color: var(--custom1)!important;
}
.border-top {
  border-top: solid 1px var(--custom1);
}
.border-bottom {
  border-bottom: solid 1px var(--custom1);
}
.border-left {
  border-left: solid 1px var(--custom1);
}
.border-right {
  border-right: solid 1px var(--custom1);
}
.accordion-button:not(.collapsed) {
  background-color: #ffffff;
  border-bottom: none;
  /*color: #ffffff;*/
}

html, body {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: #F8F9FA;
}

.navbar {
  background-color: #ffffff;
}

audio {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .card-grid {
    min-width: auto;
  }
}
@media only screen and (min-width: 768px) {
  .card-grid {
    width: 18rem;
  }
}

.text-sm {
  font-size: smaller;
}
.text-lg {
  font-size: x-large;
}

.bg-white {
  background-color: #ffffff;
}

#login-username, #login-password, #login-submit {
  width: 100%;
}

.bg-knjiga {
  background-image: url('../images/bg-knjiga.jpg');
  background-position: center;
  background-color: #000000;
  /*background-repeat: no-repeat;*/
  width: 100%;
}

.border-custom1-color {
  border-color: var(--custom1);
}
.bg-custom1-color {
  background-color: var(--custom1);
}
.font-custom1-color {
  color: var(--custom1)
}
.bg-custom2-color {
  background-color: var(--custom2);
}
.font-custom2-color {
  color: var(--custom2)
}

/*.card-link:active, .card-link:link {
  text-decoration: none;
  color: var(--custom2);
}*/

/* Background 
.bg-custom {
  background-color: #008080;
  color: #fff;
}*/

.bg-custom-grey {
  background-color: #8e8d8a;
}

/* Link */
.custom-link {
  text-decoration: none;
  color: #ffffff;
}

/* Text */
.text-custom {
  color: #333333;
}
.text-custom-grey {
  color: #8e8d8a;
}


/* Button */
/* Custom */
.btn-custom {
  color: #7f7e7c;
  background-color: #D8C3A5;;
  border-color: #c2af94;
  /*focus-shadow-rgb: 49,132,253;*/
}
.btn-custom:hover
{
  color: #7f7e7c;
  background-color: #c2af94;
  border-color: #c2af94;
}
.btn-custom:active
{
  color: #7f7e7c;
  background-color: #c2af94;
  border-color: #c2af94;
}
.btn-custom:disabled
{
  color: #7f7e7c;
  background-color: #dbc9ae;
  border-color: #c2af94;
}


/* Custom light */
.btn-custom-light {
  color: #7f7e7c;
  background-color: #eae7dc;;
  border-color: #d2cfc6;
  /*focus-shadow-rgb: 49,132,253;*/
}
.btn-custom-light:hover
{
  color: #7f7e7c;
  background-color: #d2cfc6;
  border-color: #d2cfc6;
}
.btn-custom-light:active
{
  color: #7f7e7c;
  background-color: #eae7dc;
  border-color: #d2cfc6;
}
.btn-custom-light:disabled
{
  color: #7f7e7c;
  background-color: #ece9df;
  border-color: #d2cfc6;
}


/* Danger */
.btn-custom-danger{
  color: #fafafa;
  background-color: #e85a4f;;
  border-color: #d05147;
  /*focus-shadow-rgb: 49,132,253;*/
}
.btn-custom-danger:hover
{
  color: #fafafa;
  background-color: #d05147;
  border-color: #d05147;
}
.btn-custom-danger:active
{
  color: #fafafa;
  background-color: #e85a4f;
  border-color: #d05147;
}
.btn-custom-danger:disabled
{
  color: #fafafa;
  background-color: #ea6a60;
  border-color: #d05147;
}


/* Danger light */
.btn-custom-danger-light {
  color: #fafafa;
  background-color: #e98074;;
  border-color: #d17368;
  /*focus-shadow-rgb: 49,132,253;*/
}
.btn-custom-danger-light :hover
{
  color: #fafafa;
  background-color: #d17368;
  border-color: #d17368;
}
.btn-custom-danger-light :active
{
  color: #fafafa;
  background-color: #e98074;
  border-color: #d17368;
}
.btn-custom-danger-light :disabled
{
  color: #fafafa;
  background-color: #ea6a60;
  border-color: #d17368;
}


/* Grey */
.btn-custom-grey {
  color: #fafafa;
  background-color: #8e8d8a;;
  border-color: #7f7e7c;
  /*focus-shadow-rgb: 49,132,253;*/
}
.btn-custom-grey:hover
{
  color: #fafafa;
  background-color: #7f7e7c;
  border-color: #7f7e7c;
}
.btn-custom-grey:active
{
  color: #fafafa;
  background-color: #8e8d8a;
  border-color: #7f7e7c;
}
.btn-custom-grey:disabled
{
  color: #fafafa;
  background-color: #999895;
  border-color: #7f7e7c;
}


/* Table */
table.custom>thead>tr>th {
  background-color: #EAE7DC;
  color: #333333;
  font-weight: normal;
}

table.custom,
table.custom > thead > tr > th,
table.custom > tbody > tr > td
{
  border-top:1px solid #EAE7DC;
  border-bottom:1px solid #EAE7DC
}


/*table.custom>thead>tr:nth-child(odd)>td,
	.table-striped>tbody>tr:nth-child(odd)>th,body.YY {
    	background-color: #d3e6cb;
}*/

.answer,
._a, ._b, ._c, ._d,
.a1, .a2, .a3, .a4,
.b1, .b2, .b3, .b4,
.c1, .c2, .c3, .c4,
.d1, .d2, .d3, .d4 {
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.b1, .d1 {
  margin-left: 10rem;
  margin-right: 0rem;
}
.b2, .d2 {
  margin-left: 8rem;
  margin-right: 2rem;
}
.b3, .d3 {
  margin-left: 6rem;
  margin-right: 4rem;
}
.b4, .d4 {
  margin-left: 4rem;
  margin-right: 6rem;
}
.a1, .c1 {
  margin-left: 0rem;
  margin-right: 10rem;
}
.a2, .c2 {
  margin-left: 2rem;
  margin-right: 8rem;
}
.a3, .c3 {
  margin-left: 4rem;
  margin-right: 6rem;
}
.a4, .c4 {
  margin-left: 6rem;
  margin-right: 4rem;
}

._a, ._c {
  margin-left: 8rem;
  margin-right: 2rem;
}
._b, ._d {
  margin-left: 2rem;
  margin-right: 8rem;
}

.asoc-field {
  background-color: var(--custom-grey1);
  color: var(--custom2);
}
.asoc-field-header {
  background-color: var(--custom-grey1);
  color: #333333;
  font-weight: bold;
}
.asoc-solution {
  background-color: var(--custom-grey1);
  color: #333333;
  font-weight: bold;
}