@import url('https://fonts.googleapis.com/css?family=Spirax');

:root {
    --primaryColor: #fb1;
    --secondaryColor: #007bff;
}

*{
    box-sizing: border-box;
}

#brand{
    cursor: pointer;
}

.bootRow{
    margin:0px;
}

.gifComponent > p {
    padding: 0px;
    margin: 0px;
}

.gifComponent{
    margin: 10px 0px;
    padding: 0px;
}


#favoriteGifs > .gifComponent{
    margin-right: 10px;
}

#favoriteGifs .icon{
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
}

#favoriteGifs img{
    max-width: 100px !important;
    height: 100px !important;
}

#favorites{
    background: linear-gradient(89deg,var(--primaryColor) 0%, var(--secondaryColor) 100%);
    color: white;
    font-weight: bolder;
}

.icon{
    margin: 10px 15px;
    font-size: 26px;
    cursor: pointer;
}

.categoryDelete{
    width:35px;
    height:30px;
    margin:5px;
    padding:0px;
}

.iconDelete{
    font-size:14px;
}


::-webkit-scrollbar{
    height: 12px;
    width: 4px;
    background: var(--secondaryColor);
}
::-webkit-scrollbar-thumb:horizontal{
    background: var(--primaryColor);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:vertical{
    background: var(--primaryColor);
    border-radius: 10px;
}

#favoriteGifs{
    width: 100%;
    overflow-x: auto;
    display: inline-flex;
    height: 160px;
}

img{
    height: 200px !important;
}

#categories{
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.category-button{
    margin: 5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(89deg, var(--secondaryColor) 0%, var(--primaryColor) 100%);
    font-weight: bolder;
}

#add-category{
    background: linear-gradient(89deg,var(--primaryColor) 0%, var(--secondaryColor) 100%);
}

header{
    margin-bottom: 10px;
    font-weight: bolder;
    background: linear-gradient(89deg, var(--primaryColor) 0%,var(--secondaryColor) 100%);
    color: white;
}

#headerBrand{
    font-family: 'Spirax', cursive;
    font-size: 30px;
    
}

#appTitle{
    padding-left: 15px;
    border-left: 4px solid white;
    width: fit-content;
    height: 100%;
}

.vertical{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 0px;
    text-align: center;
    height: 100% !important;
}

.horizontal{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
    text-align: center;
    height: 100%;
}



.buttons-view-column{
   padding: 0px;
    
}

#buttons-view{
    height: 160px;
    overflow-y: scroll;
    margin: 0px 10px;
}

h6{
    padding:0px;
    margin: 0px;
}

#limitRequest{
    
    margin-left:10px;
}

label{
    background: linear-gradient(89deg,var(--primaryColor) 0%, var(--secondaryColor) 100%);
}

#addCategory{
    height: 100px !important;
    color: white;
    font-weight: bolder;
    background:
    radial-gradient(circle farthest-side at 0% 50%,var(--primaryColor) 23.5%,rgba(240,166,17,0) 0)21px 30px,
    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
    linear-gradient(var(--primaryColor) 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,var(--primaryColor) 0)0 0,
    linear-gradient(150deg,var(--primaryColor) 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,var(--primaryColor) 0)0 0,
    linear-gradient(30deg,var(--primaryColor) 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,var(--primaryColor) 0)0 0,
    linear-gradient(90deg,#B71 2%,var(--primaryColor) 0,var(--primaryColor) 98%,#B71 0%)0 0 var(--primaryColor);
    background-size:40px 60px;
}