body{
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: "Roboto", sans-serif;
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/material-symbols-outlined-v222-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Tamanho padrão */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
  }
.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.screen_start{
    width: -webkit-fill-available;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background:radial-gradient(#00222d, #171717);
    z-index: 108;
}
.content-logo{
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: start 2s ease-in-out;
    background: cornflowerblue;
}
:root{
    --font-color-b:rgb(53 52 52);
    --font-color-bl:#252835;
    --font-color-w: aliceblue;
    --back-color: aliceblue;
    --back-box: #d9efff;
    --color-top: rgb(53 193 0);
    --back-progress:#8cc33ab5;
    --back-border-color:rgb(45 45 45);
    --card-msg: aliceblue;
    --insid-input:aliceblue;
    --back-calendar:#525252;
    --font-calendar:aliceblue;
    --trans-color:hsl(0deg 0% 84% / 30%);
    --btn-user:#647f97;
    --icon-task:#00000033;
    --back-card:white;
    --back-inside:#acffff;
    --border-box:#647f97;
    --btn-back-bar: rgb(169 169 169 / 48%);
    --card-msg-chat-l:#a8bbff;
    --card-msg-chat-r:#bdbdbd;
    --card-msg-text-l:#000000;
    --card-msg-text-r:#000000;
    --place-msgs:white;
}
.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
.main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: radial-gradient(#00222d, #171717);
}
.form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    background: #171717;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.354);
    padding: 1rem;
    width: 280px;
    max-width: 100%;
    z-index: 100;
}
.felx_column{
    display: flex;
    flex-direction: column;
}
.flexB {
    display: flex;
    align-items: center;
    width: -webkit-fill-available;
    justify-content: space-between;
}
.msg {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 45px;
    margin-right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: var(--font-color-b);
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1001;
    padding: 10px;
    max-width: 100%;
    border-radius: 5px;
}
.msg .material-symbols-outlined {
    padding: 10px;
}
button{
    border: none;
    outline: none;
    background: rgb(91 85 208 / 78%);
    color: aliceblue;
    padding: 10px;
    transition: all 0.7s ease-in-out;
    margin-top: 1rem;
    border-radius: 10px;
}
button:hover{
    background: green;
}
input{
    outline: none;
    padding: 10px;
    border-radius: 0 10px 10px 0;
    border: transparent;
    width: -webkit-fill-available;
    background: transparent;
    color: #ffffff;
}
.placeInput{
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    margin-top: 1rem;
    margin-bottom: 1rem;
    background:#3b3b3b;
    border-radius: 10px;

}
a{
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: small;
}
a .material-symbols-outlined{
    font-size: small;
    margin-left: 5px;
}
h2{
    color:rgb(255, 255, 255);
}

.timer{
    display: flex;
    align-items: center;
    justify-content: center;
}
.time-body{
    border-radius: 50%;
    border:3px solid #212155;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    padding: 5px;
}
.pointerH{
    width: 50%;
    border: 2px solid rgb(0 0 0 / 78%);
    position: relative;
}
.content{
    position: absolute;
    top: 0;
    right: 0;
    margin: 3rem;
}
#pointer2{
    position: relative;
    margin-top: -116px;
}
#marcacoes{
    border:2px dashed rgb(58, 58, 58);
    position: relative;
    margin: 4px;
    margin-top: -112px;
    padding: 2px;
}
.logo{
    margin-top: 2rem;
    width: -webkit-fill-available;
    display: flex;
    justify-content: center;
}
img{
    width: 200px;
    filter: invert(1);
}

@media (width: 800px) {
    .form{
        width: 100%;
    }
}

@keyframes rotateH {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes rotateM {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes shack {
    0%{
        transform: translateX(-10px);
    }
    25%{
        transform: translateX(10px);
    }
    50%{
        transform: translateX(-10px);
    }
    75%{
        transform: translateX(10px);
    }
    100%{
        transform: translateX(0px);
    }
}

@keyframes start {
    from{
        scale: 0.7;
        opacity: 0.2;
    }to{
        scale: 1;
        opacity: 1;
    }
}