@import url('./no-fullsize.css');



body, html {

    width: 100%;

    height: 100%;

    overflow-x: hidden;

}

.material__download__title{
    word-break: break-all;
}

#app {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    width: 100%;



    .wrapper {

        flex-grow: 1;

        width: 100%;

    }

}

.chat-list li.active .prof{
    font-size: 14px;
    color: #dddddd;
}

.chat-list li .prof{
    font-size: 14px;
    color: #999999;
}

.chat-list li .trabalho{
    font-size: 18px;
}

.editor__content::after {

    content: '';

    display: table;

    clear: both;

}



.editor__content img {

    max-width: 100%;

    height: auto;

}



.rodape {

    --rodape-bg: var(--kry-laranja);

    --rodape-color: var(--kry-text-on-laranja);

    --rodape-link-hover: var(--kry-text-hover-on-laranja);



    background: var(--rodape-bg);

    color: var(--rodape-color);



    padding-top: 2rem;

    padding-bottom: 2rem;

}

.tag{
    background: #ea5a16;
    color: white;
    display: inline-block;
    padding: 3px 16px;
    margin: 10px 5px 10px 5px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    &:hover{
        background: #e51;
    }
    i{
        content: 'x';
        display: block;
        position: absolute;
        right: 3px;
        top: 3px;
        color: white;
        border-radius: 7px;
        font-size: 12px;
    }
}


.rodape a{

    color: inherit;

    text-decoration: none;

    transition: color .3s linear;

}



.rodape a:is(:hover, .active){

    color: var(--rodape-link-hover);

}



.rodape [class^="container"] {

    display: flex;

    gap: var(--bs-grid-gutter);

}



@media (max-width: 991.98px) {

    

    .rodape [class^="container"] {

        flex-direction: column;

        text-align: center;

    }

}



@media (min-width: 992px) {

    

    .rodape [class^="container"] {

        justify-content: space-between;

        align-items: flex-end;

    }

}



.autor img{

    vertical-align: bottom;

}



.form-group {

    margin-bottom: 1rem;

}

.fundo-modal{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: none;
    left:0;
    top:0;
    z-index: 100;
    h3{
        margin-top: 30px;
        color: white;
    }
    &.active {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.form-label {

    font-size: clamp(1rem, 0.6875rem + 1vw, 1.25rem);

}



.form-label-bold {

    font-weight: bold;

}



/* PAGE LOGIN */

.page__login {

    background-color: #323333;

    background-size: cover;

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: center top;

    gap: 35px;

}



.page__login .form-bottom{

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-between;

}



.page__login .btn-enviar {

    --bs-btn-bg: #EA5A16;

    --bs-btn-color: #FFFFFF;

    

    --bs-btn-hover-bg: #EA5A16;

    --bs-btn-hover-color: #FFFFFF;



    --bs-btn-padding-x: 20px;

    --bs-btn-padding-y: 12px;



    --bs-btn-border-width: 0;



    --bs-btn-font-weight: 700;



    --bs-btn-hover-radio: 0;



    &:hover{

        --bs-btn-hover-radio: 100%;

    }



    min-width: 115px;

    position: relative;

    perspective: 3px;



    &::before{

        content: '';

        position: absolute;

        left: 0;

        top: 0;

        z-index: -1;



        background: #329730;

        border-radius: var(--bs-btn-border-radius);



        width: 100%;

        height: 100%;



        clip-path: circle(var(--bs-btn-hover-radio) at 50% 50%);

        transition: clip-path .3s linear;

    }

}



.page__login .link__esqueci__senha {

    --text-decoration-transform: scaleX(0);



    font-size: clamp(1rem, 0.6875rem + 1vw, 1.25rem);

    text-decoration: none;

    color: #FFF;



    position: relative;

    display: inline-block;



    &::after{

        content: '';

        position: absolute;

        left: 0;

        bottom: 0;



        width: 100%;

        height: 2px;

        background: currentColor;

        opacity: .4;



        transform: var(--text-decoration-transform);

        transform-origin: center center;

        transition: transform .3s linear;

    }



    &:hover {

        --text-decoration-transform: scaleX(1); 

    }

}





/* PAGE LOGIN - PROFESSOR */

.page__login__professor{

    background-image: url(../images/bg-login-professor.png);

    color: #FFF;



    .form-group .alert {

        margin-top: .75rem;

    }



    .alert {

        --bs-alert-arrow-color: transparent;



        position: relative;



        &::before{

            content: '';

            position: absolute;

            right: calc(var(--bs-alert-padding-x) - 5px);

            bottom: 100%;



            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid var(--bs-alert-arrow-color);

        }

    }



    .alert-success {

        --bs-alert-arrow-color: var(--bs-green-500);



        background: var(--bs-green-500);

        border-color: var(--bs-green-700);

        color: var(--bs-green-100);

    }

    

    .alert-danger {

        --bs-alert-arrow-color: var(--bs-red-500);

        

        background: var(--bs-red-500);

        border-color: var(--bs-red-700);

        color: var(--bs-red-100);

    }

}



.page__login__professor .form-label {

    font-weight: 700;

    margin-bottom: .75rem;

}



.page__login__professor .form-control {

    --bs-border-width: 2px;



    font-size: clamp(1rem, 0.6875rem + 1vw, 1.25rem);



    &::placeholder {

        color: transparent;

    }

}



.page__login__professor header {

    text-align: center;

    margin-bottom: 108px;

    padding-top: 35px;

}



.form-login{

    --bs-gutter-x: 1.25rem;



    flex-grow: 1;



    width: 100%;

    max-width: 570px;

    margin-left: auto;

    margin-right: auto;



    margin-bottom: 108px;



    padding-left:  calc(var(--bs-gutter-x) * .5);

    padding-right: calc(var(--bs-gutter-x) * .5);

}



.page__login__professor h1{

    margin-bottom: 80px;

    font-weight: 700;

    font-size: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);

}



.telas__professor header{

    background: #221F25;

    color: #FFF;



    position: sticky;

    top: 0;

    z-index: 90;

}



.fas {

    position: relative;

}
.fa-trash{
    color: red !important;
    position: absolute;
    right: 30px;
    top: 5px;
    font-size: 20px!important;
}

.card-arquivo, .card-arquivo-tarefa {
    position: relative;
    margin-bottom: 30px;
    .fa-trash {
        color: red !important;
        position: absolute;
        right: 30px;
        top: 5px;
    }
}

.fa-message.exclamation::after {

    content: '!';

    position: absolute;

    right: 0;

    top: 0;

    

    width: 100%;

    height: 82%;



    display: flex;

    align-items: center;

    justify-content: center;



    color: currentColor;

    text-align: center;

    font-size: 70%;



    filter: invert(1);

}



.topo [class^="container"] {

    display: flex;

    align-items: center;

    gap: 40px;



    .logo {

        margin-right: auto;

    }



    .dropdown-menu {

        filter: drop-shadow(0 0 8px rgba(0,0,0,.65));

    }



    @media (max-width: 767.98px) {

        gap: .5rem;



        .logo{

            flex-shrink: 0;

            width: 100px;

        }



        .btn-tray {

            --bs-btn-font-size: 22px;

        }

    }

}



.btn-tray{

    --bs-btn-border-width: 0px;

    --bs-btn-padding-x: 0;

    --bs-btn-padding-y: 0;

    --bs-btn-border-radius: 50%;

    --bs-btn-hover-bg: #332e38;

    

    --bs-btn-color: #FFF;

    --bs-btn-font-size: 25px;



    width: 2em;

    height: 2em;



    display: flex;

    align-items: center;

    justify-content: center;



    &[data-qtde-notificacoes]:not([data-qtde-notificacoes="0"]) {

        position: relative;



        &::before {

            content: attr(data-qtde-notificacoes);

            

            position: absolute;

            right: 0;

            bottom: 0;

            z-index: 1;



            background: var(--bs-danger);

            border-radius: 1rem;

            padding: 3px 6px;



            color: #FFF;

            font-size: 12px;

        }

    }

}



.drop-chat {

    



    .dropdown-menu {

        width: calc(100vw - 2rem);

        max-width: 320px;

    }



    .dropdown-item {

        --gap: .75rem;

        --bs-dropdown-item-padding-y: .5rem;

        --bs-dropdown-link-hover-bg: hsl(0, 0%, 89%);



        display: grid;

        grid-template-columns: 44px calc(100% - 44px - var(--gap));

        align-items: center;

        gap: var(--gap);



        strong, span, small {

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    

        small {

            opacity: .65;

        }

    }

}



.drop-user{



    .btn {

        --bs-btn-color: #FFF;

        --bs-btn-hover-color: #FFF;

        --bs-btn-border-width: 0;

    }



    .dropdown-menu {

        width: 240px;

    }



    .dropdown-item {

        --gap: .75rem;

        --bs-dropdown-item-padding-y: .5rem;

        --bs-dropdown-link-hover-bg: hsl(0, 0%, 89%);



        display: grid;

        grid-template-columns: 44px calc(100% - 44px - var(--gap));

        align-items: center;

        gap: var(--gap);



        [class^="fa"] {

            width: 2em;

            height: 2em;



            display: flex;

            align-items: center;

            justify-content: center;



            border-radius: 50%;

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



            font-size: 20px;

            color: rgba(0,0,0,.7);

        }

    }



    .dropdown-item-danger [class^="fa"] {

        background: var(--bs-red-500);

        color: var(--bs-red-100);

    }

}



.avatar {

    --avatar-font-size: 22px;

    --avatar-bg-image: none;

    --avatar-bg-color: hsl(0, 0%, 80%);

    --avatar-color: #333;

    --avatar-border-radius: 50%;



    border-radius: var(--avatar-border-radius);

    clip-path: inset(0 0 0 0 round var(--avatar-border-radius));



    aspect-ratio: 1/1;



    display: flex;

    align-items: center;

    justify-content: center;



    width: 2em;

    height: 2em;

    border-radius: 50%;

    

    

    line-height: 1;

    font-weight: bold;

    font-size: var(--avatar-font-size); 

    color: var(--avatar-color);



    background-size: cover;

    background-position: center center;

    background-image: var(--avatar-bg-image);

    background-color: var(--avatar-bg-color);

}



.avatar img {

    position: relative;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.drop-notificacoes .dropdown-menu{

    width: calc(100vw - 2rem);

    max-width: 350px;

}



.drop-notificacoes .notification-item {

    --gap: .75rem;

    --bs-dropdown-item-padding-y: .5rem;

    --bs-dropdown-link-hover-bg: hsl(0, 0%, 89%);



    display: grid;

    grid-template-columns: 44px calc(100% - 44px - var(--gap));

    grid-gap: var(--gap);



    strong, span, small {

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    small {

        opacity: .65;

    }

}



.topo .dropdown-menu:has(.dropdown-header) .drop-scroll {

    max-height: 300px;

    overflow: auto;

}



.prof__minhas__tarefas__header {

    background: #EEEEEE;

    padding-top: 45px;

    margin-bottom: 20px;

    text-align: center;

}





.prof__minhas__tarefas__header h1 {

    font-size: 22px;

    color: #221F25;

    font-weight: bold;

    margin-bottom: 40px;

}





.prof__minhas__tarefas__nav{

    list-style: none;

    

    padding-left: 0;

    margin-bottom: 0;



    display: flex;

    justify-content: space-between;

    gap: 1rem;



    overflow: auto;

    scrollbar-width: none;

}



.prof__minhas__tarefas__nav::-webkit-scrollbar{

    display: none;

}



.prof__minhas__tarefas__nav li {

    flex-grow: 1;

    display: flex;

}



.prof__minhas__tarefas__nav a {

    --border-radius: 25px;

    --padding-y: 15px;

    --padding-x: 30px;



    --border-color: #C2B7A9;

    --border-hover-color: #EA5A16;



    --color: #C2B7A9;

    --color-hover: #FFF;



    --bg-hover: #EA5A16;



    display: flex;

    align-items: center;

    justify-content: center;



    text-align: center;

    font-size: 19px;

    font-weight: bold;

    text-decoration: none;

    color: var(--color);



    border-top-left-radius: var(--border-radius);

    border-top-right-radius: var(--border-radius);

    border-bottom: 4px solid var(--border-color);



    padding-top: var(--padding-y);

    padding-bottom: var(--padding-y);

    padding-left: var(--padding-x);

    padding-right: var(--padding-x);



    width: 100%;



    position: relative;

    perspective: 3px;



    transition: background .3s linear, 

    color .3s linear, 

    border .3s linear;



    white-space: nowrap;

}



.prof__minhas__tarefas__nav a:is(:hover, .active) {

    --raio: 100%;



    border-color: var(--border-hover-color);

    color: var(--color-hover);

    background: var(--bg-hover);

}



.prof__minhas__tarefas__filtro{

    display: flex;

    gap: 15px;

    align-items: center;

    flex-wrap: wrap;



    margin-bottom: 50px;

}



.prof__minhas__tarefas__filtro .icon-area {

    background: #EEEEEE;

    border-radius: 10px;



    display: flex;

    align-items: center;

    justify-content: center;



    min-width: 70px;

    min-height: 57px;

}



.prof__minhas__tarefas__filtro .filtro-input {

    --input-bg: #EEE;

    --input-border-color: #EEE;

    --input-border-radius: 10px;

    --input-border-width: 1px;

    --input-padding-y: 15.5px;



    flex-grow: 1;



    position: relative;

}



.prof__minhas__tarefas__filtro .filtro-input .form-control,

.prof__minhas__tarefas__filtro .filtro-input .form-select {

    --bs-body-bg: var(--input-bg);

    --bs-border-color: var(--input-border-color);

    --bs-border-radius: var(--input-border-radius);

    --bs-border-width: var(--input-border-width);



    position: relative;

    z-index: 1;



    padding-top: var(--input-padding-y);

    padding-bottom: var(--input-padding-y);

}



.prof__minhas__tarefas__filtro .filtro-label {

    position: absolute;

    z-index: 2;



    left: calc(.75rem + var(--input-border-width) - 5px);

    top: 0;



    transform: translateY(-50%);



    font-size: 12px;



    display: inline-block;

    padding: 0 5px;

    background: linear-gradient(to bottom, var(--bs-body-bg) 0%, var(--bs-body-bg) 50%, var(--input-bg) 50%);



    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;



    max-width: calc(

        100% - (

            ( .75rem + var(--input-border-width) ) * 2

        )

    );

}



.prof__minhas__tarefas__filtro .btn {

    --bs-btn-hover-bg: var(--kry-laranja);

    --bs-btn-active-bg: var(--kry-laranja);

    --bs-btn-focus-bg: var(--kry-laranja);



    --bs-btn-hover-color: var(--kry-text-on-laranja);

    --bs-btn-active-color: var(--kry-text-on-laranja);

    --bs-btn-focus-color: var(--kry-text-on-laranja);



    --bs-btn-padding-y: 15.5px;

}



@media (max-width: 500px) {

    .prof__minhas__tarefas__filtro .btn{

        --bs-btn-bg: var(--kry-laranja);

        --bs-btn-color: var(--kry-text-on-laranja);



        width: 100%;

    }



    .prof__minhas__tarefas__filtro .filtro-input + .filtro-input{

        width: 100%;

    }

}



.order-by .dropdown-menu{

    --bs-dropdown-link-active-bg: var(--kry-laranja);

    --bs-dropdown-link-active-color: var(--kry-text-on-laranja);

}



.table__tarefas thead th{

    color: #969696;

}



.table__tarefas td {

    vertical-align: middle;

}



.table__tarefas .btn{

    --bs-btn-border-width: 2px;

    --bs-btn-font-weight: bold;

    white-space: nowrap;

}



.table__action{

    display: flex;

    gap: 24px;

}



.table__footer {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.5rem;

}



@media (max-width: 500px) {

    .table__footer {

        display: flex;

        flex-wrap: wrap;

        gap: 1.5rem;

        justify-content: center;

        margin-top: 40px;

    }

}



.table__exibir {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.table__exibir .btn {

    --bs-btn-border-color: #C2B7A9;

    --bs-btn-color: #000;

    --bs-btn-bg: #FFF;



    --bs-btn-hover-bg: #efefef;

    --bs-btn-hover-color: #000;

    --bs-btn-hover-border-color: #C2B7A9;

}



.table__paginacao {

    text-align: center;

}



.table__paginacao .btn {

    --bs-btn-border-width: 0;

    --bs-btn-color: #000;

}



.dashboard__menu {

    background: #EEEEEE;

    padding-top: 40px;

    padding-bottom: 40px;

}



@media (max-width: 991.98px) {

    .dashboard{

        --dashboard__menu-transform: translateX(-270px);

        --dashboard__content-transform: translateX(0);



        width: 100%;

        overflow: hidden;

    }



    .dashboard.open {

        --dashboard__menu-transform: translateX(0);

        --dashboard__content-transform: translateX(var(--dashboard-menu-width));

    }



    .dashboard__content{

        width: 100%;

        transition: transform .4s linear;

        transform: var(--dashboard__content-transform);

    }



    .dashboard__menu{

        width: calc(100% - 2rem);

        height: calc(100vh - var(--topo-height));

        max-width: 270px;

        position: fixed;

        left: 0;

        top: var(--topo-height);

        transition: transform .4s linear;

        transform: var(--dashboard__menu-transform);

        overflow: auto;

    }



    #app:has(.dashboard) .btn__toggle__dashboard__menu{

        display: block;

    }

}



@media (min-width: 992px) {

    .dashboard {

        display: grid;

        grid-template-columns: minmax(min(365px, 40%), 365px) 1fr;

    }

}



.btn__toggle__dashboard__menu{

    --bs-btn-color: #FFF;

    display: none;

}



.btn__toggle__dashboard__menu[aria-expanded="true"] .fas{

    --fa: "\f060";

    --fa--fa: "\f060\f060";

}



.dashboard__menu__list {

    padding: 0;

    margin-bottom: 0;

    list-style: none;



    display: flex;

    flex-direction: column;


}



@media (min-width: 992px ) {

    .dashboard__menu__list {

        position: sticky;

        top: calc(var(--topo-height) + 1rem);

    }

}



.dashboard__item {

    --dashboard__item-transform: scaleX(0);

    --dashboard__item-color: #221F25;



    color: var(--dashboard__item-color);

    font-size: 20px;

    text-decoration: none;



    display: block;

    padding: 15px 15px;



    position: relative;

    perspective: 3px;



    &::before {

        content: '';

        position: absolute;

        left: 0;

        top: 0;

        z-index: -1;



        width: 100%;

        height: 100%;



        background: var(--kry-laranja);



        transition: transform .2s linear;

        transform: var(--dashboard__item-transform);

        transform-origin: left center;

    }

}



.dashboard__item:is(:hover, .active) {

    --dashboard__item-transform: scaleX(1);

    --dashboard__item-color: #FFF;

}



.dashboard__content{

    padding: 50px 30px;

}



.dashboard__content h1{

    color: #221F25;

    font-size: 30px;

    font-weight: bold;

}



.dashboard__content h2{

    color: #221F25;

    font-size: 25px;

    

    &:not([class^="font-weight"]) {

        font-weight: bold;

    }

}



.dashboard__content h3{

    color: #221F25;

    font-size: 20px;

    

    &:not([class^="font-weight"]) {

        font-weight: bold;

    }

}



.dashboard__content .btn {

    --bs-btn-border-width: 2px;

}



.tarefa__resumo__table{

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(

		min(130px, 100%), 1fr

	));



	border-top: 1px solid #C2B7A9;

	border-bottom: 1px solid #C2B7A9;

	padding-top: 20px;

	padding-bottom: 20px;

}



.tarefa__resumo__table__column{
	flex-grow: 1;
	font-size: 17px;
	color: #000;
    margin: 0 15px;
}



.tarefa__resumo__table__th{

	font-weight: bold;

}



@media (max-width: 500px) {

	.tarefa__resumo__table__th {

		background: #efefef;

	}



	.tarefa__resumo__table__td,

	.tarefa__resumo__table__th{

		padding: .375rem .75rem;

	}

}



.material__download{

    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: center;



    text-align: center;

    text-decoration: none;

    color: #221F25;



    [class^="fa"] {

        font-size: 70px;

    }



    &:hover {

        color: var(--kry-laranja);

    }

}



.form-date,

.form-time{

    display: block;

    border: none;

    outline: none;

    font-size: 20px;

}



.form-time {

    background-image: url('../images/timepicker.png');

    background-position: .375rem 50%;

    background-repeat: no-repeat;

    padding-left: calc(.75rem + 40px);

    line-height: 40px;

}



.form-date {

    background-image: url('../images/datepicker.png');

    background-position: .375rem 50%;

    background-repeat: no-repeat;

    padding-left: calc(.75rem + 40px);

    line-height: 40px;

}



.form-date input {

    pointer-events: none;

}



.form-check{

    padding-left: 35px;

}



.form-check-input{

    width: 25px;

    height: 25px;

    margin-top: 0;

    margin-right: 10px;

}



.card__user {

    --avatar-size: 100px;

    --avatar-border-width: 2px;

    --avatar-border-color: #CCC;

    --avatar-border-radius: 50%;



    display: grid;

    grid-template-columns: var(--avatar-size) calc(100% - var(--avatar-size));

}



.card__user__avatar {

    display: flex;

    width: var(--avatar-size);

    height: var(--avatar-size);

    border: var(--avatar-border-width) solid var(--avatar-border-color);

    

    border-radius: var(--avatar-border-radius);

}



.card__user__avatar img {

    border-radius: var(--avatar-border-radius);

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.card__user__body{

    align-self: center;

    padding-left: 1rem;

}



.card__user__title{

    font-weight: bold;

    font-size: 20px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.card__user__subtitle{

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.select-multiple-value{

    min-height: 40px;

}



.select-multiple select {

    display: none;

}



.dropdown-menu.select-multiple-options{

    width: 100%;

    max-height: 300px;

    overflow: auto;

}



.select-multiple-selected-option{

    background: #D9D9D9;

    color: #221F25;

}



.select-multiple-options .dropdown-item > * {

    pointer-events: none;

}



.select-multiple:has(.select-single) .form-control{

    position: relative;

    padding-right: calc(1.5rem + 1ch);

}



.select-multiple:has(.select-single) .form-control::before{

    content: "\f078";

    

    position: absolute;

    right: .75rem;

    top: .375rem;

    z-index: 1;

    

    font-family: "Font Awesome 6 Free";

    font-size: 1rem;

    font-weight: 900;

}



.select-multiple:has(.select-single) .select-multiple-selected-option{

    background: var(--bs-body-bg);

    color: var(--bs-body-color);

    padding: 0 0;

    font-size: 1rem;

}



.form-file-droparea{

    --form-file-border-radius: 10px;



    border: 1px solid #CEC3B5;

    border-radius: var(--form-file-border-radius);

    background: #EEEEEE;

    padding: 2rem;



    position: relative;



    font-size: 20px;

    font-weight: bold;

    text-align: center;

}



.form-file input {

    position: absolute;

    left: 0;

    top: 0;

    z-index: 2;



    width: 100%;

    height: 100%;

    border-radius: var(--form-file-border-radius);



    opacity: 0;

}



.form-file-label{

    background: url('../images/book-drop-file.png') center top no-repeat;



    padding-top: 80px;

    min-width: 70px;

}



.form-file-files{

    padding-left: 0;

    list-style: none;



    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.form-file-files:not(:empty) {

    margin-top: 30px;

}



.form-file-file{

    display: flex;

    flex-direction: column;

    gap: 10px;



    width: 100%;

    max-width: 214px;



    text-align: center;

}



.form-file-file [class^="fa"] {

    font-size: 70px;

}



.form-file-filename{

    font-weight: bold;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.font-weight-100 {

    font-weight: 100;

}



.font-weight-300 {

    font-weight: 300;

}



.font-weight-400 {

    font-weight: 400;

}



.font-weight-500 {

    font-weight: 500;

}



.font-weight-600 {

    font-weight: 600;

}



.font-weight-700 {

    font-weight: 700;

}



.font-weight-800 {

    font-weight: 800;

}



.font-weight-900 {

    font-weight: 900;

}



.lista__tarefas{

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.tarefa {

    --tarefa-padding-x: 20px;

    --tarefa-padding-y: 30px;



    --tarefa-border-width: 2px;

    --tarefa-border-color: transparent;



    --tarefa__flag-bg: #CCC;

    --tarefa__flag-color: #444;



    background-color: #EEEEEE;

    padding: var(--tarefa-padding-y) var(--tarefa-padding-x);

    

    border-radius: 5px;

    border: var(--tarefa-border-width) solid var(--tarefa-border-color);



    display: flex;

    gap: 1.5rem;



    position: relative;

}



@media (max-width: 767.98px) {

    .tarefa {

        flex-direction: column;

        text-align: center;

    }

}



@media (min-width: 768px) {

    .tarefa {

        display: grid;

        grid-template-columns: 1fr min-content;

        grid-gap: 1.5rem;

    }

}



.tarefa__flag {

    position: absolute;

    right: var(--tarefa-padding-x);

    top: 0;

    transform: translateY(-50%);



    background: var(--tarefa__flag-bg);

    padding: .375rem .75rem;

    border-radius: .25rem;

    

    color: var(--tarefa__flag-color);

    font-size: 13px;

}



.tarefa__body,

.tarefa__footer{

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.tarefa__body {

    flex-grow: 1;

}



.tarefa__tipo,

.tarefa__title{

    margin-bottom: 0;

    font-weight: 700;

    font-size: 17px;

}



.tarefa__data{

    white-space: nowrap;

}



.tarefa__footer .btn {

    margin-top: auto;

}



.tarefa:has(.tarefa__flag){

    --tarefa-border-color: var(--tarefa__flag-bg);

}



.tarefa:has(.tarefa__flag__green){

    

    --tarefa__flag-bg: #0FAE14;

    --tarefa__flag-color: #FFF;

}



.tarefa:has(.tarefa__flag__orange){

    

    --tarefa__flag-bg: #EA5A16;

    --tarefa__flag-color: #FFF;

}



.tarefa:has(.tarefa__flag__danger){

    

    --tarefa__flag-bg: var(--bs-danger);

    --tarefa__flag-color: #FFF;

}



.tarefa:has(.tarefa__flag__warning){

    

    --tarefa__flag-bg: var(--bs-warning);

    --tarefa__flag-color: #232323;

}



.tarefa:has(.tarefa__flag__primary){

    

    --tarefa__flag-bg: var(--bs-primary);

    --tarefa__flag-color: #FFF;

}



.tarefa__actions{

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    align-items: center;    

}



@media (max-width: 767.98px) {

    .tarefa__actions{

        text-align: center;

    }



    .tarefa__actions .btn-link {

        flex-grow: 1;

    }



    .tarefa__actions .btn-ver {

        width: 100%;

    }

}



@media (min-width: 768px) {

    .tarefa__actions {

        grid-column: 1/-1;

    }



    .tarefa__actions .btn-ver {

        margin-left: auto;

        min-width: 120px;

    }

}



.card__extrato{

    background: #EEEEEE;

    padding: 20px;

    border-radius: 10px;



    display: flex;

    flex-wrap: wrap;

    gap: 1.5rem;

    align-items: center;

}



.card__extrato__saldo{

    font-size: 25px;

    flex-grow: 1;

    font-weight: 700;

}



.table-extrato th, 

.table-extrato td {

    padding: 20px 16px;

}



.table-extrato thead th{

    color: #969696;

    font-weight: 17px;

    font-weight: 400;



    border-bottom-width: 0;

}



.table-extrato tbody td {

    border-width: 0;

}



.table-striped-green > tbody > tr:nth-of-type(2n+1) > * {

    --bs-table-color-type: #000;

    --bs-table-bg-type: #D8F1D7;

}



/* PAGES ALUNO */



.telas__aluno header{

    background: #CEC3B5;

    color: #221F25;



    position: sticky;

    top: 0;

    z-index: 90;

}



.telas__aluno .drop-chat .btn,

.telas__aluno .drop-notificacoes .btn,

.telas__aluno .drop-user .btn

{

    --bs-btn-color: #221f25;

    --bs-btn-hover-bg: rgba(0,0,0,.17);

    --bs-btn-hover-color: #221f25;

}



/* PAGE LOGIN - ADM */

.page__login__adm{

    background-image: url(../images/bg-login-adm.png);

    color: #FFF;

}



/* PAGE LOGIN - ALUNO */

.page__login__aluno{

    background-image: url(../images/bg-login-aluno.png);

    color: #221F25;



    .form-group .alert {

        margin-top: .75rem;

    }



    .alert {

        --bs-alert-arrow-color: transparent;



        position: relative;



        &::before{

            content: '';

            position: absolute;

            right: calc(var(--bs-alert-padding-x) - 5px);

            bottom: 100%;



            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid var(--bs-alert-arrow-color);

        }

    }



    .alert-success {

        --bs-alert-arrow-color: var(--bs-green-500);



        background: var(--bs-green-500);

        border-color: var(--bs-green-700);

        color: var(--bs-green-100);

    }

    

    .alert-danger {

        --bs-alert-arrow-color: var(--bs-red-500);

        

        background: var(--bs-red-500);

        border-color: var(--bs-red-700);

        color: var(--bs-red-100);

    }

}



.page__login__aluno .link__esqueci__senha {

    color: #221F25;

}



.page__login__aluno .form-label {

    font-weight: 700;

    margin-bottom: .75rem;

}



.page__login__aluno .form-control {

    --bs-border-width: 2px;



    font-size: clamp(1rem, 0.6875rem + 1vw, 1.25rem);



    &::placeholder {

        color: transparent;

    }

}



.page__login__aluno header {

    text-align: center;

    margin-bottom: 108px;

    padding-top: 35px;

}



.page__login__aluno h1{

    margin-bottom: 80px;

    font-weight: 700;

    font-size: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);

}





.resposta__em__espera {

    position: relative;

    perspective: 3px;

    padding-top: 40px;

    padding-bottom: 40px;

}



.resposta__em__espera::before {

    content: '';

    position: absolute;

    top: 0;

    left: -30px;

    z-index: -1;



    background: #EEEEEE;

    width: 100vw;

    height: 100%;

}



.table-extrato .text-truncate {

    max-width: 215px;

}



.form-rating input[type="radio"] {

    position: fixed;

    top: -100vh;

}



.form-rating-stars .fas{

    cursor: pointer;

}



.form-rating:has(input:nth-child(5):checked) .fas{

    color: #F2A104;

}



.form-rating:has(input:nth-child(4):checked) .fas:not(:last-child){ 

    color: #F2A104;

}



.form-rating:has(input:nth-child(3):checked) .fas:nth-child(1),

.form-rating:has(input:nth-child(3):checked) .fas:nth-child(2),

.form-rating:has(input:nth-child(3):checked) .fas:nth-child(3)

{

    color: #F2A104;

}



.form-rating:has(input:nth-child(2):checked) .fas:nth-child(1),

.form-rating:has(input:nth-child(2):checked) .fas:nth-child(2)

{

    color: #F2A104;

}



.form-rating:has(input:nth-child(1):checked) .fas:nth-child(1)

{

    color: #F2A104;

}



.form-rating-stars .fas:hover{

    color: #F2A104;

}



.form-rating-stars:has(.fas:nth-child(2):hover) .fas:nth-child(1),

.form-rating-stars:has(.fas:nth-child(2):hover) .fas:nth-child(2),



.form-rating-stars:has(.fas:nth-child(3):hover) .fas:nth-child(1),

.form-rating-stars:has(.fas:nth-child(3):hover) .fas:nth-child(2),



.form-rating-stars:has(.fas:nth-child(4):hover) .fas:nth-child(1),

.form-rating-stars:has(.fas:nth-child(4):hover) .fas:nth-child(2),

.form-rating-stars:has(.fas:nth-child(4):hover) .fas:nth-child(3),



.form-rating-stars:has(.fas:nth-child(5):hover) .fas

{

    color: #F2A104;

}



.card__resumo__professor .avatar{

    --avatar-font-size: 35px;

    display: inline-flex;

}



.cards__professor{

    text-align: center;

    position: sticky;

    top: calc(var(--topo-height) + 1rem);

    font-size: 16px;

}



.cards__professor__nome {

    font-weight: 700;

    font-size: 20px;

}



.cards__professor__instituicao,

.cards__professor__area {

    color: #A3A1A1;

}



.card__nota__professor .card-body{

    display: flex;

    flex-direction: column;

}

.card__nota__professor .card__nota__professor__nota{

    font-size: 70px;

    font-weight: 700;

}



.card__nota__professor__stars .fas{

    position: relative;

}



/*Estrela cheia*/

.card__nota__professor__stars:is([data-nota="5"]) .fas,

.card__nota__professor__stars:is([data-nota="4"], [data-nota^="4."]) .fas:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)),

.card__nota__professor__stars:is([data-nota="3"], [data-nota^="3."]) .fas:is(:nth-child(1), :nth-child(2), :nth-child(3)),

.card__nota__professor__stars:is([data-nota="2"], [data-nota^="2."]) .fas:is(:nth-child(1), :nth-child(2)),

.card__nota__professor__stars:is([data-nota="1"], [data-nota^="1."]) .fas:is(:nth-child(1))

{

    color: #F2A104;

}



/*Meia Estrela*/

.card__nota__professor__stars:is([data-nota^="1."]) .fas:nth-child(2)::after,

.card__nota__professor__stars:is([data-nota^="2."]) .fas:nth-child(3)::after, 

.card__nota__professor__stars:is([data-nota^="3."]) .fas:nth-child(4)::after, 

.card__nota__professor__stars:is([data-nota^="4."]) .fas:nth-child(5)::after 

{

    content: "\f089";

    color: #F2A104;

    position: absolute;

    left: 0;

    top: 0;

}



.comentarios{

    display: flex;

    flex-direction: column;

    gap: 40px;

}



.comentario .avatar {

    --avatar-font-size: 35px;

}



@media (min-width: 768px) {

    .comentario {

        display: grid;

        grid-template-columns: min-content 1fr min-content;

        grid-gap: 1.5rem;

    }



    .comentario__avatar {

        grid-column: 1/2;

    }



    .comentario__data__nota {

        grid-column: 3/4;

        margin-top: 30px;

    }



    .comentario__body {

        grid-column: 2/3;

    }



    .comentario__avatar,

    .comentario__data__nota,

    .comentario__body {

        grid-row: 1/2;

    }



    .card__indicacao{

        grid-row: 2/3;

        grid-column: 1/3;

        margin-right: auto;

    }

}



.comentario__text::after {

    content: '';

    display: table;

    clear: both;

}



.comentario__text p:last-child{

    margin-bottom: 0;

}



.comentario__data__nota {

    white-space: nowrap;

    text-align: center;

    font-size: 13px;

    color: #9F9999;



    display: flex;

    flex-direction: column;

    gap: 10px;

}



.comentario__autor{

    font-weight: 700;

    font-size: 20px;

}



.card__indicacao{

    padding: .375rem 1.5rem;

    border-radius: 1.5rem;

    font-weight: 700;



    &.indica {

        background: #7BD95F;

        color: #000;

    }



    &.nao-indica {

        background: var(--bs-danger);

        color: #FFF;

    }



}



/*Estrela cheia*/

.ratting:is([data-nota="4"], [data-nota^="4."]) .fas:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)),

.ratting:is([data-nota="3"], [data-nota^="3."]) .fas:is(:nth-child(1), :nth-child(2), :nth-child(3)),

.ratting:is([data-nota="2"], [data-nota^="2."]) .fas:is(:nth-child(1), :nth-child(2)),

.ratting:is([data-nota="1"], [data-nota^="1."]) .fas:is(:nth-child(1)),

.ratting:is([data-nota="5"]) .fas

{

    color: #F2A104;

}



/*Meia Estrela*/

.ratting:is([data-nota^="1."]) .fas:nth-child(2)::after,

.ratting:is([data-nota^="2."]) .fas:nth-child(3)::after, 

.ratting:is([data-nota^="3."]) .fas:nth-child(4)::after, 

.ratting:is([data-nota^="4."]) .fas:nth-child(5)::after 

{

    content: "\f089";

    color: #F2A104;

    position: absolute;

    left: 0;

    top: 0;

}



.todas__avaliacoes{

    list-style: none;

    padding-left: 0;

    margin-bottom: 0;



    display: flex;

    flex-direction: column;

    gap: .5rem;



    margin-top: 1rem;

}



.todas__avaliacoes__link {

    display: flex;

    gap: 10px;

    align-items: center;



    padding: .5rem;

    border-left: 4px solid transparent;

    

    color: #A3A1A1;

    text-decoration: none;



    & > * {

        pointer-events: none;

    }



    .fa-chevron-right{

        color: transparent;

        pointer-events: none;

    }



    &.active,

    &:hover {

        color: var(--kry-laranja);

        border-color: var(--kry-laranja);

    }

}



.todas__avaliacoes__link.active .fa-chevron-right {

    color: var(--kry-laranja);

}



.todas__avaliacoes__percentage{

    display: block;

    flex-grow: 1;



    height: .4em;

    border-radius: .4em;

    background: rgba(0,0,0,.175);



    position: relative;

}



.todas__avaliacoes__percentage::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;



    width: 100%;

    height: 100%;

    background: var(--kry-laranja);

    border-radius: .4em;



    max-width: calc(

        (var(--votos) / var(--total)) * 100%

    );

}



.comentarios[data-filtred-commentary="5"] .comentario:not(:has([data-nota="5"])) {

    display: none !important;

}



.comentarios[data-filtred-commentary="4"] .comentario:not(:has([data-nota^="4"])) {

    display: none !important;

}



.comentarios[data-filtred-commentary="3"] .comentario:not(:has([data-nota^="3"])) {

    display: none !important;

}



.comentarios[data-filtred-commentary="2"] .comentario:not(:has([data-nota^="2"])) {

    display: none !important;

}



.comentarios[data-filtred-commentary="1"] .comentario:not(:has([data-nota^="1"])) {

    display: none !important;

}



.comentarios[data-filtred-commentary] .comentario {

    animation: fadeIn 1s linear;

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



.loader{

    display: flex;

    gap: .5rem;

    justify-content: center;

}



.loader-pin {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    box-shadow: -2px 2px rgba(0,0,0,.278);



    &:nth-child(1) {

        background: #FF9200;

        animation: loaderInOut 2s linear infinite alternate;

    }



    &:nth-child(2) {

        background: #FF6928;

    }



    &:nth-child(3) {

        background: #FF4149;

    }



    &:nth-child(4) {

        background: #FF1C6E;

    }



    &:nth-child(5) {

        background: #FF0082;

    }

}



@keyframes loaderInOut{

    0% {

        transform: translateX(0px);

    }



    100% {

        transform: translateX(calc(500% + 2.5rem));

    }

}



.card__deck__adm {

    --gap: 1.5rem;

    --columns: 1;



    display: flex;

    flex-wrap: wrap;

    gap: var(--gap);

}



@media (min-width: 768px) {

    .card__deck__adm {

        --columns: 2;

    }

}



@media (min-width: 992px) {

    .card__deck__adm {

        --columns: 3;

    }

}



.card__deck__item{

    padding: 1rem;

    border-radius: 5px;

    background: #EEE;

    border: 1px solid #CEC3B5;

    width: 100%;

    max-width: calc(

        (100% - (

            (var(--columns) - 1) * var(--gap)

        )) / var(--columns)

    );

    text-align: center;

    font-size: 20px;

}



.card__deck__item__title{

    font-size: 60px;

    font-weight: 700;

}



.telas__adm header{

    background: var(--kry-laranja);

}



.telas__adm .btn-tray {

    --bs-btn-hover-bg: rgba(0,0,0,.2);

    --bs-btn-hover-color: #FFF;

}

.whatsapp img{
    width: 90px;
    position: fixed;
    z-index: 10000;
    bottom: 90px;
    right: 20px;

}

.botoes-topo{
    display: flex;
    justify-content: space-between;
}

.segura-data{
    display: flex;
}

.segura-data #prazo{
    width: 45%;
}

.segura-descricao{
    display: flex;
    justify-content: center;
}

.proposta-data .segura-data{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.proposta-data .segura-data .data-proposta, .proposta-data .segura-data .hora-proposta, .proposta-data .segura-data .sem-horario-check{
    width: 35%;
}
@media(max-width: 768px){
    .text-center-mobile{
        text-align: center!important;
    }

    .justify-center-mobile{
        justify-content: center!important;
    }
    .segura-descricao{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .botoes-topo{
        flex-direction: column;
        align-items: center;
    }

    .botoes-topo .btn-orange-green{
        width: 350px;
        height: 40px;
        margin-bottom: 20px;
    }

    .tarefa__actions .btn-danger{
        width: 100%;
    }

    .botoes-topo .segura-texto{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .convencional{
        text-align: center;
    }
    .segura-data{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .segura-data #prazo, .segura-data #prazo-hora{
        width: 100%;
    }

    .proposta-data .segura-data{
        flex-direction: column;
    }

    .proposta-data .segura-data .data-proposta, .proposta-data .segura-data .hora-proposta, .proposta-data .segura-data .sem-horario-check{
        width: 100%;
    }

}