/*
 * Note: All css related to customizing Jquery Dialog will be here.
 */

/* hide old implementation for the moment being until everywhere has been changed */
.jquery-dialog-box {
    display: none;
}

/*
 * ************************************************************************
 * here onwards is css for new implementation
 * ************************************************************************
 */

/* hide default container for jquery dialog of system pop up. this container is in every page. */
#default-jquery-dialog-box {
    display: none;
}

/*
 * system pop up styling
 */
.ui-dialog.ui-dialog-system {
    width: 500px !important;
    border-radius: 10px !important;
    text-align: center;
    font-family: Arial;
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
    position: fixed;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-system {
        width: 80vw !important;
    }
}

/* style dialog title. title will hold the message */
.ui-dialog.ui-dialog-system .ui-dialog-titlebar {
    border: 0;
    background-color: white;
}

.ui-dialog.ui-dialog-system .ui-dialog-titlebar .ui-dialog-title {
    white-space: normal;
    font-weight: normal;
    width: 100%;
    margin: 0 auto;
    margin-top: 150px;
}

/* add pseudo element before title to place bg image */
.ui-dialog.ui-dialog-system .ui-dialog-titlebar .ui-dialog-title .dialog-icon {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 2rem;
}

.ui-dialog.ui-dialog-system .ui-dialog-titlebar .ui-dialog-title .dialog-icon > img {
    height: 100px;
}

/* hide dialog close btn */
.ui-dialog.no-close .ui-dialog-titlebar-close {
  display: none;
}

/* hide dialog content pane (since will not have content) */
.ui-dialog.ui-dialog-system .ui-dialog-content {
    display: none !important;
}

/* style btn pane */
.ui-dialog.ui-dialog-system .ui-dialog-buttonpane {
    border: 0;
    text-align: center;
    padding: 0;
    margin: 2rem auto;
}

.ui-dialog.ui-dialog-system .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

/* default btn styling */
.ui-dialog.ui-dialog-system .ui-dialog-buttonpane .ui-dialog-buttonset button {
    width: 100px;
    border-radius: 10px;
    margin: 0.25rem 0.5rem;
    padding: 0.5rem 0.5rem;
    text-transform: none;
    font-family: Arial;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
}

/* make confirm btn red for confirm dialog */
.ui-dialog.ui-dialog-system.ui-dialog-system-confirm .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button-system-confirm {
    border: 1px solid #ed1c24;
    background-color: #ed1c24;
    color: white;
    outline: none;
}

/* make confirm btn red for error dialog */
.ui-dialog.ui-dialog-system.ui-dialog-system-error .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button-system-confirm {
    border: 1px solid #f44336;
    background-color: #f44336;
    color: white;
    outline: none;
}

/* make confirm btn red for alert dialog */
.ui-dialog.ui-dialog-system.ui-dialog-system-alert .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button-system-confirm {
    border: 1px solid #ffb90b;
    background-color: #ffb90b;
    color: white;
    outline: none;
}

/* make confirm btn red for success dialog */
.ui-dialog.ui-dialog-system.ui-dialog-system-success .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button-system-confirm {
    border: 1px solid black;
    background-color: black;
    color: white;
    outline: none;
}

/*
 * custom pop up styling
 * 2 types:
 * - admin pop up
 * - public pop up
 */
/* hide default container for jquery dialog of custom pop up */
#custom-jquery-dialog-box {
    display: none;
}

/*
 * custom pop up general styling
 */
 /* control dialog width */
.ui-dialog.ui-dialog-custom {
    width: 50vw !important;
    max-height: 60vh !important;
    overflow: auto;
    position: fixed;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom {
        width: 80vw !important;
    }

    .ui-dialog.ui-dialog-system .ui-dialog-titlebar .ui-dialog-title {
        margin-top: 140px;
    }
    
    .ui-dialog.ui-dialog-system .ui-dialog-titlebar .ui-dialog-title .dialog-icon > img {
        height: 80px;
    }
}

.ui-dialog.ui-dialog-custom .ui-dialog-titlebar {
    border: 0;
    background: transparent;
}

/* style close button */
.ui-dialog.ui-dialog-custom .ui-dialog-titlebar .ui-dialog-titlebar-close {
    border: 0;
    background: none;
    box-shadow: none;
    margin: 0;
    width: unset;
    min-width: 10px;
}

/* resize close icon */
.ui-dialog.ui-dialog-custom .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon-closethick {
    -ms-transform: scale(1.8);
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon-closethick {
        -ms-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

/*
 * admin pop up specific styling
 */
.ui-dialog.ui-dialog-custom-admin .ui-dialog-titlebar {
    background: white;
    text-align: center;
    margin: 2rem 0 1rem 0;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom-admin .ui-dialog-titlebar {
        margin: 1rem 0 0.5rem 0;
    }
}

.ui-dialog.ui-dialog-custom-admin .ui-dialog-titlebar .ui-dialog-title {
    width: 100%;
    text-transform: capitalize;
    text-decoration: underline;
}

/* position the close button */
.ui-dialog.ui-dialog-custom-admin .ui-dialog-titlebar .ui-dialog-titlebar-close {
    top: -20px;
    right: 20px;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom-admin .ui-dialog-titlebar .ui-dialog-titlebar-close {
        top: -10px;
        right: 15px;
    }
}

.ui-dialog.ui-dialog-custom-admin .ui-dialog-content {
    padding: 0rem 2rem 1rem 2rem;
}

/* add overlay behind pop up */
.ui-dialog.ui-dialog-custom-admin + .ui-widget-overlay {
  opacity: 0.3;
  background-color: black;
}
 
/*
 * public pop up specific styling
 */ 
/* add frosted glass effect */
.ui-dialog.ui-dialog-custom-public {
    background-color: rgb(129 129 129 / 15%);
    backdrop-filter: blur(3px);
    border: 1px transparent;
    border-radius: 2px !important;
}

.ui-dialog.ui-dialog-custom-public .ui-dialog-titlebar {
    padding-top: 1.4rem;
}

/* hide title */
.ui-dialog.ui-dialog-custom-public .ui-dialog-titlebar .ui-dialog-title {
    display: none;
}

/* position the close button */
.ui-dialog.ui-dialog-custom-public .ui-dialog-titlebar .ui-dialog-titlebar-close {
    top: 15px;
    right: 20px;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom-public .ui-dialog-titlebar .ui-dialog-titlebar-close {
        top: 10px;
        right: 15px;
    }
}

/* position the content wrapper */
.ui-dialog.ui-dialog-custom-public .ui-dialog-content .ui-dialog-custom-content-wrapper {
    margin: 0.5rem 2rem 3rem 2rem;
    background-color: white;
}

@media (max-width: 768px) {
    .ui-dialog.ui-dialog-custom-public .ui-dialog-content .ui-dialog-custom-content-wrapper {
        margin: 0rem 1rem 1.5rem 1rem;
    }
}