/* =========================================== */

/* ============== Chatbot (CB) ============== */

/* =========================================== */





.chatbot-container {}



/* ============== Chatbot Button (CBB) ============== */



.chatbot-button {

    border-radius: 50%;

    height: 80px;

    width: 80px;

    background-color: #5ca6fa;

    transition: all 0.25s ease-in;

    border: 0px;

}



.chatbot-button:hover {

    background-color: #ccc;

    cursor: pointer;

}



.chatbot-button:focus,

.chatbox-button:active {

    outline: 0;

}





/* === Chatbot Button - Animation === */



.chatbot-button__anim-container {

    height: 100%;

    width: 100%;

    transition: .5s;

    justify-content: center;



    position: relative;

    cursor: pointer;

    display: flex;

    align-items: center;

}



.chatbot-button__anim-container img {

    transition: .3s;

    position: absolute;

    font-size: 4em !important;

    height: 50%;

    width: 50%;

}



.chatbot-button__anim-container .chatbot-button__icon--opened {

    transform: rotate(-135deg);

    opacity: 0;

}



.chatbot-button__anim-container.morphed {

    transform: rotate(135deg);

}



.chatbot-button__anim-container.morphed .chatbot-button__icon--opened {

    opacity: 1;

}



.chatbot-button__anim-container.morphed .chatbot-button__icon--closed {

    opacity: 0;

}



.chatbot-button__anim-container.small {

    height: 2rem;

    width: 2rem;

    font-size: .5rem;

}





/* === Chatbot Button - Position === */



.chatbot-button[data-chatposition="inline"] {

    position: static;

}



.chatbot-button[data-chatposition="br"] {

    position: fixed;

    bottom: 5%;

    right: 3%;

}



.chatbot-button[data-chatposition="bl"] {

    position: fixed;

    bottom: 5%;

    left: 3%;

}



.chatbot-button[data-chatposition="cr"] {

    position: fixed;

    top: 50%;

    right: 3%;

    transform: translateY(-50%);

}



.chatbot-button[data-chatposition="cl"] {

    position: fixed;

    top: 50%;

    left: 3%;

    transform: translateY(-50%);

}



.chatbot-button[data-chatposition="tr"] {

    position: fixed;

    top: 5%;

    right: 3%;

}



.chatbot-button[data-chatposition="tl"] {

    position: fixed;

    top: 5%;

    left: 3%;

}





/* ============== Chatbot Modal or Layer ============== */





/* === Chatbot - CHAT WIN POSITION === */

/* Data Attribut: chatwinposition

*  br = Unten Rechts

*  c = Mittig

*  cr = Mittig Rechts

*/

/*

.chatbot-layer[data-chatwinposition="br"] .chatbot-layer__dialog.modal-dialog-centered {margin: 0 10px 0 auto;align-items: flex-end;}

.chatbot-layer[data-chatwinposition="c"] .chatbot-layer__dialog {margin: 0 auto;display: flex;align-items: center;}

.chatbot-layer[data-chatwinposition="cr"] .chatbot-layer__dialog {margin: 0 10px 0 auto;}

*/



/* === Chatbot Layer - CHAT SIZE === */

/* Data Attribut = chatsize 

 * s = Kompakt

 * m = Medium

 * l = Volle Display Größe

 */



.chatbot-layer {

    display: flex;

    align-items: center;

    flex-direction: row;

}



.chatbot-layer[data-chatsize="s"] .chatbot-layer__dialog {

    padding: 30px;

}



.chatbot-layer[data-chatsize="m"] .chatbot-layer__dialog {

    max-width: 60%;

    max-width: 1200px;

    flex-basis: 60%;

}



.chatbot-layer[data-chatsize="l"] .chatbot-layer__dialog {

    max-width: 100%;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    flex-basis: 100%;

}



.chatbot-layer[data-chatsize="l"] .chatbot-layer__dialog .chatbot-layer__content {

    height: auto;

    min-height: 100%;

    border-radius: 0;

}





/* ============== Chatbot Layer (CBL) ============== */



.chatbot-layer {

    box-shadow: 0 -6px 99px -17px rgba(0, 0, 0, 0.68);

}



.chatbot-layer__dialog {

}



.chatbot-layer__content {

    border: 0px !important;

}



/* === Chatbot Layer - Size === */



.modal-dialog.modal-md {

    max-width: 680px;

}



/* Important part */



.modal-dialog {

    overflow-y: initial !important;

}



.modal-body {

    height: 550px;

    height: 60vh;

    overflow-y: auto;

    padding: 40px;

}



.modal-content {

    border: 0px;

}





/* ============== Chatbot - Header ============== */



.chatbot-header {

    background:#ededed;

    border-bottom:#e0e0e0;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 8px 1rem;

    border-bottom: 1px solid #dee2e6;

    border-top-left-radius: calc(.3rem - 1px);

    border-top-right-radius: calc(.3rem - 1px);

}



.chatbot-header__avatar img {

    max-height: 50px;

    border-radius: 50%;

    border:   #ccc 1px solid;

}



.chatbot-header__title {



    padding:14px 12px 6px 12px;

    font-size:120%;

}



.chatbot-header__title h5 {

    font-size:100%;

    font-weight: bold;

    color:#4a4a4a;

    text-transform: none;

    margin:0;

}



.chatbot-header .close {

    float: right;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1;

    color: #2980b9;

    text-shadow: 0 1px 0 #fff;

    opacity: 1;

    padding: 0 !important;

    margin: 0 !important;

}







/* ============== Chatbot - Footer ============== */







/* === Container === */



.chatbot-footer {

    border-top: 3px solid #eaf0f6 !important;

}



.chatbot-footer__type-message {

    width: 100%;

    margin: 0;

    padding: 15px 15px;

    display:flex;

}



/* === Input Field === */



.chatbot__input {

    flex-basis: 90%;

    flex: auto;

    outline: 0;

    border: 0px solid #fff;

    color: #000;

    padding: 10px 60px 10px 20px;

    background:#f3f3f3;

    border-radius: .3rem;

    transition: background 0.2s ease-in;

}



.chatbot__input:hover {



    margin: 0;

    border: 0px solid #ccc;

}





/* === Submit Button ===*/



.chatbot__submit {

    outline: 0;

    background: #2980b9;

    border: 1px solid #2980b9;

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    height: 46px;

    width: 46px;

    position: relative;

    right: 15px;

    -webkit-transition: 0.3s all ease;

    -o-transition: 0.3s all ease;

    transition: 0.3s all ease;

    /* border-radius: 0 .3rem .3rem 0;*/

    border-radius: 50%;

}



.chatbot__submit:hover {

    background: #000;

    border: 1px solid #000;

    outline: 0;

}



.chatbot__submit:focus,

.chatbot__submit:active {

    outline: 0;

}



.chatbot__submit i {

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

    left: 50%;

    padding-right: 2px;

}







/* ============== Chatbot - Body ============== */





.chatbot__body {}



.chatbot__body .chatbot__messages {

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    flex-direction: column;

    align-items: flex-start;

}





.animation:last-child {

    animation: fadein 0.25s;

    animation-timing-function: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}





.is-ai .chatbot__message{

   /*    min-height:70px;

 padding-right:44px;*/

}





/* ============== Chatbot - Spinner ============== */

.spinme-right {

    display: inline-block;

    padding: 15px 20px;

    font-size: 14px;

    border-radius: 30px;

    line-height: 1.25em;

    font-weight: 100;

    opacity: 0.2;

}



.spinme-left {

    display: inline-block;

    padding: 15px 20px;

    font-size: 14px;

    color: #ccc;

    border-radius: 30px;

    line-height: 1.25em;

    font-weight: 100;

    opacity: 0.2;

}



.spinner {

    margin: 0;

    width: 100%;

    text-align: center;

}



.spinner > div {

    width: 10px;

    height: 10px;

    border-radius: 100%;

    display: inline-block;

    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;

    animation: sk-bouncedelay 1.4s infinite ease-in-out both;

    background: rgba(0, 0, 0, 1);

}



.spinner .bounce1 {

    -webkit-animation-delay: -0.32s;

    animation-delay: -0.32s;

}



.spinner .bounce2 {

    -webkit-animation-delay: -0.16s;

    animation-delay: -0.16s;

}



@-webkit-keyframes sk-bouncedelay {



    0%,

    80%,

    100% {

        -webkit-transform: scale(0)

    }



    40% {

        -webkit-transform: scale(1.0)

    }

}



@keyframes sk-bouncedelay {



    0%,

    80%,

    100% {

        -webkit-transform: scale(0);

        transform: scale(0);

    }



    40% {

        -webkit-transform: scale(1.0);

        transform: scale(1.0);

    }

}





/* ============== Chatbot - Speech Bubbles ============== **/

.bubble {

    font-weight: 400;

    min-width: 60%;

    box-shadow: 0px 20px 13px -24px rgba(0, 0, 0, 0.6);

}



.bubble p {

    margin: 0;

}



.bubble-chatbot a, 

.bubble-chatbot a:link, 

.bubble-chatbot a:visited {

    text-decoration: underline;

    color: #eaf0f6;

}



.bubble-chatbot a:hover {

    text-decoration: none;

    color: #fff;

}



.bubble-chatbot {

    margin: 20px 30px 15px 0px;

    border: 4px solid #2980b9;

    border-radius: 15px;

    padding: 20px;

    text-align: left;

    color: #fff;

    position: relative;

    background: #2980b9;

    left: 0;

}



.bubble-chatbot h5{

    color:#fff;

    }

   





.bubble-chatbot:first-child {

    margin: 0px 30px 10px 0px;



}



.bubble-chatbot .date {

    color: #333;

}



.bubble-user {

    margin: 20px 0px 20px 30px;

    border: 4px solid #eaf0f6;

    border-radius: 15px;

    padding: 20px;

    text-align: left;

    color: #333;

    position: relative;

    background: #eaf0f6;



    right: 0;

    align-self: flex-end;

}



/* === Chatbot Answer - Selection === */



.chatbot-selection span {

    background: #ffffff;

    border: 2px solid #3a5571;

    border-radius: 30px;

    padding: 15px;

    -webkit-box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);

    -moz-box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);

    box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);

    transition: all 0.3s ease-in;

}



.chatbot-selection span:hover {

    background: #3a5571;

    color: #fff;

}





/* ============== Chatbot - Loader ============== */



.loader {

    margin-bottom: -2px;

    text-align: center;

    opacity: 0.3;

}



.loader__dot {

    display: inline-block;

    vertical-align: middle;

    width: 6px;

    height: 6px;

    margin: 0 1px;

    background: white;

    border-radius: 50px;

    animation: loader 0.45s infinite alternate;

}



.loader__dot:nth-of-type(2) {

    animation-delay: 0.15s;

}



.loader__dot:nth-of-type(3) {

    animation-delay: 0.35s;

}



@keyframes loader {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-5px);

    }

}



@keyframes fadein {

    from {

        opacity: 0;

        margin-top: 10px;

        margin-bottom: 0;

    }

    to {

        opacity: 1;

        margin-top: 0;

        margin-bottom: 10px;

    }

}



* {

    box-sizing: border-box;

}



/*Loading */



#is-loading{text-align: center;min-width: 10%;}



/* ============== Chatbot - Wetter ============== */





h4.wtilo{color:#fff;font-size: 200%;}



.weatherBox {

    padding: 2px;

}



.weatherBox img {

    float: right;

}



.weatherBox .date {

    font-weight: bold;

    color:#fff;

}



.weatherBox .wi-stack {

    font-size: 300%;

}



.weatherBox .iv-stack {

    font-size: 500%;

}



.bubble-chatbot .weatherBox * {

    background-color: transparent;

}



.weatherBox .kopf .iv-stack {

    float: right;

    margin: 0 0 25px 0;

}



.weatherBox .title {

    font-weight: bold;

    font-size: 1.5rem;

}



.weatherBox .date {

    font-weight: bold;

    font-size: 1.2rem;

}



.weatherBox .bez {

    font-weight: bold;

}



.weatherBox .bez:after {

    content: ":";

}



.weatherBox .rumpf > div {

    display: flex;

}



.weatherBox .rumpf > div > .bez {

    flex-basis: 25%;

}



.weatherBox .rumpf {

    padding-bottom: 0px;

    padding-top: 15px;

}



.weatherBox .forecasts {

    padding-top: 20px;

    border-top: 1px solid #ccc;

}



.weatherBox .forecasts .forecast {

    border-bottom: 1px solid #ccc;

    padding-bottom: 20px;

}



.weatherBox .forecasts .forecast:last-child {

    border-bottom: 0px solid #ccc !important;

}



.weatherBox .forecasts .iv-stack {

    float: left;

    margin: 0 25px 0 0;

}



.weatherBox .forecasts .forecastDate {

    font-weight: bold;

    font-size: 1.2rem;

}



/* ============== Chatbot - Antwort | Buttons ============== */



.chatbot__message button,

.chatbot__message .btn-ortena {

    border: 2px solid #2980b9;

    padding: 10px 15px;

    border-radius: 0.75rem;

    background: #fff;

    color: #000!important;


    /* box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2); */

    /* font-weight: bold; */

    transition: all 0.3s ease-in;

}


a.btn-ortena { text-decoration:none!important;}



.chatbot__message button:hover,

.chatbot__message .btn-ortena:hover,

.chatbot__message button:focus,

.chatbot__message .btn-ortena:focus {

    background: #2980b9;

    border: 2px solid #fff;

    color: #fff!important;

}



.chatbot__message  .btn-primary {

    color: #2980b9;

    background-color: #fff;

    border:0px;

}



.chatbot_message .fflink{color:#eaf0f6;}



/* ============== Chatbot - Antwort | Details and Summary ============== */

summary {

    background: #9DADBC;

    padding: 10px 15px;

    border: 2px solid #9DADBC;

    color: #000;

    border-radius: 0.75rem;

    text-decoration: none;

}



summary:hover,

summary:focus {

    background: #8CAFCE;

    padding: 10px 15px;

    border: 2px solid #8CAFCE;

    color: #fff;

    border-radius: 0.75rem;

    text-decoration: none;

}



details {

    padding-bottom: 15px;

}

/* ============== RSS ============== */

.rssBox .date{font-size: 130%;padding: 0;}

/* ============== Sonstiges ============== */



/* Gabi Server */

#main .chatbot__message a {

    font-size: 100%;

}

.bubble-chatbot .card, .bubble-chatbot .card,.bubble-chatbot .card, .bubble-chatbot .card div{

    border:none!important;

    background:transparent!important;

}



.feedback  {

    width: 40px;

    z-index: 2222;

    position: absolute;

    right: -48px;

    bottom: 0px;

}



.chatbot__message .feedback__buttons button:hover{background:transparent;border:0px;}



.feedback__buttons{margin:0;padding:0;list-style: none;}

.feedback__buttons li{margin:0;padding:0;}



.feedback button {

    margin-top:5px;

    outline: 0;

    background:#fff;

    border: 0px solid #fff;

    color:  #2980b9;;

    cursor: pointer;

    font-size: 28px;

    height: 42px;

    width: 42px;

    right: 16px;

    /*border-radius: 50%;*/

    transition: 0.3s ease all;

}



.feedback button:hover {

    color:  #000;

}



.feedback button i:hover{   

    /* transform: rotate(25deg);*/

}





.feedback__antwort{text-align:center;}

.feedback__antwort--positiv{}

.feedback__antwort--negativ{}

.feedback__button-wrapper{text-align: center;margin-top: 20px;}

.feedback__button{}



.bubble-chatbot a.feedback__button, 

.bubble-chatbot a.feedback__button:link, 

.bubble-chatbot a.feedback__button:visited {

    text-decoration: none;

    color: #000;

    border:0px;

    background: #fff;

    transition: 0.3s ease all;

}

.bubble-chatbot a.feedback__button:after {

    font-family: "FontAwesome"; font-weight: 400;font-size: 18px; content: "\f105";margin-left:10px;

}

.bubble-chatbot a.feedback__button:hover,

.bubble-chatbot a.feedback__button:focus{

    background:#333;

    color:#fff;

}









/* ============== Chatbot - CARD LAYOUT ============== **/



.chatbot-card {padding:0px;}

.chatbot-card__header{padding:0px;background-color: transparent;border:0;}



.chatbot-card__title{font-weight:bold;font-size:130%;}



.chatbot-card__body{padding: 1.25rem 0 0 0;}

.chatbot-card__thema{background:#333;padding:20px;font-weight: bold;border-bottom:3px solid #ccc;font-size:120%;}



.chatbot-card__selection{background:#333;color:#fff;}



.selection__items,

.accordion__items{list-style:none;padding:0;margin:0;}



.selection__item,

.accordion__item{border-bottom:1px solid #ccc;padding:0;margin:0;}



.chatbot-card__selection .selection__item .btn-ortena{position:relative;background:#333;color:#fff;padding:20px 20px;width:100%;border:0px;border-radius: 0px;text-align: left;}

.chatbot-card__accordion .accordion__item .btn-ortena{position:relative;background:#333;color:#fff;padding:20px 20px;width:100%;border:0px;border-radius: 0px;text-align: left;}



.chatbot-card__weitereInformationen{padding:20px;}



.selection__item .btn-ortena:hover,

.selection__item .btn-ortena:focus,

.selection__item .btn-ortena:active{border:0;background:#000;}





.chatbot-card__selection .selection__item .btn-ortena:after,

.chatbot-card__accordion .accordion__item .btn-ortena:after{position: absolute;right:15px; top:15px;font-family: "FontAwesome"; font-weight: 400;font-size: 24px;}



.chatbot-card__selection .selection__item .btn-ortena:after{content: "\f105";}

.chatbot-card__accordion .accordion__item .btn-ortena:after{content: "\f067";}

.chatbot-card__accordion .accordion__item:first-of-type{border-top:0px solid #ccc;}





.chatbot-card.chatbot-card--sbw{padding:0px;}



.chatbot__card--sbw-qa {}

.chatbot__card--feedback {}

.chatbot__card--chitchat {}





.chatbot__message details {margin-top:0px;}

.chatbot__message summary {border:0;border-radius: 0px;background:#333;color:#fff;    -webkit-transition: 0.3s all ease;

    -o-transition: 0.3s all ease;transition: 0.3s all ease;padding:15px;}



.chatbot__message summary:after {font-family: "FontAwesome"; font-weight: 400;font-size: 24px; content: "\f105";}



.chatbot__message summary:hover {background:#000;}





/* Sonstiges TEMP */



.chatbot__message img {

    max-width: 400px;

    height: auto;

}



.chatbot__message .odd,

.chatbot__message .even,

.rssBox .date {

    color: #fff;

    background-color: transparent !important;

}



.bubble {

    max-width: 70%

}
.gcsxTitle, .osmTitle
{
    font-size:medium!Important;
    font-weight:normal!important;
}