/* TRANSITIONS */
#popout-trigger .popout-trigger-button { -webkit-transition: border-color 0.2s ease;-moz-transition: border-color 0.2s ease;-ms-transition: border-color 0.2s ease;-o-transition: border-color 0.2s ease;transition: border-color 0.2s ease; }

/* POPOUT TRIGGER */
#popout-trigger { position: fixed; left: 0; bottom: 0; z-index: 2000; pointer-events: none; }
#popout-trigger .popout-trigger-button { position: absolute; bottom: 0; left: 0; width: 0; height: 0; border: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #cccccc; background: transparent; padding: 0; pointer-events: auto; }
#popout-trigger .popout-trigger-button:hover { border-color: transparent transparent transparent #666666; }
#popout-trigger .popout-trigger-button svg { position: absolute; bottom: 15px; left: -85px; }
@media only screen and (max-width: 750px) {
    #popout-trigger .popout-trigger-button { border-width: 80px 0 0 80px; }
    #popout-trigger .popout-trigger-button svg { position: absolute; bottom: 7px; left: -73px; }
}

/* POPOUT */
#popout { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 5001; display: none; }
#popout .popout { z-index: 30; position: relative; pointer-events: auto; }
#popout .popout-blocker { background: #2A2F50; opacity: 0.9; z-index: 20; }
#popout .popout-outer { position: relative; display: table-cell; height: 100vh; vertical-align: middle; }
#popout .popout-container { width: 100vw; overflow: auto; max-height: 100vh; position: relative; }
#popout .popout-inner { padding: 60px 0; width: calc(100% - 60px); max-width: 1020px; margin: 0 auto; }
#popout .popout > *:last-child { margin-bottom: 0; }
#popout .popout-content { background: #ffffff; text-align: center; border-radius: 0 0 5px 5px; padding: 60px; position: relative; }
#popout .popout-btns { margin-top: 50px; }
#popout .popout-btns .btn { margin: 4px; min-width: 200px; }
#popout .popout-btns .popout-save { display: none; }
@media only screen and (max-width: 900px) {
    #popout .popout-content {  padding: 40px 15px; }
    #popout .popout-inner { width: calc(100% - 50px); }
}
@media only screen and (max-width: 550px) {
    #popout { font-size: 18px; line-height: 24px; }
    #popout .popout-btns { margin-top: 40px; }
}

/* POPOUT PREFERENCES */
.popout-preference-btns { margin-top: 30px; }
.popout-preferences { background: transparent; display: inline-flex; align-items: center; }
.popout-preferences svg { margin-right: 12px; }
.popout-options-container { display: none; }
.popout-options { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -15px; padding: 30px 0 1px; box-sizing: border-box; }
.popout-checkbox .form-group { margin: 0 15px; }
@media only screen and (max-width: 550px) {
    #popout .popout-preferences { font-size: 18px; line-height: 24px; }
    .popout-preferences svg { width: 24px; height: 24px; margin-right: 8px; }
}