@charset "UTF-8";

/*
 Modal
 */

.jquery-helpers-modal{
 min-width: 200px;
 min-height: 100px;
 background-color: #00000090
}
.jquery-helpers-modal.cover{
 position: fixed;
 top: 0;
 left: 0;
 min-width: 100%;
 min-height: 100%;
 overflow: auto
}
.jquery-helpers-modal.center{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.jquery-helpers-modal>a{
 display: block;
 width: 50px;
 height: 50px
}
.jquery-helpers-modal>a.close{
 top: 20px;
 right: 20px
}

/*
 Alert
 */

.jquery-helpers-alert{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: fit-content;
 min-width: 300px;
 max-width: calc( 100% - 40px );
 min-height: 100px;
 padding: 0;
 text-align: center;
 background-color: #fff
}
.jquery-helpers-alert.fixed-bottom{
 top: auto;
 left: 0;
 right: 0;
 bottom: 0;
 transform: none;
}

.jquery-helpers-alert.thin{
 width: calc( 100% - 40px );
 max-width: 400px
}
.jquery-helpers-alert.wide{
 width: calc( 100% - 40px );
 max-width: 800px
}
.jquery-helpers-alert.fullwidth{
 width: 100%;
 max-width: none
}
.jquery-helpers-alert.loading>div{
 opacity: 0	
}
.jquery-helpers-alert .alert-header p, 
.jquery-helpers-alert .alert-message p{
 margin: 0
}
.jquery-helpers-alert .alert-header a.close{
 top: 50%;
 right: 0;
 margin-top: -30px
}
.jquery-helpers-alert .alert-header{
 position: relative;
 padding: 14px 20px;
 border-bottom: solid #c0c0c0 1px
}
.jquery-helpers-alert .alert-message{
 padding: 0 20px;
 margin-top: 14px
}
.jquery-helpers-alert .ajaxbox,
.jquery-helpers-alert .ajax-wrapper{
 max-height: calc( 100vh - 333px );
 padding: 0 20px 20px 20px;
 min-height: 100px;
 text-align: left;
 overflow: hidden;
 overflow-y: auto
}
.jquery-helpers-alert .alert-message+.ajaxbox,
.jquery-helpers-alert .alert-message+.ajax-wrapper{
 max-height: calc( 100vh - 444px );
 margin-top: 20px
}
.jquery-helpers-alert .ajaxbox>div,
.jquery-helpers-alert .ajax-wrapper>div{
 padding-top: 25px;
 padding-bottom: 25px 
}
.jquery-helpers-alert .alert-controls{
 padding: 24px 20px 20px 20px
}
.jquery-helpers-alert .alert-controls:empty{
 height: 10px;
 padding: 0
}
.jquery-helpers-alert .alert-controls.align-left{
 text-align: left
}
.jquery-helpers-alert .alert-controls.align-right{
 text-align: right
}
.jquery-helpers-alert .alert-controls button+button{
 margin-left: 20px
}

/*
 JQuery UI
 */
.ui-tooltips-container{
 position: relative
}
.ui-tooltip{
 max-width: 300px;
 border: solid 1px #000;
 padding: 10px 20px;
 background-color: #fff;
 z-index: 9999


}
.ui-tooltip-content{
	
}
.ui-tooltip label{
	
}



/* 
 Ok, Close, Arrow
 */

a.ok, 
a.close, 
a.arrow,
span.ok,
span.close,
span.arrow{
 display: block; 
 position: absolute; 
 width: 50px; 
 height: 50px; 
 z-index: 20
}
a.close:before,
a.close:after,
span.close:before,
span.close:after{
 display: block; 
 content: ''; 
 width: 30px; 
 height: 5px; 
 position: absolute; 
 top: 50%;
 left: 50%;
 margin-top: -1px;
 margin-left: -14px;
 background-color: #fff; 
 border-radius: 2px;
 pointer-events: none
}
a.close:before,
span.close:before{
 transform: rotate(45deg) 
}
a.close:after,
span.close:after{ 
 transform: rotate(-45deg) 
}
a.arrow:before,
span.arrow:before,
a.arrow.lined:after{
 content: ''; 
 display: block; 
 position: absolute; 
 pointer-events: none
}
a.arrow:before,
span.arrow:before{
 width: 30px; 
 height: 30px; 
 top: 50%; 
 border: solid transparent 0px; 
 margin-top: -15px;
 transform: rotate(45deg)
}
a.arrow.lined:after,
span.arrow.lined:after{
 width: 39px; 
 height: 1px; 
 top: 50%; 
 background-color: transparent 
}
a.prev.arrow:before, 
a.left.arrow:before,
span.prev.arrow:before, 
span.left.arrow:before{ 
 left: 6px; 
 border-width: 0 0 2px 2px 
}
a.prev.arrow.lined:after,
span.prev.arrow.lined:after{
 left: 6px 
}
a.next.arrow:before,
a.right.arrow:before,
span.next.arrow:before,
span.right.arrow:before{
 right: 6px; 
 border-width: 2px 2px 0 0 
}
a.next.arrow.lined:after,
span.next.arrow.lined:after{
 right: 6px 
}
a.arrow.labeled,
span.arrow.labeled{
 display: inline-block;
 line-height: 50px;
 width: auto
}
a.arrow.labeled.left,
span.arrow.labeled.left{
 padding-left: 62px
}
a.arrow.labeled.right,
span.arrow.labeled.right{
 padding-right: 62px
}
a.arrow.labeled.left:before, 
a.arrow.lined.labeled.left:after,
span.arrow.labeled.left:before, 
span.arrow.lined.labeled.left:after{
 left: 6px
}
a.arrow.labeled.right:before, 
a.arrow.lined.labeled.right:after,
span.arrow.labeled.right:before, 
span.arrow.lined.labeled.right:after{
 right: 6px
}

