/**
 * Elementos do projeto
 */

html{scroll-behavior: smooth}
::-webkit-scrollbar{width:5px; height: 5px;}
::-webkit-scrollbar-thumb{background-color:rgba(255, 255, 255, .1);border-radius:2px}

/*! Overlay Close */
#overlayClose{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99; background-color: transparent; transition: background-color .2s}
#overlayClose.background{background-color: rgba(0, 0, 0, .6);}

/* Slick */
.slick-item img{transition:500ms filter linear; width: 100%; height: auto; display: block;}
.slick-dragger{cursor: move; z-index: 1;}
.slick-dragger::after{content:"";display:block;position:absolute;width:100%;height:100%;z-index:2;top:0;left:0}
.slick-item{transition: padding .2s;}
.slick-transition{transition: top .3s, left .3s}
.slick-btn-hidden{opacity:0;visibility:hidden}

/* Conteúdo Principal */
.main__content{min-height: calc(100vh - 143px)}
@media (min-width:1800px){
  .main__content{padding: 16px;padding-left: 260px; min-height: calc(100vh - 185px);}
}

/**
 * Footer
 */
.main_footer p{color: var(--secondary); font-size: 12px; }
.main_footer .heart{color: var(--pink);}
 
@media (min-width:1800px){
  .main_footer{padding: 16px;padding-left: 260px;}
}



/* Botões */
.btn__main{background:var(--main);display:flex;justify-content:center;align-items:center;color:#fff;border-radius:8px;border:0;transition:background-color .2s;width:267px;height:48px;font-weight:700;font-size:16px;line-height:24px}
.btn__main:hover{background-color: var(--main-hover);}

.btn__main{background:var(--main);display: flex;justify-content:center;align-items:center;color:#fff;border-radius:var(--radius);border:0;transition:background-color .2s;width:200px;height:40px;font-weight:500;font-size:16px;line-height:24px;cursor: pointer; fill: #fff;}
.btn__main:not(.sending):hover{background-color:var(--main-dark)}

.btn__main svg{display: block; height: 12px; margin-right: 5px;}

.btn__main .loader{position: absolute; display: none; border-radius: inherit; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; }
.btn__main .loader::after{content: ""; border: 2px solid #fff; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; width: 10px; height: 10px;  -webkit-animation: spin_loader_btn .5s linear infinite;  animation: spin_loader_btn .5s linear infinite;}
.btn__main.sending .loader{display: flex;}
form.submitting .loader{display: flex;}

@keyframes spin_loader_btn{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Sections */
.section__title{font-size: 18px; line-height: 24px; font-weight: 700;}
@media (min-width:992px){
  .section__title{font-size:20px;line-height:26px}
}

/**
 * Box Posts
 */

.post__box{width: 100%; position: relative;}
.post__box .cover{position: relative; display: flex; width: 100%; aspect-ratio: 16/9; background-color: #000; overflow: hidden; border-radius: var(--radius); box-shadow: 0px 0px 10px rgba(0, 195, 255, 0);transition: box-shadow .2s;}
.short__box .cover{aspect-ratio: 9/16}
.post__box:hover:not(.post__list) .cover{box-shadow: 0px 0px 10px rgba(0, 225, 255, 0.1);}
.post__box .time,
.post__box .new{position: absolute; display: flex; align-items: center; justify-content: center; bottom: 10px; right: 10px; padding-left: 10px; padding-right: 10px; height: 20px; color: var(--secondary); background-color: var(--dark); border-radius: 20px; font-size: 12px; line-height: .9; padding-top: 1px;}
.post__box .favorite{position: absolute; top: 10px; right: 10px; fill:var(--pink)}
.post__box svg{height: 20px; display: block;}
.post__box .new{background-color: var(--main); width: 50px; color: #fff; top: 10px; left: 10px;}
.post__box .content{display: block; font-size: 14px; line-height: 20px; padding: 12px;}
.post__box .title{display: block; margin-bottom: 5px; line-height: 1.5;}
.post__box .category{font-weight: bold; position: relative;}
.post__box .desc{font-size: 12px; line-height: 20px; margin-top: 10px; color: var(--secondary); width: 100%;}
.post__box .category::after{content: ""; display: inline-block; margin-left: 10px; margin-right: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main); vertical-align: middle; margin-bottom: 2px;}
.post__box .title, .post__box .category{transition: color .2s;}
.post__box:hover .title, .post__box:hover .category{color: var(--main);}

.post__list{display: flex; align-items: center; padding: 4px; }
.post__list .cover{max-width: 150px;}
.post__list .title_alt{font-weight:600; font-size: 12px; margin-bottom: 10px;} 
.post__list .content_alt{font-size: 11px}
.post__list .category{font-weight: 400;}

@media (min-width:1200px){
  .post__box .title{font-size: 1rem;}
  .post__box .category, .post__box .date{font-size: 12px;}
  .post__list .content{ display: none;}
  .post__list .cover{max-width: 100%;}
}

@media (min-width:1600px){
  .post__list{padding: 0;}
  .post__list:not(:last-child){margin-bottom: 6px;}
  .post__list .cover{max-width: 150px;}
  .post__list .content{ display: flex; flex-direction: column; flex: 1; padding: 0; margin-left: 10px;}
}

/**
 * Box Modal e short
 */

.playlist__box{background-color: var(--dark); border-radius: var(--radius);}
@media (min-width:1200px){.playlist__box{aspect-ratio:98/170;overflow-y:auto}}

/**
 * Box Modal e short
 */

.box__modal{position: fixed; display: flex; justify-content: center; align-items: flex-start; align-content: center; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, top .2s; padding-top: 100px;}
.box__modal.visible{opacity: 1; visibility: visible;}

.modal__overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .8}
.modal__close{display: block; position: absolute; top: 20px; right: 20px; background-color: #fff; width: 30px; height: 30px; color: #000; text-align: center; line-height: 30px; z-index: 1; font-size: 20px; border-radius: 3px; opacity: .8; cursor: pointer;}

/* Return */
.box__modal .modal_content{background-color: var(--dark); box-shadow: 0 0 20px var(--main-shadow); z-index: 1; border-radius: 10px; width: 100%; max-width:500px; padding: 2rem; text-align: center; user-select: none;}
.box__modal .modal_content .title{font-size: 1.4rem; font-weight: 800; color: var(--main); display: block; margin-bottom: 1.5rem; margin-top: 1rem;}
.box__modal .modal_content .desc{font-size: 1rem; display: block; margin-bottom:2rem; line-height: 1.5; color: var(--secondary);}
.box__modal .modal_content .btn{border-radius: 5px; min-width: 80px;font-size: 1rem; font-weight: 700;}
@media (min-width:768px){.box__modal{padding-bottom: 0}}



/**
 * Snippets
 */

/* Box Cookie */
.box--cookie{position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background-color: var(--dark); box-shadow: 0 0 13px rgba(0, 0, 0, .1); border-radius: 10px; width: 90%; max-width: 750px; padding:2rem; z-index: 9999;}
.box--cookie p{line-height: 22px; color: var(--secondary); font-size: 14px; margin-bottom: 1rem;}
.box--cookie a{color:var(--main)}
.box--cookie .btn{background-color: var(--main-dark); color: var(--secondary); padding: 8px 2rem; font-size: 14px; font-weight: 500; border-radius: var(--radius);}
.box--cookie .btn:hover{background-color: var(--main);}

/**
* Header
*/

.main_header{z-index: 9; background-color: var(--dark)}
.main_header .row, .main_header_space{height: 56px;}
.main_header .btn_icon{cursor: pointer; display: flex; justify-content: center; align-items: center; height: 18px; fill: var(--secondary); margin-right: 24px; transition: fill .2s;}
.main_header .btn_icon:hover{fill: #fff;}
.main_header .btn_icon svg{height: 100%; display: block; line-height: 0;}
.main_header .avatar{width: 28px; height: 28px; display: block; cursor: pointer;}
.main_header .login_user .btn{display: flex; align-items: center; justify-content: center; width: 60px; height: 26px; color: #fff; background-color: var(--main); border-radius: 26px; font-size: 12px; padding-top: 5px; line-height: 1; font-weight: 600;}

/* Logo Principal */
.main_logo svg{height: 24px; display: block;}
@media (min-width:992px){
  .main_logo svg{height: 30px}
  .main_header .row,.main_header_space{height: 70px}
  .main_header .avatar{width: 32px;height: 32px}
  .main_header .login_user .btn{height:28px;width:80px;font-size:14px}
}

/* Search */
#mainSearch{position: fixed; z-index: 100; top: -60px; left: 50%; transform: translateX(-50%); opacity: 0; transition: top .2s, opacity .2s;}
#mainSearch.visible{top: 80px; opacity: 1;}

.main_search{position: relative;display: flex; padding: 16px; width: calc(100% - 32px); max-width: 360px; border-radius: var(--radius); background-color: var(--dark); box-shadow: 0px 0px 15px var(--main-shadow);}
.main_search form{border: 1px solid var(--main-dark); border-radius: var(--radius); width: 100%;}
.main_search input::placeholder{color:#666;opacity:1; line-height: 1;}
.main_search input{padding-left: 16px; background-color: transparent; font-size: 14px; color: var(--secondary); line-height: 1; transition: fill .2s; height: 40px; width: calc(100% - 40px);}
.main_search button{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; right: 0; fill: var(--main-dark); transition: fill .2s;}
.main_search svg{display: block; height: 16px;}
.main_search input:focus ~ button{fill: var(--main);}
#btnSearch svg{height: 15px;} 

@media (min-width:480px){
  .main_search{padding: 32px; max-width: 400px; }
}

/* Ícone Nav Mobile */
#navToggle{width:22px;cursor:pointer; margin-right: 16px;}
#navToggle span,
#navToggle::before,
#navToggle::after{content:'';top: 0;position:relative;display:block;width:100%;height:3px;background-color:#fff;border-radius:3px;transition:transform .2s,opacity .2s,visibility .2s, top .2s;}
#navToggle span{margin-top: 4px;margin-bottom:4px;}
#navToggle.visible span{opacity: 0; visibility: hidden}
#navToggle.visible::before {transform:rotate(-45deg); top: 7px}
#navToggle.visible::after {transform: rotate(45deg); top: -7px}
@media (min-width:1800px){#navToggle{display: none}}

/* Nav Sidebar */
#navSidebar{position: fixed; width: 250px; height: calc(100vh - 60px); top: 60px; left: -255px; background-color: var(--dark);padding: 32px; transition: left .2s; overflow-y: auto; z-index: 98;}
#navSidebar.visible{left: 0;}

#navSidebar::-webkit-scrollbar{width:2px}
#navSidebar::-webkit-scrollbar-thumb{background-color:rgba(255, 255, 255, .05);border-radius:2px}

#navSidebar .nav_links,
#navSidebar .nav_courses{display: flex; flex-direction: column; align-items: flex-start;}

#navSidebar .nav_links a,
#navSidebar .nav_courses a{display: flex; align-items: center; font-size: 1rem;fill: #fff; transition: fill .2s, color .2s; line-height: 24px;}

#navSidebar .nav_links_alt a{font-size: .85rem;}

#navSidebar .nav_links a:not(:last-child),
#navSidebar .nav_courses a:not(:last-child){margin-bottom: 20px;}

#navSidebar .nav_courses .icon{display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; margin-right: 16px;}
#navSidebar .nav_courses svg{display: block; height: 16px;}


#navSidebar .nav_courses img{width: 30px; height: 30px; margin-right: 16px;}


#navSidebar .nav_links a:hover,
#navSidebar .nav_courses a:hover,
#navSidebar .nav_links a.active{color: var(--main);}

#navSidebar .nav_links a:hover,
#navSidebar .nav_links a.active{fill:var(--main)}

#navSidebar .nav_links .icon{display: flex; justify-content: center; align-items: center; width: 20px; height: 100%;margin-right: 16px}
#navSidebar .nav_links svg{display: block; line-height: 0; height: 18px;}
#navSidebar .nav_links_alt svg{display: block; line-height: 0; height: 14px; margin-bottom: 3px;}


/* #navSidebar .nav_courses img{width: 26px; height: 26px; margin-right: 16px;} */

#navSidebar .divider{display: block; width: 100%; height: 1px; background-color: #fff; opacity: .1;}

#navSidebar .nav_title{font-size: 20px; display: block; width: 100%; margin-bottom: 32px; font-weight: bold;}
@media (min-width:1800px){#navSidebar{left: 0}}

#navUser{position: fixed; width: 200px; top: 75px; right: 32px; background-color: var(--dark); transition: left .2s; z-index: 100; border-radius: var(--radius); opacity: 0; visibility: hidden;}
#navUser.visible{opacity: 1; visibility: visible; }
#navUser nav{display: flex; flex-direction: column; padding: 16px;}
#navUser a{display: flex; align-items: center; fill: var(--secondary); color: var(--secondary); font-size: 14px; width: 100%; height: 40px;  padding-left: 16px; padding-right: 16px; border-radius: var(--radius);}
#navUser a:not(:last-child){margin-bottom: 10px;}
#navUser a:hover{background-color: var(--main-dark);}
#navUser .icon{display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 10px;}
#navUser svg{height: 14px;}


/**
 * Shorts
 */

#shortsSlick{overflow: hidden;}
#shortsSlick .slick-item{padding-left: 5px; padding-right: 5px;}
#shortsSlick .short__box{position: relative; border-radius: var(--radius); overflow: hidden; cursor: grab;}
#shortsSlick .short__box::after{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%}


/**
 * Card Box
 */

.card__box{background-color:var(--dark);border-radius: var(--radius);}
.card__box_title{position: relative; font-size:.9rem; padding-bottom: 10px;}
.card__box_title:before,
.card__box_title:after{content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 20px; height: 4px; border-radius: 4px; background-color: var(--main);}
.card__box_title:after{left: 25px; width: 60px;}

.card__box_desc{font-size:.85rem; padding-bottom: 10px; color: var(--paragraph);}

@media (min-width:756px){
  .card__box_title{font-size:1rem}
}