@import "theme.css";

.messagebox {  
  width: 100vw;
  height: 100vh;
  --background-color: #000000B0;
  background-color: var(--background-color);  
}

.messagebox .border{  
  padding:0;
  height: fit-content;
  min-height: 180px;
  min-width: 400px;
  max-width: 500px;
  background-color: #181818;
  font-size: 14px;
  border: 1px #606060 solid;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.messagebox .header{  
  display: flex; 
  flex-direction: row; 
  height: 40px;
  align-items: center;
  pointer-events: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.messagebox .header img{
  width: 30px;
  height: 30px;  
  padding: 20px;
  pointer-events: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;  
}

.messagebox .header button {
  position: absolute;
  right: 20px;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: none;
  pointer-events: all; 
  -moz-user-select: -moz-all;
  -khtml-user-select: all;
  -webkit-user-select: all;
  -o-user-select: all;
  user-select: all; 
}

.messagebox .header button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

.messagebox .header button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 2px;
  height: 100%;
}

.messagebox .header button::before,
.messagebox .header button::after {
  background-color: #5F626B;
}

.messagebox .header button::before {
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.messagebox .header button::after {
  right: 50%;
  transform: translateX(50%) rotate(45deg);
}

.messagebox .header button:hover::before,
.messagebox .header button:hover::after {
  background-color: #777A7F;
}

.messagebox .header button:active::before,
.messagebox .header button:active::after {
  background-color: #86898E;
}

.messagebox .title{
  color: white;
  margin-left: 20px;
  font-size: 16px;
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; 
}

.messagebox .content{ 
  display: flex;
  align-items: center;
  justify-content: start;
  height: fit-content;
  min-height: 70px;
  color: #8C8C8E;
}

.messagebox .content span {
  padding: 10px 20px 10px 20px;
  white-space: pre-line;
}

.messagebox .footer{  
  display: flex;
  justify-content: end; 
  height: 50px;
  margin: 5px 20px 0px 0px;  
}

.messagebox .footer button{
  width: 140px;
  height: 30px; 
  margin: 0px 0px 0px 10px;  
  border-radius: 8px; 
  border: none;  
  color: var(--font-color);
  font-size: 14px;
}

.messagebox .footer .ok{
  background-color: var(--ok-normal);
}

.messagebox .footer .cancel{
  background-color: #5F626B;
}

.messagebox .footer .ok:hover{
  background-color: var(--ok-hover);
}

.messagebox .footer .cancel:hover{
  background-color: #777A7F;
}

.messagebox .footer .ok:active:not(:disabled) {
  background-color: var(--ok-active);
}

.messagebox .footer .cancel:active:not(:disabled) {
  background-color: #86898E;
}

.rename-dialog {  
  width: 100vw;
  height: 100vh;
  --background-color: #000000B0;
  background-color: var(--background-color); 
}

.rename-dialog .border{  
  padding:0;
  height: fit-content;
  min-height: 180px;
  min-width: 400px;
  max-width: 500px;
  background-color: #181818;
  font-size: 14px;
  border: 1px #606060 solid;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.rename-dialog .header{  
  display: flex; 
  flex-direction: row; 
  height: 40px;
  align-items: center;
}

.rename-dialog .header button {
  position: absolute;
  right: 20px;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: none;
}

.rename-dialog .header button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

.rename-dialog .header button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 2px;
  height: 100%;
}

.rename-dialog .header button::before,
.rename-dialog .header button::after {
  background-color: #5F626B;
}

.rename-dialog .header button::before {
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.rename-dialog .header button::after {
  right: 50%;
  transform: translateX(50%) rotate(45deg);
}

.rename-dialog .header button:hover::before,
.rename-dialog .header button:hover::after {
  background-color: #777A7F;
}

.rename-dialog .header button:active::before,
.rename-dialog .header button:active::after {
  background-color: #86898E;
}

.rename-dialog .title{
  color: white;
  margin-left: 20px;
  font-size: 16px;
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; 
}

.rename-dialog .content{ 
  display: flex;
  align-items: center;
  justify-content: start;
  height: fit-content;
  min-height: 70px;
  color: #8C8C8E;
}

.rename-dialog .content input {
  width: 360px;
  height: 26px;
  border-radius: 5px;
  margin-top: -10px;
  margin-left: 20px;
  background-color: #FFFFFF10;
  color: var(--font-color);
  text-align: center;
  box-shadow: none;
  border: 1px solid transparent;
  font-size: 16px;
  font-family: "Saira";
}

.rename-dialog .footer{  
  display: flex;
  justify-content: end; 
  height: 50px;
  margin: 5px 20px 0px 0px;  
}

.rename-dialog .footer button{
  width: 140px;
  height: 30px; 
  margin: 0px 0px 0px 10px;  
  border-radius: 8px; 
  border: none;  
  color: var(--font-color);
  font-size: 14px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; 
}

.rename-dialog .footer .ok{
  background-color: var(--ok-normal);
}

.rename-dialog .footer .cancel{
  background-color: #5F626B;
}

.rename-dialog .footer .ok:hover{
  background-color: var(--ok-hover);
}

.rename-dialog .footer .cancel:hover{
  background-color: #777A7F;
}

.rename-dialog .footer .ok:active:not(:disabled) {
  background-color: var(--ok-active);
}

.rename-dialog .footer .cancel:active:not(:disabled) {
  background-color: #86898E;
}

.settings-dialog {
  width: 100vw;
  height: 100vh;
  --height: 333px;
  --background-color: #000000B0;
  background-color: var(--background-color); 
}

.settings-dialog .border{  
  padding:0;
  width: 480px;
  height: var(--height);
  background-color: #181818;
  font-size: 14px;
  border: 1px #606060 solid;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.settings-dialog .mask{  
  padding:0;
  width: 480px;
  height: var(--height); 
  font-size: 14px;
  border: 0;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: #18181880;
  visibility: hidden;
}

.settings-dialog .header{  
  display: flex; 
  flex-direction: row; 
  height: 40px;
  margin-top: 5px;
  align-items: center;
}

.settings-dialog .header button {
  position: absolute;
  right: 20px;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: none;
}

.settings-dialog .header span {
  position: absolute;
  color: var(--font-color);
  margin-left: 20px;
  font-size: 12px;
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.settings-dialog .header button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

.settings-dialog .header button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 2px;
  height: 100%;
}

.settings-dialog .header button::before,
.settings-dialog .header button::after {
  background-color: #5F626B;
}

.settings-dialog .header button::before {
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.settings-dialog .header button::after {
  right: 50%;
  transform: translateX(50%) rotate(45deg);
}

.settings-dialog .header button:hover::before,
.settings-dialog .header button:hover::after {
  background-color: #777A7F;
}

.settings-dialog .header button:active::before,
.settings-dialog .header button:active::after {
  background-color: #86898E;
}

.settings-dialog .border iframe{
  width: 100%;
  height: 100%;
}