@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap);:root{--text-color:#1f2937;--text-dark-color:#f3f4f6;--color-primary:#51c84d;--color-primary-dark:#012300;--color-primary-bg:#b4e8b3;--color-secondary:#7868e6;--color-secondary-dark:#0c0a17;--color-secondary-bg:#d7d2fc;--color-danger:#b91c1c;--color-danger-bg:#fee2e2;--color-success:#0b6631;--color-success-bg:#d1fae5;--color-warning:#ff6f00;--color-warning-bg:#fef3c7;--color-grey-darkest:#1f2937;--color-grey-dark:#4b5563;--color-grey:#9ca3af;--color-grey-light:#f3f4f6;--color-grey-bg:#e5e7eb;--color-facebook:#4267b2;--color-twitter:#1da1f2;--color-google:#db4437}*{margin:0;padding:0;font-family:"Roboto",sans-serif;box-sizing:border-box}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#e5e7eb;background:var(--color-grey-bg)}::-webkit-scrollbar-thumb{background:#b4e8b3;background:var(--color-primary-bg)}::-webkit-scrollbar-thumb:hover{background:#51c84d;background:var(--color-primary)}.App{color:#1f2937;color:var(--color-grey-darkest);padding-top:3.5rem;margin:0}.container-center{align-items:center}.container,.container-center{display:flex;justify-content:center;flex-wrap:wrap}.container-column{flex-direction:column}.container-column,.container-space-around{display:flex;align-items:center;width:100%}.container-space-around{justify-content:space-around;flex-wrap:wrap}.container-space-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;width:100%}li{list-style:none}a{text-decoration:none;color:inherit}button{cursor:pointer;text-align:center}button,input{outline:none}h1,h2,h3,h4,h5,h6{margin:0}.block{display:block}.alert{width:90%;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-radius:.2rem;margin:.2rem}.alert div{margin-right:1.5rem;width:auto}.alert .ic,.alert div{display:flex;align-items:center;justify-content:center}.alert .ic{color:inherit;width:3rem;font-size:.6rem}.alert button{border:none;padding:0;font-size:1rem;font-weight:700;border-radius:50%;width:1.5rem;height:1.5rem}.alert-success,.alert-success button{color:#0b6631;color:var(--color-success);background-color:#d1fae5;background-color:var(--color-success-bg)}.alert-warning,.alert-warning button{color:#ff6f00;color:var(--color-warning);background-color:#fef3c7;background-color:var(--color-warning-bg)}.alert-danger,.alert-danger button{color:#b91c1c;color:var(--color-danger);background-color:#fee2e2;background-color:var(--color-danger-bg)}.alert-primary,.alert-primary button{color:#012300;color:var(--color-primary-dark);background-color:#b4e8b3;background-color:var(--color-primary-bg)}.alert-info,.alert-info button{color:#0c0a17;color:var(--color-secondary-dark);background-color:#d7d2fc;background-color:var(--color-secondary-bg)}.btn{outline:none;margin:.25rem;padding:.5rem 1rem;border:1px solid transparent;border-radius:.25rem;color:#fff;font-size:1rem;font-weight:400;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s}.btn:hover{box-shadow:inset 0 0 0 .5px #fff}.btn-primary{background-color:#51c84d;background-color:var(--color-primary)}.btn-secondary{background-color:#7868e6;background-color:var(--color-secondary)}.btn-success{background-color:#0b6631;background-color:var(--color-success)}.btn-danger{background-color:#b91c1c;background-color:var(--color-danger)}.btn-warning{background-color:#ff6f00;background-color:var(--color-warning)}.btn-facebook{background-color:#4267b2;background-color:var(--color-facebook)}.btn-twitter{background-color:#1da1f2;background-color:var(--color-twitter)}.btn-google{background-color:#db4437;background-color:var(--color-google)}.btn-outline-primary{border-color:#51c84d;border-color:var(--color-primary);color:#51c84d;color:var(--color-primary);background-color:transparent}.btn-outline-primary:hover{background-color:#51c84d;background-color:var(--color-primary);color:#fff}.btn-outline-success{border-color:#0b6631;border-color:var(--color-success);color:#0b6631;color:var(--color-success);background-color:transparent}.btn-outline-success:hover{background-color:#0b6631;background-color:var(--color-success);color:#fff}.btn-outline-danger{border-color:#b91c1c;border-color:var(--color-danger);color:#b91c1c;color:var(--color-danger);background-color:transparent}.btn-outline-danger:hover{background-color:#b91c1c;background-color:var(--color-danger);color:#fff}.btn-outline-warning{border-color:#ff6f00;border-color:var(--color-warning);color:#ff6f00;color:var(--color-warning);background-color:transparent}.btn-outline-warning:hover{background-color:#ff6f00;background-color:var(--color-warning);color:#fff}.btn-outline-info{border-color:#7868e6;border-color:var(--color-secondary);color:#7868e6;color:var(--color-secondary);background-color:transparent}.btn-outline-info:hover{background-color:#7868e6;background-color:var(--color-secondary);color:#fff}i{font-size:2rem;pointer-events:none;vertical-align:center}.icon-left{margin-right:.5rem}.icon-right{margin-left:.5rem}.avatar{border:2px solid #51c84d;border:2px solid var(--color-primary);border-radius:50%}.avatar,.avatar-noborder{height:3rem;width:3rem;position:relative;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 0 2px #fff}.avatar-icn,.avatar-noborder{border-radius:50%}.avatar-icn{background-color:grey}.avatar-lg{height:4.5rem;width:4.5rem}.avatar-xl{height:5.5rem;width:5.5rem}.avatar-img{height:100%;width:100%;border-radius:50%;border:2px solid #fff}.avatar-icon{position:absolute;top:.5rem;left:.5rem;font-size:200%;color:#1f2937;color:var(--text-color)}.badge{border:1px solid transparent;border-radius:.25rem;color:#fff;padding:.25rem .5rem;font-size:.75rem;font-weight:700}.ic-bg{font-size:200%}.icon-badge{border-radius:1rem;font-size:1.5rem;background-color:#b4e8b3;background-color:var(--color-primary-bg)}.bg-of-icon{position:relative;top:-1rem;right:-1rem;z-index:1}.rounded-pill{border-radius:1rem}.bg-primary{background-color:#51c84d;background-color:var(--color-primary)}.bg-secondary{background-color:#7868e6;background-color:var(--color-secondary)}.bg-success{background-color:#0b6631;background-color:var(--color-success)}.bg-danger{background-color:#b91c1c;background-color:var(--color-danger)}.bg-warning{background-color:#ff6f00;background-color:var(--color-warning)}.bg-info{background-color:#7868e6;background-color:var(--color-secondary)}.avatar-badge-container{position:relative}.avatar-badge-top{top:0;right:0}.avatar-badge-bottom,.avatar-badge-top{min-width:1rem;height:1rem;padding:.15rem;border-radius:50%;border:1px solid #fff;background:#51c84d;background:var(--color-primary);color:#f3f4f6;color:var(--color-grey-light);position:absolute;font-size:.65rem;font-weight:700}.avatar-badge-bottom{bottom:2%;right:2%}.avatar-badge-container .fa{color:#1f2937;color:var(--text-color);font-size:200%;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--darkgrey)}.icon-badge-top{min-width:1rem;height:1rem;padding:.15rem;border-radius:.5rem;background:#51c84d;background:var(--color-primary);color:#f3f4f6;color:var(--color-grey-light);border:1px solid #fff;position:absolute;top:10%;right:10%;font-size:.65rem;font-weight:700}.txt-card{min-width:20rem;padding:1rem;box-shadow:13px 13px 21px -5px #e5e7eb;box-shadow:13px 13px 21px -5px var(--color-grey-bg);border:1px solid #e5e7eb;border:1px solid var(--color-grey-bg)}.txt-card .title{font-size:1.5rem;color:#1f2937;color:var(--text-color);font-weight:600;margin:0 0 .4rem}.txt-card .subtitle{font-size:1rem;color:#4b5563;color:var(--color-grey-dark);margin:0 0 .7rem}.txt-card .txt-content{font-size:.7rem;color:#4b5563;color:var(--color-grey-dark);margin-bottom:.4rem}.form-container{min-width:40vw;box-sizing:border-box;padding:.5rem;max-width:600px}.input-area{resize:none;width:100%;padding:.5rem 1rem;border-radius:.2rem;font-size:1rem;outline:none}.input-group{position:relative;margin:.5rem;width:100%}.input-group .input-area{outline:none;border:1px solid #9ca3af;border:1px solid var(--color-grey)}.input-group label{position:absolute;left:.5rem;top:.5rem;color:#9ca3af;color:var(--color-grey);background:#fff;transition:all .2s ease-in-out}.input-group+.err>.input-area{border-color:#b91c1c;border-color:var(--color-danger)}.input-group+.err>.err-msg,.input-group+.err>label{color:#b91c1c;color:var(--color-danger)}.input-group+.err>.err-msg{font-size:.7rem}.input-area:focus,.input-group+.err>.input-area:focus{border:1.5px solid #51c84d;border:1.5px solid var(--color-primary)}.input-area:focus+label{top:-8px;padding:0 .45rem;color:#51c84d;color:var(--color-primary);font-size:1rem}.basic-form-container{min-width:40vw;box-sizing:border-box;padding:.5rem;max-width:600px}.basic-input-group{position:relative;margin:.5rem;width:100%}.basic-input-group .input-area{outline:none;border:1px solid #1f2937;border:1px solid var(--color-grey-darkest)}.basic-input-group>label{color:#1f2937;color:var(--color-grey-darkest)}.basic-input-group+.err>.input-area{border-color:#b91c1c;border-color:var(--color-danger)}.basic-input-group+.err>.err-msg,.basic-input-group+.err>label{color:#b91c1c;color:var(--color-danger)}.basic-input-group+.err>.err-msg{font-size:.7rem}.basic-input-group+.err>.input-area:focus{border:1.5px solid #1f2937;border:1.5px solid var(--color-grey-darkest)}.App{height:100vh;overflow:hidden}.main-window{display:flex;height:calc(100vh - 4rem);width:100%;margin:.2rem}.main-window-container{padding:1rem;overflow-y:scroll;background-color:var(--color-grey-light);height:100%;width:100%}@media only screen and (max-width:500px){.main-window{flex-direction:column-reverse;padding:0}.main-window-container{padding:0}}.navbar{background:#fff;padding:.5rem 1rem;min-height:4rem;box-shadow:1px 2px 5px var(--color-grey-bg);position:fixed;top:0;box-sizing:border-box;justify-content:space-between;flex-wrap:wrap}.menu,.navbar{width:100%;left:0;z-index:10;display:flex;align-items:center}.menu{position:absolute;flex-direction:column;height:100vh;overflow-y:auto;top:4rem;background-color:#fff;overflow-y:scroll}.hide-menu{transition:all .5s;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.show-menu{transition:all .5s;-webkit-transform:translateX(0);transform:translateX(0)}.menu-item{display:inline;width:100%;text-align:left;border-bottom:1px solid var(--color-grey-bg);transition:padding 1s}.menu-item>a,.menu-item>b{display:block}.menu-item>a{padding:1rem 1rem 1rem 4rem}.menu-item>b>a{padding:1rem 1rem 1rem 3rem;display:block}.menu-item:hover{background-color:var(--color-primary-bg);color:var(--color-primary-dark);padding-left:1rem}.brand-logo{margin-left:1rem}.brand-name{color:var(--color-primary)}.brand-name,.brand-name span{font-weight:600;font-size:1.8rem}.brand-name span{color:var(--color-primary-dark)}.brand-logo img{height:2rem;width:2rem}.hide-in-main-nav{display:none}.hide-in-side-nav{display:auto}.nav-icon-label{display:none}.nav-icon-label-container{display:flex;align-items:center;justify-content:center}.hamburger-menu-line{display:block;width:2rem;height:.2rem;background:var(--color-primary);margin:.3rem;border-radius:5px;transition:all .5s linear;-webkit-transform-origin:5px 2px;transform-origin:5px 2px}.click .hamburger-menu-line:first-child{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.click .hamburger-menu-line:nth-child(2){opacity:0}.click .hamburger-menu-line:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}link-to{width:100%;display:block}@media only screen and (min-width:500px){.menu{width:300px}.hide-in-side-nav{display:none}.avatar-badge-container{margin:0 1rem}.nav-icon-label{margin-left:-1rem;display:inline}}@media only screen and (min-width:900px){.hide-in-main-nav{display:inline}}@media only screen and (max-width:400px){.brand-logo,.brand-name{font-size:1.5rem}}.sidebar{height:100vh;width:5rem;box-shadow:1rem 1rem 1rem var(--color-grey-bg);padding-top:1.5rem}.avator-badge-container{text-align:center}.avatar-noborder{font-weight:400}.sidebar-item{font-size:.8rem;margin:.5rem 1rem}@media only screen and (max-width:500px){.sidebar{height:3.5rem;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;align-items:start;padding:0;margin:0;align-items:center;justify-items:center}.avatar-noborder small{display:none}.sidebar-item{font-size:.7rem;margin:0 .2rem}.sidebar-item i{margin:.2rem}}.VideoCard{max-width:280px;max-height:280px;width:100%;box-shadow:.3rem .3rem .5rem var(--color-grey-bg);margin:.2rem .2rem .5rem;background-color:#fff}.card-img-container{max-width:280;max-height:210;overflow:hidden;box-shadow:.3rem .3rem .5rem var(--color-grey-bg)}.card-img-container,.responsive-img{width:100%;height:100%;object-fit:cover}.Videocard-description{display:flex;flex-direction:column;width:100%;padding:1rem}.Videocard-description h3{font-size:1rem;margin:0 0 .3rem}.description-details{display:flex;width:100%;justify-content:space-between}.description-details .btn-details{background:transparent;border:none;font-size:1.5rem}@media only screen and (max-width:500px){.Videocard-description h3{font-size:1rem}.description-next{font-size:.8rem}.VideoCard{max-width:95%;width:95%;margin:.2rem}}.PlaylistVideoCard{max-width:400px;max-height:210px;width:100%;box-shadow:.3rem .3rem .5rem var(--color-grey-bg);margin:.2rem .2rem .5rem;background-color:#fff;display:grid;grid-template-columns:1fr 3fr}.PlaylistVideoCard .card-img-container{max-width:280;max-height:210;height:100%;overflow:hidden;box-shadow:.3rem .3rem .5rem var(--color-grey-bg)}.PlaylistVideoCard .responsive-img{object-fit:cover;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.PlaylistVideoCard-description{display:flex;flex-direction:column;width:100%;padding:1rem}.PlaylistVideoCard-description h3{font-size:1rem;margin:0 0 .3rem}.PlaylistVideoCard .description-details{display:flex;width:100%;justify-content:space-between}.PlaylistVideoCard .description-details .btn-details{background:transparent;border:none;font-size:1.5rem}.modal{position:absolute;top:0;left:0;height:100vh;width:100vw;z-index:999999;background-color:rgba(12,20,12,.8);justify-content:center;align-items:center}.modal-content{width:100%;height:100%;max-width:600px;max-height:200px;background-color:#fff;margin:.5rem;padding:1rem;border-radius:.5rem;display:flex;flex-direction:column;justify-content:space-around}.modal-title h2{margin:0}.modal-btn-container{display:flex;justify-content:space-around}.modal-btn-container .btn{width:50%}@media only screen and (max-width:500px){.PlaylistVideoCard-description h3{font-size:1rem}.PlaylistVideoCard .description-next{font-size:.8rem}.PlaylistVideoCard{max-width:95%;width:95%;margin:.2rem}}.VideoMiniCard{max-height:210px;width:100%;height:auto;margin:.2rem .2rem .5rem;background-color:#fff}.VideoMiniCard,.VideoMiniCard .card-img-container{max-width:210px;box-shadow:.3rem .3rem .5rem var(--color-grey-bg)}.VideoMiniCard .card-img-container{max-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}.VideoMiniCard .responsive-img{width:100%;height:100%;object-fit:contain}.VideoMiniCard-description{display:flex;flex-direction:column;width:100%;padding:.7rem}.VideoMiniCard-description h3{font-size:.8rem;margin:0 0 .3rem}.VideoMiniCard .description-details{display:flex;width:100%;font-weight:500;justify-content:space-between}.VideoMiniCard .description-next{font-size:.7rem}@media only screen and (max-width:500px){.VideoMiniCard-description h3{font-size:1rem}.VideoMiniCard{max-width:140;width:95%;margin:.2rem}.VideoMiniCard .card-img-container{max-width:140;max-height:90;overflow:hidden;box-shadow:.3rem .3rem .5rem var(--color-grey-bg)}}.PlaylistOverviewCard{width:100%;max-width:600px;background-color:#fff;margin:.5rem;padding:1rem;border-radius:.5rem}.poc-header{display:flex;justify-content:space-between;align-items:center;width:100%}.poc-header h2{margin:0}.poc-videos-container{display:grid;grid-template-columns:210px 210px 210px 210px 210px;grid-column-gap:.5rem;-webkit-column-gap:.5rem;column-gap:.5rem;overflow-x:auto}.Home,.poc-videos-container{padding-top:.5rem;width:100%}.Home{height:100%}.Videos-Container{display:flex;width:calc(100vw - 5.5rem);flex-wrap:wrap;justify-content:space-around}@media only screen and (max-width:500px){.Videos-Container{width:100%}}.VideoDetails{padding:2rem;display:grid;grid-template-columns:4fr 2fr}.v-details-container{width:100%}.v-description-container{width:100%;word-wrap:break-word;word-break:break-all;padding:1.5rem .3rem .3rem;line-height:1.2rem;font-size:.9rem;background-color:#fff}.v-suggestion-container{max-height:900px;overflow-y:scroll;width:350px;display:flex;justify-content:center;flex-wrap:wrap;margin-left:2rem;padding:2rem;background-color:var(--color-grey-light)}.wrapper{width:100%;height:60vh}.reaction-bar{height:3.5rem;width:100%;display:grid;grid-template-columns:1fr 4fr 1fr 1fr 1fr;align-items:start;padding:0;margin:0;align-items:center;justify-items:center;background-color:#fff;border:1px solid var(--color-grey-bg)}.reaction-bar-item{font-size:.7rem;margin:0 .2rem}.reaction-bar-item i{margin:.2rem}.playlist-menu{position:absolute;z-index:999;top:2rem;right:2rem;padding:1rem;width:100vw;max-width:300px;background-color:#fff;box-shadow:8px 8px 16px #d9d9d9,-8px -8px 16px #fff}.check{height:1rem;width:1rem;margin-right:.5rem;border:2px solid var(--color-primary)}.playlist-menu-item{font-size:1rem;font-weight:600}.playlist-input{height:2rem;margin:0;padding:.2rem;width:100%}.btn-add-playlist{display:inline-block;padding:0;font-size:.8rem;color:#fff}.btn-close{padding:0;font-size:.6rem}.playlist-form{display:flex;justify-content:space-between;width:100%;align-items:center}@media only screen and (max-width:900px){.VideoDetails{width:100%;padding:0;display:grid;grid-template-columns:1fr}.v-details-container,.v-suggestions-container{width:100%}.v-suggestion-container{max-height:none;overflow-y:visible;width:100%;display:flex;justify-content:center;flex-wrap:wrap;margin-left:0;padding:.2rem;background-color:#fff}}@media only screen and (max-width:500px){.wrapper{height:35vh}}.playlist-name-container{width:100%;margin-top:1rem}.Login{width:100%;height:100%}.social-login .btn{width:30%}.btn-login{width:100%;margin-top:1rem}@media only screen and (max-width:500px){.social-login .btn{width:33%;margin:0;padding:.4rem .2rem;font-size:.8rem;overflow:hidden}}.Signup{width:100%;height:100%}.social-Signup .btn{width:30%}.btn-Signup{width:100%;margin-top:1rem}@media only screen and (max-width:500px){.social-Signup .btn{width:33%;margin:0;padding:.4rem .2rem;font-size:.8rem;overflow:hidden}}.account--container{display:flex;flex-direction:column;padding:1rem 2rem}.account--container h4{margin:1rem 0}
/*# sourceMappingURL=main.d428a7d6.chunk.css.map */