/*
piove-dialogs
ver 0.9 - 13/09/2024
*/

::backdrop {
    background-color:#000;
    opacity: 0.75;
}

/* dialog sizes */
.piove_dialog_full_page {
    width:100%;
    height:100%;
}
.piove_dialog_width_25page {
    width:25%;
}
.piove_dialog_width_40page {
    width:40%;
}
.piove_dialog_width_50page {
    width:50%;
}
.piove_dialog_50page {
    width:50%;
    min-height:50%;
}
@media screen and (max-width:800px) {    
    .piove_dialog_50page {
        width:75%;
    }
}
@media screen and (max-width:500px) {    
    .piove_dialog_50page {
        width:95%;
    }
}

.piove_dialog {
    padding:0;
}
.piove_dialog_flex_wrapper {
    padding: 20px;
    display:flex;
    flex-direction: column;
    gap:20px;
    height:100%;
}
.piove_dialog_flex_wrapper_30 {
    padding: 20px;
    display:flex;
    flex-direction: column;
    gap:30px;
    height:100%;
}
.piove_dialog_flex_wrapper_center {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.piove_dialog_wrapper {
    padding:16px;
}
.piove_dialog_loading_error {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display:none;
    text-align: center;
    font-size: 16px;
    line-height: normal;
}
.piove_dialog_loading_spinner {
    position:absolute;
    top: calc(50% - 51px);
    left: calc(50% - 51px);
}
.piove_dialog_loaded_content {
    visibility:hidden;
}
.piove_dialog_content {
    margin-top:30px;
}
.piove_dialog.piove_dialog_loaded .piove_dialog_loading_spinner {
    display:none;
}
.piove_dialog.piove_dialog_loaded .piove_dialog_loaded_content {
    visibility:visible;
}
.piove_dialog.piove_dialog_not_loaded .piove_dialog_loading_spinner {
    display:none;
}
.piove_dialog.piove_dialog_not_loaded .piove_dialog_loading_error {
    display:block;
}
.piove_dialog_close_icon {
    position:absolute;
    top:2px;
    right:2px;
	z-index:10;
    color:#000;
    border-radius:50%;
    background-color:transparent;
    border:none;
    padding:0;
    width:32px;
    height:32px;
    padding:4px;
}
.piove_dialog_close_icon:active,
.piove_dialog_close_icon:hover {
    /* color:#333; */
    background-color:rgba(0,0,0,0.1);
}
.piove_dialog_row_container {
    margin-top:40px;
}
.piove_dialog_row {
    margin-bottom:20px;
}
.piove_dialog_row_center {
    text-align:center;
}
.piove_dialog_row_title {
    font-weight:  bold;
}
.piove_dialog_button_container {
    width:100%;
    display:flex;
    gap:20px;
    justify-content:center;
}
.piove_dialog_button_container_space {
    width:100%;
    display:flex;
    gap:20px;
    justify-content:space-between;
}
.piove_dialog_title {
    font-size:18px;
    font-weight:bold;
    color:var(--primary-color);
}
.piove_dialog_title_close_icon_padding {
    padding-right:32px;
}

/* confirm dialog */
.piove_dialog_confirm_title {
    font-size:18px;
    font-weight:bold;
    color:#900;
}
.piove_dialog_confirm_message {
    font-size:18px;
}
.piove_dialog_confirm_message_small {
    font-size:14px;
}
.piove_dialog_confirm_highlight {
    font-weight:bold;
}
.piove_dialog_confirm_code_text {
    font-family:monospace;
    font-size:18px;
    background-color:lightyellow;
    padding:4px;
    display:inline-block;
}
.piove_dialog_confirm_code_input {
    font-family:monospace;
    width:150px;
    text-align:center;
    margin:10px auto 0;
}
.piove_dialog_confirm .piove_dialog_button_container {
    justify-content:space-between;
}