html {
    --size-body : 18px;
    --line-height : 32px;
    --c-sub-text :#A4A4A4;
    --sub-text:15px;
    --c-primary : #3C6599;
}

.c-sub-text {
    color: var(--c-sub-text)
}
.sub-text {
    font-size:var(--sub-text)
}

body {
    font-size: var(--size-body);
    line-height: var(--line-height);
}


html,body, form, input, select, ul, textarea { margin: 0px; padding: 0; }
ul { list-style: inside; }
li { margin: 0px; padding: 0px; list-style: none; }
a{
    text-decoration: none !important;
}
iframe, object, embed { max-width: 100%; }
.clr { clear: both; }
.clearfix::after { content: ""; display: block; clear: both; height: 0px; visibility: hidden; overflow: hidden; }
*:focus,a:focus,button:focus,input:focus,select:focus,.btn:focus,.btn:focus,.form-control:focus{
  outline: 0 !important;
}
#fullscreenModal{
    background: black !important;
}
body{
    font-family: "Nunito", sans-serif !important;
    color: #fff;
    background-color: #0e1e30 !important;
}
main{
    min-height: 460px;
}
.share-modal .modal-body a.share-network-linkedin{
    background: #007ab9;
}
.share-modal .modal-body a.share-network-facebook{
    background: rgb(59, 89, 152);
}
.share-modal .modal-body a.share-network-twitter{
    background: rgb(29, 161, 242);
}

.share-modal .modal-body a.share-network-pinterest{
    background: rgb(203, 32, 39);

}
.share-modal .modal-dialog {
    max-width: 550px;
}
.share-modal .modal-body a{
    padding: 5px 10px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    margin: 0 5px;
}
.padding-x-10px{
    padding-left: 10px;
    padding-right: 10px;
}

.info-account-user{
    min-height: 180px;
}
#app>nav{
    padding-left: 0;
    padding-right: 0;
}
#app>nav>.container,.container-custom{
    margin-left: 8%;
    padding: 0;
    margin-right: 8%;
}
.dimension-mng .table-responsive > .table-bordered,.input-group-addon.special a{
    color: #fff;
}
.modal{
    color: #333;
}
/*.container {
    max-width: 1175px;
}*/
#home-searchfield .bar-search{
    width: 34.5%;
    float: left;
    margin-right: 0.5%;
/*    margin-top: 10px;*/
}
#home-searchfield .group-select-button{
    width: 59.5%;
    float: left;
    margin-right: 0.5%;
}
#home-searchfield .bar-btn-search{
    width: 5%;
    float: left;
}
#home-searchfield .bar-search input{
    height: 30px;
}

#home-searchfield .btn-search{
    margin-bottom: 6px;
    background-color: #00c554;
    height: 30px;
    padding-top: 2px;
    padding-left: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 100%;
    color: #fff;
}


#home-searchfield .btn-search i{
    font-size: 18px;
    color: white;
    margin-top:4px;
}

#home-searchfield .btn-search>span:first-child{
    font-size: 16px;
    color: white;
/*    margin-left: 10px;*/
    position: relative;
    top: 3px;
    right: 5px;
}

#home-searchfield .btn-search>span:last-child{
    font-size: 14px;
    color: white;
    position: relative;
    top: 2px;
    right: 3px;
}


#permistion-group .multiselect.dropdown-toggle {
    border: 1px solid #ccc;
}
.userProfileImage, #profileCameraIcon, .custom-control-label{
    cursor: pointer;
}
.dataTables_filter{
    margin-top: 3px;
}

#myModalRePass input[name=email] {
    pointer-events: none;
}
.v-select .dropdown-menu{
    padding: 0 !important;
    max-height: 390px !important;
}
/*.container{
    padding: 0px !important;
}*/
.group-select-button .fa-circle{
    border: 1px solid #dee;
    border-radius:50%;
}
.advertising{
    max-width: 100%;
    padding-bottom: 30px;
}
/*.form-control:focus{
    box-shadow: unset;
}*/

.at-share-btn-elements a{
    border-radius: 5px !important;
}
#myModalNetwork h4.modal-title{
    padding-left: 13px;
}
.dimension-mng{
    padding: 30px 0;
}
.dimension-mng table{
    width: 60%;
    margin: 0 auto;
    margin-top: 30px;
}
.edit-user, .btn-delete{
    cursor: pointer;
}
/*nav.navbar.navbar-expand-md.navbar-light.navbar-laravel {
    height: 67px;
}*/

.multiselect-container {
    max-height: 400px;
    min-height: 400px;
    overflow: auto;
    min-width: 250px !important;
}
#edit_role_modal .modal-dialog,#add_role_modal .modal-dialog{
    max-width: 680px;
}
.modal.customize h4{
    margin-bottom: 30px;
}
.tooltip-inner {
    min-width: 400px; /* the minimum width */
}
input.form-control{
    background: #ededed;
    border: none;
}
input.form-control.form-control-borderless{
    background: #fff !important;
    font-size: 16px;
    padding: 0 16.5% 0 1.5%
}

.edit-profile{
    padding: 30px 0;
}
.edit-profile label.title{
    text-transform: uppercase;
    color: #00C554;
    font-weight: 600;
    padding-bottom: 30px;
    padding-left: 10px;
}
.edit-profile .basic-settings{
    padding-bottom: 50px;
}
.btn-success-toh {
    background: #00C554;
    border: none;
    color: #fff;
    cursor: pointer;
}
.btn-success-toh:hover{
    background: #33a965;
    color: #fff;
}

.infomation .title .font-weight-600{
    word-break: break-word;
}
.infomation .network .btn-action img{
    width: 32px;
    height : 32px;
}
.infomation-detail{
/*    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;*/
/*    padding: 10px 6px;*/
}
.infomation-detail p{
    float: left;
    width: 32%;
/*    background-color: #cccccc57;*/
    padding: 10px 5px;
}
.infomation-detail p:nth-child(2){
    margin: 0 6px;
}
.infomation-detail p img{
    width: 30px;
    padding-right: 5px;
}

.navbar-laravel{
    background-color: #1D324E;
}
.font-weight-600{
    font-weight: 600;
}
#navbarSupportedContent>ul>li a{
    color: #F0F0F0;
    font-size: 15px;
    margin: auto 10px;
}
#navbarSupportedContent>ul>li a.dropdown-item{
     margin: 0;
     padding: auto 10px;
}
#navbarSupportedContent>ul>li a.dropdown-item img{
    padding-right: 8px;
    width: 25px;
}
#navbarSupportedContent>ul>li a.dropdown-item:hover{
    background: #31669a;
}
/*.dropdown.show::after {
    content: '';
    position: absolute;
    right: 31%;
    top: 175%;
    width: 0;
    height: 0;
    border-bottom: 10px solid #17334f;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    clear: both;
    bottom: 100%;
}*/

.dropdown:hover .dropdown-menu {
    display: block;
}

#navbarSupportedContent .dropdown-menu{
/*    padding: 0;*/
/*    margin: 40px 0 0 0;*/
    min-width: 160px;
    background: #17334f;
    border: none;
    border-radius: 0;
    margin-top: 0px;
}
#navbarSupportedContent .nav-item.active{
    background: #31669a;
    border-radius: 5px;
}
#btnRegister{
    margin-top: 5px;
    padding: 2px 15px;
    /* background-color: #00C554; */
    background-color: #00c554 !important;
    color: #FFFFFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
#btnRegister:hover{
    background: #33a965  !important;
}
footer{
/*    margin: 100px 0;*/
    padding: 30px 0;
    background-color: #06111E;
}
#footer-list a{
    padding-right: 10px;
    color: #9b9b9b;
}
#socialLogo a{
    margin-right: 10px;
}

.v-select.single .selected-tag{
    text-transform: capitalize;
    position: absolute;
}
#home-searchfield .detail{
    border-radius: 5px;
    margin-top: 30px;

}
#home-searchfield{
    padding: 0;
    margin: 5vh 8% 5vh;
}

#app .banner-home {
    padding: 60px 0;
    background-image: url(../images/banner_home.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;

}
/*#home-searchfield {
    background: url("../images/bg_top.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;


    padding-top: 2.5%;
}*/

/*.group-select-button{
    margin-top: 10px;
    margin-left: -10px;
    margin-right: -10px;

}*/
.group-select-button select{
    padding: 4px 9px;
    padding-right: 4%;
    /* margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px; */
    border:none;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-appearance: none;
    appearance: none;

    background: url("../images/filter_select.png") no-repeat center center;
    background-size: auto 100%;
    background-position: right;
}

.group-select-button select:focus{
    outline:none;
}

.group-select-button:first-child{
    margin-left: 0px;
}
.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}



.search-bar{
    height: 49px;

    border-radius: 5px;
    -webkit-border-radius: 5px;

}
#wallpaperField{
    margin: 5vh 8% 5vh;
}

.group-image-view .justify-content-center{
    margin: 10px 0px 25px 0;
    font-size: 11px;
    color: #9b9b9b;
}
.w-100{
    margin-top: -15px;
}
/*.group-image-view .row{
    margin: auto 10px;
}*/
.view-download{
    margin: 0 4vw;
}


#home-pagination{
    margin-bottom: 30px;
}
#home-pagination li{
    margin: auto 3px auto;
}
#home-pagination a{
    color: #9b9b9b;
    border: 2px solid #9b9b9b;
    background-color: #0A1E31;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.home-pagination{
    display: inline-flex;
}

#detail .image{
    display: block;
    position: relative;
    max-width: 100%;
}
#detail .image img{
    display: block;
/*    max-height: 450px;*/
    margin: 0 auto;
    max-width:100%;
}
#detail .image-container{
/*    background: #cccccca1;*/
/*    padding: 10px 16px;*/
}

#detail .image img.full-page-holder{
    width: 100%;
    height: auto;
}

#detail .infomation{
    padding: 30px 0;
    color: #fff;
}
#detail .infomation .list-color p{
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border:1px solid #dee;
    margin-top: 7px;
}
#detail .infomation .title .time{
    font-size: 13px;
}
#detail .infomation .author{
    padding: 15px 0;
}
#detail .infomation .author img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
#detail .btn-action.clearfix {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#detail .download .btn-action.clearfix{
    justify-content: flex-end;
}

#detail .btn-action p.overflow-wrap {
    /* width: 16vw; */
    padding: 8px 12px;
    color: #fff;
    overflow-wrap: break-word;
    text-align: center;
    border-radius: 5px;
    font-size: 13.5px;
    cursor: pointer;
}
#detail .btn-action p.overflow-wrap.inactive {
    padding:  0px;
}
#detail .btn-action p.overflow-wrap.inactive>img {
    width:32px;
    height: 32px;
}
#detail .btn-action p.overflow-wrap img {
    margin-bottom: 1px;
}
#detail .download .btn-download  {
    background: #5BAE00;
    padding: 8px 56px;
    margin-left: 20px;
    border-radius: 8px;
}
#detail .download .btn-download >img{
    width: 32px;
    height: 32px;
}
.statistic.clearfix>span>img{
    position: relative;
    top: -2px;
}
#detail .network .btn-action p.overflow-wrap.float-left {

}
#detail .network .btn-action p.overflow-wrap.float-left{
    margin: 0 10px;
}
#detail .network .btn-action p.overflow-wrap.float-left:last-child{
    margin-right: 0px;
}
#btnInfoActived{
	background: #fff !important;
	color:#ffffff !important;
    border-radius:0 4px 4px 0!important ;
}

#detail .btn-download:hover{
  transition: transform .5s;
  transform: scale(1.05);
  cursor: pointer;
}

#detail .statistic{
  padding: 30px 0;
}
#detail .statistic span:nth-child(2){
  padding: 0 20px;
}
#detail .tags .list .btn-secondary{
    background: var(--c-primary);
    color: #fff;
    border-radius: 0;
    border: none;
    padding: 8px 16px;
    margin-right: 6px;
}
#detail .general.special{
    padding-top: 50px;
}
#detail .general{
    padding: 10px 0 0 0;
}

#detail .general h2{
    padding-bottom: 20px;
    font-size: 20px;
}
#fullscreenModal .modal-body{
    padding-right: 6px;
}
#fullscreenModal img{
    display: block;
    margin: 0 auto;
}


.zoom-in {
    display: block;
    width: 35px;
    height: 35px;
/*        background-color: #fff;*/
    border-radius: 5px;
    position: absolute;
/*    top: 10px;*/
    bottom: 0;
    margin-left: 10px;
    cursor: pointer;
}
.zoom-in:hover, .zoom-out:hover{
    transform: scale(1.05);
}
.zoom-in {
    background-image: url(../images/fullscreen.png);
}
.zoom-out {
    background-image: url(../images/minimize.png);
    display: block;
    width: 35px;
    height: 35px;
/*        background-color: #fff;*/
    border-radius: 5px;
    position: absolute;
/*    top: 10px;*/
    bottom: 0;
    margin-left: 10px;
    cursor: pointer;

    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 999999;
}


.owl-stage-outer img{
    width: 100%;
    padding:2%;
}

.modal .modal-body .image img{
    width: 18.5%;
    text-align: center;
}
.modal .list-field{
    border: 1px solid #ccc;
    padding: 20px;
}
.modal .list-field .input-group{
    padding-bottom: 20px;
}
.modal .list-field .input-group .input-group-addon{
    display:table-cell
}
/* Page Category  and its subpage */
#categoriesField{
    margin : 60px 10% 40px;
}

#singleCategory{
    margin-bottom: 30px;
}
#categoryName{
    text-align: left;
    margin-left: auto;
    margin-top: 20px;
}

#categoryButtonsRow{
    text-align: left;
    margin-left: auto;
    margin-top: 10px;
    font-size: 11px;
    color: #9b9b9b;
}
#adminCategoryButtonsRow{
    text-align: center;
    margin-left: auto;
    margin-top: 10px;
    font-size: 11px;
    color: #9b9b9b;
}

#wallpaperFieldInCategory{
    /* margin: 0px 50px 40px;
    padding-left: 25px;
    padding-right: 25px; */
    /* background: white; */
    margin: 5vh 8% 5vh;
}

#headerCategory{
    /* margin: 0px 75px 25px; */
    margin: 5vh 8% 5vh;
    padding-top: 20px;
    padding-bottom: 0px;

}


.modal .list-field .input-group .input-group-addon:not(:first-child):not(:last-child){
    border-radius:0
}
.modal .list-field .input-group .input-group-addon{
    width:1%;
    white-space:nowrap;
    vertical-align:middle
}
.modal .list-field .input-group .input-group-addon{
    width: 35px;
    line-height: 35px !important;
    font-size:14px;
    font-weight:400;
    line-height:1;
    color:#555;
    text-align:center;
    background-color:#eee;
    border:none;
    border-radius:5px
}

.modal .list-field .input-group .input-group-addon.special{
    background: #919191;
    width: 60px;
}
.modal .list-field .input-group .input-group-addon:first-child{
    border-top-right-radius:0;
    border-bottom-right-radius:0
}
.modal .list-field .input-group .input-group-addon:first-child{
    border-right:0
}
.modal .list-field .input-group .input-group-addon:last-child{
    border-top-left-radius:0;
    border-bottom-left-radius:0
}
.modal .list-field .input-group .input-group-addon:last-child{
    border-left:0
}

.modal .modal-header{
    border-bottom: none;
    padding: 5px;
}
/*.modal .modal-header .close {
    padding: 15px 15px 0 0;
}*/
.modal .modal-body .modal-title{
    font-size: 15px;
    padding: 10px 0 15px 0;
}
.modal .modal-footer{
    border-top: none;
}


.modal .modal-footer a{
    color: #6c757d !important;
}


/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999999999;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.25em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.25em;
  -webkit-box-shadow: rgb(0,191,255) 1.5em 0 0 0, rgb(0,191,255) 1.1em 1.1em 0 0, rgb(0,191,255) 0 1.5em 0 0, rgb(0,191,255) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.25) -1.5em 0 0 0, rgba(0, 0, 0, 0.25) -1.1em -1.1em 0 0, rgb(0,191,255) 0 -1.5em 0 0, rgb(0,191,255) 1.1em -1.1em 0 0;
  box-shadow: rgb(0,191,255) 1.5em 0 0 0, rgb(0,191,255) 1.1em 1.1em 0 0, rgb(0,191,255) 0 1.5em 0 0, rgb(0,191,255) -1.1em 1.1em 0 0, rgb(0,191,255) -1.5em 0 0 0, rgb(0,191,255) -1.1em -1.1em 0 0, rgb(0,191,255) 0 -1.5em 0 0, rgb(0,191,255) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#myModalRegister .modal-footer .btn-success:hover{
    background: #33a965;
}

.owl-stage-outer img{
    width: 100%;
    padding:2%;
}

#viewCategory{
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

}

/* Upload Component */
.wallpaperUploader{
    position: relative;
    width: 100%;
    padding: 40px 15px;
    text-align: center;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 3px dashed #9b9b9b;
    border-width: thin;


    font-size: 20px;
    cursor: pointer;
}
.wallpaperUploader p{
    font-size:15px;
    margin-top: 5%;
}
#searchField .v-select .dropdown-menu{
    min-width: 100%;
}
.btn-upload{
    /* background: url('/images/popup_btn_signin.png') no-repeat center center; */
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    /* background-size: 100%; */
    margin-top: 10px;
    background-color: #00C554;
    color: #FFFFFF;
    font-size: 15px;
    border-radius:  5px;
    /* padding: 20px; */
}
.btn-upload:hover{
    color: #FFFFFF;
    background-color: #33a965;
}
.margin-bottom-10px{
    margin-bottom: 10px;
}
/*#uploadWallpaperTitle label{
    font-size: 20px;
}
#uploadWallpaperTitle+label{
    font-size: 20px;
}*/
.popup-image-upload{
    position: absolute;
    bottom: 140px;
    right: 60px;
}

.popup-cat-image-upload{
    position: absolute;
    bottom: 150px;
    right: 60px;
}

.popup-image-upload-admin{
    position: absolute;
    bottom: 220px;
    right: 60px;
}
#btn-close-login-modal{
    position: absolute;
    background-color: #9b9b9b;
    color: #ffffff;
    padding: 5px 9px;
    right: 0;
    top: 0;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
}

#btn-close-login-modal:hover{
    background-color: #FF0000;
    cursor: pointer;
}

#btn-close-login-modal:focus{
    outline: none;
}

#btn-close-register-modal{
    position: absolute;
    background-color: #9b9b9b;
    color: #ffffff;
    padding: 5px 9px;
    right: 0;
    top: 0;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
}

#btn-close-register-modal:hover{
    background-color: #FF0000;
    cursor: pointer;
}

#btn-close-register-modal:focus{
    outline: none;
}

#btn-close-upload-modal{
    position: absolute;
    background-color: #9b9b9b;
    color: #ffffff;
    padding: 5px 9px;
    right: 16px;
    top: 16px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
}
#btn-close-upload-modal:hover{
    background-color: #FF0000;
    cursor: pointer;
}
#btn-close-upload-modal:focus{
    outline: none;
}
.typeSelectLabel{
    margin-top: 15px;
    margin-left: auto;
}
/*.typeSelectLabel>label{
    margin-left: -15px;
}*/

#btn-select-different-image{
    position: absolute;
    right: 1px;
    top:-8px;
}
#btn-select-different-image-admin{
    position: absolute;
    right: 1px;
    top: -10px;
}
#btn-crop{
    position: absolute;
    right: 100px;
    top: 180px;
}
#selectFileButton{
    display: none
}


/* USER-HEADER */
#userHeader>.jumbotron2 {
    background: url("../images/profile_bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    min-height: 250px;
    max-height: 250px;
}
.userProfileImage{
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.smallUserProfileImage{
    border-radius: 50%;
}
.user-wallpaper-searchfield{
    /* width: 100%; */
    padding-bottom: 0;
    margin: auto;
    background: #ffffff;
    /* min-height: 180px; */
}
#one-wallpaper-in-uploaded-page{
    margin-bottom: 50px;
}

#userHeader .nameAndAvatar{
    margin: auto;
}
#userHeader .nameAndAvatar>.text-left>h1{
    margin-top: 12px;
    margin-bottom: 2px;
}
#userHeader .nameAndAvatar>div>.nameAndEmail{
    color: #ffffff;
}

.nameAndEmail{
    margin-left: 10px;
}
#profileCameraIcon{
    position: absolute;
    bottom: -15px;
    left: 35px;
}
#user-header-nav{
    margin: 0 auto;
    color: #ffffff;
    /* background: red; */
    padding-bottom: 10px;
}

#user-header-nav a{
    text-decoration: none;
}
/* #user-header-nav div{
    width: 150px;
} */
#user-header-nav a>p{
    color: #ffffff;
/*    font-size: 20px;*/
}
#tab-favourites{
    margin: 0 130px;
}
.nameAndEmail>p:first-child{
    font-size: 40px;
}

.imageView{
    position: relative;
    width: 100%;
    overflow: hidden;
}
#admBtnUploadImage1 .imageView{
    height: 100%;
}
.imageView img {
  width: 100%;
  height: auto;
}
.imageView .btn{
  position: absolute;
  top:25px;
  right: -14px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: rgba(85,85,85,0.3);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 25px;
  border-radius: 5px;
  padding: 0px 8px;
  padding-bottom: 0px;
}

.imageView .btn:hover {
  background-color: black;
}

.admin-header-nav-container{
    margin-right: 8%;
    margin-left: 8%;
}
#admin-header-nav{
    margin: 0 auto;
    color: #FFFFFF;
    padding-bottom: 10px;
}

/*#admin-header-nav>div{
    margin: 0 15px;
}*/
#admin-header-nav a{
    text-decoration: none;
}
#admin-header-nav a>p{
    color: #ffffff;
    margin-bottom: -5px;

    text-transform: uppercase;

}
.short-underline{
    display: none;
}

#adminWallpaperField{
    margin: 5vh 8% 5vh;
}

#one-wallpaper-in-waiting-list{
    margin-bottom: 10%;
}

.waiting-list-under-view>.row>div:last-child{
    text-align: left;
    margin-left: 10px;
}
/* The user name */
.waiting-list-under-view>.row>div:last-child>p:first-child{ font-size: 14px;
}
.waiting-list-under-view>.row>div:last-child>p:nth-child(2){
    font-size: 14px;
}
/* The "uploaded ... days ago" */
.waiting-list-under-view>.row>div:last-child>p:last-child{
    font-size: 10.5px;
}
.waiting-list-under-view{
    margin-top: 10px;
    font-size: 11px;
    color: #9b9b9b;
}
.waiting-list-under-view>.row{
    margin: auto 10px;
}

#admin-wallpaper-list{
    margin: 5vh 8% 5vh;
}

#admin-wallpaper-list>.row>div{
    margin-bottom: 50px;
}

#adminCategoryName{
    text-align: center;
}

.search-category-management{
    margin: 50px 20% 0;
}
.search-user-management{
    margin: 50px 20% 0;
}

#adminSingleUser{
    font-size: 20px;
}

#adminSingleUser>div>p:last-child{
    color: #9b9b9b;
    font-size: 15px;
}
.user-mng-profile-picture{
    position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
  border-radius: 50%;
  margin: 10px auto;
}
.user-mng-profile-picture img{
    width: auto;
  height: 100%;
  margin-left: -50px;
}

/* .template-about-us .content{
    padding: 50px 0;
} */
.template-about-us .content .item{
    padding-bottom: 50px;
}
.template-about-us .content .item h3.special{
    padding: 20px 0;
}
.template-about-us .content .item img{
    /*width: 70%;*/
}
.template-about-us .image-background {
    position: absolute;
    z-index: 0;
}
.template-about-us .image-background img {
    max-width: 100%;
}
.template-about-us .title h1 {
    padding: 95px 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
}
/*ADMIN*/
.admin-cp .modal-header{
    padding: 1rem;
}
.admin-cp .action-field i{
    cursor: pointer;
}
.admin-cp ul.menu-item{
    padding-top: 30px;
}
.admin-cp ul.menu-item li{
    float: left;
    padding-right: 20px;
}
.admin-cp .multiselect-container{
    font-size: 13px;
}
.admin-cp .alert-errors{
    color: red;
    font-size: 15px;
    font-style: italic;
}
.admin-cp .content-header {
    position: relative;
    padding: 15px 15px 0 15px;
}


.imageCategoryPreview{
    /*width: 250px;*/
}
.imageCategoryPreview>.col-8{
    padding-left: 0px;
    width: 250px;
}
.navbar-toggler-icon{
    color:white;
}
.nameAndAvatar .item{
    margin: 5% auto 2.5%; display: inherit;
}
.nameAndAvatar p{
    margin: 0 !important;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler{
    border:none;
}

#headerDropdown{
    overflow-y: scroll;
    max-height: 300px;
    margin-top: 0px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

.v-select>.dropdown-menu::-webkit-scrollbar:first-child{
    display: none;
}
.v-select>.dropdown-menu::-webkit-scrollbar:nth-child(4){
    display: none;
}
.v-select>.dropdown-menu::-webkit-scrollbar:last-child{
    display: none;
}
.v-select.custom-select-btn.open .selected-tag {
     display: block !important;
     opacity: inherit !important;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

  .card-body.row.no-gutters.align-items-center {
/*
    position: relative; */
    padding: 0;
}
.card-body.row.no-gutters.align-items-center>div:first-child{
    position: relative;
}
.card-body.row.no-gutters.align-items-center>div:last-child{
    position: absolute;
}
.col-auto{
    right: 20px;
}
.btn:focus{
    box-shadow: none;
}
.user-wallpaper-searchfield{
    background: none;
/*    padding-top: 2%;*/
/*    margin-bottom: -4%;*/
}
#tagDuplicateAlert{
    position: sticky;
}
.tagDuplicateAlert{
    margin-top: 5px;
    border-radius: 5px;
    text-align: center;
}
span.btn.btn-default.btn-sm{
    background-color: #ECEEF1;
}
.tag-list>ul li{
    display: inline-block;
    margin-right: 5px;
    margin-top: 5px;

}
.tag-list{
    margin-bottom: 10px;
}

/* .wallpaper-status span{
    color: white;
    width: 60%;
    border-radius: 5px;
    text-align: center;
    padding: 3px;
} */
.wallpaper-status{
    position: absolute;
    top: -10px;
    right: 5px;
}

#color_Red{
    color:red;
}

.btn-upload-new{
    margin-top: 7px;
}



.v-select.custom-select-btn .vs__selected-options{
    background: url('../images/filter_select.png') no-repeat center center;
    background-size: auto 100%;
    background-position: right;
}
.v-select .selected-tag{
    font-size: 15px;
    line-height: 1px;
    margin: -4px 10px 0;
}
.v-select.custom-select-btn.open .selected-tag{
    display: none;
}

#btnEyeSwitch{
    background: #EDEDED;
    border: none;
}


.transparent-border{
/*    border: 1px solid #FFFFFF;*/
    padding: 15px 0px;
}

.infoBorder{
    border: 1px solid #ccc!important;
    border-radius: 5px;
}

#user-home-avatar{
    position: relative;
}
#user-home-avatar>img{
    position: absolute;
    width: 35px;
    height: 35px;
    top: -5px;
    left: -10px;
    border-radius: 50%;

}
#user-home-avatar+span{
    margin-left: 35px;
}

#btn-select-different-image-avatar{
    position: absolute;
    top: -8px;
    right: 16px;
}

#myModalLogin input[name=email]:focus{
    box-shadow: unset;
    background: #EDEDED;
}
#myModalLogin input[name=password]:focus{
    box-shadow: unset;
    background: #EDEDED;
}

.group-image-view>div>span>img{
    position: relative;
    top: -1px;
}
#categoryButtonsRow>span>img{
    position: relative;
    top: -1px;
}
#adminCategoryButtonsRow>span>img{
    position: relative;
    top: -1px;
}

/* label page edit profile */
label[data-v-4882268e][class='text-uppercase']{
    position: relative;
/*    top: 8px;*/
}
.cnp{
    position: unset;
}

#aboutUsJumbotron{
    background: url("../images/banner_about@2x.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    padding: 1%;
}

.wallpaperUploader>img{
    pointer-events: none;
}

#wallpaperFieldInCategory>div>div>div>div[class="imageView"]>div[class="text-center"]>div[class="wallpaper-status"]{
    display: none;
}

.navbar-search-form{
    position: relative;
    background-color: #EBEBEB;
    margin-left: -20%;
    width: 120%;
}
.navbar-search-form>form{
}
.navbar-search-form>form>input{
    border: none;
    width: 91%;
    background-color: #EBEBEB;

}
.navbar-search-form>form>button{
    position: absolute;
    top: 0;
    right: -7px;
    color: #909090;
}

#btn-close-edit-cate-modal{
    position: absolute;
    background-color: #9b9b9b;
    color: #ffffff;
    padding: 5px 9px;
    right: 16px;
    top: 16px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
}

.typeSelectLabel>div{
    background: unset;
    padding-top: 7px;
}

.modal-header>h4{
    margin: auto;
    margin-top: 10px;
}

.search-category-management button{
    padding-top: 5px;
}
.v-select.custom-select-btn{
    width: 24.5%;
    margin: 0 0.25%;
}
#dimensionCombobox,
#CategoryCombobox
{
    font-size: 15px;
    line-height: 25px;
    height: 30px;
    display: flex;
    flex-basis: 100%;
    flex-grow: 1;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 24.5%;
    margin: 0 0.5%;
}
#ColorCombobox,
#typeCombobox{
    font-size: 15px;
    line-height: 25px;
    height: 30px;
    display: flex;
    flex-basis: 100%;
    flex-grow: 1;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 24%;
    margin: 0 0.25%;
    text-align: left !important;
}

#ColorCombobox option {
    font-weight: 600;
}

#admBtnUploadImage2{
    margin-top:15px;
}
#add-new-text{
    position: absolute;
    bottom: 25px;
    left: 13px;
}
.context-menu{
    cursor: default;
}

.upload-image{
    padding-top: 75px;
}

.upload-button{
    margin-bottom: 90px;
}

#categorySearchBar{
    background-color: #FFFFFF;
    height: 43px;
}
#categorySearchBar>div>div>input{
    padding: 0 16.5% 0 3.5%;
}
#categorySearchBar > div > div > button {
    background: #00C554 ;
border-radius: 5px;
color: white;
font-size: 17px;
padding: 7px;
margin-right: -13px;
}
.admin-category-action > button{
    border: 0.5px solid #fff;
    color: #707070;
    background: #F4F4F4;
    font-size: 13px;
    height: 33px;
    width: 100px;
    padding: 6px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

#categoryButtonsRow>.viewDownload{
    margin-left: 15px;
    margin-right: 15px;
}
#adminCategoryButtonsRow>.viewDownload{
    margin-left: 15px;
    margin-right: 15px;
}

#singleCategory > img{
    margin-bottom: 5px;
}

.button-desktop{
    margin-top: 5px;
}

.detail-container{
    padding-left : 0;
    padding-right: 0;
}

.c-single-page{
    padding: 30px 0;
}
.c-single-page h1{
    padding-bottom: 20px;
}

.admin-page .form-control {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
}
.admin-page label{
    color: #6c757d;
}

/* ----update_seo 3/11/2022------ */
#relateds h3 {
    margin-top: 0!important;
    padding-bottom: 16px;
    font-size: var(--size-h3)!important;
}
img[lazy=loading] {
    max-width: 50%;
    height:auto;
    display:block;
    margin:auto
}
img[lazy=error] {
    max-width: 60%;
    height:auto;
    display:block;
    margin:auto
}
#search-nav-bar {
    display:none;
}
#search-nav-bar.active {
    display:flex
}
.pb-footer {
    padding-bottom: 40px;
}
.list-tag .item {
    background: var(--c-primary);
    color: #fff;
    border-radius: 0;
    border: none;
    padding: 8px 24px;
    margin-right: 10px;
    margin-bottom: 10px;
    min-width: 80px;
    text-align: center;
}
.list-tag.home .item {
    background: rgba(200, 200, 200, 0.5);
    padding: 2px 20px;
    font-size: 16px;
}
.breadcrumb {
    background: transparent;
    padding-right: 0;
    padding-left: 0;
    color: var(--c-sub-text);
    font-size: var(--sub-text);
}
.breadcrumb a,
.breadcrumb li {
    color: var(--c-sub-text);
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 20px;
    position: relative;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '';
    width:14px;
    height: 14px;
    position:absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center;
    background-image: url(../images/arrow_2.svg)
}
.no-sort .sort .v-select.unsearchable .dropdown-toggle {
    pointer-events: none;
}
.no-sort .sort .v-select.custom-select-btn .vs__selected-options {
    background-image: none;
}

.list-category {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px
}
.item-category {
    position: relative;
}
.item-category>img {
    width:100%;
    aspect-ratio: 1.7;
    border-radius: 12px;
}
.item-category .des {
    padding:16px;
    width: 100%;
    height:100%;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    display:flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;
}

.nav.nav-search a {
    color:#fff;
    border:none;
    border-bottom:3px solid transparent;
}
.nav.nav-search a.active,
.nav.nav-search a:hover,
.nav.nav-search a.active:focus {
    background: transparent;
    border-color:var(--c-primary);
    color:#fff;
}

.nav.nav-search a:focus {
    border-color: transparent;
}


.title-article {
    color:#fff;
    font-weight: 500;
}
.title-article:hover {
    color:var(--c-primary);
}
.des-article {
    overflow: hidden;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color:var(--c-sub-text);
}

ul.list-layout-wallpaper {
    padding-top: 20px;
    padding-inline-start: 0;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    orphans: 1;
    widows: 1;
}

ul.list-layout-wallpaper li {
    margin-bottom: 15px;
}

/* ------wallpaper-layout-home--------- */
.discovery-more {
    position: absolute;
    bottom:0;
    left: 0;
    height: 250px;
    width:100%;
    background-image:linear-gradient(rgba(14, 30, 48, 0),rgba(14, 30, 48, 1)) ;
}
.discovery-more>a {
    color:#fff;
    background:#36C457;
    padding:4px 24px;
    border-radius: 6px;
}
.title.title-home {
    display:flex;
    align-items: center;
    justify-content:space-between;
    flex-wrap: wrap;
    padding-top: 50px;
}
.title.title-home>h2 {
    padding-left: 42px;
    position: relative;
}
.title.title-home>h2::after {
    content: '';
    width:36px;
    height: 36px;
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center left;
}
.title.title-home>h2>span {
    content: '';
    width:calc(100% - 42px);
    height: 2px;
    position:absolute;
    background-color: #40d1ff;
    right: 0;
    bottom: -4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center left;
}
.title.title-home.new>h2::after {
    background-image: url(../images/new.svg)
}
.title.title-home.hot>h2::after {
    background-image: url(../images/hot.svg)
}
.title.title-home.cool>h2::after {
    background-image: url(../images/cool.svg)
}
.title.title-home.desktop>h2::after {
    background-image: url(../images/computer.svg)
}
.title.title-home.mobile>h2::after {
    background-image: url(../images/smartphone.svg)
}
.title.title-home.blog>h2::after {
    background-image: url(../images/blog.svg)
}
.title.title-home.category>h2::after {
    background-image: url(../images/category.svg)
}
.title.title-home>a {
    padding-right: 20px;
    position: relative;
    color: #fff;
}
.title.title-home>a::after {
    content: '';
    width:16px;
    height: 16px;
    position:absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center right;
    background-image: url(../images/arrow.svg)
}
.singleWallpaper {
    position: relative;
}
.singleWallpaper:hover .des {
    opacity: 1;
    transition: all 0.25s
}
.singleWallpaper .des {
    opacity: 0;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color:rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 14px;
    line-height: 24px;
}
.singleWallpaper .des .icon-left {
    position: relative;
    padding-left:24px;
    margin-left: 8px;
}


/* ------detail--------- */
#detail .icon-left {
    position: relative;
    padding-left:32px;
    margin-left: 14px;
}
.singleWallpaper .des .icon-left::before,
#detail .icon-left::before {
    content: '';
    position: absolute;
    width: 24px;
    height:24px;
    left: 0;
    top: 50%;
    transform:translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/View.svg);
}
#detail .icon-left::before {
    width: 32px;
    height: 32px;
}
.singleWallpaper .des .icon-left.download::before,
#detail .icon-left.download::before {
    background-image: url(../images/Download.svg);
}
.singleWallpaper .des .icon-left.like::before,
#detail .icon-left.like::before {
    background-image: url(../images/Like.svg);
}
.singleWallpaper .des .icon-left.share::before {
    background-image: url(../images/share.svg);
}
.singleWallpaper .des .list-tag a {
    color: #fff;
    padding: 3px 16px;
    background-color: transparent;
    font-size:16px;
}
.singleWallpaper .des .list-tag a:hover {
    background-color: rgba(200, 200, 200, 0.5);
}

.singleWallpaper .des .button-wallpaper {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    margin-left: 8px;
}

.singleWallpaper .des .button-wallpaper:hover {
    background-color:rgba(255, 255, 255, 0.4)
}

.singleWallpaper .des .button-wallpaper>img {
    width:22px;
    height:22px;
}


/* ----------about-us----------- */
.template-about-us .top {
    padding: 50px 0;
    background-image: url(../images/banner_about.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.template-about-us .top .box-image img {
    max-width: 100%;
    height: auto;
    margin: auto;
}

.template-about-us .bottom .content .item {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap:24px
}
.template-about-us .bottom .content .item img {
    width: 100%;
    aspect-ratio: 1;
}
.template-about-us .bottom .content .item h3 {
    color: #FFAA2C;
}

/* ----------footer------------- */
footer .content {
    color: #fff
}
footer .content a.brand {
    font-size:40px;
    color: #fff;
    font-weight: bold
}
footer .list-social {
    padding-top: 8px;
    display: grid;
    grid-template-columns: 32px 32px 32px 32px;
    grid-gap: 8px;
}
footer .list-social img {
    width: 32px;
    height: 32px;
}
footer .list-ul {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 40px;
}
footer ul.list-cate li>a {
    color:#fff;
    text-transform: uppercase
}
footer ul.list-cate li>a:hover {
    color: var(--c-primary)
}

/* -------pagination-------- */
ul.pagination li {
    margin: auto 3px auto;
}
ul.pagination .page-item.active .page-link,
ul.pagination li>a:hover {
    background: #00c554;
    color: white;
    border: 2px solid #00c554;
    font-weight: 300;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
ul.pagination li>a,
ul.pagination .page-item.disabled .page-link {
    color: #9b9b9b;
    border: 2px solid #9b9b9b;
    background-color: #0A1E31;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/* ////download */
.list-dimension {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 20px ;
}
.list-dimension .item {
    cursor: pointer;
    text-align: center;
    padding:4px 10px;
    background-color:#36C457;
    color:#fff;
    border-radius: 6px;
}
.list-dimension .item:hover {
    background-color:#31669a;
}