/* custom */
*{
    word-break: break-all!important;
}
.line-horizontal{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.item-hover:hover{
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.img-icon-list{
    height: 30px;
    width: 30px;
}
#result-search tr {
    cursor: pointer;
}
.cursor-pointer{
    cursor: pointer;
}
@keyframes filling {
  from{
    background-position: center 25%;
  }
  to {
    background-position: center 50%;
  }
}
.nav-name{
    background-image:  url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color:  #FFFFFF;
  font-family: 'Bungee', cursive;
  animation: filling 3s ease forwards;
}

/* /custom */

/* Head and footer */
.nav-icon {
    width: 50px;
    height: 50px;
    color: yellowgreen;
}

.top{
    min-height: 60px;
    min-width: 100%;
    background: #EEE8E7;
}

#sidebar .nav-item:hover{
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.top-nav{
    min-height: 60px;
    position: fixed;
    top:0;
    right: 0;
    left: 17rem;
    transition: all 0.6s;
    z-index: 1;
    /*
    background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
    background: linear-gradient(to right, #fcf142, #c2e59c);
    */
    background: rgba( 255, 255, 255, 0.2 );
    box-shadow: 0 0 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 10.0px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.top-nav.active{
    left: 0;
    transition: all 0.6s;
}

#sidebarCollapse{
    border: solid 3px #c2e59c;
    padding: 10px;
    margin: 10px;
    background: white;
    border-radius: 5px;
}
#sidebarCollapse:hover{
    box-shadow: 3px 3px 15px #aaaaaa;
}
#sidebarCollapse:focus{
    outline: none!important;
}

.vertical-nav {
    min-width: 17rem;
    width: 17rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); */
    transition: all 0.6s;
    overflow-y: auto;
    z-index: 2;
}

.page-content {
    width: calc(100% - 17rem);
    margin-left: 17rem;
    transition: all 0.6s;
}

/* toggle behavior */

#sidebar.active {
    margin-left: -17rem;
}

#content.active {
    width: 100%;
    margin: 0;
}

#main-content.active{
    width: 100%;
    margin: 0;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -17rem;
        z-index: 2;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
        margin: 0;
    }
    #content.active {
        margin-left: 17rem;
        width: calc(100% - 17rem);
    }
    .top-nav{
        left: 0;
    }

    .top-nav.active{
        left: 17rem;
    }
    
    #main-content {
        width: 100%;
        margin: 0;
        z-index: 0;
        left: 0;
        transition: all 0.6s;
    }
    #main-content.active {
        left: 17rem;
        transition: all 0.6s;
    }
    .mobile-content{
        padding-left: 5px!important;
        padding-right: 5px!important;
    }
    .container{
        padding-left: 5px;
        padding-right: 5px;
    }
}
@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}
@media (max-width: 400px) {
    #main-content {
        display: block;
        animation: fade_in_show 0.6s;
    }
    #main-content.active {
        display: none;
        animation: fade_in_show 0.6s;
    }

}

body {
    /*
    background: #599fd9;
    background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
    background: linear-gradient(to right, #599fd9, #c2e59c);
    min-height: 100vh;
    */
    
    /*
    background: #E8E8E8;
    background: url("tile_background.png");
    */
    
    background-color: #77aa77;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    
    background-repeat: no-repeat;
    overflow-x: hidden;
    min-height: 400px;
}

/* scrollbar custom */
body::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

body::-webkit-scrollbar{
	width: 5px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb{
	background-color: #00AA00;
        border-radius: 10px;
}
/* end scrollbar custom */

.separator {
    margin: 3rem 0;
    border-bottom: 1px dashed #fff;
}

.text-uppercase {
    letter-spacing: 0.1em;
}

.foot {
    position: relative;
    bottom:0;
    height:60px;   
    clear: both;
    background-color: rgba(0,0,0,0.5) !important;
}

.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}

.main{
    position: relative;
    transition: all 0.6s;
    min-height: calc(100vh - 120px) !important; 
}


#search{
    border: solid 3px #c2e59c;
    padding: 10px;
    margin: 10px;
    background: white;
    border-radius: 5px;
}
#search:hover{
    box-shadow: 3px 3px 15px #aaaaaa;
}
#search:focus{
    outline: none!important;
}
#logo-head{
    justify-content: center;
}

.btnsearch{
    opacity: 1;
    visibility: visible;
    transition: all 0.6s;
}

@media (max-width: 576px){
    .btnsearch{
        justify-content: flex-end;
    }
    #logo-head{
        display: none !important;
    }
}
@media (max-width: 992px) {
    .nav-name{
        display: none;
    }
}
@media (max-width: 400px) {
    .btnsearch.active{
        /* display: none!important; */
        opacity: 0;
        visibility: hidden;
        transition: all 0.6s;
    }
}
#message-search{
    width: 100%;
    border-radius: 5px;
    border: #00AA00 solid 2px;
}
#message-search:focus{
    box-shadow: 3px 3px 15px #aaaaaa;
    outline: none;
}

/* end head and footer */

/* login logout regis forgot*/
.card-login{
    /*height: 385px; */
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0,0,0,0.5) !important;
    box-shadow: 10px 10px 5px #aaaaaa;
}
.card-login input:focus{
    box-shadow: 3px 3px 15px #aaaaaa;
}
.card-header{
    color: white;
}
.input-group-prepend span{
    width: 50px;
    background-color: #FFC312;
    color: black;
    border:0 !important;
}

.remember{
    color: white;
    margin-left: 10px;
}

.remember input{
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
}

.login_btn{
    color: black;
    background-color: #FFC312;
    font-weight: bold;
}

.login_btn:hover{
    color: black;
    background-color: #00ff33;
    box-shadow: 3px 3px 15px #aaaaaa;
}

.links{
    color: white;
}

.links a{
    margin-left: 4px;
    text-decoration: none;
    color: #00ff33;
}
.links a:hover{
    color: #ffff00
}
.invalid-login{
    display: none
}
/* end login logout regis forgot */

/* home */
.card-item-home{
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 0 !important;
}
.card-item-home:hover{
    box-shadow: 0px 0px 50px #aaaaaa;
}
.card-item-home .link-item-home{
    text-decoration: none;
    color: black;
}
.card-item-home .card-footer{
    position: relative;
    min-height: 50px;
}
.card-item-home .card-footer .star-item-home{
    position: absolute;
    left: 10;
}
.card-item-home .card-footer .price-item-home{
    position: absolute;
    right: 10;
}
.index-mota{
    height: 100px;
    overflow: hidden;
    text-overflow: ellipsis; 
}

#home-page li:hover{
    cursor: pointer;
}
.home-slide img{
     max-height: 20rem;
}
.home-slide-a{
    cursor: copy;
}
#mycarousel{
    z-index: 0 !important;
}
.card-item-home img{
    max-width: 8rem;
    max-height: 8rem;
}


/* profile*/

.card-box-profile {
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
}

.img-thumbnail-profile {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: 200px;
    width: 200px;
}
.btn-rounded {
    border-radius: 2em;
}
.input-profile-edit{
    border: #FFC312 solid 2px;
    border-radius: 8px;
}
.input-profile-edit:focus{
    outline: none;
}
.input-profile-edit:hover{
    box-shadow: 3px 3px 15px #aaaaaa;
}
.edit-profile-avatar{
    border: #33CCFF dashed 2px;
    border-radius: 8px;
    padding: 10px;
}
.home-item-img-top{
    border-radius: 10px;
    max-width: 3rem;
    max-height: 3rem;
}
.home-item-top:hover{
    /*
    text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
    */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
/* end profile */


/* app detail */
.detail-app{
    padding: 30px;
    border-radius: 8px;
    background-color: #fff;
}
.detail-icon{
    height:100px;
    width:100px;
}
.detail-mota{
    border: #E8E8E8 groove 2px;
    border-radius: 10px;
    padding: 10px;
    background: #F5F5F5;
    transition: all 0.6s;
}
#detail-seemore{
    display: none;
}
#detail-more {display: none; transition: all 0.6s;}
#detail-seemore-btn {
    vertical-align: bottom;
    border: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    font-weight: 500;
    padding: .625rem 1.5rem .5rem;
    font-size: .75rem;
    line-height: 1.5;
}
.detail-comment{
    border: #FFC312 solid 1px;
    border-radius: 10px;
    padding: 15px;
}
.detail-content-comment{
    border: chartreuse solid 1px;
    border-radius: 10px;
    padding: 10px;
}
 /* end app detail */
 
 /* rate */
 #detail-more {display: none; transition: all 0.6s;}
#detail-seemore-btn {
    vertical-align: bottom;
    border: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    font-weight: 500;
    padding: .625rem 1.5rem .5rem;
    font-size: .75rem;
    line-height: 1.5;
}
.detail-comment{
    border: #FFC312 solid 1px;
    border-radius: 10px;
    padding: 15px;
}
.detail-content-comment{
    border: chartreuse solid 1px;
    border-radius: 10px;
    padding: 10px;
}
/* end rate */