/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root{
    --background-white:  rgb(255, 255, 255);
    --background-blue:   rgb(240, 245, 250);
    --background-gray-1: rgb(238, 238, 238);
    --background-gray-2: rgb(221, 221, 221);
    --background-gray-3: rgb(217, 217, 217);
    --background-gray-4: rgb(210, 210, 210);
    --border-gray-1:     rgb(204, 204, 204);
    --gray-1:            rgb(170, 170, 170);
    --gray-2:            rgb(140, 140, 140);
    --accent-blue-1:     rgb(087, 160, 211);
    --accent-blue-2:     rgb(067, 140, 191);
    --dark-blue:         rgb(016, 047, 068);
    --error:             rgb(255, 000, 000);
  
    --border-radius-1:   0.3rem;
    --border-radius-2:   0.6rem;
    --border-radius-3:   1rem;
}
body{
    background-color:var(--background-white);
    font-family:"Inter";
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
    padding:0px;
    margin:0px;  
}
.page{
    height:100%;
    width:100%;
}
.page-text{
    min-height:calc(100vh - 5rem);
    width:calc(100% - 2rem);
    color:var(--dark-blue);
    height:fit-content;
    margin-bottom:2rem;
    margin-left:1rem;
    margin-top:1rem;
}
.page-text-title{
    font-size:1.5rem;
    font-weight:bold;
}
.notification{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    text-align:center;
    font-size:1.5rem;
    position:fixed;
    display:none;
    padding:1rem;
    z-index:20;
    left:50%;
    top:5rem;
}

@font-face{
    font-family:"Inter";
    src:url("../assets/fonts/Inter Variable Font.ttf");
}
@keyframes fade-out{
    from {opacity:1;}
    to   {opacity:0;}
}
@keyframes fade-in{
    from {opacity:0;}
    to   {opacity:1;}
}

/*--Input Elements-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
button{
    background-color:var(--background-white);
    border-radius:var(--border-radius-1);
    border:1px solid var(--dark-blue);
    transform:translateY(0px);
    color:var(--dark-blue);
    font-size:1.25rem;
    height:3rem;
    width:8rem;

    transition:ease-in-out 0.1s;
    justify-content:center;
    font-family:"Inter";
    align-items:center;
    cursor:pointer;
    display:flex;
}
button:hover{
    transform:translateY(-1px);
}
button:active{
    transform:translateY(1px);
}
button:disabled{
    cursor:default;
    opacity:0.5;
}
button:hover:disabled{
    transform:translateY(0px);
    opacity:0.5;
}
button:active:disabled{
    transform:translateY(0px);
    opacity:0.5;
}
.blue-button{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    margin-top:1rem;
    width:100%;
    height:3rem;

    font-weight:bold;
    border:none;
}
.close{
    background-image:url("../assets/icons/x dark.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    border:none;
    height:1.5rem;
    width:1.5rem;
    right:0.5rem;
    top:0.5rem;
}

input[type=text],[type=number],[type=password],[type=url],[type=email],[type=time],[type=date]{
    background-color:var(--background-gray-1);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);

    color:var(--dark-blue);
    font-family:"Inter";
    font-size:1rem;
    height:2rem;
}
input[type=text]:disabled,[type=number]:disabled,[type=password]:disabled,[type=url]:disabled,[type=email]:disabled,[type=time]:disabled,[type=date]:disabled{
    opacity:0.5;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin: 0;
}
input[type=number]{
    -moz-appearance:textfield;
}
input[type=file]{
    display:none;
}
.file-input-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;
    height:2rem;
}
.file-input-button{
    margin-top:0px;
    font-size:1rem;
    flex-shrink:0;
    width:5.5rem;
    height:2rem;
}
.file-input-text{
    justify-content:flex-start;
    align-items:center;
    display:flex;
    
    color:var(--gray-1);
    margin-left:0.5rem;
    height:100%;
    width:100%;
}

textarea{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    color:var(--dark-blue);
    font-family:"Inter";
    font-size:1rem;
    height:10rem;
    resize:none;
}

.check-holder{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transition:ease-in-out 0.1s;
    user-select:none;
    cursor:pointer;
    aspect-ratio:1;
    width:2rem;

    justify-content:center;
    align-items:center;
    display:flex;
}
.check-holder:hover{
    background-color:var(--background-gray-1);
}
.check{
    border:1px solid var(--accent-blue-1);
    background-color:var(--accent-blue-1);
    border-radius:var(--border-radius-2);
    aspect-ratio:1;
    flex-shrink:0;
    width:2rem;

    justify-content:center;
    align-items:center;
    display:none;
}
.check:hover{
    background-color:var(--accent-blue-2);
}
.check-lines{
    border-bottom:0.25rem solid var(--background-white);
    border-right:0.25rem solid var(--background-white);
    transform:translateY(-10%) rotate(45deg);
    height:1.25rem;
    width:0.75rem;
}

select{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    color:var(--dark-blue);
    font-size:1.25rem;
    height:2.5rem;
    width:8rem;

    font-family:"Inter";
    cursor:pointer;
}

.search-holder{
    background-color:var(--background-gray-2);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    overflow:hidden;
    height:2rem;
    width:25rem;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.search-icon{
    background-image:url("../assets/icons/search.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    user-select:none;
    cursor:pointer;

    transition:ease-in-out 0.05s;
    aspect-ratio:1;
    height:2rem;
}
.search-icon:hover{
    transform:scale(1.05);
}
.search-icon:active{
    transform:scale(0.95);
}
input[type=text].search-input{
    background-color:var(--background-gray-2);
    width:calc(100% - 2.5rem);
    border-radius:0;
    outline:none;
    border:none;
    height:2rem;
}

/*--Page Body----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-body{
    background-color:var(--background-white);
    min-height:calc(100vh - 5rem);
    height:fit-content;
    position:relative;
    width:100%;
    z-index:1;
}
.screen{
    background-color:var(--background-gray-1);
    min-height:calc(100vh - 5rem);
    height:fit-content;
    display:none;
    width:100%;
    left:0px;
    top:0px;
}
.screen-mask{
    position:fixed;
    display:none;
    
    height:100%;
    width:100%;
    left:0px;
    top:0px;
    z-index:10;
}
.screen-mask-background{
    background-image:linear-gradient(to bottom, var(--accent-blue-1), var(--accent-blue-2));
    position:absolute;
    opacity:0.75;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.tab-affected{
    position:relative;
}
#main{
    position:relative;
}

.google-connect-window{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    color:var(--dark-blue);
    position:absolute;
    left:50%;
    top:2rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom:1rem;
    height:fit-content;
    width:min(30rem, calc(100vw - 6rem));
}
.google-connect-window-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    height:4rem;
    width:100%;
}
.google-connect-window-body{
    text-align:center;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    display:flex;
}
.google-connect-button{
    margin-top:2rem;
    width:15rem;
}

/*--Assistant Window---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.assistant-holder{
    pointer-events:none;
    position:fixed;
    display:none;
    height:100%;
    z-index:12;
    width:25rem;
    right:0px;
    top:0px;
}
.assistant-button{
    box-shadow:0rem 0rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--accent-blue-1);
    transform:translateY(0px);
    border-radius:100%;
    position:absolute;
    aspect-ratio:1;
    width:3rem;
    right:1rem;
    bottom:1rem;

    cursor:pointer;
    user-select:none;
    pointer-events:auto;
    transition:ease-in-out 0.1s;

    background-image:url("../assets/icons/message.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:60%;
}
.assistant-button:hover{
    transform:translateY(-1px);
}
.assistant-button:active{
    transform:translateY(1px);
}

.assistant-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    border-bottom-left-radius:var(--border-radius-2);
    border-top-left-radius:var(--border-radius-2);
    border:1px solid var(--border-gray-1);
    pointer-events:auto;
    position:absolute;
    overflow:hidden;
    height:100%;
    right:-110%;
    width:100%;
    top:0px;
}
.assistant-window-head{
    border-bottom:1px solid var(--border-gray-1);
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    font-size:1.8rem;
    height:3rem;
    width:100%;

    justify-content:center;
    align-items:center;
    position:relative;
    font-weight:bold; 
    user-select:none;
    display:flex;
}
.assistant-window-close{
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:75%;
    position:absolute;
    cursor:pointer;

    transform:translate(-50%, -50%);
    transition:ease-in-out 0.05s;
    border-radius:100%;
    aspect-ratio:1;
    width:1.5rem;
    right:0rem;
    top:50%;
}
.assistant-window-close:hover{
    transform:translate(-50%, -50%) scale(1.1);
}
.assistant-window-close:active{
    transform:translate(-50%, -50%) scale(1);
}
.assistant-window-body{
    background-color:var(--background-white);
    height:calc(100% - 6rem - 2px);
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
}
.assistant-messages-list{
    height:fit-content;
    min-height:100%;
    width:100%;

    flex-direction:column-reverse;
    justify-content:flex-start;
    align-items:flex-end;
    display:flex;
}
.assistant-message{
    justify-content:flex-end;
    align-items:flex-start;
    display:flex;
    width:100%;
    animation:assistant-message-pop-in ease-in-out 0.2s;
}
.assistant-message-body{
    background-color:var(--accent-blue-1);
    border-radius:var(--border-radius-2);
    border-bottom-right-radius:0px;
    color:var(--background-white);
    margin-right:0.5rem;
    margin-bottom:1rem;
    margin-left:0.5rem;
    flex-shrink:0;
    max-width:75%;
    padding:0.5rem;
    height:100%;
}
.bot-message{
    transform:scaleX(-1);
    animation:assistant-message-pop-in-bot ease-in-out 0.2s;
}
.bot-message-body{
    border-radius:var(--border-radius-2);
    background-color:var(--gray-1);
    border-bottom-left-radius:0px;
    transform:scaleX(-1);
}
.assistant-message-thinking-dot-holder{
    justify-content:space-evenly;
    align-items:center;
    display:flex;
    height:1rem;
    width:3rem;
}
.assistant-message-thinking-dot{
    background-color:var(--background-white);
    border-radius:100%;
    aspect-ratio:1;
    height:0.5rem;
    animation:assistant-message-thinking-dot ease-in-out infinite 1s;
}
.assistant-window-foot{
    border-top:1px solid var(--border-gray-1);
    background-color:var(--background-white);
    width:calc(100% - 1rem);
    padding-right:0.5rem;
    padding-left:0.5rem;
    height:3rem;
   

    justify-content:center;
    align-items:center;
    display:flex;
}
.assistant-input{
    width:100%;
}
.assistant-send{
    background-color:var(--accent-blue-1);
    border:1px solid var(--accent-blue-2);
    height:calc(2rem + 4px);
    margin-left:0.25rem;
    flex-shrink:0;
    width:4rem;

    background-image:url("../assets/icons/send.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
}

@keyframes assistant-window-slide-in{
    from {right:-110%}
    to   {right:-1px}
}
@keyframes assistant-window-slide-out{
    from {right:-1px}
    to   {right:-110%}
}
@keyframes assistant-message-pop-in{
    0%   {opacity:0; transform:translateX(100%) scale(0.5);}
    60%  {opacity:1; transform:translateX(0%) scale(1.1);}
    100% {opacity:1; transform:scale(1);}
}
@keyframes assistant-message-pop-in-bot{
    0%   {opacity:0; transform:translateX(-100%) scaleX(-1) scale(0.5);}
    60%  {opacity:1; transform:translateX(0%) scaleX(-1) scale(1.1);}
    100% {opacity:1; transform:scaleX(-1) scale(1);}
}
@keyframes assistant-message-thinking-dot{
    0%   {transform:scale(1);}
    25%  {transform:scale(1.5);}
    50%  {transform:scale(1);}
    100% {transform:scale(1);}
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:480px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
    button{
        font-size:1rem;
    }
}
@media only screen and (max-width:768px) and (orientation:landscape){
    :root{
        font-size:12px;
    }
}