body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 5;
  /* padding-top: 10%; */
  left: 0;
  top: 0;
  width: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
  height: 100%;
}

.modal-dialog{
  display: flex;
  /* margin-top: 100%; */
}

.modal-title{
  font-size: 20px;
  color: var(--secondary-color);
  font-weight: bold;
}
.modal-body-detail{
  text-align: center;
  color: var(--text-detail-level-8);
  font-size: 15;
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  margin-bottom: 5%;
  margin-top: 5%;
  
  /* width: 100%;
  margin-bottom: 0%;
  margin-top: 60%; */

  overflow-y: visible;
  border-radius: 5px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modalHeaderBackground{
  background-color: var(--primary-color);
  padding: 15px;
  color: var(--secondary-color);
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

.modalCancelButton{
  background-color: #FF3F16;
  color: white;
  border-radius: 5px;
  padding: 10px;
  /* font-size: 15px; */
  font-weight: bold;
  border: none;
}

.modalCancelButton:hover{
  background-color: #F32D03;
}

.modalAcceptButton{
  background-color: #2D81C3;
  color: white;
  border-radius: 5px;
  padding: 10px;
  /* font-size: 15px; */
  font-weight: bold;
  border: none;
}

.modalAcceptButton:hover{
  background-color: #0c6cbb;
}

.modalRightAligment{
  float: right;
  margin-top: -25px;
}
.marginToItemsInModal{
  margin: 25px;
}


.error-modal-header-background{
  background-color: var(--primary-color);
  padding: 15px;
  color: white;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
.error-modal-footer-button-cancel{
  background-color: var(--primary-color);
  color: white;
  margin-right: 20px;
}

.ask-modal-header-background{
  background-color: var(--primary-color);
  padding: 15px;
  color: white;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
.ask-modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  margin-bottom: 5%;
  margin-top: 5%;
  overflow-y: visible;
}
.ask-modal-footer{
  display:inline-flex;
  float: right;
  margin-top: 20px;
}
.ask-modal-footer-button{
  font-size: 17px;
  padding: 15px;
  border-radius: 5px;
  border-style: none;
  margin-left: auto;
}
.ask-modal-footer-button-detail{
  font-size: 14px;
}
.ask-modal-footer-button-cancel{
  background-color: transparent;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  font-weight: bold;
  margin-right: 20px;
}
.ask-modal-footer-button-accept{
  background-color: var(--secondary-color);
  color: var(--secondary-color-contrast);
  font-weight: bold;
}

@media screen and (max-width: 400px) {
  .modal{
    padding-top:0%;
  }
  .modal-title{
    font-size: 17px;
  }
  .modal-body-detail{
    font-size: 13;
  }
  .ask-modal-content {
    width: 90%;
    margin-top: 20%;
  }
  .ask-modal-footer-button{
    font-size: 14px;
  }
  .ask-modal-footer-button-detail{
    font-size: 12px;
  }
}

@media (min-width: 401px) and (max-width: 767px) {
  .modal{
    padding-top:0%;
  }
  .modal-title{
    font-size: 23px;
  }
  .modal-body-detail{
    font-size: 12;
  }
  .ask-modal-content {
    width: 90%;
    margin-top: 20%;
  }
  .ask-modal-footer-button{
    font-size: 20px;
  }
  .ask-modal-footer-button-detail{
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .modal{
    padding-top: 0%;
  }
  .modal-title{
    font-size: 28px;
  }
  .modal-body-detail{
    font-size: 11;
  }
  .ask-modal-content {
    width: 90%;
    margin-top: 13%;
  }
  .ask-modal-footer-button{
    font-size: 28px;
  }
  .ask-modal-footer-button-detail{
    font-size: 22px;
  }
}