@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@200;300;400;500;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Noto+Sans+Hebrew:wght@100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@200;300;400;500;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Noto+Sans+Hebrew:wght@100..900&display=swap');







.aime-main-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

.aime-login-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: RGBA(0, 0, 0, 0.5);
}

.aime-show-users-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* background-color: RGBA(0, 0, 0, 0.5); */
}

.aime-login-header-left-container{
    display: flex !important;
    flex-direction: column;
    gap: 7px;
}

.aime-login-logo{
    display: flex !important;
    width: 80px;
}

.login-connect-pic-container{
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.icon-class{
    width: 20px;
    height: 20px;
}

.top-xpell-logo-class{
    width: 60px;
    height: 35px;
}

.login-top-container-left{
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 33px;
    gap: 4px;
}

.login-top-container-right{
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 33px;
}

.login-fields-container{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    width: 100%;
    border-radius: 21px;
    gap: 20px;
}

.login-successfully-connected-container{
    gap: 20px;
    flex-direction: column;
}

/* .aime-forgot-password-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 579px;
    width: 100%;
    min-width: 500px;
    background-color: var(--login-bh-color);
    position: relative;
} */

.aime-connected-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 579px;
    width: 100%;
    min-width: 500px;
    /* border-radius: 21px;
    border: 3px solid var(--blue-theme-color); */
    background-color: var(--login-bh-color);
}

.aime-show-users-all-screen{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    /* background-color: var(--login-bh-color); */
    justify-content: flex-end;
}

.aime-present-users-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 95%;
    width: 95%; /*1636*/
    background-color: var(--login-bh-color);
}

.aime-present-users-container-dash{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 95%;
    width: 95%; /*1636*/

}

.aime-present-users-header{
    width: 100%;
    height: 59px;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--blue-theme-color);
}

.aime-present-agents-header-left{
    display: flex !important;
    gap: 20px;
}

.aime-present-users-header-right{
    display: flex !important;
}

.aime-login-box {
    display: flex;
    flex-direction: column;
    width: 350px;
}

.aime-login-box-left {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0px;
    top: 0px;
    gap:15px;
}

.aime-view-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.aime-view-left {
    display: flex;
    justify-content: flex-start;
}

.aime-view-center {
    display: flex;
    justify-content: center;
}

.aime-sigh-in-with-view {
    display:flex;
    flex-direction:column;
    position:relative;
    left:0px;
    top:0px;
    align-items: center;
    gap:10px;

}

.aime-sigh-in-with-inner { 
    display: flex;
    width: 311px;
    height: 40px; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    flex-shrink: 0;
    border-radius: 100px; 
    background: var(--s-in-with-bg-color);
    pointer-events:all;
}

.sigh-in-logo {
    width: 18px;
    height: 18px;
}

.forgot-password-texts{
    display: flex; 
    flex-direction: column; 
    width: 100%;
}

.login-top-container{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    top: 0;
    height: 65px;
    width: 100%;
    border-bottom: 2px solid var(--aime-login-lines-color);;
}

.login-bottom-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 400px;
    height: 67px;
    gap: 24px;
    bottom: 0;
    position: relative;
}

.aime-login-header{
    display: flex !important;
    width: 100%;
    height: 70px;
    background-color: var(--blue-theme-color);
    align-items: center;
    position: absolute;
    top: 0;
    padding: 35px;
}

.login-f-container1of3{
    display: flex; 
    flex-direction: column; 
    /* width: 100%; */
    /* gap: 17px; */
    /* justify-content: center; */
    height: 100%;
    margin-left: 60px;
    margin-top: 60px;
    /* justify-content: center; */
}

.login-f-container2of3{
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

.aime-classic-link{
    color: var(--text-color);
    text-decoration: underline;

}

.login-f-container3of3{
    display: flex; 
    flex-direction: column; 

}

.login-body-container{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    /* width: 80%; */
    height: calc(100% - 130px);
    justify-content: center;
}

.login-txt-container{
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.aime-box-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.aime-present-users-footer{
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    height: 59px;
    gap: 21px;
}

.aime-show-users-popup{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 89%;
    width: 77%;
    background-color: RGBA(0, 0, 0, 0.5);
}

.aime-show-users-popup-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    border-radius: 21px;
}

.aime-popup-user-header{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 59px;
    border-bottom: 1px solid var(--label-font-color); 
    align-items: center;
    padding : 0 35px;
}

.aime-popup-user-header-left{
    display: flex !important;
    width: 50%;
    height: 100%;
    align-items: center;}

.aime-popup-user-header-right{
    display: flex !important;
}

.aime-popup-user-body{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    gap: 13px;
    margin-top: 18px;
    padding: 0 35px;
    overflow-y: auto;
}

.search-swiper-container-voice {
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    /* background-color: rgba(255, 255, 255, 0.5);; */
    width: 270px;
    height: 39px;
    align-items: center;
    margin-left: 10px;
    border-radius: 24px;
    border: 0.5px solid #FFF

}

.search-input-txt{
    background:none;
    border:none;
    outline:none;
    width:100%;
    font-size:16px;
    color:#FFF;
    margin-left:4px
}

.next-to-slider-label{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    color: #7A757F
    /* color: var(--border-color) */
}

.slider{
    display: block;
    -webkit-appearance: none;
    height: 4px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    width: 70%;
}

.aime-popup-agent-voice-body-top{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 31px;
    height: 16%;
}

.aime-popup-agent-voice-top-left{
    display: flex !important;
    flex-direction: column;
    width: 26%;
    gap: 10px;
}

.aime-popup-agent-voice-top-right{
    display: flex !important;
    align-items: center;
}

.aime-popup-agent-voice-body-bottom{
    width: 100%;
    height: 84%;
}

.aime-popup-user-footer{
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    height: 89px;
    border-top: 1px solid var(--label-font-color);
    padding: 0 41px;
    align-items: center;
    gap: 21px;
}

.aime-popup-user-footer > *:only-child{
    /* display: flex !important;
    justify-content: flex-end; */
    margin-left: auto; 
}

.aime-popup-user-image{
    width: 160px;
    height: 160px;
    border-radius: 117px;
    border: 1px solid var(--aime-agent-image-border-color);
}

.aime-popup-user-body-bottom{
    display: flex !important;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.aime-popup-user-names-container{
    display: flex !important;
    flex-direction: row;
    width: 81%;
    justify-content: space-between;
}

.aime-bright-btn{
    width: 83px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--aime-bright-btn-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-popup-agent-secondary-header{
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 59px;
    border-bottom: 1px solid var(--blue-theme-color);
    align-items: center;
    padding : 0 35px;
}

.aime-popup-agent-basic-info-and-footer-container{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.aime-popup-agent-secondary-mode-container-selected{
    flex-direction: row;
    gap: 8px;
    width: 160px;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid white;
}

.aime-popup-agent-edit-image-body-top{
    display: flex !important;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.agent-edit-image-choose-file-btn{
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-radius: 100px;
    background-color: var(--blue-theme-color);
    padding: 5px 10px;
    width: 100%;
    height: 100%;
    margin-top: 15px;
    cursor: pointer;
    justify-content: center;
}

.aime-popup-agent-edit-image-body-bottom{
    display: flex !important;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;/* 100%ss */
}

.aime-popup-user-body-row{
    display: flex !important;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    gap: 13px;
    margin-top: 18px;
    padding: 0 35px;
}

.generate-image-agent-options-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: auto; 
    gap: 10px; 
    width: 96%;
}

.wordpress-card-agent{
    display: flex;
    width: 138px;
    height: 112px;
    flex-direction: column;
    border: 0.5px solid #928A8A;
    pointer-events: all;
    border-radius: 4px 4px 0px 0px;
    justify-content: flex-start;
    align-items: flex-start;    
    padding: 8px;
}

.get-article-popup-form-agent{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #928A8A;
    width: 66%;
    height: 70%;
}

.aime-popup-agent-secondary-mode-container-non-selected{
    flex-direction: row;
    gap: 8px;
    width: 160px;
    height: 100%;
    align-items: center;
    justify-content: center;

}

.aime-popup-user-secondary-header-title-none-selected{
    color: #7A757F;
}

.aime-popup-user-secondary-header-title-selected{
    color: white;
}

.aime-dark-btn{
    width: 83px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--blue-theme-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-dark-btn-long{
    width: 111px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--blue-theme-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-agents-card-top{
    display: flex !important;
    width: 100%;
    height: 87%;
}

.aime-present-agents-body{
    width: 100%;
    height: 532px;
    padding-top: 32px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 225px);
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.aime-display-users-card{
    display: flex !important;
    flex-direction: column;
    width: 200px;
    height: 225px;
    gap: 4px;
}

.aime-popup-user-edit-image-container{
    width: 50px;
    height: 50px;
    background: #656565;
}

.aime-display-users-card-image{
    border: 1px solid var(--aime-agent-image-border-color);
    border-radius: 14px;
    min-width: 194px;
    min-height: 194px;
}

.aime-agents-card-bottom{
    display: flex !important;
}

.aime-display-users-card-text{

}

.aime-create-account{
    display:flex;
    flex-direction:column;
    width:400px;
    justify-content: center;
    align-items: center;
}

.aime-create-account-inner{
    display:flex;
    flex-direction:column;
    width:340px;
    justify-content: center;
    align-items: center;
    gap:8px;
}

.checkbox-containers{
    display:flex;
    flex-direction:column;
    width:325px;
    justify-content: center;
    align-items: center;
}

.aime-popup-user-body-top{
    display: flex !important;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;    
}

.checkbox-terms-and-condition{
    display:flex;
    flex-direction:row; 
    justify-content:center;
    gap:10px; 
    align-items: center; 
    width:100%;
}

.checkbox-container{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center; 
    width:100%; 
    gap:10px;
}

.checkbox-style{
    appearance: checkbox; 
    accent-color: var(--black-btn-color); 
}

.bottom-register{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    width: 340px;
}

.row-center-css{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.xplayer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.aime-popup-agent-delete-container{
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.aime-popup-agent-red-underlined{
    color: var(--text-error-color);
    text-decoration: underline;
}

.main-loader {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: baseline;
    height: 100vh;
    width: 100vw;
    /* background-color: --var(--aime-border-color);  */
    /* background-color: rgb(75, 7, 7);  */
}

.loader-text-container {
    /* position: relative; */
    width: 100%;
    /* height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-text {
    /* position: absolute; */
    /* color: #FA6900; */
    font-size: 24px;
    /* font-weight: bold; */

    text-shadow: 0 0 10px rgba(250, 105, 0, 0.5);
}

.loader-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 100%; */
}

.loader-image {
    /* width:100px; */
    height: 200px;
    margin-top: -100px;


}

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: var(--border-color);
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/* a{
  color:white;
  background: transparent;
} */

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Sans Hebrew", "Bebas Neue", sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
  pointer-events: all;
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

:root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --primary-color: #1A73E8;
  --secondary-bg-color: #F5F5F5;
  --border-color: #2C2C2C;
  --border-color-focus: #E9E9E9;
  --text-error-color: #FF0000;
  --main-font: Poppins, sans-serif;
  --s-in-with-bg-color: #F9F9F9;
  --black-btn-color: #000000;
  --dark-gray-text: #636363;
  --white-text-color: #FFFFFF;
  --black-text-color: #000000;
  --blue-theme-color: #A2CDFF;
  --label-font-color: #928A8A;
  --login-bh-color: #3A3A3F;
  --aime-login-lines-color: #484848;
  --aime-bright-btn-color: #BDBFC7;
  --aime-agent-image-border-color: #B6B6B6;
  --aime-text-color-chat: #000;


}

[data-theme="light"] {
  --bg-color: #F0F0F1;
  --aime-text-color: #000000;
  --primary-color: #1A73E8;
  --secondary-bg-color: #FAFAFA;
  --border-color: #D6D6D6;
  --border-color-focus: #2C2C2C;
  --text-error-color: #FF0000;
  --aime-frame-color: #eee;
  --aime-frame-color-light: #eeeeee66;
  --aime-border-color: #515151;
  --aime-input-background: #ccc;
  --aime-dmain-color: #fff;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #ebebeb;
  --aime-left-menu-color: #4b4b4b;
  --aime-placeholder-color: #eee;
  --aime-chatbox-bg-color: #202327;
  --aime-box-shadow-color: rgb(130 124 124 / 20%) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
  --aime-chatbox-input: #37393c;
  --aime-table-first-color: ##f8f8f84f;
  --aime-table-second-color: #aaa;
  --aime-linear-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgb(191, 194, 194), rgba(255, 255, 255, 0.2));
  --aime-text-color-chat: #aaa;
  --aime-submenu-color: #eee;
  --login-bh-color: #F0F0F1;
  --aime-bot-bg-color: #eee;
  --aime-user-bg-color: #2c2c2c;
  --aime-text-color-bot: #000000;
  --aime-text-color-user: #eee;
  /* --aime-input-background-color: #aaa; */
  --aime-text-label-color: #2d2d2d;






}

[data-theme="dark"] {
  /* --bg-color: #1E1E1E; */
  --bg-color: #111416;
  --aime-text-color: #E0E0E0;
  --aime-text-color-bot: #E0E0E0;
  --aime-text-color-user: #000000;
  --aime-text-color-bubble: #000000;
  --primary-color: #BB86FC;
  --secondary-bg-color: #2C2C2C;
  --border-color: #565656;
  --border-color-focus: #3E3E3E;
  --text-error-color: #FF0000;
  /* --aime-frame-color: #505054;
  --aime-dmain-color: #2A2A2F;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #818184;
  --aime-left-menu-color: #D9D9D9;
  --aime-input-background:rgba(255, 255, 255, 0.11); 
  --aime-placeholder-color: #A3A3A3; */
  --aime-frame-color: #505054;
  --aime-frame-color-light: #50505466;
  --aime-border-color: #ffffff1c;
  --aime-input-background: #212121;
  --aime-dmain-color: #141414;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #818184;
  --aime-left-menu-color: #D9D9D9;
  --aime-placeholder-color: #aaa;
  --aime-chatbox-bg-color: #202327;
  --aime-box-shadow-color: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
  --aime-chatbox-input: #37393c;
  --aime-table-first-color: #252728;
  --aime-table-second-color: #111213;
  --aime-linear-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgb(191, 194, 194), rgba(255, 255, 255, 0.2));
  --aime-bot-bg-color: #212121;
  --aime-user-bg-color: #e0e0e0;
  --aime-direction-row: rtl;
  --aime-direction-chat: rtl;
  --aime-chat-font: 'poppins', sans-serif;
  --aime-bubble-bg-color: #ccc;
  --aime-submenu-color: #3A3A3F;
  --login-bh-color: #3A3A3F;
  --aime-text-label-color: #ffffff;
  --animate-duration: 400ms;
}

[data-theme="light"] .icon {
  color: black;
}

[data-theme="dark"] .icon {
  color: white;
}

::placeholder {
  color: var(--aime-placeholder-color);
  font-family: var(--main-font);
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.chat-box h2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
}

.chat-box {
  /* width:27%;
  height:50%; */
  width: 459px;
  height: 84dvh;
  max-height: 825px;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  direction: ltr;
  background-color: var(--aime-dmain-color);
  position: absolute;
  right: 0;
  bottom: 400;
  /*width: clamp(300px, 100%, 600px);*/
  border-radius: 15px 15px 0 0;
  padding: 0px 0px 10px 0px;
  /* background-color: var(--_background); */
  /* border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black; */
  box-shadow: var(--aime-box-shadow-color);
  min-height: 250px;
  /* background-image: linear-gradient(0deg, white, rgba(0, 0, 0, 0.0)); */
  /* transition: all 300ms cubic-bezier(0.23, 1, 0.820, 1); */
  /* nav-up: current; */
  overflow: hidden;
  z-index: 100000;
  /* border-bottom: 1px solid black; */
  color: var(--aime-text-color);


}

/* mobile style*/

@media (max-width: 768px) {
  .chat-box {
    width: 100%;
    bottom: 0 !important;
    border-radius: 0;
    border: none;
    max-height: 100% !important;
    height: 100% !important;
    right: -5px;
    direction: ltr;
  }
}

.chat-box table {
  color: black;
}

.chat-box th {
  color: white;
}

.hidden-important {
  display: none !important;
}

/* עיצוב כהה */

.theme-dark {
  background-color: #333;
  color: white;
}

/* עיצוב בהיר */

.theme-light {
  background-color: #f9f9f9;
  color: black;
}

/* עיצוב כחול */

.theme-blue {
  background-color: #007bff;
  color: white;
}

.color-picker {
  pointer-events: all;
  /* width: 10%; */
  background-color: transparent;
  align-items: center;
  height: 35px;
}

.color-label {
  color: var(--aime-text-color);
  /* width: 10%; */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.chat-box.open {
  /* --_background: transparent; */
  bottom: 15;
  /* Moves up to become visible */

  /* transform: translateY(calc(100% + 20px)); */
}

.chat-box-row-icon-fav {
  aspect-ratio: 1;
  position: absolute;
  top: -2px;
  right: -2px;
  /* border-radius: 100vmax; */
  width: 16px;
  z-index: 9;
}

.chat-resizer {
  width: 10px;
  height: 10px;
  background: url('resize-icon.svg') no-repeat center;
  background-size: contain;
  cursor: nwse-resize;
  /* position: absolute; */
  bottom: 0;
  left: 0;
  z-index: 100001;
  transform: scaleX(-1);
}

.chat-resizer-corner {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: nwse-resize;
  z-index: 100001;
  background: rgb(255 255 255 / 0%);
  background-image: url('resize-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scaleX(-1);
}

@media screen and (max-width: 768px) {
  .chat-resizer-corner {
    display: none !important;
  }
}

.chat-box-history {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-height: 65%;
  max-height: 77%;
  margin: 0 auto;
  width: 95%;
  /* max-height: clamp(100px, 90vh, 60vh); */
  /* max-height: 200px; */
  /* max-height: 100px; */
  color: black;
  padding: 10px 5px 10px 0px;
  font-weight: 400;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all 300ms ease;
  pointer-events: all;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  /* background-image: var(--shadow-gradient); */
  /* -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%); */
}

.fade-in {
  animation: fadeIn 0.5s;
  animation: fadeinbottom 0.5s ease-out forwards;
  /* Adjust duration and timing as needed */

}

.fade-out-up {
  --start-offset: 0px; /* current visible position */
  --end-offset: -300px; /* how far up it moves when fading out */
  animation: fadeoutup 0.5s ease-out forwards;
}

@keyframes fadeoutup {
  0% {
    opacity: 1;
    transform: translateY(var(--end-offset));
  }

  100% {
    opacity: 0;
    transform: translateY(var(--start-offset));
  }
}

.fade-in-down {
  --start-offset: -300px;
  --end-offset: 0px;
  animation: fadeindown 0.5s ease-out forwards;
  /* Adjust duration and timing as needed */
}

@keyframes fadeindown {
  0% {
    opacity: 0;
    transform: translateY(var(--start-offset));
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(var(--end-offset));
  }
}

@keyframes fadeinbottom {
  0% {
    opacity: 0;
    transform: translateY(300px);
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubbles {
  min-height: 7%;
  margin-bottom: 7px;
}

.fade-out {
  animation: fadeOutMoveDown 1s ease-out forwards;
}

.chat-box-history-bugs {
  max-height: 30%;
  display: flex !important;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px 5px 10px 5px;
  width: 90%;
  height: 100vh;
  overflow-x: auto;
}

/* אנימציה לסגירה כלפי מטה */

@keyframes fadeOutMoveDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
    /* תזוזה כלפי מטה */
  }
}

@keyframes fadingtop {
  0% {
    opacity: 0;
    transform: translateY(0);
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(300px);
  }
}

.chat-box-row-text-sys {
  font-size: 0.9rem;
  word-break: break-word;
  pointer-events: all;
  cursor: pointer;
  color: red
}

/* 
.bubbles-list::-webkit-scrollbar {
  display: none;
} */

.chat-box-row-text a {
  /* color: var(--aime-text-color); */
  color: #00BCD4;
  text-decoration: underline;
}

.chat-text-fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* NPC ROW */

.chat-box-history-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 5%;
  max-width: 85%;
  border-radius: 1rem 1rem 1rem 0px;
  /* border: var(--border-1); */
  color: var(--aime-text-color-user);
  background-color: var(--aime-user-bg-color);
  font-size: 1.4rem;
  padding: 6px;
  cursor: pointer;
  margin-right: auto;
  pointer-events: all;

}

/* USER ROW */

.chat-box-history-row-2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 5%;
  /* max-width: 85%; */
  color: var(--aime-text-color-bot);
  font-size: 1.4rem;
  /* background-color: var(--aime-bot-bg-color); */
  border-radius: 1rem 1rem 0rem 1rem;
  /* border: 0.1rem solid black; */
  padding: 6px;
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .chat-box-history-row-2 {
    border: none !important;
  }

}

.chat-box-history-row:hover .folding-button-container,
.chat-box-history-row-2:hover .folding-button-container {

  opacity: 1;
}

#review-message {
  opacity: 0;
  transition: opacity 0.2s ease;
  display: none;
  color: white
}

.chat-box-history-row-2:hover~#review-message {
  display: flex !important;
  opacity: 1;
}

.chat-box-row-text {
  text-align: var(--aime-direction-chat);
  direction: var(--aime-direction-row);
  font-family: var(--aime-chat-font);
  /* padding: 0 8px; */
  flex: 0 10 100%;
  word-break: break-word;
  font-size: 14px;
  pointer-events: all;
  line-height: 16px;
  padding: 9px;

  /*white-space: pre-wrap; 
  */


}

.chat-footer-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.chat-history {
  padding-bottom: 120px;
  /* אותו גובה מקסימלי של footer */
  overflow-y: auto;
}

/* Default LTR */

.chat-box-row-text.ltr {
  text-align: left;
  direction: ltr;
}

/* When RTL is selected */

.chat-box-row-text.rtl {
  text-align: right;
  direction: rtl;
}

.chat-box-row-text-sentence {
  text-align: right;
  direction: rtl;
  flex: 0 10 100%;
  word-break: break-word;
  pointer-events: all;
  line-height: 16px;
  padding: 9px;
  padding-left: 0;
  white-space: pre-wrap;
}

.chat-box-input-wrapper {
  width: 97%;
  min-height: 45px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background-color: var(--aime-chatbox-input);
  border-radius: 10px;
  padding: 4px 8px;
  transition: height 0.2s ease;
  /* border: 1px solid #000; */
  pointer-events: all;
  color: var(--aime-placeholder-color);
  position: relative;
  /* שימי לב! */
  max-height: 150px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}

@media screen and (max-width: 768px) {
  .chat-box-input-wrapper {
    width: 100%;
  }

}

.chat-box-input-wrapper:focus-within {
  background-color: #515457;
  transition: all 300ms ease;
}

.chat-box-input {
  height: 40px;
  /* height: -webkit-fill-available; */
  /* width: calc(100% - 50px); */
  /* height: 30px; */
  height: -webkit-fill-available;
  width: 90%;
  margin-left: 8px;
  font-size: 16px;
  background-color: transparent;
  /* border-radius: 100vmax; */
  padding-right: 6px;
  padding-left: 10px;
  padding: 10;
  border: none;
  /* white-space: normal; */
  pointer-events: all;
  color: var(--aime-text-color-chat);
  resize: none;
  direction: var(--aime-direction-row);
  margin: 3px 0px 0px 0px;
  overflow: scroll;
  scrollbar-width: none;

}

.chat-box-input::-webkit-scrollbar {
  display: none;
}

.chat-box-input:focus {
  outline: none;
}

/* .chat-box-input::-moz-placeholder {
  opacity: .6;
  color: var(--aime-placeholder-color)
} */

.chat-box-input::placeholder {
  color: var(--aime-placeholder-color);
  opacity: 0.6;

  display: flex;
  align-items: center;
}

.input-and-bubbles-wrapper {
  position: relative;
  width: 100%;
  gap: 4px;
}

.chat-box-send-button {
  position: relative;
  rotate: 180deg;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 100vmax;
  background-color: transparent;
  /* background-image: url("https://cdn.aimeverse.com/u/ico-chat-send"); */
  /* background-size: 20px; */
  background-repeat: no-repeat;
  background-position: center;
  /* filter: brightness(0.6); */
  cursor: pointer;
  pointer-events: all;
}

.chat-box-send-button-ltr {
  position: relative;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 100vmax;
  background-color: transparent;
  /* background-image: url("https://cdn.aimeverse.com/u/ico-chat-send"); */
  /* background-size: 20px; */
  background-repeat: no-repeat;
  background-position: center;
  /* filter: brightness(0.6); */
  cursor: pointer;
  pointer-events: all;
}

.chat-box-send-button2 {
  position: relative;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 100vmax;
  background-color: transparent;
  background-image: url("public/svg/white_send.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.6);
  cursor: pointer;
  pointer-events: all;
}

.chat-box-input-folding-button {
  margin-left: 10px;
}

.chat-box-audio-controls {
  position: relative;
  display: flex !important;
  justify-content: flex-end;
  padding: 5px;
  border-radius: 15px 15px 0 0;
  pointer-events: all;
  /* border-bottom: 1px solid rgb(67, 67, 67); */
  margin-bottom: 2px;
  height: 50px;
  align-items: center;

}

@media screen and (max-width: 768px) {
  .chat-box-audio-controls {
    border: none;
    border-radius: 0 0 0 0;
  }

}

.chat-box-header-left {
  width: 100%;
  /* height: 50px; */
  /* background-color: #f0f0f0; */
}

.floating-button {
  aspect-ratio: 1;
  display: block;
  width: 40px;
  background-color: transparent;
  /* background-color: var(--aime-dmain-border-color); */
  /* background-color: var(--secondary-color); */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% !important;
  cursor: pointer;
  /* border-radius: 100vmax; */
  pointer-events: all;
  transition: all 200ms ease;
  margin-right: 5px;
  border: none !important;
}

@media screen and (max-width: 768px) {
  .floating-button {
    border: none !important;
  }

}

.floating-mute-button {
  background-image: url("/public/svg/unmute.svg");
  position: relative;
  /* border: 1px solid white; */
  /* filter: invert(); */
}

.chat-button-control {
  position: absolute;
  bottom: 25px;
  right: 25px;
  /* z-index: -1; */
}

.chat-button-control button {
  background-color: var(--primary-color);
  border: var(--primary-color) var(--border-no-color-1);
  /* filter: invert(); */
}

.chat-box-hide-show-button {
  width: 60px;
  /* transform: rotate(180deg); */
  /* margin-right: 25px; */
  /* animation: bounce 3000ms cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; */
}

.chat-box-hide-show-button img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 50%;
  margin: auto;
}

.resubmit-button {
  background: none;
  transition: all 300ms ease;
  cursor: pointer;
}

.resubmit-button:hover {
  rotate: 45deg;
}

.chat-box-row-text-link {
  display: block;
  color: blue;
  text-decoration: underline;
}

.chat-box-row-text-button {
  display: block;
  color: white;
  background-color: black;
  padding: 5px;
  border-radius: 5px;
}

.command-option {
  display: block;
  padding: 3px;
  margin: 3px 0;
  border-radius: var(--border-radius-1);
  color: var(--color-info-light);
  background-color: #fff1;
  cursor: pointer;
}

.command-palette a:hover {
  background-color: var(--color-info-dark);
}

.folding-button-container {
  --folding-button-color: transparent;
  --folding-button-height: 100%;
  --folding-button-item-color: white;
  --folding-button-item-height: 100%;

  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 30px;
  width: 30px;
  /* background-color: #23232344; */
  border-radius: 100vmax;
  /* filter: invert(); */
  pointer-events: all;
  z-index: 1;
  transition: all 300ms ease;
  /* opacity: 0; */
}

.thinking-anim {
  position: relative;
  /* bottom: 28px;
    left: 49%; */
  width: 30px;
  height: 30px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  /* background: url('/public/svg/aime-logo.svg') no-repeat center center;
    background-size: contain; */
  visibility: hidden;
  transition: opacity 1000ms ease;
}

.thinking-anim label {
  animation: fade-in-out 2.5s ease infinite;
}

.thinking-anim img {
  width: 30%;
  animation: spin 3s ease infinite;
}

@keyframes fade-in-out {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 100%;
  height: 24px;
  -webkit-mask:
    radial-gradient(circle closest-side, #000 94%, #0000) 0 0/33% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
    linear-gradient(#A2CDFF 0 0) 0/var(--progress) no-repeat,
    #ddd;
  animation: fillUp 2s infinite linear;


}

@keyframes fillUp {
  0% {
    background-size: 0% 100%, 100% 100%;
    /* Start with no progress */
  }

  100% {
    background-size: var(--progress) 100%, 100% 100%;
    /* Fill up to max progress */
  }
}

.bubbles-list {
  position: absolute;
  bottom: 94%;
  left: 25px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  gap: 10px;
  padding: 10px 0;
  background: transparent;
}

.bubbles-list::-webkit-scrollbar {
  width: 0px;
  height: 6px;
  background: transparent;
}

.bubble-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: var(--aime-bot-bg-color);
  border: 1px solid #928a8a;
  color: var(--aime-text-color-bot);
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  white-space: nowrap;
  height: 36px;
  /* גובה קבוע לבועה */
  line-height: 40px;
  /* יישור אנכי לטקסט */
  transition: filter 0.3s;

}

.bubble-item:hover {
  filter: brightness(1.5);
}

.loader-spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: orange;
  animation: l2 1s infinite linear;
}

@keyframes l2 {
  to {
    transform: rotate(1turn)
  }
}

.aime-cropper-container {
  width: 100%;
  height: 100%;
  background: var(--aime-dmain-color);
}

.aime-cropper-image {
  display: block;
  max-width: 100%;
}

.aime-cropper-buttons-size {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.aime-cropper-button {
  background-color: #FFF;
  color: #000;
}

.aime-cropper-button
.product-header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.floating-chat-bubble{
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.4s ease forwards;
  background-color: white;
  border-radius: 12px;
  padding: 10px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  min-width: 140px;
  
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  position: absolute;
  bottom: 65px;
  right:1px;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-chat-bubble {
  transform: scale(0.8);
  opacity: 0;
  animation: popIn 0.3s ease-out forwards;

}

@keyframes popIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.floating-chat-bubble:hover {
  transform: scale(1.05);
}

.form-card-input {
  background-color: white;
  /* border: 1px solid #928A8A; */
  border-radius: 5px;
  border: 1px solid var(--aime-dmain-border-color);
  margin-right: 0px;
  margin-left: 20px;
  margin-top: 5px;
  /* width: 100%; */
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
}.aime-textbox-input-wrapper {
    width: 100%;
    /* border: 5px solid var(--border-color); */
}

.aime-textbox-class-component {
    background-color: transparent;
    /* border: 1px solid var(--border-color); */
    border:1px solid #928A8A;
    border-radius: 5px;
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    /* height: 80px; */
}

.aime-text-input-long {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.aime-text-input-names {
    display: flex !important;
    width: 48.5%;
    flex-direction: column;
}

.aime-text-input-user-description {
    display: flex !important;
    width: 100%;
    height: 30%;
    flex-direction: column;
    font-family: var(--main-font);
}

.aime-text-input-popup-bottom {
    display: flex !important;
    width: 32%;
}

.wordpress-textbox-class-component {
    background-color: var(--aime-input-background);
    /* border: 1px solid var(--border-color); */
    border-radius: 5px;
    margin-right: 0px;
    margin-left: 20px;
    margin-top: 5px;
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.wordpress-textbox-class-component-lightgray {
    background-color: var(--aime-input-background);
    /* border: 1px solid #928A8A; */
    border-radius: 5px;
    margin-right: 0px;
    margin-left: 20px;
    margin-top: 5px;
    /* width: 100%; */
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.wordpress-textbox-class-component-lightgray-2 {
    background-color: #818184;
    /* border: 1px solid #928A8A; */
    border-radius: 20px;
    margin-right: 0px;
    margin-left: 20px;
    margin-top: 5px;
    /* width: 100%; */
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}
.wordpress-textbox-class-component-lightgray-rtl {
    background-color: var(--aime-input-background);
    /* border: 1px solid #928A8A; */
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 5px;
    /* width: 100%; */
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.wordpress-textbox-class-component-lightgray-agent {
    background-color: var(--aime-input-background);
    /* border: 1px solid #928A8A; */
    border-radius: 5px;
    margin-right: 0px;
    margin-top: 5px;
    /* width: 100%; */
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.wordpress-textbox-class-component {
    background-color: var(--aime-input-background);
    /* border: 1px solid var(--border-color); */
    border-radius: 5px;
    margin-right: 0px;
    margin-left: 20px;
    margin-top: 5px;
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.aime-textbox-class-component-focused {
    /* border: 1px solid var(--border-color-focus);     */    
    
}


.aime-textbox-class-component-blur {
    border: 1px solid var(--border-color);
}

.aime-textbox-legend-class {
    margin-left: 7px;
    padding: 0 5px 0 5px;
    color:var(--aime-text-color)

}

.aime-text-input {
    display: flex;
    width: 340px;
    flex-direction: column;
}



.aime-text-inputbig {
    display: flex;
    width: 620px;
    flex-direction: column;
}



.textbox-error-message {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: --var(--text-error-color);
    margin-left: 20px;
    width: 100%;
}

.textbox-error-message img {
    width: 15px;
    height: 15px;
}

.textbox-error-message label {
    color: red;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    margin-left: 4px;
}

.context-textarea-box {
    /* height: calc(100% - 10px); */
    width: 100%;
    font-size: var(--font-size-1);
    padding: 6px;
    border-radius: 5px;
    /* border: #000000 1px solid; */

    /* color: var(--text-color); */
    color:var(--aime-text-color);
    background-color: transparent;
    font-family: var(--main-font);
    border: none;
    
}

.wordpress-textarea-box {
    /* height: calc(100% - 10px); */
    width: 814px;
    font-size: var(--font-size-1);
    padding: 6px;
    border-radius: 5px;
    /* border: #000000 1px solid; */
    background-color: transparent;
    color: var(--aime-text-color);
    /* background-color: var(--bg-color); */
    height: 40px;
    outline: none;
    border: none;
    overflow-y: auto;

}

.wordpress-textarea-box-big {
    /* height: calc(100% - 10px); */
    width: 814px;
    font-size: var(--font-size-1);
    padding: 6px;
    border-radius: 5px;
    /* border: #000000 1px solid; */
    background-color: var(--aime-input-background);
    color: var(--text-color);
    /* background-color: var(--bg-color); */
    height: 80px;
    outline: none;
    border: none;
    overflow-y: auto;

}

.wordpress-textarea-box-big-big {
    /* height: calc(100% - 10px); */
    width: 814px;
    font-size: var(--font-size-1);
    padding: 6px;
    border-radius: 5px;
    /* border: #000000 1px solid; */
    background-color: transparent;

    color: var(--aime-text-color);
    height: 200px;
    outline: none;
    border: none;
    overflow-y: auto;
}

.aime-text-input-agent-generate-image-prompt{
    display: flex !important;
    width: 100%;
    height: 46%;
    flex-direction: column;
}

.wordpress-card {
    display: flex;
    width: 44%;
    height: 36px;
    flex-direction: row;
    flex-shrink: 0;
    border: 0.5px solid #928A8A;
    pointer-events: all;
    border-radius: 50px;
    padding: var(--Spacing-spacing-none, 0px) var(--Fui-Space-xxlg, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--Fui-Space-xxlg, 20px);
    flex-shrink: 0;


}
.wordpress-card-small {
    display: flex;
    width: 25%;
    height: 28px;
    flex-direction: row;
    flex-shrink: 0;
    border: 0.5px solid #928A8A;
    pointer-events: all;
    border-radius: 50px;
    padding: var(--Spacing-spacing-none, 0px) var(--Fui-Space-xxlg, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--Fui-Space-xxlg, 20px);
    flex-shrink: 0;


}
.aime-textbox-class-component-d{
    display: flex;
    justify-content: center;
    border: 1px solid var(--material-color-grey-500); 
    border-radius: 5px;  
}

.aime-selectbox-select-class{
    background-color:#F15922
}


/* autocomplete */

.autocomplete-suggestion{
    background-color: pink;
}

.autocomplete-suggestion:hover {
    background-color: #626266 !important;
}
.templateinput{
margin-left: 20px;
}.aime-table-wrapper{
    width: 100%;
    /* background-color: brown; */
    margin-top: 20px;
}

.aime-table-body-row{
    height: 90px;
    border: 1px solid var(--label-font-color);
}


.aime-table-header{
    text-align: left;
    font-weight: normal;
}


.aime-present-users-body{
    width: 100%;
    height: 532px;

}

.file-upload{
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    background-color: white;
}

.file-upload-agent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}
.file-upload-xpell{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    height: 90%;
    align-items: center;
    background-color: var(--aime-dmain-color);
}

.drop-zone{
    /* width: 400px;  */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-evenly; 
    background: none; 
    border: 2px dashed var(--blue-theme-color);
    padding:4px;
}


.drop-zone-container{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    background: rgba(118, 118, 118, 0.30); 
    border-radius: 5px; 
    border: 0.5px solid #FFF;
}

.drag-and-drop{
    display: flex;
    flex-direction: row;
    height: 185px;
}

.small-image{
    max-height: 70px;
    max-width: 70px;
}

.edit-image{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.edit-image-settings-view{
    display: flex    ;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    height: 100%;
    padding-top: 30px;
    gap: 35px;
}

.edit-image-display-image{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50%;
    height: 100%;
}

.edit-image-settings-slider{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.edit-image-display-image-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    aspect-ratio: 1 / 1;
    position: relative;
    border: 1px solid #ffffff;
    border-radius: 5px;
    max-height: 435px;
    padding: 1px;

}

.edit-image-left{
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 50%;
    align-items: center;
    height: 100%;
    gap: 25px;
}

.edit-image{
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
    align-items: center;
    height: 100%;
    gap: 25px;
}

.display-image{
    display: block;
    max-width: 100%;
}

.edit-image-display-image-view{
    display: flex;
    width:100%;
    max-height: 100%;
    justify-content: center;

}

.hide {
    display: none;
}
.xlist-menu-voices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    justify-items: center;
}

.xlist {
    width: 100%;
    padding-bottom: 5%;
}

.lang-headline-container {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lang-headline {
    text-decoration: underline;
    font-size: 13px;
    font-weight: bold;
    margin-left: 10px;
}

.list-voices-d div{
    width: 232px;
    height: 58px;
}



.swiper-slider-content2 {
    aspect-ratio: 1;
    /* position: relative; */
    display: flex !important;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.2rem;
    border-radius: 12px;
    /* border-radius: 100vmax; */
    /* align-items: space-between; */
    /* background: var(--material-color-grey-200); */
    overflow: hidden;
    border: 1px solid;
  }

  .swiper-slider-content2 label {
    --_height: auto;
    /* bottom: 20%; */
    /* display: block; */
    width: 100%;
    height: var(--_height);
    color: var(--secondary-color);
    font-weight: 400;
    /* line-height: var(--_height); */
    /* translate: -50%; */
    background-color: var(--primary-color-trans);
}







.aime-main-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

.aime-login-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: RGBA(0, 0, 0, 0.5);
}

.aime-show-users-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* background-color: RGBA(0, 0, 0, 0.5); */
}

.aime-login-header-left-container{
    display: flex !important;
    flex-direction: column;
    gap: 7px;
}

.aime-login-logo{
    display: flex !important;
    width: 80px;
}

.login-connect-pic-container{
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.icon-class{
    width: 20px;
    height: 20px;
}

.top-xpell-logo-class{
    width: 60px;
    height: 35px;
}

.login-top-container-left{
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 33px;
    gap: 4px;
}

.login-top-container-right{
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 33px;
}

.login-fields-container{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    width: 100%;
    border-radius: 21px;
    gap: 20px;
}

.login-successfully-connected-container{
    gap: 20px;
    flex-direction: column;
}

/* .aime-forgot-password-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 579px;
    width: 100%;
    min-width: 500px;
    background-color: var(--login-bh-color);
    position: relative;
} */

.aime-connected-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 579px;
    width: 100%;
    min-width: 500px;
    /* border-radius: 21px;
    border: 3px solid var(--blue-theme-color); */
    background-color: var(--login-bh-color);
}

.aime-show-users-all-screen{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    /* background-color: var(--login-bh-color); */
    justify-content: flex-end;
}

.aime-present-users-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 95%;
    width: 95%; /*1636*/
    background-color: var(--login-bh-color);
}

.aime-present-users-container-dash{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 95%;
    width: 95%; /*1636*/

}

.aime-present-users-header{
    width: 100%;
    height: 59px;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--blue-theme-color);
}

.aime-present-agents-header-left{
    display: flex !important;
    gap: 20px;
}

.aime-present-users-header-right{
    display: flex !important;
}

.aime-login-box {
    display: flex;
    flex-direction: column;
    width: 350px;
}

.aime-login-box-left {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0px;
    top: 0px;
    gap:15px;
}

.aime-view-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.aime-view-left {
    display: flex;
    justify-content: flex-start;
}

.aime-view-center {
    display: flex;
    justify-content: center;
}

.aime-sigh-in-with-view {
    display:flex;
    flex-direction:column;
    position:relative;
    left:0px;
    top:0px;
    align-items: center;
    gap:10px;

}

.aime-sigh-in-with-inner { 
    display: flex;
    width: 311px;
    height: 40px; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    flex-shrink: 0;
    border-radius: 100px; 
    background: var(--s-in-with-bg-color);
    pointer-events:all;
}

.sigh-in-logo {
    width: 18px;
    height: 18px;
}

.forgot-password-texts{
    display: flex; 
    flex-direction: column; 
    width: 100%;
}

.login-top-container{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    top: 0;
    height: 65px;
    width: 100%;
    border-bottom: 2px solid var(--aime-login-lines-color);;
}

.login-bottom-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 400px;
    height: 67px;
    gap: 24px;
    bottom: 0;
    position: relative;
}

.aime-login-header{
    display: flex !important;
    width: 100%;
    height: 70px;
    background-color: var(--blue-theme-color);
    align-items: center;
    position: absolute;
    top: 0;
    padding: 35px;
}

.login-f-container1of3{
    display: flex; 
    flex-direction: column; 
    /* width: 100%; */
    /* gap: 17px; */
    /* justify-content: center; */
    height: 100%;
    margin-left: 60px;
    margin-top: 60px;
    /* justify-content: center; */
}

.login-f-container2of3{
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

.aime-classic-link{
    color: var(--text-color);
    text-decoration: underline;

}

.login-f-container3of3{
    display: flex; 
    flex-direction: column; 

}

.login-body-container{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    /* width: 80%; */
    height: calc(100% - 130px);
    justify-content: center;
}

.login-txt-container{
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.aime-box-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.aime-present-users-footer{
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    height: 59px;
    gap: 21px;
}

.aime-show-users-popup{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 89%;
    width: 77%;
    background-color: RGBA(0, 0, 0, 0.5);
}

.aime-show-users-popup-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    border-radius: 21px;
}

.aime-popup-user-header{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 59px;
    border-bottom: 1px solid var(--label-font-color); 
    align-items: center;
    padding : 0 35px;
}

.aime-popup-user-header-left{
    display: flex !important;
    width: 50%;
    height: 100%;
    align-items: center;}

.aime-popup-user-header-right{
    display: flex !important;
}

.aime-popup-user-body{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    gap: 13px;
    margin-top: 18px;
    padding: 0 35px;
    overflow-y: auto;
}

.search-swiper-container-voice {
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    /* background-color: rgba(255, 255, 255, 0.5);; */
    width: 270px;
    height: 39px;
    align-items: center;
    margin-left: 10px;
    border-radius: 24px;
    border: 0.5px solid #FFF

}

.search-input-txt{
    background:none;
    border:none;
    outline:none;
    width:100%;
    font-size:16px;
    color:#FFF;
    margin-left:4px
}

.next-to-slider-label{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    color: #7A757F
    /* color: var(--border-color) */
}

.slider{
    display: block;
    -webkit-appearance: none;
    height: 4px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    width: 70%;
}

.aime-popup-agent-voice-body-top{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 31px;
    height: 16%;
}

.aime-popup-agent-voice-top-left{
    display: flex !important;
    flex-direction: column;
    width: 26%;
    gap: 10px;
}

.aime-popup-agent-voice-top-right{
    display: flex !important;
    align-items: center;
}

.aime-popup-agent-voice-body-bottom{
    width: 100%;
    height: 84%;
}

.aime-popup-user-footer{
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    height: 89px;
    border-top: 1px solid var(--label-font-color);
    padding: 0 41px;
    align-items: center;
    gap: 21px;
}

.aime-popup-user-footer > *:only-child{
    /* display: flex !important;
    justify-content: flex-end; */
    margin-left: auto; 
}

.aime-popup-user-image{
    width: 160px;
    height: 160px;
    border-radius: 117px;
    border: 1px solid var(--aime-agent-image-border-color);
}

.aime-popup-user-body-bottom{
    display: flex !important;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.aime-popup-user-names-container{
    display: flex !important;
    flex-direction: row;
    width: 81%;
    justify-content: space-between;
}

.aime-bright-btn{
    width: 83px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--aime-bright-btn-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-popup-agent-secondary-header{
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 59px;
    border-bottom: 1px solid var(--blue-theme-color);
    align-items: center;
    padding : 0 35px;
}

.aime-popup-agent-basic-info-and-footer-container{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.aime-popup-agent-secondary-mode-container-selected{
    flex-direction: row;
    gap: 8px;
    width: 160px;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid white;
}

.aime-popup-agent-edit-image-body-top{
    display: flex !important;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.agent-edit-image-choose-file-btn{
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-radius: 100px;
    background-color: var(--blue-theme-color);
    padding: 5px 10px;
    width: 100%;
    height: 100%;
    margin-top: 15px;
    cursor: pointer;
    justify-content: center;
}

.aime-popup-agent-edit-image-body-bottom{
    display: flex !important;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;/* 100%ss */
}

.aime-popup-user-body-row{
    display: flex !important;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    background-color: var(--login-bh-color);
    gap: 13px;
    margin-top: 18px;
    padding: 0 35px;
}

.generate-image-agent-options-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: auto; 
    gap: 10px; 
    width: 96%;
}

.wordpress-card-agent{
    display: flex;
    width: 138px;
    height: 112px;
    flex-direction: column;
    border: 0.5px solid #928A8A;
    pointer-events: all;
    border-radius: 4px 4px 0px 0px;
    justify-content: flex-start;
    align-items: flex-start;    
    padding: 8px;
}

.get-article-popup-form-agent{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #928A8A;
    width: 66%;
    height: 70%;
}

.aime-popup-agent-secondary-mode-container-non-selected{
    flex-direction: row;
    gap: 8px;
    width: 160px;
    height: 100%;
    align-items: center;
    justify-content: center;

}

.aime-popup-user-secondary-header-title-none-selected{
    color: #7A757F;
}

.aime-popup-user-secondary-header-title-selected{
    color: white;
}

.aime-dark-btn{
    width: 83px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--blue-theme-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-dark-btn-long{
    width: 111px; 
    height: 40px; 
    border-radius: 100px; 
    background: var(--blue-theme-color); 
    color: var(--black-text-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
}

.aime-agents-card-top{
    display: flex !important;
    width: 100%;
    height: 87%;
}

.aime-present-agents-body{
    width: 100%;
    height: 532px;
    padding-top: 32px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 225px);
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.aime-display-users-card{
    display: flex !important;
    flex-direction: column;
    width: 200px;
    height: 225px;
    gap: 4px;
}

.aime-popup-user-edit-image-container{
    width: 50px;
    height: 50px;
    background: #656565;
}

.aime-display-users-card-image{
    border: 1px solid var(--aime-agent-image-border-color);
    border-radius: 14px;
    min-width: 194px;
    min-height: 194px;
}

.aime-agents-card-bottom{
    display: flex !important;
}

.aime-display-users-card-text{

}

.aime-create-account{
    display:flex;
    flex-direction:column;
    width:400px;
    justify-content: center;
    align-items: center;
}

.aime-create-account-inner{
    display:flex;
    flex-direction:column;
    width:340px;
    justify-content: center;
    align-items: center;
    gap:8px;
}

.checkbox-containers{
    display:flex;
    flex-direction:column;
    width:325px;
    justify-content: center;
    align-items: center;
}

.aime-popup-user-body-top{
    display: flex !important;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;    
}

.checkbox-terms-and-condition{
    display:flex;
    flex-direction:row; 
    justify-content:center;
    gap:10px; 
    align-items: center; 
    width:100%;
}

.checkbox-container{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center; 
    width:100%; 
    gap:10px;
}

.checkbox-style{
    appearance: checkbox; 
    accent-color: var(--black-btn-color); 
}

.bottom-register{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    width: 340px;
}

.row-center-css{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.xplayer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
}

.aime-popup-agent-delete-container{
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.aime-popup-agent-red-underlined{
    color: var(--text-error-color);
    text-decoration: underline;
}

/* Dashboard Pages CSS */

.left-menu-item-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px;
    gap: 5px;
    overflow-y: auto;
    /* overflow-x:hidden; */
}

.left-menu-inner-container {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 5px;
    overflow-y: auto;
    /* overflow-x:hidden; */
    height: 100%;
    
}

.space-select-overlay {
    /* opacity: 0; */
    /* transform: translateY(-10px); */
    display: none;
    /* pointer-events: none; */
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;

}

.select-space-overlay {
    display: none;
    justify-content: center;
    cursor: pointer;
    margin-top: 22px;
    width: 27%;
    margin-left: 35%;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    overflow-x: hidden;
    overflow-y: auto;
}

.space-overlay-content {
    padding: 20px;
    border-radius: 8px;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    max-height: 77vh;
    position: relative;
    background: --var(--aime-color-background);
    overflow-x: hidden;
    overflow-y: auto;
}

.select-space-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
}

.space-arrow-icon {
    cursor: pointer;
    width: 16px;
    height: 16px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.space-label-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 24px;
    cursor: pointer;
    
}

.space-label-item:hover {
    background-color: var(--aime-color-hover);
    cursor: pointer;
    color: #2C2C2C;
    border-radius: 5px;
}

.select-space-container {
    border-top: 1px solid rgb(146, 138, 138);
    border-bottom: 1px solid rgb(146, 138, 138);

}

.space-label-text {

}

.active-space {
    
}

/* top-bar css */

.top-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  /* Adjust padding for better alignment */
  /* background-color: #505054; */
  background-color: var(--aime-frame-color);
  color: var(--aime-text-color);
  height: 100%;
  /* Consistent with the left menu */
  width: 100%;
  /* Account for the left menu width */
  /* Match the left menu width */
  /* z-index: 999; */
  /* border-left: 2px solid var(--aime-dmain-border-color); */
  
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);  */
  pointer-events: all;
  /* border-bottom: 1px solid var(--aime-dmain-border-color); */
  
}

.top-bar-item-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    gap: 5px;
    width: 100%;
}

.aime-menu-popup {
    /* opacity: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease; */
    /* max-height: 0; */
    overflow: hidden;
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    height: 350px;
    background-color: var(--aime-frame-color);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.aime-menu-popup-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid var(--aime-border-color);
    gap: 10px;
}

.aime-menu-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.aime-menu-popup-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 10px;
    gap: 10px;
    cursor: pointer;
    /* border-bottom: 1px solid #ccc; */
    width: 100%;
}

.aime-menu-popup-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
    cursor: pointer
}

.aime-user-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.aime-user-name-label {
    color: white;
    font-size: 18px;
}

.aime-menu-icon {
    width: 15px;
    height: 15px;
}

.aime-menu-label {
    color: white;
    font-size: 14px;
}

.conversation-dashboard-grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    position: relative;
    top: 15px;
    width: 100%;
    height: calc(100% - 20px);
    padding: 20px;
    gap: 5px;
    overflow: hidden;

}

.conversation-dashboard-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* top: 15px; */
}

.conversation-dashboard-page-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    /* padding: 20px; */
    gap: 10px;

}

.conversation-inner-frame {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 2;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    height: 100%;
    width: 100%;
    padding: 15px;
    gap: 20px;
    background-color: var(--aime-frame-color);
    border-radius: 10px;
    overflow-y: auto;
    align-self: flex-end;
    order: -1;

}

.conversation-dashboard-chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 65%;
    background-color: var(--aime-frame-color);
    padding: 10px;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    --animate-duration: 300ms;
}

.conv-chat-box-history {
    display: flex;
    flex-direction: column;
    max-height: 90%;
    height: 90%;
    width: 100%;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.conv-chat-box-analytics {
    display: flex;
    flex-direction: column;
    max-height: 90%;
    height: 90%;
    width: 100%;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chatbox-history-row-aime {
    font-size: 12px !important;
    /* padding:0px !important; */
    background-color: var(--secondary-bg-color) !important;
    border: 1px solid var(--aime-border-color) !important;
    color: var(--aime-text-color) !important;
    white-space: pre-wrap;
    margin-bottom: 0px !important;
    display: block !important;
}

.chatbox-history-row-aime p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.chatbox-history-row-aime  a{
    color:white !important
}

.chatbox-history-row-user {
    font-size: 12px !important;
    /* padding:0px !important; */
    white-space: pre-wrap;
}

.chatbox-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    gap: 20px;
    width: 100%;
    padding-top: 0px;
    border-top: 1px solid var(--aime-border-color);
    order: 6;
}

.chatbox-footer-menu-item {
    font-size: 14px;
    color: var(--aime-text-color);
    background-color: var(--aime-frame-color);
    cursor: pointer;
    text-decoration: none;
    padding: 3px 3px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: 1px solid var(--aime-border-color);
}

.chatbox-footer-menu-item-selected {
    color: var(--aime-text-color-light);
    background-color: var(--secondary-bg-color);
    text-decoration: none;
}

.chatbox-footer-menu-item-disabled {
    color: var(--aime-placeholder-color);
    border: 1px solid var(--aime-placeholder-color);
    /* background-color: var(--aime-frame-color-light); */
    text-decoration: none;
    cursor: not-allowed;
}

.conversation-card {
    display: flex;
    flex-direction: column;
    width: 48%;
    height: 180px;
    padding: 10px;
    gap: 5px;
    /* background-color: var(--aime-input-background); */
    border-radius: 10px;
    border: 1px solid var(--secondary-bg-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
}

.conversation-card-date {
    font-size: 12px;
    width: fit-content;
    color: var(--aime-placeholder-color);
    margin-top: -20px;
    background-color: var(--secondary-bg-color);
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    align-self: flex-end;
}

.conversation-card-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aime-border-color);
}

.conversation-card-user-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--aime-text-color);
    flex-grow: 1;
}

.conversation-card-profile-picture-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.conversation-card-profile-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--aime-border-color);
}

.conversation-card-num-of-messages-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.conversation-card-num-of-messages {
    font-size: 12px;
    color: var(--aime-placeholder-color);
    cursor: pointer;
}

.conversation-card-num-of-messages-icon {
    width: 14px;
    height: 14px;
    object-fit: cover;
    margin-left: 5px;
    cursor: pointer;
    /* margin-top: -2px; */
}

.conversation-card-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--aime-text-color);
    margin-top: 5px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Limit to 1 line */
    -webkit-box-orient: vertical;
    width: 100%;
    max-width: 100%;
}

.conversation-card-text {
    font-size: 12px;
    color: var(--aime-placeholder-color);
    margin-top: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    cursor: pointer;
}

.conversation-card-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
    gap: 10px;
}

.conversation-card-channel {
    font-size: 12px;
    color: var(--aime-placeholder-color);
    background-color: var(--aime-frame-color-light);
    /* padding: 5px; */
    border-radius: 5px;
}

.conversation-card-more {
    font-size: 12px;
    color: var(--aime-text-color-light);
    text-decoration: none;
    cursor: pointer;
}

.conv-chat-box-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aime-border-color);
}

.conv-chat-box-header-title {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Limit to 1 line */
    -webkit-box-orient: vertical;
    width: 100%;
    max-width: 100%;
    color: var(--aime-text-color);
}

.conv-chat-box-menu-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    fill: var(--aime-text-color);
    transition: fill 0.3s ease;
    /* opacity: 0.5; */
}

.conversation-card-analysis-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
    width: 100%;
    /* margin-top: 10px; */
}

.conversation-card-analysis-inner-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}

.conversation-card-summary {
    font-size: 12px;
    color: var(--aime-text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Limit to 1 line */
    -webkit-box-orient: vertical;
}

.conversation-card-summary-general {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.conversation-card-summary-inquiry {
    font-size: 12px;
    color: var(--aime-scroll-color);
    /* text-overflow: ellipsis; */
    white-space: normal;
    /* overflow: hidden; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 40px;
    /* Limit to 2 line */
    -webkit-box-orient: vertical;
    /* border-bottom: 1px solid var(--aime-border-color); */
    padding-bottom: 5px;
}

.conversation-card-summary-item {
    font-size: 14px;
    color: var(--aime-placeholder-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Limit to 1 line */
    -webkit-box-orient: vertical;
}

.conversation-card-summary-lead-qualification {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.conversation-card-analytics-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 5px;
}

.conversation-card-analytics-title {
    font-size: 14px;
    color: var(--aime-text-color);
    font-weight: bold;
    margin-bottom: 5px;
    background-color: var(--secondary-bg-color);
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}

.conversation-card-analytics-subtitle {
    font-size: 12px;
    color: var(--aime-text-color);
    font-weight: bold;
    margin-bottom: 5px;
    /* background-color: var(--aime-color-hover); */
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}

.conversation-card-analytics-list {
    /* UL */
    font-size: 13px;
    margin: 0;
    list-style: auto;
}

.conversation-card-analytics-list li {
    font-size: 12px;
    margin: 0;
}

.conversation-card-analytics-text-row {
    font-size: 12px;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.conversation-card-analytics-text {
    font-size: 12px;
    color: var(--aime-text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.conversation-card-analytics-text-row-item {
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--aime-text-color);
    /* background-color: var(--primary-color); */
    padding: 5px;
    border-radius: 5px;
}

/* Login Dashboard Styles */

.aime-forgot-password-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 579px;
    width: 100%;
    min-width: 500px;
    /* border-radius: 21px;
    border: 3px solid var(--blue-theme-color); */
    background-color: var(--login-bh-color);
    position: relative;
}

.main-loader {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: baseline;
    height: 100vh;
    width: 100vw;
    /* background-color: --var(--aime-border-color);  */
    /* background-color: rgb(75, 7, 7);  */
}

.loader-text-container {
    /* position: relative; */
    width: 100%;
    /* height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-text {
    /* position: absolute; */
    /* color: #FA6900; */
    font-size: 24px;
    /* font-weight: bold; */

    text-shadow: 0 0 10px rgba(250, 105, 0, 0.5);
}

.loader-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 100%; */
}

.loader-image {
    /* width:100px; */
    height: 200px;
    margin-top: -100px;


}

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: var(--border-color);
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/* a{
  color:white;
  background: transparent;
} */

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Sans Hebrew", "Bebas Neue", sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
  pointer-events: all;
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

:root {
  --bg-color: #FFFFFF;
  --text-color: #333333;
  --primary-color: #1A73E8;
  --secondary-bg-color: #F5F5F5;
  --border-color: #2C2C2C;
  --border-color-focus: #E9E9E9;
  --text-error-color: #FF0000;
  --main-font: Poppins, sans-serif;
  --s-in-with-bg-color: #F9F9F9;
  --black-btn-color: #000000;
  --dark-gray-text: #636363;
  --white-text-color: #FFFFFF;
  --black-text-color: #000000;
  --blue-theme-color: #A2CDFF;
  --label-font-color: #928A8A;
  --login-bh-color: #3A3A3F;
  --aime-login-lines-color: #484848;
  --aime-bright-btn-color: #BDBFC7;
  --aime-agent-image-border-color: #B6B6B6;
  --aime-text-color-chat: #000;


}

[data-theme="light"] {
  --bg-color: #F0F0F1;
  --aime-text-color: #000000;
  --primary-color: #1A73E8;
  --secondary-bg-color: #FAFAFA;
  --border-color: #D6D6D6;
  --border-color-focus: #2C2C2C;
  --text-error-color: #FF0000;
  --aime-frame-color: #eee;
  --aime-frame-color-light: #eeeeee66;
  --aime-border-color: #515151;
  --aime-input-background: #ccc;
  --aime-dmain-color: #fff;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #ebebeb;
  --aime-left-menu-color: #4b4b4b;
  --aime-placeholder-color: #eee;
  --aime-chatbox-bg-color: #202327;
  --aime-box-shadow-color: rgb(130 124 124 / 20%) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
  --aime-chatbox-input: #37393c;
  --aime-table-first-color: ##f8f8f84f;
  --aime-table-second-color: #aaa;
  --aime-linear-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgb(191, 194, 194), rgba(255, 255, 255, 0.2));
  --aime-text-color-chat: #aaa;
  --aime-submenu-color: #eee;
  --login-bh-color: #F0F0F1;
  --aime-bot-bg-color: #eee;
  --aime-user-bg-color: #2c2c2c;
  --aime-text-color-bot: #000000;
  --aime-text-color-user: #eee;
  /* --aime-input-background-color: #aaa; */
  --aime-text-label-color: #2d2d2d;






}

[data-theme="dark"] {
  /* --bg-color: #1E1E1E; */
  --bg-color: #111416;
  --aime-text-color: #E0E0E0;
  --aime-text-color-bot: #E0E0E0;
  --aime-text-color-user: #000000;
  --aime-text-color-bubble: #000000;
  --primary-color: #BB86FC;
  --secondary-bg-color: #2C2C2C;
  --border-color: #565656;
  --border-color-focus: #3E3E3E;
  --text-error-color: #FF0000;
  /* --aime-frame-color: #505054;
  --aime-dmain-color: #2A2A2F;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #818184;
  --aime-left-menu-color: #D9D9D9;
  --aime-input-background:rgba(255, 255, 255, 0.11); 
  --aime-placeholder-color: #A3A3A3; */
  --aime-frame-color: #505054;
  --aime-frame-color-light: #50505466;
  --aime-border-color: #ffffff1c;
  --aime-input-background: #212121;
  --aime-dmain-color: #141414;
  --aime-dmain-border-color: #515151;
  --aime-scroll-color: #a3a3a3;
  --aime-color-hover: #818184;
  --aime-left-menu-color: #D9D9D9;
  --aime-placeholder-color: #aaa;
  --aime-chatbox-bg-color: #202327;
  --aime-box-shadow-color: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
  --aime-chatbox-input: #37393c;
  --aime-table-first-color: #252728;
  --aime-table-second-color: #111213;
  --aime-linear-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgb(191, 194, 194), rgba(255, 255, 255, 0.2));
  --aime-bot-bg-color: #212121;
  --aime-user-bg-color: #e0e0e0;
  --aime-direction-row: rtl;
  --aime-direction-chat: rtl;
  --aime-chat-font: 'poppins', sans-serif;
  --aime-bubble-bg-color: #ccc;
  --aime-submenu-color: #3A3A3F;
  --login-bh-color: #3A3A3F;
  --aime-text-label-color: #ffffff;
  --animate-duration: 400ms;
}

[data-theme="light"] .icon {
  color: black;
}

[data-theme="dark"] .icon {
  color: white;
}

#xplayer ::placeholder {
  color: var(--aime-placeholder-color);
  /* color:red; */
  font-family: var(--main-font);
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.xserver-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: var(--aime-frame-color); */
  color: var(--white-text-color);
}

.xserver-portal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  background-color: var(--aime-frame-color);
}

.xserver-portal-wormholes {
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: var(--aime-text-color);
  
}

/* MAIN Structure */

.dashboard-root-view {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.dashboard-right-root-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 250px);
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: var(--aime-frame-color);
}

.sdsfsfsdfsdfs{
  display: flex;
}

.top-bar-root-view {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 0;
}

.main-page-root-container {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  border-radius: 2rem 0px 0px 0px;
  background-color: var(--bg-color);
  border: 1px solid var(--aime-dmain-border-color);
}

/** End of MAIN Structure */

.content-container {
  margin: 1rem 1rem 0 1rem;
  /* margin-left: 259px; */
  /* padding: 20px; */
  background-color: var(--bg-color);
  height: calc(100% - 1rem);
  width: 100%;
  /* overflow-y: auto; */

}

.left-menu-root-view {
  width: 250px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  /* border-right: 1px solid var(--border-color); */
}

.aime-logo-title {
  color: var(--white-text-color);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.25px;
}

.connecting-txt {
  font-size: 20px;
  font-weight: 400;
}

.aime-label {
  color: var(--label-font-color);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.aime-label-title {
  color: var(--aime-text-color);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.25px;
  width: auto;
  text-align: center;
}

.aime-label-small-and-light {
  font-size: 13px;
  font-weight: 300;
}

.aime-label-subtitle {
  color: white;
  font-family: var(--main-font);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.aime-long-btn {
  width: 350px;
  height: 40px;
  border-radius: 100px;
  border-radius: 100px;
  background: var(--black-btn-color);
  color: var(--white-text-color);
}

.aime-link-gray {
  color: var(--dark-gray-text);
  font-family: var(--main-font);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.aime-link-black {
  color: var(--aime-text-color);
  font-family: var(--main-font);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#xplayer table {
  border-collapse: collapse;
}

#xplayer tr {
  border: 1px solid var(--aime-dmain-border-color);
}

#xplayer td {
  border: 1px solid var(--aime-dmain-border-color)
}

#xplayer th {
  border: 1px solid var(--aime-dmain-border-color) !important;
  background-color: var(--aime-table-second-color) !important;
}

/*
label {
  color: var(--aime-text-color) !important;
}

div {
   color: var(--aime-text-color) !important;  

}
*/

#settings-dashboard {
  color: var(--aime-text-color) !important;
}

#disply-channel-table {
  color: var(--aime-text-color) !important;
}

#disply-social-user-table {
  color: var(--aime-text-color) !important;
}

#disply-aime-admins-table {
  color: var(--aime-text-color) !important;
}

.wordpress-popup-agent {
  position: absolute;
  pointer-events: all;
  z-index: 1000;
  /* width: 70vw;
    height: 90vh; */
  width: 870px;
  height: 616px;
  top: 5%;
  right: unset;
  /*center of screen*/
  left: 50%;
  transform: translate(-50%, 0);
  overflow-y: auto;
  border-radius: 9px;
  border: 0.5px solid #FFF;
  background-color: #3A3A3F;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 3px solid #3A6FAC;
}

.wordpress-popup {
  position: absolute;
  pointer-events: all;
  z-index: 1000;
  /* width: 70vw;
    height: 90vh; */
  width: 870px;
  height: 616px;
  top: 5%;
  right: unset;
  /*center of screen*/
  left: 50%;
  transform: translate(-50%, 0);
  overflow-y: hidden;
  border-radius: 9px;
  border: 0.5px solid #FFF;
  background-color: #3A3A3F !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 3px solid var(--label-font-color);
}

.wordpress-popup {
  position: absolute;
  pointer-events: all;
  z-index: 1000;
  /* width: 70vw;
    height: 90vh; */
  width: 870px;
  height: 616px;
  top: 5%;
  right: unset;
  /*center of screen*/
  left: 50%;
  transform: translate(-50%, 0);
  overflow-y: hidden;

  border-radius: 9px;
  border: 0.5px solid #FFF;
  background-color: var(--aime-dmain-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid var(--label-font-color);
}

.wordpress-popup-context {
  position: absolute;
  pointer-events: all;
  z-index: 1000;
  /* width: 70vw;
    height: 90vh; */
  width: 870px;
  height: 616px;
  top: 5%;
  right: unset;
  /*center of screen*/
  left: 50%;
  transform: translate(-50%, 0);
  overflow-y: auto;
  border-radius: 9px;
  border: 0.5px solid #FFF;
  background-color: #3A3A3F;
  display: flex;
  flex-direction: column;
  border: 3px solid #3A6FAC;

}

.aime-popup-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #928A8A;
  padding-bottom: 10px;
}

.aime-popup-title {
  color: #FFF;
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: 0.1px;
  margin-left: 20px;
  margin-top: 15px;
}

.aime-popup-close {
  font-size: 18px;
  margin-top: 15px;
  cursor: pointer;
  margin-right: 20px
}

.aime-popup-close-left {
  font-size: 18px;
  margin-top: 15px;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}

.popup-button {
  color: var(--M3-black, #000);
  text-align: center;
  font-family: Poppins;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 153.846% */
  letter-spacing: 0.1px;
  background: none;
}

.popup-button-white {
  display: flex;
  padding: 10px 24px 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 100px;
  background-color: #fff;
}

.popup-button-black {
  display: flex;
  padding: 10px 24px 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* flex: 1 0 0; */
  /* align-self: stretch; */
  color: var(--aime-text-color);
  border-radius: 10px;
  background-color: var(--aime-dmain-color);
  border: 1px solid white;
  cursor: pointer;
  width: 150px;
  transition: background-color 0.3s ease;
  border: 1px solid var(--aime-dmain-border-color);
}

/* .space-analytics-popup-button {
    margin-top: 5px;
} */

.rephrase-button {
  background-color: black;
  color: white;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px
}

.wp-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center
}

.popup-form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #928A8A;
  margin-top: 20px
}

.gen-popup-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #928A8A
}

.gen-popup-label {
  margin-left: 20px
}

.gen-popup-options-cards {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  max-width: 815px;
  flex-wrap: wrap;
}

.gen-popup-options-cards2 {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  /* max-width: 815px; */
  flex-wrap: wrap;
  width: 100%;
}

.gen-popup-options-cards-rtl {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  justify-content: center;
  max-width: 815px;
  flex-wrap: wrap;
}

#generate-image-options-container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  max-width: 815px;
  flex-wrap: wrap;
  position: relative;
}

.gen-popup-image {
  width: 15px;
  height: 15px;
  /* margin-top: 3px; */
  /* margin-left: 10px */
}

#fotter-popup {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  border-top: 1px solid #928A8A;
  padding-top: 20px;

  /* position: absolute; */
  bottom: 0;
  width: 100%;
}

#fotter-popup-update {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  border-top: 1px solid #928A8A;
  padding-top: 20px;

  /* position: absolute; */
  bottom: 0;
  width: 100%;
}

.gen-popup-button-container {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue-theme-color);
  width: 138px;
  height: 32px;
  margin-bottom: 18px;
  margin-right: 15px;
  background-color: var(--blue-theme-color);
  border-radius: 100px;
  /* cursor hand */
  cursor: pointer;
}

.gen-popup-button-container-rtl {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue-theme-color);
  width: 138px;
  height: 32px;
  margin-bottom: 18px;
  margin-left: 15px;
  background-color: var(--blue-theme-color);
  border-radius: 100px;
  /* cursor hand */
  cursor: pointer;
}

/* Style for the slider track */

#xplayer input[type="range"] {
  -webkit-appearance: none;
  /* For Chrome */
  height: 8px;
  background: #EDEEF1;
  /* Track color */
  border-radius: 5px;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

/* Change opacity on hover */

#xplayer input[type="range"]:hover {
  opacity: 1;
}

/* Style for the thumb (the handle) */

#xplayer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* הסרת הסגנון הדיפולטי */
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* עיגול */
  background: #A2CDFF;
  /* צבע העיגול */
  border: 3px solid white;
  /* מסגרת לבנה מסביב לעיגול */
  cursor: pointer;
  transition: background-color 0.3s;
}

/* ל-Firefox */

#xplayer input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #A2CDFF;
  ;
  border: 3px solid white;
  /* מסגרת לבנה מסביב לעיגול */
  cursor: pointer;
}

/* ל-Internet Explorer */

#xplayer input[type="range"]::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #A2CDFF;
  border: 3px solid white;
  /* מסגרת לבנה מסביב לעיגול */
  cursor: pointer;
}

.item-container {
  position: relative;
  display: inline-block;
  margin: 50px;
  overflow-y: auto;
}

/* Tooltip styling */

.info-popup {
  visibility: hidden;
  /* Hidden by default */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  top: 110%;
  /* Position it below the item */
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  font-size: 0.9em;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Arrow at the top of the tooltip */

.info-popup::after {
  content: "";
  position: absolute;
  bottom: 100%;
  /* Position arrow above the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

/* Show tooltip on hover */

.item-container:hover .info-popup {
  visibility: visible;
  opacity: 1;
}

.menu-button {
  background-color: black;
  color: white;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  gap: 10px;
  border-radius: 5px
}

.popup-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-star {
  width: 21px;
  height: 21px
}

.icon-button {
  width: 24px;
  height: 32px !important;
}

.icon-button:hover {
  /* background-color: #A2CDFF; */
  /* opacity: 0.9; */
  /* padding:5px; */
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(76%) sepia(18%) saturate(534%) hue-rotate(189deg) brightness(105%) contrast(97%);

  /* filter: brightness(0) saturate(100%) invert(36%) sepia(57%) saturate(1173%) hue-rotate(178deg) brightness(92%) contrast(95%); */

}

.aime-channels-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #FFF;
  font-family: Poppins;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 55.556% */
  letter-spacing: 0.1px;
  margin-top: 20px;
}

.wordpress-channel-nav {
  margin-left: 20px;
  color: #928A8A;
  font-family: Poppins;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 75% */
  letter-spacing: 0.15px;
  margin-top: 5px;
  padding: 10px;
  gap: 20px;
  display: flex;
  border-bottom: 1px solid #A2CDFF;
}

.wordpress-channel-nav-label-focuse {
  border-bottom: 1px solid #ffff;
  margin-bottom: -11px;
  color: white
}

/* .wordpress-channel-nav-label-not-focuse{
    border-bottom: 0px solid #928A8A;
    color:#928A8A
} */

.step-container {
  display: flex;
}

/* Animation to fill from left to right */

.animate-fill {
  fill-opacity: 0;
  /* Start invisible */
  animation: fillAnimation 1s forwards;
}

/* Delayed animation for each ellipse */

.animate-fill:nth-child(1) {
  animation-delay: 0s;
}

.animate-fill:nth-child(2) {
  animation-delay: 0.1s;
}

.animate-fill:nth-child(3) {
  animation-delay: 0.2s;
}

.animate-fill:nth-child(4) {
  animation-delay: 0.3s;
}

.animate-fill:nth-child(5) {
  animation-delay: 0.4s;
}

.animate-fill:nth-child(6) {
  animation-delay: 0.5s;
}

.animate-fill:nth-child(7) {
  animation-delay: 0.6s;
}

.animate-fill:nth-child(8) {
  animation-delay: 0.7s;
}

.animate-fill:nth-child(9) {
  animation-delay: 0.8s;
}

.animate-fill:nth-child(10) {
  animation-delay: 0.9s;
}

.animate-fill:nth-child(11) {
  animation-delay: 1s;
}

.animate-fill:nth-child(12) {
  animation-delay: 1.1s;
}

/* Define the keyframes for fill animation */

@keyframes fillAnimation {
  from {
    fill-opacity: 0;
  }

  to {
    fill-opacity: 0.85;
  }
}

.chat-box h2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
}

.chat-box {
  /* width:27%;
  height:50%; */
  width: 459px;
  height: 84dvh;
  max-height: 825px;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  direction: ltr;
  background-color: var(--aime-dmain-color);
  position: absolute;
  right: 0;
  bottom: 400;
  /*width: clamp(300px, 100%, 600px);*/
  border-radius: 15px 15px 0 0;
  padding: 0px 0px 10px 0px;
  /* background-color: var(--_background); */
  /* border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black; */
  box-shadow: var(--aime-box-shadow-color);
  min-height: 250px;
  /* background-image: linear-gradient(0deg, white, rgba(0, 0, 0, 0.0)); */
  /* transition: all 300ms cubic-bezier(0.23, 1, 0.820, 1); */
  /* nav-up: current; */
  overflow: hidden;
  z-index: 100000;
  /* border-bottom: 1px solid black; */
  color: var(--aime-text-color);


}

/* mobile style*/

@media (max-width: 768px) {
  .chat-box {
    width: 100%;
    bottom: 0 !important;
    border-radius: 0;
    border: none;
    max-height: 100% !important;
    height: 100% !important;
    right: -5px;
    direction: ltr;
  }
}

.chat-box table {
  color: black;
}

.chat-box th {
  color: white;
}

.hidden-important {
  display: none !important;
}

/* עיצוב כהה */

.theme-dark {
  background-color: #333;
  color: white;
}

/* עיצוב בהיר */

.theme-light {
  background-color: #f9f9f9;
  color: black;
}

/* עיצוב כחול */

.theme-blue {
  background-color: #007bff;
  color: white;
}

.color-picker {
  pointer-events: all;
  /* width: 10%; */
  background-color: transparent;
  align-items: center;
  height: 35px;
}

.color-label {
  color: var(--aime-text-color);
  /* width: 10%; */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.chat-box.open {
  /* --_background: transparent; */
  bottom: 15;
  /* Moves up to become visible */

  /* transform: translateY(calc(100% + 20px)); */
}

.chat-box-row-icon-fav {
  aspect-ratio: 1;
  position: absolute;
  top: -2px;
  right: -2px;
  /* border-radius: 100vmax; */
  width: 16px;
  z-index: 9;
}

.chat-resizer {
  width: 10px;
  height: 10px;
  background: url('resize-icon.svg') no-repeat center;
  background-size: contain;
  cursor: nwse-resize;
  /* position: absolute; */
  bottom: 0;
  left: 0;
  z-index: 100001;
  transform: scaleX(-1);
}

.chat-resizer-corner {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: nwse-resize;
  z-index: 100001;
  background: rgb(255 255 255 / 0%);
  background-image: url('resize-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scaleX(-1);
}

@media screen and (max-width: 768px) {
  .chat-resizer-corner {
    display: none !important;
  }
}

.chat-box-history {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-height: 65%;
  max-height: 77%;
  margin: 0 auto;
  width: 95%;
  /* max-height: clamp(100px, 90vh, 60vh); */
  /* max-height: 200px; */
  /* max-height: 100px; */
  color: black;
  padding: 10px 5px 10px 0px;
  font-weight: 400;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all 300ms ease;
  pointer-events: all;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  /* background-image: var(--shadow-gradient); */
  /* -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%); */
}

.fade-in {
  animation: fadeIn 0.5s;
  animation: fadeinbottom 0.5s ease-out forwards;
  /* Adjust duration and timing as needed */

}

.fade-out-up {
  --start-offset: 0px; /* current visible position */
  --end-offset: -300px; /* how far up it moves when fading out */
  animation: fadeoutup 0.5s ease-out forwards;
}

@keyframes fadeoutup {
  0% {
    opacity: 1;
    transform: translateY(var(--end-offset));
  }

  100% {
    opacity: 0;
    transform: translateY(var(--start-offset));
  }
}

.fade-in-down {
  --start-offset: -300px;
  --end-offset: 0px;
  animation: fadeindown 0.5s ease-out forwards;
  /* Adjust duration and timing as needed */
}

@keyframes fadeindown {
  0% {
    opacity: 0;
    transform: translateY(var(--start-offset));
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(var(--end-offset));
  }
}

@keyframes fadeinbottom {
  0% {
    opacity: 0;
    transform: translateY(300px);
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubbles {
  min-height: 7%;
  margin-bottom: 7px;
}

.fade-out {
  animation: fadeOutMoveDown 1s ease-out forwards;
}

.chat-box-history-bugs {
  max-height: 30%;
  display: flex !important;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px 5px 10px 5px;
  width: 90%;
  height: 100vh;
  overflow-x: auto;
}

/* אנימציה לסגירה כלפי מטה */

@keyframes fadeOutMoveDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
    /* תזוזה כלפי מטה */
  }
}

@keyframes fadingtop {
  0% {
    opacity: 0;
    transform: translateY(0);
    /* Adjust distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(300px);
  }
}

.chat-box-row-text-sys {
  font-size: 0.9rem;
  word-break: break-word;
  pointer-events: all;
  cursor: pointer;
  color: red
}

/* 
.bubbles-list::-webkit-scrollbar {
  display: none;
} */

.chat-box-row-text a {
  /* color: var(--aime-text-color); */
  color: #00BCD4;
  text-decoration: underline;
}

.chat-text-fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* NPC ROW */

.chat-box-history-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 5%;
  max-width: 85%;
  border-radius: 1rem 1rem 1rem 0px;
  /* border: var(--border-1); */
  color: var(--aime-text-color-user);
  background-color: var(--aime-user-bg-color);
  font-size: 1.4rem;
  padding: 6px;
  cursor: pointer;
  margin-right: auto;
  pointer-events: all;

}

/* USER ROW */

.chat-box-history-row-2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 5%;
  /* max-width: 85%; */
  color: var(--aime-text-color-bot);
  font-size: 1.4rem;
  /* background-color: var(--aime-bot-bg-color); */
  border-radius: 1rem 1rem 0rem 1rem;
  /* border: 0.1rem solid black; */
  padding: 6px;
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .chat-box-history-row-2 {
    border: none !important;
  }

}

.chat-box-history-row:hover .folding-button-container,
.chat-box-history-row-2:hover .folding-button-container {

  opacity: 1;
}

#review-message {
  opacity: 0;
  transition: opacity 0.2s ease;
  display: none;
  color: white
}

.chat-box-history-row-2:hover~#review-message {
  display: flex !important;
  opacity: 1;
}

.chat-box-row-text {
  text-align: var(--aime-direction-chat);
  direction: var(--aime-direction-row);
  font-family: var(--aime-chat-font);
  /* padding: 0 8px; */
  flex: 0 10 100%;
  word-break: break-word;
  font-size: 14px;
  pointer-events: all;
  line-height: 16px;
  padding: 9px;

  /*white-space: pre-wrap; 
  */


}

.chat-footer-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.chat-history {
  padding-bottom: 120px;
  /* אותו גובה מקסימלי של footer */
  overflow-y: auto;
}

/* Default LTR */

.chat-box-row-text.ltr {
  text-align: left;
  direction: ltr;
}

/* When RTL is selected */

.chat-box-row-text.rtl {
  text-align: right;
  direction: rtl;
}

.chat-box-row-text-sentence {
  text-align: right;
  direction: rtl;
  flex: 0 10 100%;
  word-break: break-word;
  pointer-events: all;
  line-height: 16px;
  padding: 9px;
  padding-left: 0;
  white-space: pre-wrap;
}

.chat-box-input-wrapper {
  width: 97%;
  min-height: 45px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background-color: var(--aime-chatbox-input);
  border-radius: 10px;
  padding: 4px 8px;
  transition: height 0.2s ease;
  /* border: 1px solid #000; */
  pointer-events: all;
  color: var(--aime-placeholder-color);
  position: relative;
  /* שימי לב! */
  max-height: 150px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}

@media screen and (max-width: 768px) {
  .chat-box-input-wrapper {
    width: 100%;
  }

}

.chat-box-input-wrapper:focus-within {
  background-color: #515457;
  transition: all 300ms ease;
}

.chat-box-input {
  height: 40px;
  /* height: -webkit-fill-available; */
  /* width: calc(100% - 50px); */
  /* height: 30px; */
  height: -webkit-fill-available;
  width: 90%;
  margin-left: 8px;
  font-size: 16px;
  background-color: transparent;
  /* border-radius: 100vmax; */
  padding-right: 6px;
  padding-left: 10px;
  padding: 10;
  border: none;
  /* white-space: normal; */
  pointer-events: all;
  color: var(--aime-text-color-chat);
  resize: none;
  direction: var(--aime-direction-row);
  margin: 3px 0px 0px 0px;
  overflow: scroll;
  scrollbar-width: none;

}

.chat-box-input::-webkit-scrollbar {
  display: none;
}

.chat-box-input:focus {
  outline: none;
}

/* .chat-box-input::-moz-placeholder {
  opacity: .6;
  color: var(--aime-placeholder-color)
} */

.chat-box-input::placeholder {
  color: var(--aime-placeholder-color);
  opacity: 0.6;

  display: flex;
  align-items: center;
}

.input-and-bubbles-wrapper {
  position: relative;
  width: 100%;
  gap: 4px;
}

.chat-box-send-button {
  position: relative;
  rotate: 180deg;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 100vmax;
  background-color: transparent;
  /* background-image: url("https://cdn.aimeverse.com/u/ico-chat-send"); */
  /* background-size: 20px; */
  background-repeat: no-repeat;
  background-position: center;
  /* filter: brightness(0.6); */
  cursor: pointer;
  pointer-events: all;
}

.chat-box-send-button-ltr {
  position: relative;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 100vmax;
  background-color: transparent;
  /* background-image: url("https://cdn.aimeverse.com/u/ico-chat-send"); */
  /* background-size: 20px; */
  background-repeat: no-repeat;
  background-position: center;
  /* filter: brightness(0.6); */
  cursor: pointer;
  pointer-events: all;
}

.chat-box-send-button2 {
  position: relative;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 100vmax;
  background-color: transparent;
  background-image: url("public/svg/white_send.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.6);
  cursor: pointer;
  pointer-events: all;
}

.chat-box-input-folding-button {
  margin-left: 10px;
}

.chat-box-audio-controls {
  position: relative;
  display: flex !important;
  justify-content: flex-end;
  padding: 5px;
  border-radius: 15px 15px 0 0;
  pointer-events: all;
  /* border-bottom: 1px solid rgb(67, 67, 67); */
  margin-bottom: 2px;
  height: 50px;
  align-items: center;

}

@media screen and (max-width: 768px) {
  .chat-box-audio-controls {
    border: none;
    border-radius: 0 0 0 0;
  }

}

.chat-box-header-left {
  width: 100%;
  /* height: 50px; */
  /* background-color: #f0f0f0; */
}

.floating-button {
  aspect-ratio: 1;
  display: block;
  width: 40px;
  background-color: transparent;
  /* background-color: var(--aime-dmain-border-color); */
  /* background-color: var(--secondary-color); */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% !important;
  cursor: pointer;
  /* border-radius: 100vmax; */
  pointer-events: all;
  transition: all 200ms ease;
  margin-right: 5px;
  border: none !important;
}

@media screen and (max-width: 768px) {
  .floating-button {
    border: none !important;
  }

}

.floating-mute-button {
  background-image: url("/public/svg/unmute.svg");
  position: relative;
  /* border: 1px solid white; */
  /* filter: invert(); */
}

.chat-button-control {
  position: absolute;
  bottom: 25px;
  right: 25px;
  /* z-index: -1; */
}

.chat-button-control button {
  background-color: var(--primary-color);
  border: var(--primary-color) var(--border-no-color-1);
  /* filter: invert(); */
}

.chat-box-hide-show-button {
  width: 60px;
  /* transform: rotate(180deg); */
  /* margin-right: 25px; */
  /* animation: bounce 3000ms cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; */
}

.chat-box-hide-show-button img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 50%;
  margin: auto;
}

.resubmit-button {
  background: none;
  transition: all 300ms ease;
  cursor: pointer;
}

.resubmit-button:hover {
  rotate: 45deg;
}

.chat-box-row-text-link {
  display: block;
  color: blue;
  text-decoration: underline;
}

.chat-box-row-text-button {
  display: block;
  color: white;
  background-color: black;
  padding: 5px;
  border-radius: 5px;
}

.command-option {
  display: block;
  padding: 3px;
  margin: 3px 0;
  border-radius: var(--border-radius-1);
  color: var(--color-info-light);
  background-color: #fff1;
  cursor: pointer;
}

.command-palette a:hover {
  background-color: var(--color-info-dark);
}

.folding-button-container {
  --folding-button-color: transparent;
  --folding-button-height: 100%;
  --folding-button-item-color: white;
  --folding-button-item-height: 100%;

  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 30px;
  width: 30px;
  /* background-color: #23232344; */
  border-radius: 100vmax;
  /* filter: invert(); */
  pointer-events: all;
  z-index: 1;
  transition: all 300ms ease;
  /* opacity: 0; */
}

.channel-list {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: flex-start;
  margin-left: 20px;
}

/* .aime-menu-popup {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  display: none;
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  height: 350px;
  background-color:var(--aime-frame-color);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
}


.aime-menu-popup {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  display: none;
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  height: 350px;
  background-color:var(--aime-frame-color);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
} */

.aime-login-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 774px;
  height: 574px;
}

@media screen and (max-width: 768px) {
  .aime-login-bg {
    width: 20% !important;
    height: 20% !important;
  }

}

.re-generate-button {
  background-color: #3a3a3f;
  color: white;
  cursor: pointer;
  margin-top: 20px;
  border: 1px solid white;
  display: flex;
  width: 148px;
  border-radius: 100px;
  align-items: center;
  justify-content: center;
  height: 35px;
  margin-right: -20px;
}

.edit-image-published {
  width: 36px;
  height: 36px;
  margin-top: 11px;
  margin-left: 10px;
  position: relative;
  left: -450px;
  cursor: pointer;
  display: block;
  top: 350px
}

.edit-image-published-ltr {
  width: 36px;
  height: 36px;
  margin-top: 11px;
  margin-left: 10px;
  position: relative;
  right: -400px;
  cursor: pointer;
  display: block;
  top: 253px
}

.rephrase-popup-container-class {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.paragarph-button-container {
  background-color: black;
  color: white;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  height: 35px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 120px
}

.thinking-anim {
  position: relative;
  /* bottom: 28px;
    left: 49%; */
  width: 30px;
  height: 30px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  /* background: url('/public/svg/aime-logo.svg') no-repeat center center;
    background-size: contain; */
  visibility: hidden;
  transition: opacity 1000ms ease;
}

.thinking-anim label {
  animation: fade-in-out 2.5s ease infinite;
}

.thinking-anim img {
  width: 30%;
  animation: spin 3s ease infinite;
}

@keyframes fade-in-out {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.media-item {
  width: 90px;
  height: 80px;
  border-radius: 12px;
}

.media-item:hover {
  cursor: pointer;
  transform: scale(1.03);
  transition: all 0.3s ease;
}

.media-slider {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow: auto;
  /* max-width: 100%; */
  max-width: 400px;
  justify-content: space-between;
  margin-top: 10px;
}

.media-slider-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow: auto;
  /* max-width: 100%; */
  max-width: 400px;
  justify-content: space-between;
  margin-top: 10px;
  padding-bottom: 10px;

}

.media-slider-container::-webkit-scrollbar {
  height: 6px;
  background: transparent;
}

.media-price {
  font-weight: bold;
  color: #222;
}

.media-description {
  color: #666;
  font-size: 10px;
}

/* style to the left menu dashboard */

.left-menu-container {
  display: flex;
  height: 100vh;
  width: 259px;
  /* Ensure width consistency */
  /* border-right: 1px solid #ccc; Enhance separation between menu and content */
  overflow: hidden;
  flex-direction: column;
  background: var(--aime-frame-color);
  color: var(--aime-text-color);
  position: fixed;
  /* Fixed to keep it in place */
  top: 0;
  left: 0;
  z-index: 999;
  /* Lower than the top bar */
  /* border-right: 1px solid var(--aime-dmain-border-color); */
  overflow-y: hidden;
}

.aime-home-overview-settings-container {
  display: flex;
  flex-direction: row;
}

.menu-logo {
  display: flex !important;
  width: 100%;
  align-items: center;
  font-size: 24px;
  justify-content: center;
  /* background: #505054; */
  background-color: var(--aime-frame-color);
  color: var(--aime-text-color);
  height: 10vh;
  border-bottom: 1px solid var(--aime-dmain-border-color);
}

/*  style to sub menu */

.dashboard-submenu-wrapper {
  display: block;
  width: 190px;
  height: 80vh;
  border-radius: 10px;
  background: var(--aime-submenu-color);
  background-color: var(--aime-submenu-color);
  /* top: 22px; */
  left: 10px;
  position: relative;
  pointer-events: all;
  overflow: auto;
  padding: 10px;

}

.aime-select {
  background: transparent;
  color: var(--aime-text-color);
  font-size: 15px;
  position: relative
}

#xplayer select {
  background: transparent;
  color: var(--aime-text-color);
  /* color: red; */
  font-size: 15px;
  position: relative;
  z-index: 99999;
}

.table-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;

}

#search-input {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  width: 100%;
}

.search-input-com {
  width: 20%;
  height: 35px;
  border-radius: 5px;
  background-color: transparent;
  color: var(--aime-text-color);
  border: 1px solid var(--aime-dmain-border-color);
  padding: 5px;
}

.select-filter-container-by-name {
  display: flex;
  gap: 10px;
  border: 1px solid var(--aime-dmain-border-color);
  height: 35px;
  border-radius: 5px;
}

.select-filter-container-by-opp {
  display: flex;
  gap: 10px;
  border: 1px solid var(--aime-dmain-border-color);
  height: 35px;
  border-radius: 5px;

}

.aime-select-option {
  background: transparent;
  color: var(--aime-text-color);
  font-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  appearance: none;
}

.aime-select-space {
  background: transparent;
  color: var(--aime-text-color);
  font-size: 15px;
  position: relative;
  z-index: 1;

}

.aime-menu-item {
  padding: 13px 10px 10px 13px;
  /* Spacing inside items */
  font-size: 15px;
  /* Text size */
  /* color: var(--aime-text-color); */
  color: var(--aime-left-menu-color);

  /* Text color */
  text-decoration: none;
  /* Remove underline */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
  /* margin-left:20px; */
  border-radius: 5px;
  width: 100%;
  /* Separator line */
}

.aime-menu-item:hover {
  background-color: var(--aime-color-hover);
  /* Slightly darker gray */
  cursor: pointer;
  color: #2C2C2C;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
  width: 100%;
}

.aime-menu-item active {
  background-color: #e0e0e0;
  /* Slightly darker gray */
  color: #2C2C2C;
}

.aime-menu-item-disabled {
  padding: 19px 5px 10px 13px;
  /* Spacing inside items */
  font-size: 15px;
  /* Text size */
  color: grey !important;
  /* Text color */
  text-decoration: none;
  /* Remove underline */
  transition: background-color 0.3s ease !important;
  /* Smooth hover effect */
  /* margin-left:20px; */
  border-radius: 5px;
  width: 100%;
  pointer-events: none;
  /* Separator line */
}

.content {
  flex: 1;
  /* Take up remaining space */
  padding: 20px;
  background-color: #fff;
  /* White background */
  overflow-y: auto;
  /* Scrollable content if needed */
}

.main-name {
  display: flex;
  flex-direction: row;
  color: #949494;
  margin-left: 13px;
  font-size: 15px;
  gap: 5px;
}

.aime-user-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
}

.title-table-dash {
  color: var(--aime-text-color);
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 75% */
  letter-spacing: 0.15px;
  margin-left: 4px
}

.aime-popup-xpell {
  position: fixed;
  top: 0px;
  right: 0px;
  width: clamp(600px, 100%, 500px);
  height: 90svh;
  background-color: var(--aime-submenu-color);
  z-index: 9999;
  box-shadow: rgba(0, 0, 0, 0.4) -4px 0px 12px;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  margin-top: 50px;

}

.aime-user-popup-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #928A8A;

}

.aime-user-logo:hover {
  /*Make brighter*/
  filter: brightness(1.2);

}

.product-view-container-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  border: 1px;
  border-radius: 10px;
  padding: 20px;
  margin: -10px;
  /* margin-top: 20px; */
  border-radius: 10px;
  /* border: 1px solid #B6B6B6; */
  background: #FFF;
  background-color: var(--aime-submenu-color);
  /* margin-top: 50px; */
  width: 35%
}

.logout-button {
  background-color: #949494;
  color: white;
  padding: 7px 5px 6px 14px;
  font-size: 15px;
  cursor: pointer;
  pointer-events: all;
  z-index: 1005;
  display: flex;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

.logout-button:hover {
  background-color: #4B4B4F;
  cursor: pointer;
  color: #2C2C2C;
  border-radius: 20px;
}

.aime-home-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 60%;
  height: 100%;
}

.aime-home-overview-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  /* background-color: #3A3A3F; */
  border-radius: 10px;
  color: white;
}

.aime-home-overview-title {
  font-size: 20px;
  font-weight: 600;
  color: white;
}

/* QUILLLLLLLL */

.ql-count-words {
  /* color: #000;
  font-size: 12px;
  font-weight: 400;
  margin-top: 5px; */
  width: 25px !important;
  height: 25px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='5' cy='5' fill='teal'/%3E%3C/svg%3E") !important;
  /* background-color: black !important; */

}

.ql-aime-insert-table {
  width: 25px !important;
  height: 25px !important;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='26px'%20height='26px'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11%208C11%207.44772%2011.4477%207%2012%207C12.5523%207%2013%207.44771%2013%208V11H16C16.5523%2011%2017%2011.4477%2017%2012C17%2012.5523%2016.5523%2013%2016%2013H13V16C13%2016.5523%2012.5523%2017%2012%2017C11.4477%2017%2011%2016.5523%2011%2016V13H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44771%2011%208%2011H11V8Z'%20fill='%230F0F0F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M23%204C23%202.34315%2021.6569%201%2020%201H4C2.34315%201%201%202.34315%201%204V20C1%2021.6569%202.34315%2023%204%2023H20C21.6569%2023%2023%2021.6569%2023%2020V4ZM21%204C21%203.44772%2020.5523%203%2020%203H4C3.44772%203%203%203.44772%203%204V20C3%2020.5523%203.44772%2021%204%2021H20C20.5523%2021%2021%2020.5523%2021%2020V4Z'%20fill='%230F0F0F'/%3e%3c/svg%3e") !important;
}

.ql-aime-media {
  width: 25px !important;
  height: 25px !important;
  background-image: url("data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2026%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M20.317%209.23693L22.0892%206.17898L25.7664%204.77674L22.1979%203.39183L20.6638%200.341783L18.8916%203.39973L15.2144%204.80197L18.7829%206.18688L20.317%209.23693Z'%20fill='black'/%3e%3cpath%20d='M14.8176%2032.0001L8.11536%2021.8231H3.67412V32.0001H0V7.11115H9.08436C11.2108%207.11115%2013.0007%207.43252%2014.4542%208.07528C15.9346%208.71803%2017.0382%209.58694%2017.765%2010.682C18.4917%2011.7771%2018.8551%2013.0269%2018.8551%2014.4314C18.8551%2016.1454%2018.2898%2017.6571%2017.1593%2018.9664C16.0558%2020.2757%2014.3869%2021.1446%2012.1529%2021.5731L19.2185%2032.0001H14.8176ZM3.67412%2019.2164H9.08436C11.0762%2019.2164%2012.5701%2018.7879%2013.566%2017.9309C14.5619%2017.05%2015.0598%2015.8836%2015.0598%2014.4314C15.0598%2012.9555%2014.5619%2011.8128%2013.566%2011.0034C12.597%2010.194%2011.1031%209.78929%209.08436%209.78929H3.67412V19.2164Z'%20fill='black'/%3e%3c/svg%3e") !important;

}

.ql-editor table {
  width: 50% !important;
  left: 25%;
  position: relative;
}

.ql-aime-media:hover {}

.ql-aime-post {
  width: 25px !important;
  height: 25px !important;
  background-image: url("data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.0285%205.29646L17.4217%204.5368L18.2213%204.21816L17.4543%203.82879L17.1325%203.03685L16.7393%203.79651L15.9397%204.11515L16.7068%204.50452L17.0285%205.29646Z'%20fill='black'/%3e%3cpath%20d='M13.6514%206.56334L14.0446%205.80368L14.8443%205.48504L14.0772%205.09567L13.7554%204.30374L13.3623%205.0634L12.5626%205.38204L13.3297%205.77141L13.6514%206.56334Z'%20fill='black'/%3e%3cpath%20d='M16.0451%206.56346L15.6519%207.32312L14.8523%207.64176L15.6193%208.03113L15.9411%208.82306L16.3343%208.0634L17.1339%207.74476L16.3668%207.35539L16.0451%206.56346Z'%20fill='black'/%3e%3cpath%20d='M4.88869%205.44801C4.88513%205.44793%204.89225%205.44809%204.88869%205.44801V5.44801ZM4.9%2015.6313C4.9%2015.3551%205.12386%2015.1313%205.4%2015.1313H16.6222C16.8984%2015.1313%2017.1222%2015.3551%2017.1222%2015.6313V15.8405C17.1222%2016.1167%2016.8984%2016.3405%2016.6222%2016.3405H5.4C5.12386%2016.3405%204.9%2016.1167%204.9%2015.8405V15.6313ZM4.89537%2010.7849C4.89793%2010.5106%205.12103%2010.2896%205.39535%2010.2896H16.6222C16.8984%2010.2896%2017.1222%2010.5134%2017.1222%2010.7896V10.9988C17.1222%2011.275%2016.8984%2011.4988%2016.6222%2011.4988H5.39339C5.11542%2011.4988%204.89081%2011.2721%204.89341%2010.9941L4.89537%2010.7849ZM4.9%205.94788C4.9%205.67173%205.12386%205.44788%205.4%205.44788H10.4235C10.6996%205.44788%2010.9235%205.67173%2010.9235%205.94788V6.15712C10.9235%206.43326%2010.6996%206.65712%2010.4235%206.65712H5.4C5.12386%206.65712%204.9%206.43326%204.9%206.15712V5.94788Z'%20fill='black'/%3e%3c/svg%3e") !important;
}

.ql-aime-rephrase {
  width: 25px !important;
  height: 25px !important;
  background-image: url("data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2026%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M20.317%209.23693L22.0892%206.17898L25.7664%204.77674L22.1979%203.39183L20.6638%200.341783L18.8916%203.39973L15.2144%204.80197L18.7829%206.18688L20.317%209.23693Z'%20fill='black'/%3e%3cpath%20d='M14.8176%2032.0001L8.11536%2021.8231H3.67412V32.0001H0V7.11115H9.08436C11.2108%207.11115%2013.0007%207.43252%2014.4542%208.07528C15.9346%208.71803%2017.0382%209.58694%2017.765%2010.682C18.4917%2011.7771%2018.8551%2013.0269%2018.8551%2014.4314C18.8551%2016.1454%2018.2898%2017.6571%2017.1593%2018.9664C16.0558%2020.2757%2014.3869%2021.1446%2012.1529%2021.5731L19.2185%2032.0001H14.8176ZM3.67412%2019.2164H9.08436C11.0762%2019.2164%2012.5701%2018.7879%2013.566%2017.9309C14.5619%2017.05%2015.0598%2015.8836%2015.0598%2014.4314C15.0598%2012.9555%2014.5619%2011.8128%2013.566%2011.0034C12.597%2010.194%2011.1031%209.78929%209.08436%209.78929H3.67412V19.2164Z'%20fill='black'/%3e%3c/svg%3e") !important;
}

.ql-aime-media:hover {}

#button-publish-social {
  background-color: black;
  border-radius: 10px;
  color: white;
  height: 35px;
  width: 150px;
}

#button-publish-social:hover {
  background-color: var(--aime-color-hover);

}

.aime-popup-header-2 {
  display: flex;
  justify-content: flex-end
}

.aime-button-save-update {
  background-color: black;
  border-radius: 100px;
  color: white;
  height: 35px;
  width: 120px;
}

.aime-button-save-update:hover {
  background-color: #03A9F4;
  border-radius: 100px;
  color: white;
  height: 35px;
  width: 120px;
}

.popup-button-black:hover {
  background-color: var(--aime-color-hover);

}

.aime-button-add-role {
  width: 100px;
  height: 35px;
  background-color: transparent;
  color: black;
  border: 1px solid #928A8A;
  border-radius: 5px;
  color: white
}

.aime-button-add-role:hover {
  background-color: #03A9F4;
  color: white
}

.aime-post-popup-content {
  width: 800%;
  overflow: hidden;
  height: 100%;

}

.aime-post-popup-editor {

  display: flex;
  z-index: 10001;
  top: 15%;
  background: var(--aime-dmain-color);
  /* border: 2px solid var(--aime-dmain-border-color); */
  height: 70%;


}

.icon-item {
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  /* filter: invert(1); */
}

.icon-item:hover {
  opacity: 1;
}

/* HTML: <div class="loader"></div> */

/* .loader {
  width: 297px;
  height: 24px;
  -webkit-mask:
    radial-gradient(circle closest-side,#000 94%,#0000) 0 0/33% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
   linear-gradient(#25b09b 0 0) 0/0%  no-repeat
   #ddd;


  animation: l7 2s infinite linear;
}
@keyframes l7 {
    100% {background-size:100%}
} */

/* .space-label-item:hover {
  background-color: var(--aime-color-hover);
  cursor: pointer;
  color: #2C2C2C;
  border-radius: 5px;
}

.select-space-container{
  border-top: 1px solid rgb(146, 138, 138);
  border-bottom: 1px solid rgb(146, 138, 138);

} */

.loader {
  width: 100%;
  height: 24px;
  -webkit-mask:
    radial-gradient(circle closest-side, #000 94%, #0000) 0 0/33% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
    linear-gradient(#A2CDFF 0 0) 0/var(--progress) no-repeat,
    #ddd;
  animation: fillUp 2s infinite linear;


}

@keyframes fillUp {
  0% {
    background-size: 0% 100%, 100% 100%;
    /* Start with no progress */
  }

  100% {
    background-size: var(--progress) 100%, 100% 100%;
    /* Fill up to max progress */
  }
}

.bubbles-list {
  position: absolute;
  bottom: 94%;
  left: 25px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  gap: 10px;
  padding: 10px 0;
  background: transparent;
}

.bubbles-list::-webkit-scrollbar {
  width: 0px;
  height: 6px;
  background: transparent;
}

.bubble-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: var(--aime-bot-bg-color);
  border: 1px solid #928a8a;
  color: var(--aime-text-color-bot);
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  white-space: nowrap;
  height: 36px;
  /* גובה קבוע לבועה */
  line-height: 40px;
  /* יישור אנכי לטקסט */
  transition: filter 0.3s;

}

.bubble-item:hover {
  filter: brightness(1.5);
}

.space-popup-aime {
  display: flex;
  flex-direction: column;
  z-index: 10001;
  top: 15%;
  background: var(--aime-dmain-color);
  border: 2px solid var(--aime-dmain-border-color);
  border-radius: 5px;
  ;
}

.comment-popup-aime {
  display: flex;
  flex-direction: column;
  z-index: 10001;
  top: 15%;
  background: var(--aime-dmain-color);
  border-radius: 5px;
  ;
}

.space-name-input {
  width: 100%;
  color: white;
  border: 1px solid #928A8A;
  border-radius: 5px;
  margin-left: 20px;
  width: 90%;
}

.display-entity-table-row {
  /* background-color: var(--Background-Primary, #ffffff); */
  /* background-color: white; */
  background-color: var(--aime-table-first-color);
}

.display-entity-table-row:hover {
  background-color: var(--aime-color-hover);
  cursor: pointer;
}

.update-space-popup-button {
  display: flex;
  flex-direction: flex-end;
  justify-content: flex-end;
  border-top: 1px solid #928A8A;
}

.data-memory-container {
  background-color: var(--aime-dmain-color);
  color: var(--aime-text-color);
  /* border: 2px solid var(--aime-dmain-border-color); */
}

.aime-dashboard-channel {
  overflow-x: auto;
  border: none;
  width: 100%;
  background-color: var(--aime-dmain-color);
  padding: 5px;
  border-radius: 5px;
  box-shadow: none;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--aime-text-color);
}

.aime-popup-add-channel {
  top: 10%;
  background: var(--aime-dmain-color);
  color: var(--aime-text-color);
  border-radius: 5px;
  height: 85vh;
  overflow-y: auto
}

.dark-mode-label {
  margin-left: 5px;
  color: var(--aime-text-color);
}

.aime-intent-config-container {
  position: absolute;
  top: 10%;
  left: 263px;
  /* width: 50%;
  height: 50%;   */
  display: flex;
  flex-direction: row;
}

.aime-intent-config-box {
  position: absolute;
  left: 305px;
  background-color: var(--aime-dmain-color);
  color: var(--aime-text-color);
  border: 2px solid var(--aime-dmain-border-color);
  border-radius: 5px;
  width: 60%;
  height: 80%;
  top: 10%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.aime-intent-chat-config-box {
  display: block;
  background: var(--aime-submenu-color);
  width: 45vh;
  height: 80vh;
  border-radius: 10px;
}

.aime-intent-config-box-title {
  height: 10%;
  width: 100%;
  color: var(--aime-text-color);
  border-bottom: 2px solid var(--aime-dmain-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aime-intent-config-box-body {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  overflow-y: scroll;
}

.aime-intent-config-box-footer {
  height: 10%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intent-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.intent-action-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;

  align-items: center;
}

.aime-intent-config-image {
  pointer-events: all;
  cursor: pointer;
  width: 40px;
  height: 40px;
  z-index: 9999;
}

.intent-label {
  width: 30%;
  font-weight: bold;
  align-content: center;
  color: var(--aime-text-color);
}

.intent-text {
  width: 70%;
  height: 30px;
  font-weight: normal;
  color: var(--aime-text-color);
  border: 1px solid var(--aime-dmain-border-color);
  border-radius: 10px;
  align-content: center;
  background: var(--aime-dmain-color);
}

.intent-text-wrap {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
}

.intent-wrapper {
  width: 90%;
  height: 30%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  font-weight: bold;
  background: var(--aime-dmain-color);
  border: 1px solid var(--aime-dmain-border-color);

}

.aime-settings-table-left-bar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px
}

.aime-settings-table-left-bar-item:hover {
  background-color: var(--aime-dmain-border-color);
  cursor: pointer;
}

.aime-settings-table-left-bar {
  width: 20%;
  height: 100%;
  background-color: var(--aime-dmain-color)
}

.space-share-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px;
  border-radius: 10px;
  padding: 13px;
  background: #FFF;
  background-color: var(--aime-dmain-color);
}

::-webkit-scrollbar {
  width: 8px;
  /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent;
  /* Track color */
}

::-webkit-scrollbar-thumb {
  background: var(--aime-scroll-color);
  /* Scrollbar color */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--aime-dmain-color);
  /* Color on hover */
}

/* HTML: <div class="loader"></div> */

.loader-spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: orange;
  animation: l2 1s infinite linear;
}

@keyframes l2 {
  to {
    transform: rotate(1turn)
  }
}

.aime-cropper-container {
  width: 100%;
  height: 100%;
  background: var(--aime-dmain-color);
}

.aime-cropper-image {
  display: block;
  max-width: 100%;
}

.aime-cropper-buttons-size {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.aime-cropper-button {
  background-color: #FFF;
  color: #000;
}

.aime-popup-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  margin-top: 20px;
  background-color: var(--aime-frame-color);
  width: 100%;
  height: 100%;
  border: 1px solid var(--aime-dmain-border-color);
  border-radius: 10px;
  margin-left: 40vh
}

.xpell-space-instructions {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 50%;
  gap: 10px;
  padding: 10px;
  background-color: var(--aime-dmain-color);
  border: 1px solid var(--aime-dmain-border-color);
  border-radius: 10px;
  color: var(--aime-text-color);
}

.product-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  border: 1px;
  border-radius: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--aime-submenu-color);
  color: var(--aime-text-color);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  justify-content: space-between;
  width: 40%
}

.permission-view-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80vh;
  border: 1px;
  border-radius: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--aime-submenu-color);
  color: var(--aime-text-color);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

  width: 40%
}

.home-top-analytics {
  background-color: var(--aime-submenu-color);
  display: flex;
  flex-direction: row;
  height: 10% !important;
  border-radius: 10px
}

.home-top-analytics-cube {
  width: 20%;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;

}

.home-top-lead-cube {
  height: 30%;
  display: flex;

}

.analytics-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 40vh; */
  height: 30vh;
  border: 1px;
  border-radius: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--aime-submenu-color);
  color: var(--aime-text-color);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  justify-content: space-between;
  width: 100%
}

.glow-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  height: 10vh;
  border-bottom: 1px solid var(--aime-dmain-border-color);
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  position: relative;
  text-align: center;

  /* Glow effect */
  background: var(--aime-linear-gradient);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowAnimation 8s linear infinite;
}

@keyframes glowAnimation {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.big-floating-button {
  aspect-ratio: 1;
  display: block;
  position: fixed;
  bottom: 0px;
  right: var(--gap-8);
  width: 60px;
  font-size: var(--font-size-5);
  color: var(--aime-dmain-color);
  background-color: transparent;
  background-color: var(--aime-frame-color);
  cursor: pointer;
  /* border: var(--border-1); */
  border-radius: 100vmax;
  box-shadow: var(--aime-box-shadow-color);
  /* margin-right: 5px; */
  transition: border 500ms ease-out;
  pointer-events: all;
  animation: pulseBorder 2s infinite alternate;

}

.big-floating-button:hover {
  background: #ffffff69;
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 10px rgba(172, 172, 172, 0.5);
  }

  50% {
    box-shadow: 0 0 20px rgba(172, 172, 172, 1);
  }

  100% {
    box-shadow: 0 0 10px rgba(172, 172, 172, 0.5);
  }
}

.floating-chat-icon-image:hover {
  animation: rotatemove 2s linear infinite;
  /* Example: 2 seconds, linear, infinite loop */

  /* animation:cubic-bezier(0.68, -0.55, 0.27, 1.55) 5s infinite bounce; */

}

@keyframes rotatemove {
  from {
    transform: bounce 0.5s infinite;
  }

  to {
    transform: bounce 0.5s infinite;
  }
}

/* toast*/

.toast-message {

  position: absolute;
  bottom: 20;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;

}

.toast-message-container {
  animation: fadeIn 1.5s;
}

.toast-message-text {
  opacity: 0;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 5px;
  font-size: 13px;
  transition: opacity 1s;
  transition-timing-function: ease-in;
}

.chat-box-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--aime-text-color);
  position: absolute;
  bottom: 10px;
  /* margin-left: 88px; */
  width: 100%;
}

.preview-image-chat {
  position: absolute;
  top: 0;
  width: 80%;
  height: 80%;
  z-index: 100000;
}

.chat-box-action-view {
  display: none !important;
  flex-direction: column;
  gap: 10px;
  min-height: 77%;
  overflow-y: auto;
}

.slide-in-fwd-br {

  /* animation: slide-in-fwd-br 0.5s ease-out forwards; */
  animation: fade-in-out 1.5s ease-out forwards;


}

/* Fade In */

.fade-in-chat {
  animation: fadeInAnimation 0.5s ease-out forwards;
}

@keyframes fadeInAnimation {
  from {
    transform: translateZ(-1400px);
    opacity: 0;
  }

  to {
    transform: translateZ(0);
    opacity: 1;
  }
}

.fade-in-card-chat {
  animation: fadeInAnimation 1s ease-out forwards;
}

@keyframes fadeInAnimation {
  from {
    transform: translateZ(-1400px);
    opacity: 0;
  }

  to {
    transform: translateZ(0);
    opacity: 1;
  }
}

/* Fade Out */

.fade-out-chat {
  animation: fadeOutAnimation 0.5s ease-out forwards;
}

@keyframes fadeOutAnimation {
  from {
    transform: translateZ(0);
    opacity: 1;
  }

  to {
    transform: translateZ(-1400px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-br
 * ----------------------------------------
 */

/* @-webkit-keyframes slide-in-fwd-br {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(var(--cursorY)) translateX(var(--cursorX));
            transform: translateZ(-1400px) translateY(var(--cursorY)) translateX(var(--cursorX));
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-br {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(var(--cursorY)) translateX(var(--cursorX));
            transform: translateZ(-1400px) translateY(var(--cursorY)) translateX(var(--cursorX));
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) translateX(0);
            transform: translateZ(0) translateY(0) translateX(0);
    opacity: 1;
  }
} */

.actions-image-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.actions-image-button:hover {
  cursor: pointer;


}

.bulk-textarea {
  width: 343px;
  height: 120px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
  background: transparent;
  color: var(--aime-text-color)
}

.dots-chat-box {
  width: 31px;
  height: 31px;
  pointer-events: all;
  cursor: pointer;
  background-size: cover;
  transition: all 0.2s linear 0s;
  margin-right: -13px;
  z-index: 100001;
}

.chat-options-menu {
  position: absolute;
  top: 40px;
  right: 75px;
  background: var(--aime-user-bg-color);
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 5px;
  min-width: 120px;
  color: var(--aime-text-color-user);
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeSlideIn 0.25s ease-out forwards;
}

/* אנימציה חלקה לכניסה */

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML: <div class="loader"></div> */

.loader-thinking {
  width: 20px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #5b5b5b 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%
  }
}

.chat-box-action-video {
  width: 40%;
  height: 100%;
  display: flex;

}

.chat-box-action-product-image {
  width: 40%;
  height: 100%;
  display: flex;
}

.chat-box-action-product-container {
  gap: 5px;
  direction: rtl;
  display: flex;
  flex-direction: column;
}

.chat-box-action-product-media-container {
  display: flex;
  align-items: center;
}

.custom-image {
  width: 35px;
  height: 70px;
  margin-left: 5px;
  vertical-align: middle;
  border-radius: 5px;
  /* Optional: Rounded corners */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional: Add shadow */
}

.dashboard-submenu-item:hover {
  background-color: var(--Gray, rgb(190, 188, 188));
  cursor: pointer;
  color: #2C2C2C;
  border-radius: 50px;
  /* transition: background-color 0.3s ease; */
  /* Smooth hover effect */
  width: 97%;
}

.card-fade-in {
  animation: fade-in 1s ease-out forwards;

}

@keyframes slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(0);
    /* Adjust the starting distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}

.element {
  /* Apply this class to the element you want to animate */
  animation: slide-in-top 0.5s ease-out forwards;
}

.card-fade-in {
  animation: fade-in 1s ease-out forwards;

}

@keyframes slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(0);
    /* Adjust the starting distance as needed */
  }

  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}

.element {
  /* Apply this class to the element you want to animate */
  animation: slide-in-top 0.5s ease-out forwards;
}

/* Produt Card*/

.card-image {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 100px
}

.card-image:focus {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.card-header {
  font-size: 15px;
  font-weight: bold;
}

.card-loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.card-loader::after,
.card-loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #FAAD64 #FAAD64;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

.card-loader::before {
  width: 32px;
  height: 32px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* כרטיסי spaces grid */

.space-card {
  background: var(--aime-submenu-color);
  color: var(--aime-text-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

.space-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.space-card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;

}

.space-card-detail {
  color: gray;
  font-size: 14px;
  margin-bottom: 5px;
}

.space-card-button {
  margin-top: auto;
  background-color: #3A3A3F;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.space-card-button:hover {
  background-color: #5A5A5F;
}

.current-space-highlight {
  border: 2px solid #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
  transition: all 0.3s ease;
}

.active-space-image {
  border: 3px solid #A2CDFF;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
  transition: all 0.3s ease;
}

.permissions-user-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  width: 160px;
  background-color: transparent;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border 0.2s ease;
}

.permissions-user-card.selected {
  border: 2px solid #A2CDFF;
  background-color: rgba(255, 255, 255, 0.05);
}

.row-flex-social {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Image filters */

.to-gray {
  filter: grayscale(100%);
}

.to-black {
  filter: brightness(0) saturate(100%);
}

.to-white {
  filter: brightness(0) saturate(100%) invert(1);
}

.lead-inner-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 15px;
  direction: rtl;
  gap: 10px;
  padding: 10px 20px;
  overflow-y: scroll;
  height: 600px;
  border: 1px var(--aime-dmain-border-color) solid;
  border-radius: 10px;
  background: var(--aime-frame-color);
  color: white !important;
  width: 70%
}

.chat-box-leads-row-2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 5%;
  /* max-width: 85%; */
  color: white !important;
  font-size: 1.4rem;
  /* background-color: var(--aime-bot-bg-color); */
  background-color: var(--secondary-bg-color);
  border-radius: 1rem 1rem 0rem 1rem;
  /* border: 0.1rem solid black; */
  padding: 6px;
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 15px;
}

.chat-box-leads-row-2 a {
  color: #fff;
  /* white text */
}

@media screen and (max-width: 768px) {
  .chat-box-leads-row-2 {
    border: none !important;
  }

}

.social-user-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 15px;
  direction: ltr;
  padding: 10px 20px;
  overflow-y: scroll;
  height: 600px;
  border: 1px var(--aime-dmain-border-color) solid;
  border-radius: 10px;
  /* background: var(--aime-frame-color); */
  width: 30%
}

.social-user-data-content {
  /* background-color: var(--secondary-bg-color); */
  width: 100%;
  border-radius: 15px;
  ;
  display: flex;
  height: 100%;
  color: white !important;
  gap: 10px;
}

.news-flash-container {
  width: 100%;
  overflow: hidden;
  background-color: var(--aime-submenu-color);
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 0;
  position: relative;
  border-radius: 10px;
}

.news-flash {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.submenu-dashboard {
  display: block;
  height: 80vh;
  border-radius: 10px;
  left: 10px;
  position: relative;
  pointer-events: all;
  overflow: auto;
}

.lead-chat-box-analytics {
  display: flex;
  flex-direction: column;
  max-height: 90%;
  height: 90%;
  width: 100%;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.product-view-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  border: 1px;
  border-radius: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--aime-submenu-color);
  color: var(--aime-text-color);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  justify-content: space-between;
  width: 50%;
}

.channel-main {
  display: flex;
  flex-direction: row;
  gap: 3%;
  align-items: center;
  margin-top: 10px
}

.container-channels-list {
  width: 100%;
  max-height: 74vh;
  overflow-y: auto;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.channel-item-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  background-color: #5E5E62;
  border-radius: 5px;
  gap: 10px;
}

.channel-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #928A8A;
}

.channel-pic-name {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}

.sync-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid var(--MedGrey, #9BC4F3);
  padding: 10px;
  border-radius: 5px
}

.sync-container-item {
  display: flex;
  border: 1px solid #A2CDFF40;
  border-radius: 5px;
  padding: 5px;
  width: 191px;
  height: 64;
  align-items: center;
  justify-content: center;

}

.aime-channel-table-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: 5%
}

.aime-first-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px
}

.aime-channel-header-title {
  color: white;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 75% */
  letter-spacing: 0.15px;
  margin-left: 4px
}

.aime-left-container {
  width: 80%;
  height: 80vh;
}

.wordpress-register {
  flex-direction: column;
  gap: 46px;
}

.view-channel-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  height: 100%;
}

.channel-header-page {
  margin-bottom: 0px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.aime-channel-header-title {
  color: white;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 75% */
  letter-spacing: 0.15px;
  margin-left: 4px
}

.container-basic-info-channel {
  width: 100%;
  max-height: 66vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--MedGrey, #CFCFCF);
  padding-top: 10px;
}

.channel-register-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--MedGrey, #CFCFCF);
  padding-top: 10px;
  height: 50px;
  align-items: flex-end;
}

.analyitics-post-container {
  display:flex;
  flex-direction:row; 
  gap:15px; 
  background-color:#606367; 
  padding:10px; 
  border-radius:8px;

}

.product-header-page{
  margin-bottom:0px !important; 
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center; width:100%; 
  border-bottom: 1px solid var(--MedGrey, #CFCFCF);

}

.social-row-fotter {
  color: gray;
  font-size: 10px;
}

.container-basic-info-socialuser {
  width: 70%;
  background-color: var(--aime-submenu-color);
  border-radius: 10px;
  padding: 20px;
  overflow-y: auto;
  height: 80vh;
}

.aime-admins-table-container-sc {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: 3%
}

.social-row-container-details {
  display: flex;
  flex-direction: column;
}

.home-overview-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%
}

.home-top-analytics-leads {
  margin-left: 10px;
  color: var(--aime-text-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-top-analytics-leads-title {

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 90%;

}

.container-home-overview {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 80% !important;
}

.aime-home-overview-graph-container-3 {
  display: flex;
  width: 100%;
  height: 50%;
}

.product-header-page {
  margin-bottom: 0px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.product-header-page2 {
  margin-bottom: 0px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.analytics-period-select {
  height: 100%;
  background-color: transparent;
  color: white;
  z-index: 1
}

.container-basic-info-product {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 10px;
  gap: 10px;
  overflow-y: auto;
}

.line-chart-1 {
  width: 50%;
  height: 100%;
  color: white !important;
}

.aime-home-overview-graph-container-2 {
  display: flex;
  width: 100%;
  height: 50%;
}

.brands-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70%;
  padding: 10px;
  gap: 10px;
}

.brands-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.floating-chat-bubble{
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.4s ease forwards;
  background-color: white;
  border-radius: 12px;
  padding: 10px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  min-width: 140px;
  
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  position: absolute;
  bottom: 65px;
  right:1px;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-chat-bubble {
  transform: scale(0.8);
  opacity: 0;
  animation: popIn 0.3s ease-out forwards;

}

@keyframes popIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.floating-chat-bubble:hover {
  transform: scale(1.05);
}

.form-card-input {
  background-color: white;
  /* border: 1px solid #928A8A; */
  border-radius: 5px;
  border: 1px solid var(--aime-dmain-border-color);
  margin-right: 0px;
  margin-left: 20px;
  margin-top: 5px;
  /* width: 100%; */
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
}

.aime-intent-chat-config-box-bubbles{
  width: 50%;
  background: var(--aime-submenu-color);
  height: 80vh;
  border-radius: 10px;
}/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}

/*# sourceMappingURL=quill.snow.css.map*//*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}