.preloader{
    background-image: radial-gradient(circle at top left, #f44c0f,#4900ff);
    background-origin: border-box;
    background-clip: border-box;
}

.bg-linear-blue-orange{
    background: linear-gradient(to right,#4900ff,#f44c0f);
}

/* ------ SPLASH ------ */
#splash .orange-bg {
    background-image: radial-gradient(farthest-side at 100% 100%,rgb(244, 76, 15),rgba(244, 76, 15, 0));
    padding-top: 100%;
}

#splash .logo {
    width: 310px;
}
#splash .logo .copyright {
    margin: -12px;
}
#splash form input {
    padding-left: 25px;
    padding-right: 25px;
    width: 450px;
    border-radius: 40px;
}
#splash form .btn {
    width: 225px;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
	
}
/* ------ END | SPLASH ------ */


/* ------ POPUPS ------ */
/* ------ POPUP - RECOVER PASSWORD ------ */
#popup form input:not([type=checkbox]):not([type=radio]){
    border: solid 1px #ccc;
}
#recover-password-prompt,
#recover-password-pin-prompt,
#set-new-password-prompt,
#confirm-set-new-password-prompt {
    width: 600px;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 620px){
    #recover-password-prompt,
    #recover-password-pin-prompt,
    #set-new-password-prompt,
    #confirm-set-new-password-prompt {
        width: 100vw;
        height: 100vh;
    }
}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

}
/* ------ POPUP - RECOVER PASSWORD ------ */
/* ------ POPUPS ------ */


/* ------ DASHBOARD ------ */
/* ------ DASHBOARD | HEADER ------ */
#dashboard-header .logo svg {
    width: 70px;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    }
}
/* ------ END | DASHBOARD | HEADER ------ */



/* ------ PAGE - HEADING ------ */
#dashboard-heading {
    height: 100px;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    #dashboard-heading {
        padding: 20px 30px;
    }

}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    }
}
/* ------ END | PAGE - HEADING ------ */


/* ------ MAIN ------ */


@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){
    #content #main .section-list {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }
}
@media (max-width: 838px){
    #content #main .section-list {
        grid-template-columns: 50% 50%;
    }
}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    .hwo-dashboard #content #main .container .search input {
        padding-left: 6px;
    }
    #content #main .section-list {
        display: block;
        grid-template-columns: initial;
    }
    #content #main .section-list > div {
        width: 100%;
        height: auto;
    }
    /*#content #main .section-list > div:first-child {
        padding: 40px 40px 20px 40px;
    }
    #content #main .section-list > div:last-child {
        padding: 20px 40px 40px 40px;
    }
    #content #main .section-list > div:not(:last-child){
        height: auto;
    }
    #content #main .section-list > div > div > div {
        display: inline-block;
        vertical-align: top;
        padding: 2px 0 0 20px;
        width: calc(100% - 50px);
        box-sizing: border-box;
    }
    #content #main .section-list > div > div > div .font-500 {
        line-height: 40px;
    }
    #content #main .section-list > div > div > div span {
        line-height: 30px;
    }
    #content #main .section-list > div .fa {
        display: inline-block;
        vertical-align: top;
        font-size: 36px;
    }*/

}

@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

        

    }
}
/* ------ MAIN ------ */


/* ------ EDIT ------ */
#manage form input:not([type=checkbox]):not([type=radio]),
#manage form textarea,
.edit form input:not([type=checkbox]):not([type=radio]),
.edit form textarea,
#popup form input:not([type=checkbox]):not([type=radio]),
#popup form textarea {
    border: solid 1px #ccc;
}
#manage form input:not([type=checkbox]):not([type=radio]).valid:focus,
#manage form select:not([type=checkbox]):not([type=radio]).valid:focus,
#manage form textarea.valid:focus,
.edit form input:not([type=checkbox]):not([type=radio]).valid:focus,
.edit form select:not([type=checkbox]):not([type=radio]).valid:focus,
.edit form textarea.valid:focus,
#popup form input:not([type=checkbox]):not([type=radio]).valid:focus,
#popup form select:not([type=checkbox]):not([type=radio]).valid:focus,
#popup form textarea.valid:focus{
    border-color: #008000;
}
#manage form input:not([type=checkbox]):not([type=radio]).invalid:focus,
#manage form select:not([type=checkbox]):not([type=radio]).invalid:focus,
#manage form textarea.invalid:focus,
.edit form input:not([type=checkbox]):not([type=radio]).invalid:focus,
.edit form select:not([type=checkbox]):not([type=radio]).invalid:focus,
.edit form textarea.invalid:focus,
#popup form input:not([type=checkbox]):not([type=radio]).invalid:focus,
#popup form select:not([type=checkbox]):not([type=radio]).invalid:focus,
#popup form textarea.invalid:focus{
    border-color: #ff0000;
}
.edit.billing table tbody tr:nth-child(2n + 2) {
    background: #f6f6f6;
}
.edit.billing table tbody tr:last-child{
    border-color: #e6e6e6;
}
#popup form#edit-component-form .sections textarea{
    resize: vertical;
}

#image-library {
    right: -100%;
    box-shadow: 0 0 0px 0 rgba(50,50,50,0.15);
    transition: box-shadow 0.3s linear;
}
#image-library.open {
    box-shadow: 0 0 40px 0 rgba(50,50,50,0.15);
}
#image-library .image-library-container .image .container{
    padding-bottom: 100%;
    box-shadow: 0 0 0 0px rgba(230,230,230,0.3);
}
#image-library .image-library-container .image .container:hover{
    box-shadow: 0 0 0 10px rgba(230,230,230,0.5);
}
#image-library .image-library-container .image.selected .container {
    border-color: #D23227;
    box-shadow: 0 0 0 5px #D23227;
}
#image-library .image-library-container .image .container .check > div {
    width: 0px;
    height: 0px;
    box-shadow: 0 0 0 0px rgba(210, 50, 44, 0.5);
    transition: all 0.3s ease-in-out,box-shadow 0.7s ease-in-out;
}
#image-library .image-library-container .image.selected .container .check > div {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 5px rgba(210, 50, 44, 0.5);
}
#image-library .image-library-container .image .container .check > div .fa {
    font-size: 0px;
}
#image-library .image-library-container .image.selected .container .check > div .fa {
   font-size: 18px;
}

#image-library-sidebar{
    width: 0px;
}
#image-library-sidebar #image-library {
    right: 0px !important;
}
#image-library-sidebar .base{
    width: 0vw;
}
#image-library-sidebar.open .base{
    width: 100vw;
}
#image-library-sidebar .content{
    right: -600px;
    box-shadow: 0 0 0px 0 rgba(0,0,0,0.2);
}
#image-library-sidebar.open .content{
    right: 0px;
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.2);
}
#image-library-sidebar .content form .image-library-container,
#image-library-sidebar .content form .upload-files {
    height: calc(100vh - 118px);
}
#image-library-sidebar .content form .image-library-container .list {
    height: calc(100% - 88px);
}

#popup #add-page-form .form-area {
    height: 450px;
}

#manage-website .container .page-components .list .component .handle {
    width: 20px;
}
#manage-website .container .page-components .list .component .container {
    width: calc(100% - 40px);
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){
    #manage-website .entry-tiles .data-properties .list,
    #manage-website .entry-tiles .pages .list {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }
}
@media (max-width: 838px){
    #manage-website .entry-tiles .data-properties .list,
    #manage-website .entry-tiles .pages .list {
        grid-template-columns: 50% 50%;
    }
}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    #manage-website .website-private-mode > div {
        display: block;
        width: 100%;
    }
    #manage-website .website-private-mode > div > div {
        width: 100%;
    }
    #manage-website .website-private-mode > div .toggle {
        margin-top: 20px;
        text-align: center;
    }
    #manage-website .website-private-mode > div .toggle .trans-md {
        top: 0px;
        transform: none;
    }
    #manage-website .website-private-mode > div .toggle .trans-md .hwo-toggle {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }

    #manage-website .data-properties {
        padding: 30px 20px;
    }
    #manage-website .entry-tiles .list > div {
        padding: 10px;
    }
    #manage-website .data-properties > div:first-child {
        padding: 0px 10px;
    }
    #manage-website .entry-tiles .list > div > div {
        padding: 20px;
    }
    #manage-website .entry-tiles .list > div > div > .trans-md {
        top: 0%;
        transform: none;
    }
    #manage-website .entry-tiles .pages {
        padding: 20px;
    }
    #manage-website .entry-tiles .list > div > div > .trans-md {
        top: 0%;
        transform: none;
    }
    #manage-website .entry-tiles .pages > div:first-child {
        padding: 0px 10px 10px 10px;
    }
    #manage-website .entry-tiles .pages > div:first-child > div:last-child {
        padding-left: 10px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
    #manage-website .entry-tiles .pages > div:first-child > div:last-child .btn {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }


    .dashboard-content #manage-menu .entry-tiles {
        padding: 30px;
    }
    .dashboard-content #manage-menu .entry-tiles .heading {
        display: block;
        padding: 30px;
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
    .dashboard-content #manage-menu .entry-tiles .heading > div {
        width: 100%;
        text-align: left;
    }
    .dashboard-content #manage-menu .entry-tiles .heading > div:first-child {
        margin-bottom: 20px;
    }
    .dashboard-content #manage-menu .entry-tiles .heading > div .trans-md {
        top: 0px;
        transform: none;
    }
    .dashboard-content #manage-menu .entry-tiles .heading > div .btn {
        width: 100%;
        text-align: center;
    }
    .dashboard-content #manage-menu .entry-tiles > div:last-child {
        width: 100%;
    }
    .dashboard-content #manage-menu .entry-tiles > div:last-child .menus .item {
        display: block;
    }
    .dashboard-content #manage-menu .entry-tiles > div:last-child .menus .item > span {
        display: inline-block;
        width: 100%;
    }
    .dashboard-content #manage-menu .entry-tiles > div:last-child .menus .item > span:last-child {
        padding-left: 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }


    #manage-notifications > div:last-child > div {
        padding: 30px;
    }
    #manage-notifications > div:last-child > div form {
        padding: 30px;
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
    #manage-notifications > div:last-child > div form .width-70-percent{
        width: 100%;
    }
    #manage-notifications > div:last-child > div form .df {
        display: block;
    }
    #manage-notifications > div:last-child > div form .half-width {
        width: 100%;
    }
    #manage-notifications > div:last-child > div form select {
        width: 100%;
    }
    #manage-notifications > div:last-child > div .top-level-notification .df > div:first-child {
        margin-bottom: 10px;
    }


    #image-library-sidebar .content {
        width: 100vw;
    }
    #image-library-sidebar .content form .image-library-container .list .image {
        padding: 2px;
        width: calc(100% / 3);
    }
    #image-library .image-library-container .image .container {
        border: none;
    }


    #stock .images {
        padding: 30px;
    }
    #stock .images .search-btn {
        display: block;
        padding: 30px;
    }
    #stock .images .search-btn > div {
        width: 100%;
    }
    #stock .images .search-btn > div:first-child{
        margin-bottom: 10px
    }
    #stock .images .search-btn > div:first-child input {
        top: 0px;
        transform: none;
    }
    #stock .images .search-btn > div .btn {
        width: 100%;
        text-align: center;
    }
    #stock .images > div:last-child {
        margin-top: 30px;
        padding: 28px;
    }
    #stock .images > div:last-child .image {
        padding: 2px;
        width: calc(100% / 3);
    }


    .manage-stripe .entry-tiles {
        padding: 30px;
    }
    .manage-stripe .entry-tiles .live-mode form {
        padding: 30px;
        width: 100%;
    }
    .manage-stripe .entry-tiles .live-mode form > div:first-child {
        padding-right: 20px;
        width: calc(100% - 115px);
    }
    .manage-stripe .entry-tiles .live-mode form > div:first-child:before{
        display: none;
    }
    .manage-stripe .entry-tiles .live-mode form > div:last-child {
        width: 115px;
    }
    .manage-stripe .entry-tiles .live-mode form > div:last-child::before{
        content: "";
        display: inline-block;
        vertical-align: bottom;
        margin-left: -5px;
        width: 0px;
        height: 100%;
    }
    .manage-stripe .entry-tiles .live-mode form > div:last-child .hwo-toggle {
        vertical-align: bottom;
        margin-left: -5px;
    }
    .manage-stripe .entry-tiles .stripe-keys form {
        margin-top: 30px;
        padding: 30px;
        width: 100%;
    }
    .manage-stripe .entry-tiles .stripe-keys form .actions {
        display: flex;
    }
    .manage-stripe .entry-tiles .stripe-keys form .actions .btn {
        margin: 15px 0 0 0;
        padding-left: 0px;
        padding-right: 0px;
        width: 50%;
        text-align: center;
    }
    .manage-stripe .entry-tiles .stripe-keys form .actions .btn:first-child {
        margin-right: 20px;
    }


    .edit.account-details .entry-tiles{
        padding: 30px;
    }
    .edit.account-details .entry-tiles .search-btn {
        display: block;
        padding: 30px;
    }
    .edit.account-details .entry-tiles .search-btn > div {
        width: 100%;
    }
    .edit.account-details .entry-tiles .search-btn > div:first-child{
        margin-bottom: 15px;
    }
    .edit.account-details .entry-tiles .search-btn > div:first-child .search-input {
        padding: 15px 20px !important;
        width: 100% !important;
    }
    .edit.account-details .entry-tiles .search-btn > div:first-child div {
        right: 15px;
    }
    .edit.account-details .entry-tiles .search-btn > div:last-child .btn{
        width: 100%;
        text-align: center;
    }
    .edit.account-details .entry-tiles .posts .heading > div,
    .edit.account-details .entry-tiles .posts .post > div {
        width: 50%;
    }
    .edit.account-details .entry-tiles .posts .heading > div:last-child,
    .edit.account-details .entry-tiles .posts .post > div:last-child {
        display: none;
    }

}



#stock .images .image:hover .container .hover{
    opacity: 1;
}
#stock .images .image:hover .container .hover .background {
    opacity: 0.7;
}
#stock .images .image:hover .container .hover .author{
    margin: 20px;
}
#stock .images .image input {
    margin: 0px;
    width: 100%;
    height: 100%;
    border: none;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    }
}


#manage-custom-css #custom-css-code {
    height: calc(100vh - 300px);
    resize: vertical;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    

}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){
    
        

    }
}
/* ------ END | EDIT ------ */


.filter-clients {
    width: 310px;
}
.filter-clients select {
    padding: 15px 40px;
    border: solid 1px #eee;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
    
}


/* ------ PROJECTS ------ */
#projects .projects-list .search-projects {
    width: 665px;
}
#projects .projects-list .search-projects input {
    padding: 15px 40px;
    border-color: #eee;
}
.projects-list .project {
    width: 350px;
    height: 200px;
}
#project .title {
    font-size: 24px;
}
#project .project-details > div:last-child {
    padding: 5px 0 0 0;
    border: none;
}
#project .messages .message > div {
    min-width: 350px;
}


@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
    
}
/* ------ END | PROJECTS ------ */


/* ------ REPORTS ------ */
#view-reports {
    width: 600px;
}
/* ------ END | REPORTS ------ */


/* ------ AGREEMENTS ------ */
#agreements .agreements-list .search-agreements {
    padding: 15px 40px;
    width: 665px;
    border-color: #eee;
}
.agreements-list .agreement {
    width: 350px;
    height: 220px;
}

@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}

/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){

    

}
/* ------ END | AGREEMENTS ------ */
/* ------ END | DASHBOARD ------ */