/* usercontrolloader.css */
/* wraps the whole user control whether its a popup or inset*/
.UserControlLoader 
{

}

/* override the default z-index added inline by jquery*/
/*.ui-widget-overlay
{
    z-index:1000 !important;  
}*/

/* class specifically for popups*/
div.popupClass {
    /* Changes made by Adam 
        Attempting to clean up the !important and inline css
        in addition to making it scale to screen width.

        Original:
        .popupClass {
            top:5% !important;
            width: 1000px !important;
            // z-index:201 !important;
        }

        .popupClass.ctlEditAccountInfo_ascx {
            width:50% !important;
            margin: 5% 25% 0;
            top:0 !important;
            left:0 !important;
        }
    */
    position: absolute;

    /* Todo: 
        Find where the inlines are being added
        and stop them (then remove !importants)
    */
    top: 5% !important;
    left: 50% !important;
    width: auto !important;

    transform: translateX(-50%);
}

/* class specifically for insets */
.popupinset 
{
    border:none;
    padding:0 !important;
    border-radius: 0 !important;
    overflow:hidden;
}

.popupinset .bottom-content-inset 
{
    padding:0 !important;
    overflow:hidden;
}

.ui-widget-overlay {
    background-image: none !important;
    background-color: black !important;
    opacity: .9 !important;
    z-index: 200 ;
}


.popupClass .inset-close-image
{
    display:none;
}
.popupinset .popup-close-image    
{
    display:none;
}

.background-close-x 
{
    width:1.8em !important;
    position:absolute;
    right:2%;
    top:0;
    margin-top:1%;
    cursor:pointer;
            float: right;
            z-index:999999;
            
}

/*.background-close-x {
    background-image:url('../images/contactform-close.png');
    background-size: 15.5em 5em;
}*/
.closePopup{
    width:50px;
}

.UserControlLoader .textbox-title 
{
    font-size:60%;
    font-family:'Roboto', arial, sans-serif;
    width:100%;
    text-align:left;   
    margin-bottom:.5%; 
    font-style:normal;
}

.UserControlLoader .textbox
{
    font-size:90%;
    font-family:'Roboto', arial, sans-serif;
    width:100%;
    border:2px solid #acacac;
    border-radius:5px;
    -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing:border-box;
    padding:5px;
    left:0;
}


.UserControlLoader .textbox:focus 
{
    border:2px solid #09a7ff;
    box-shadow: 0 0 7px rgba(81, 203, 238, 1);
}


.UserControlLoader .dropdown {
    font-size:90%;
}

.UserControlLoader .dropdown:focus 
{
    border:2px solid #09a7ff;
    box-shadow: 0 0 7px rgba(81, 203, 238, 1);
}


/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.UCProcessingBox {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .6 ) 
                url('../images/new-progress-bar.gif')
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .UCProcessingBox {
    overflow: hidden;   
      display: block;
}