/* Popup box BEGIN */
.pinto_popup{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
#pinto_myframe{
    border: unset;
    width:900px;
    height:990px;
}
.pinto_popup .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.pinto_popup > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 500px;
    min-height: 300px;
    vertical-align: middle;
    position: relative;
    border-radius: 8px;
    top: 20%;
    padding: 20px;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -10px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    z-index:100;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.css_title{
    box-sizing: border-box;
    margin: 0px 0px 5px;
    min-width: 0px;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
    font-family: "Microsoft JhengHei","微軟正黑體","Open Sans",Arial,Helvetica,Sans-Serif;
}

.pinto_reload{
    box-sizing: border-box;
    margin: 5px 0px 0px;
    min-width: 0px;
    color: rgb(112, 122, 138);
    font-size: 24px;
    fill: rgb(112, 122, 138);
    float: right;
    width: 1em;
    height: 1em;
}

@media(max-width:1100px){
    #pinto_myframe{
        border: unset;
        width:900px;
        height:1200px;
    }
}

@media(max-width:450px){
    .pinto_popup > div {
        background-color: #fff;
        box-shadow: 10px 10px 60px #555;
        display: inline-block;
        height: auto;  
        vertical-align: middle;
        position: relative;
        border-radius: 8px;
        height:460px;
        top: 23%;
        margin-top:-100px !important;
        padding:0px;
    }

    #pinto_myframe{
        width:854px;
        transform: scale(0.46); 
        transform-origin:0 0; 
        -ms-transform: scale(0.46);
        -ms-transform-origin:0 0; 
        -moz-transform: scale(0.46);
        -moz-transform-origin:0 0; 
        -o-transform: scale(0.46);
        -o-transform-origin: 0 0; 
        -webkit-transform: scale(0.46);
        -webkit-transform-origin: 0 0;
    }
}
@media(max-width:400px){
    .pinto_popup > div {
        background-color: #fff;
        box-shadow: 10px 10px 60px #555;
        display: inline-block;
        height: auto;
        vertical-align: middle;
        position: relative;
        border-radius: 8px;
        height:460px;
        top: 23%;
        margin-top:-100px !important;
        padding:0px;
    }

    #pinto_myframe{
        width:854px;
        transform: scale(0.42); 
        transform-origin:0 0; 
        -ms-transform: scale(0.42);
        -ms-transform-origin:0 0; 
        -moz-transform: scale(0.42);
        -moz-transform-origin:0 0; 
        -o-transform: scale(0.42);
        -o-transform-origin: 0 0; 
        -webkit-transform: scale(0.42);
        -webkit-transform-origin: 0 0;
    }
    
    .popupCloseButton {
        right: 2px;
    }
}

.alert-error{
    border: 1px solid maroon !important;
    color: #000;
    background: pink;
}

/* Popup box BEGIN */