/* CSS Document */
/* TheHotline.org and LoveIsRespect.org chat tool. */
/* application lead: Marty Hand | VP of Technology | The National Domestic Violence Hotline. */
/* author: Chad Cleveland | Lightbulb Web Services | www.Lightbulb.Services  */
/* copyright: © Copyright 2023 Lightbulb Web Services.  */
/* license:  A royalty-free, non-exclusive, and irrevocable license to modify, reproduce, publish, or otherwise use, and authorize others to use (in whole or in part, including in connection with derivative works) is hereby granted to The National Domestic Violence Hotline.  */

/*
    Last Modified: '2023-09-14 20:06';
*/ 

/* FONT */

@font-face {
    font-family: 'Gotham';
    src: url('https://lib.thehotline.us/font/gotham/gotham-300.woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('https://lib.thehotline.us/font/gotham/gotham-400.woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('https://lib.thehotline.us/font/gotham/gotham-800.woff2');
    font-weight: 700;
    font-style: normal;
}

/* GLOBAL VARIABLES */

:root {
    --font-main: Gotham, Verdana, Helvetica, sans-serif;
    --thl-purple: #592c5f;
    --thl-purple-2: #9e3a8a;
    --thl-black: #333132;
    --thl-white: #fff;
    --thl-red: #c43546;
    --thl-chat-purple: #9e3a8acc;
    --thl-chat-grey: #a4a0a2;
}


div[class*=cx-messenger] button {
    opacity: .2;
}

div[class*=cx-messenger] button[thl-status=active] {
    opacity: 1;
}

/* iframe.genesys-mxg-frame {
    max-height: 712px;
    width: 426px !important;
    top: unset;
    left: unset;
    right: 20px;
    bottom: 12px;
    z-index: 99999999;
    border: none;
    position: fixed;
} */

div#sdx-survey-prompt {
    position: fixed !important;
    bottom: 20px !important;
    z-index: 999999999;
    left: calc(100% - 500px) !important;
    width: 400px !important;
}
div#sdx-speech-bubble-container {
    width: calc(100% - 26px) !important;
}
div#sdx-survey-prompt a {
    text-decoration: none !important;
}
a#sdx-survey-prompt-reject {
    font-weight: 400;
}

div#sdx-survey-container * {
    font-family: var(--font-main) !important;
    font-weight: 300 !important;
}

div#sdx-toggle-survey-button {
    z-index: 10000000 !important;
    color: #eee !important;
    background-color: #555 !important;
}


div#sdx-survey-container  {
    /* background-color: var(--thl-black) !important; */
    /* position: fixed !important; */
    width: 420px !important;
    /* height: 0px !important; */
    right: 23px !important;
    top: 23px !important;
    overflow: hidden !important;
    box-shadow: 0 0 4px #00000055 !important;
    border: none !important;
    transition: all ease-in-out .3s !important;
    z-index: 9999999 !important;
    border-radius: 3px !important;
}
div#sdx-survey-container[thl-status=expanded]  {
    height: calc(100% - 50px) !important;
}
div#sdx-survey-container[thl-status=collapsed]  {
    height: 60px !important;
    width: 60px !important;
}
iframe#sdx-survey-iframe {
    border: none !important;
    width: 100% !important;
    height: calc(100% - 0px) !important;
    z-index: 999 !important;

}

div#sdx-survey-container .thlmsg-header {
    background-color: #2a2a2a !important;
    height: 60px !important;
    box-shadow: 0 0 8px #00000033 !important;
    overflow: hidden !important;
}
div#sdx-survey-container .thlmsg-header-logo {
    background-image: URL('https://lib.thehotline.us/img/thehotline-logo.png') !important;
    width: 50px !important;
    height: 50px !important;
    float: left !important;
    background-color: #ffffff !important;
    background-size: 50px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 5px 0 0 5px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    cursor: pointer !important;
}
div#sdx-survey-container .thlmsg-header-logo[thl-status=alt] {
    background-image: URL('https://lib.thehotline.us/img/thehotline-logo-prp.png') !important;
    background-color: var(--thl-purple-2) !important;
}

#thlmsg-container .thlmsg-notification-icon[thl-unseen="0"] {
    display: none !important;
}

div#sdx-survey-container .thlmsg-header-text {
    color: var(--thl-white) !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    padding: 20px 0px 00px 10px !important;
    float: left !important;
    display: inline-block !important;
}

div#sdx-survey-container .thlmsg-header-close {
    color: var(--thl-white) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: .3px !important;
    padding: 8px 0px 9px 0px !important;
    float: right !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 60px !important;
    overflow: hidden !important;
    transition: all ease-in-out .1s !important;
}
div#sdx-survey-container .thlmsg-header-close[thl-status=collapsed] {
    width: 0px !important;
    padding: 8px 0 !important;
}
div#sdx-survey-container .thlmsg-header-close.thlmsg-header-exit {
    background: var(--thl-red) !important;
    float: left !important;
    font-weight: 800 !important;
    margin-right: calc(50% - 88px) !important;
}
div#sdx-survey-container[thl-status=collapsed] .thlmsg-header-close.thlmsg-header-exit {
    display: none !important;
}
div#sdx-survey-container .thlmsg-header-close .thl-icon {
    margin: 0 auto 4px !important;
    width: 12px !important;
    height: 12px !important;
}
div#sdx-survey-container .thlmsg-header-expand {
    float: right !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: padding ease-out .3s !important;
    padding: 10px !important;
}

div#sdx-survey-container .thlmsg-header-close:hover, div#sdx-survey-container .thlmsg-header-expand:hover {
    background-color: #ffffff22 !important;
}

div#sdx-survey-container .thl-icon[thl-icon] {
    width: 40px !important;
    height: 40px !important;
    background-size: 300% !important;
    background-repeat: no-repeat !important;
    margin: 0px !important;
    background-position-x: center !important;
    border-color: var(--purple-lt) !important;
  }

/* hides */ 

[thl-status=expanded] .hideExpanded,
[thl-status=collapsed] .hideCollapsed,
[thl-status="hidden"] {
    display: none !important;
}

/* media queries */

@media only screen and (max-width: 600px) {

    /* iframe.genesys-mxg-frame {
        max-height: 100%;
        height: calc(100% - 10px) !important;
        width: calc(100% - 10px) !important;
        top: unset;
        left: unset;
        right: 20px;
        bottom: 12px;
        z-index: 99999999;
        border: none;
        position: fixed;
    } */
    
    div#sdx-survey-prompt {
        top: 62px !important;
        z-index: 999999999;
        left: 16px !important;
        width: calc(100% - 20px) !important;
    }
    
    div#sdx-survey-container {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0px !important;
    }
    div#sdx-survey-container[thl-status=collapsed] {
        width: 60px !important;
        height: 60px !important;
        right: 5px !important;
        bottom: 5px !important;
        border-radius: 10px !important;
    }
    div#sdx-survey-container[thl-status=expanded]  {
        height: calc(100% - 00px) !important;
    }
    /* #thlmsg-container[thl-status=collapsed], 
    div#sdx-survey-container[thl-status=collapsed]  {
        height: calc(40% - 0px) !important;
    } */
  }

  @media only screen and (max-width: 415px) {
    div#sdx-survey-container .thlmsg-header-text {
        font-size: 16px !important;
        padding: 24px 0px 00px 10px !important;
    }
}
@media only screen and (max-width: 355px) {
    div#sdx-survey-container .thlmsg-header-text {
        font-size: 13px !important;
        padding: 24px 0px 00px 10px !important;
    }
}

