#dlg-screen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #575757aa;
  z-index: 15;
  overflow-y: auto;
}

body.show-dlg-screen {
  overflow: hidden;
}

.show-dlg-screen #dlg-screen {
  display: block;
}

#dlg-container {
  position: relative;
  width: 35%;
  max-width: 500px;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

#dlg-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 14px;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #373737;
  color: #ffffff;
  cursor: pointer;
}

#dlg-close:hover {
  background-color: #171717;
}

#dlg-content {
  background-color: #2f2f2f;
  box-shadow: 3px 3px 13px #000;
  border-radius: 7px;
  overflow: hidden;
}

#dlg-header {
  background-color: #272727;
  font-weight: 500;
  color: #78C072;
  padding: 10px 20px 13px 20px;
}

#dlg-msg {
  font-weight: 500;
  color: #fff;
  padding: 20px 20px 24px 20px;
}

#dlg-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 10px 20px;
}

.dlg-btn {
  border: none;
  color: #78C072;
  background-color: #373737;
  padding: 13px 30px 14px;
  cursor: pointer;
  border: 1px solid #3f3f3f;
  border-radius: 7px;
  font-weight: 500;
}

.dlg-btn:hover {
  background-color: #2d2d2d;
}

.dlg-btn:focus {
  outline: 2px dashed #575757;
}

.dlg-btn:active,
.dlg-btn.cancel:active {
  background-color: #202020;
}

.dlg-btn + .dlg-btn {
  margin-left: 20px;
}

.dlg-btn.cancel {
  background-color: #313131;
  color: #a7a7a7;
  border: 1px solid #353535;
}

/*
* MEDIA
*/

@media (max-width: 980px) {
  #dlg-container {
    width: 70%;
    transform: translateX(-50%);
  }
}