/* Styles for the SlimWidgets JavaScript Library */

@import 'loading-spinner.css';

/* ---------------------------------------------------------------------------
 * Shared
 * --------------------------------------------------------------------------- */

.slim-close-btn,
.slim-back-to-top-btn{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.slim-close-btn{
    position:absolute;
    top:4px; 
    right:4px;
    height:18px;
    width:18px; 
    line-height:1;
    background-image:url('../img/close-icon-op66.png');
    background-repeat:  no-repeat;
    background-position: center;
    -webkit-background-size: 14px;
    -moz-background-size: 14px;
    -o-background-size: 14px;
    background-size: 14px;
    background-color:#fff;
    border-radius:2px;
    cursor:pointer;
}

.slim-close-btn:hover{
    background-image:url('../img/close-icon-op82.png');
    background-color:#f2f2f2;
}

/* ---------------------------------------------------------------------------
 * BackToTopBtn
 * --------------------------------------------------------------------------- */

.slim-back-to-top-btn{
    position:fixed;
    left: 50%;
    margin-left:-23px;
    bottom:15px;
    width:46px;
    height:46px;
    border-radius:100px;
    background-image:url('../img/btt-icon-op66.png');
    background-repeat:  no-repeat;
    background-size:20px;
    background-color:#F8F8F8;
    background-position: center;
    cursor:pointer;  
    z-index:99;     /* One unit smaller than overlays z-index*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0,0,0,0.08);
}

.slim-back-to-top-btn:hover{
    background-image:url('../img/btt-icon-op82.png');
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 5px 5px rgba(0,0,0,0.23), 0 0 0 2px rgba(0,0,0,0.08);
}


/* ---------------------------------------------------------------------------
 * StickyHeaders
 * --------------------------------------------------------------------------- */

.slim-sticky-header{
    position:fixed !important;
    width:100%;
    top:0px;
    overflow:hidden;
    z-index:99;     /* One unit smaller than overlays z-index*/
}


/* ---------------------------------------------------------------------------
 * Overlays
 * --------------------------------------------------------------------------- */
 
.slim-overlay,
.slim-loading-spinner-overlay,
.slim-popup-overlay{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,0.4);
    z-index:100;    /* has to be one unit larger than slim-sticky-header,
                     * slim-back-to-top-btn and slim-tooltips z-index
                     * but one unit larger than slim-popups z-index */
}

html[class*="no-scroll"],
body[class*="no-scroll"]{
    overflow: hidden !important;
    height: 100% !important;
    min-height:100% !important;
    padding-right:15px;
}

/* ---------------------------------------------------------------------------
 * Loading Spinner
 * --------------------------------------------------------------------------- */

.spinner-0, 
.spinner-1, 
.spinner-2, 
.spinner-3{
    margin: auto;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
}

/* -> Styles for the loading spinner can be found in file loading-spinner.css */


/* ---------------------------------------------------------------------------
 * Popup & Datepicker
 * --------------------------------------------------------------------------- */

.slim-popup-container,
.slim-datepicker-container{
    position:relative; 
    min-height:60px;
    margin:auto;        /* center popup horizontally */
    top: 50%;           /* center popup vertically */            
    transform: translateY(-50%);    /* center popup vertically */
    top: 50%;           /* position popup vertically */            
    transform: translateY(-50%);    /* position popup vertically */
    clear:both;   
    overflow: auto;
    background-color:#fff;
    border-radius:2px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
    width:95%;
}

/* Small devices */
@media (min-width: 576px) { 
    .slim-popup-container,
    .slim-datepicker-container{
        width:90%;
    }
}

/* Medium devices */
@media (min-width: 768px) { 
    .slim-popup-container,
    .slim-datepicker-container{
        width:70%;
    }
}

/* Large devices */
@media (min-width: 992px) { 
    .slim-popup-container,
    .slim-datepicker-container{
        width:40%;
    }
}

.slim-popup-title-wrapper,
.slim-datepicker-title-wrapper{
    margin:20px 30px 15px 30px;
    font-size:24px;
    color:#595959;
}

.slim-popup-content-wrapper,
.slim-dateselects-wrapper{
    margin:15px 30px;
    overflow: auto;     /* Keep floating child elements within parent container */
}

/* ---------------------------------------------------------------------------
 * Datepicker
 * --------------------------------------------------------------------------- */

.slim-datepicker-container{
    max-width:360px;
    top: 40%; 
}

.slim-dateselects-wrapper{
    margin-bottom:20px;
    border:1px solid #999;
    border-radius:4px;
}

.slim-close-btn + .slim-dateselects-wrapper{
    margin-top:30px;
}

.slim-dateselects-wrapper select{
    padding:8px 10px 8px 4px ;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    background-image:url('../img/chevron-down-op66.png');
    background-repeat: no-repeat;
    background-position:right;
    background-size: auto 12px;
    border:1px solid transparent;
    border-top:none;
    border-bottom:none;
    text-align:center;
}

.slim-dateselects-wrapper select::-ms-expand {
    display: none;
}

.date-selects-wrapperselect:focus::-ms-value {
    background-color: transparent;
}

.slim-dateselects-wrapper select:first-of-type{
    border-left:none;
}

.slim-dateselects-wrapper select:last-of-type{
    border-right:none;
}

.slim-dateselects-wrapper select{
    border-color:#999;
}

.slim-dateselects-wrapper select:nth-child(2){
    border-left: none; 
    border-right:none;
}

.slim-dateselects-wrapper select:focus{
    background-image:url('../img/chevron-down-op82.png');
}

.slim-dateselects-wrapper .day-select{
    width:24%;
}

.slim-dateselects-wrapper .month-select{
    width:46%;
}

.slim-dateselects-wrapper .year-select{
    width:30%;
}

.slim-datepicker-container button{
    float:right;
    margin:0px 10px 20px 0px;
}

.slim-datepicker-container button:first-of-type{
    margin-right:30px;
}


/* ---------------------------------------------------------------------------
 * Tooltip
 * --------------------------------------------------------------------------- */
 
.slim-tooltip{
    position:absolute;
    display:block;
    left:0;
    top:0;
    min-width:40px;
    max-width:400px;
    z-index:99;    /* has to be one unit smaller than .slim-overlay z-index. To change this use class "top-tooltip" */
}

.slim-tooltip-container{
    display:block;
    width: auto;
    padding:8px 16px;
    border:1px solid #999;
    border-radius:2px;
    background-color:#fff; 
    text-align:left;
    color:#333;       
    overflow:hidden;
    text-overflow: ellipsis;
    font-size:16px;
    line-height:1.3;
    white-space: normal;
}

.slim-tooltip.with-close-btn .slim-tooltip-container{
    padding-right:24px !important;
}

.slim-tooltip.with-arrow:before{
    content:'';
    position: absolute;
    top: -9px;
    left:15px;
    border-bottom: solid 10px #666;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

.slim-tooltip.with-arrow:not(.dark-tooltip):not(.grey-tooltip):after{
    content:'';
    position: absolute;
    top: -8px;
    left:16px;
    border-bottom: solid 9px #fff;
    border-left: solid 9px transparent;
    border-right: solid 9px transparent;
}

.slim-tooltip-container img{
    width:100%;
}


/* --- Small tooltip --- */

.slim-tooltip.top-tooltip{
    z-index:101; 
}

/* --- Small tooltip --- */

.slim-tooltip.small-tooltip{
    min-width:30px;
    max-width:230px;
}

.slim-tooltip.small-tooltip .slim-tooltip-container{
    padding:7px 14px;
    font-size:14px;
    line-height: 1.2;
}

.slim-tooltip.small-tooltip.with-arrow:before{
    top:-7px;
    left: 13px;
    border-width:7px;
}

.slim-tooltip.small-tooltip:not(.dark-tooltip):not(.grey-tooltip).with-arrow:after{
    top:-6px;
    left: 14px;
    border-width:6px;
}
    

/* --- Dark tooltip --- */

.slim-tooltip.dark-tooltip .slim-tooltip-container{
    border:1px solid #595959;
    background-color:#595959;
    color:#f2f2f2;
}

.slim-tooltip.dark-tooltip.with-close-btn .slim-close-btn{
    background-image:url('../img/close-icon-white-op66.png');
    background-color:#595959;
}

.slim-tooltip.dark-tooltip.with-close-btn .slim-close-btn:hover{
    background-image:url('../img/close-icon-white-op82.png');
    background-color:#666;
}

.slim-tooltip.dark-tooltip.with-arrow:before{
    border-bottom-color: #595959;
}

/* --- Grey tooltip --- */

.slim-tooltip.grey-tooltip .slim-tooltip-container{
    border:1px solid #8c8c8c;
    background-color:#8c8c8c;
    color:#fff;
}

.slim-tooltip.grey-tooltip.with-close-btn .slim-close-btn{
    background-image:url('../img/close-icon-white-op66.png');
    background-color:#8c8c8c;
}

.slim-tooltip.grey-tooltip.with-close-btn .slim-close-btn:hover{
    background-image:url('../img/close-icon-white-op82.png');
    background-color:#999;
}

.slim-tooltip.grey-tooltip.with-arrow:before{
    border-bottom-color: #8c8c8c;
}

/* --- shadow tooltip--- */


.slim-tooltip.shadow-tooltip{
    border-radius:4px;
}

.slim-tooltip.shadow-tooltip .slim-tooltip-container{
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-color: #ccc;  
    border-radius:4px;
}

.slim-tooltip.shadow-tooltip.with-arrow:before{
    border-bottom-color: #b3b3b3;
}