.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){

    #splash .orange-bg{
        padding: 0px;
    }

    #splash .content-area{
        padding: 0 100px 200px 100px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    #splash .logo{
        display: inline-block;
        padding-bottom: 90px;
        width: 455px;
    }
    #splash .logo .copyright {
        margin: -24px;
    }
    #splash form input{
        padding: 30px 60px;
        width: 100%;
        font-size: 32px;
        border-radius: 50px;
        border-color: white;
    }
    #splash form .btn{
        padding: 30px;
        width: 100%;
        font-size: 32px;
    }
    #splash form .forgot-password{
        margin-left: 0px;
        padding: 40px;
    }
	
}
/* ------ 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: 400px;
}
#recover-password-pin-prompt input {
    width: 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){

    #popup:before {
        content: none;
    }
    #popup > .content,
    #popup > .content > [id] {
        width: 100%;
        height: 100%;
    }
    #popup > .content .header {
        border-width: 2px;
    }
    #popup > .content .header .fa {
        margin-right: 30px;
        padding: 26px 40px;
        font-size: 50px;
    }

    #popup form input:not([type=checkbox]):not([type=radio]){
        border: solid 2px #ccc;
    }
    #recover-password-prompt,
    #recover-password-pin-prompt,
    #set-new-password-prompt,
    #confirm-set-new-password-prompt {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    #recover-password-prompt .fa-close,
    #recover-password-pin-prompt .fa-close,
    #set-new-password-prompt .fa-close,
    #confirm-set-new-password-prompt .fa-close{
        font-size: 32px;
    }
    #recover-password-prompt label,
    #recover-password-pin-prompt label,
    #set-new-password-prompt label,
    #confirm-set-new-password-prompt label {
        font-size: 32px;
    }
    #recover-password-prompt input,
    #recover-password-pin-prompt input,
    #set-new-password-prompt input,
    #confirm-set-new-password-prompt input {
        padding: 30px 60px;
        width: 100%;
        font-size: 32px;
        border-radius: 50px;
    }
    #recover-password-prompt .btn,
    #recover-password-pin-prompt .btn,
    #set-new-password-prompt .btn,
    #confirm-set-new-password-prompt .btn {
        padding: 30px;
        width: 100%;
        font-size: 32px;
    }

}
/* ------ 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){
    #dashboard-header .logo svg {
        width: 140px;
    }
}
/* ------ END | DASHBOARD | HEADER ------ */


/* ------ MAIN ------ */
#content #main .section-list > div {
    width: 300px;
    height: 200px;
}

@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){
    #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 > 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 .fa {
        display: inline-block;
        vertical-align: top;
        font-size: 36px;
    }
}
/* ------ 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 thead tr {
    background: linear-gradient(#eee,#f3f3f3);
    border-bottom: solid 1px #e6e6e6;
}
.edit.billing table tbody tr:nth-child(2n + 2) {
    background: #fafafa;
}
.edit.billing table tbody tr:last-child{
    border-color: #e6e6e6;
}
#popup form#edit-component-form .sections textarea{
    resize: vertical;
}

#popup #image-library {
    right: -100%;
    box-shadow: 0 0 0px 0 rgba(50,50,50,0.15);
    transition: box-shadow 0.3s linear;
}
#popup #image-library.open {
    box-shadow: 0 0 40px 0 rgba(50,50,50,0.15);
}
#popup #image-library .image-library-container .image .container{
    padding-bottom: 100%;
    box-shadow: 0 0 0 0px rgba(230,230,230,0.3);
}
#popup #image-library .image-library-container .image .container:hover{
    box-shadow: 0 0 0 10px rgba(230,230,230,0.5);
}
#popup #image-library .image-library-container .image.selected .container {
    border-color: #D23227;
    box-shadow: 0 0 0 5px #D23227;
}
#popup #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;
}
#popup #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);
}
#popup #image-library .image-library-container .image .container .check > div .fa {
    font-size: 0px;
}
#popup #image-library .image-library-container .image.selected .container .check > div .fa {
   font-size: 18px;
}

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

@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){
    .edit .width-800 {
        padding: 50px 100px;
        box-sizing: border-box;
    }
    .edit.account-details form:first-child .half-width {
        margin: 10px;
        padding: 0px;
        width: 100%;
    }
    .edit.account-details form:nth-child(2) .third-width {
        width: 100%;
    }

    .edit.billing .width-800 {
        padding: 0px;
    }
    .edit.billing .stats {
        margin: 100px 100px 50px 100px;
    }
    .edit.billing .cards {
        margin: 50px 100px 100px 100px;
    }
    .edit.billing .cards .card {
        width: 100%;
    }
    .edit.billing table {
        font-size: 28px;
    }
    .edit.billing table th:nth-child(1),
    .edit.billing table th:nth-child(3),
    .edit.billing table td:nth-child(1),
    .edit.billing table td:nth-child(3) {
        display: none;
    }
    .edit.billing table th:nth-child(2),
    .edit.billing table td:nth-child(2) {
        padding-left: 110px;
        text-align: left;
    }
    .edit.billing table th:nth-child(4),
    .edit.billing table td:nth-child(4) {
        text-align: center;
    }
    .edit.billing table th:last-child,
    .edit.billing table td:last-child{
        padding-right: 110px;
    }
}
/* ------ 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){
    .filter-clients {
        margin: 0px;
        width: 100%;
    }
    .filter-clients .fa {
        margin: 7px 32px 0 0;
    }
    .filter-clients select {
        padding: 24px 32px;
    }
}


/* ------ 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){
    .projects-list > div:first-child .project {
        width: auto;
        height: auto;
    }
    .projects-list > div:first-child .project > div {
        padding: 0px;
        width: 300px;
        height: 300px;
    }
    #projects .projects-list div.search-projects {
        margin: 0px;
        padding-right: 10px;
        width: 50%;
    }
    #projects .projects-list div.search-projects .search-projects {
        padding: 26px 32px;
        width: 100%;
        font-size: 28px;
    }
    #projects .projects-list div.search-projects .fa {
        margin: 12px 42px;
    }
    #projects .projects-list .filter-clients {
        vertical-align: middle;
        margin-left: 10px;
        padding: 0px;
        width: calc(50% - 60px);
        border: solid 1px #eee;
    }
    #projects .projects-list .filter-clients select {
        padding: 24px 32px;
        font-size: 28px;
        border: none;
    }
    #projects .projects-list .filter-clients .fa {
        margin-top: 10px;
    }
    .projects-list .list .project{
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;
        height: auto;
    }
    .projects-list .list .project:first-child{
        padding-top: 40px;
    }
    .projects-list .list .project:last-child{
        padding-bottom: 40px;
    }
    .projects-list .list .project > div > div:first-child{
        margin-bottom: 5px;
        font-size: 40px;
    }
    .projects-list .list .project > div > div:nth-child(2){
        font-size: 28px;
    }
    .projects-list .list .project > div > .abs {
        position: relative;
        margin-top: 40px;
        padding: 0px;
    }
    .projects-list .list .project > div > .abs .valign-content {
        font-size: 28px;
    }
    .projects-list .list .project > div > .abs .valign-content span {
        display: inline-block;
        padding: 24px 0;
        width: 100%;
        font-size: 28px;
        text-align: center;
        border-radius: 50px;
        box-sizing: border-box;
    }

    #project .title {
        font-size: 48px;
    }
    #project .project-progress-card {
        width: 100%;
        box-sizing: border-box;
    }
    #project .project-details > div:last-child {
        padding: 10px 0 0 0;
        border: none;
    }
    #project .discussion {
        padding: 0px;
    }
    #project .discussion > div {
        padding: 100px;
    }
    #project .messages .message > div {
        width: 100%;
        box-sizing: border-box;
    }
    #project .messages .message > div > div {
        margin: 0px;
        padding: 0px;
        border: none;
    }
    #project .messages .message .id,
    #project .messages .message .date{
        width: 100%;
    }
    #project .messages .message .date{
        margin: 20px 0;
        padding: 20px 0;
        font-size: 28px;
        text-align: left;
        border-top: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }
    #project .messages .message .id .avatar-extra-small {
        width: 100px;
        height: 100px;
    }

    #project .messages .message .id .font-small {
        font-size: 40px;
    }
    #project .messages .message .id .font-extra-small {
        font-size: 28px;
    }
}
/* ------ 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){

    #agreements .agreements-list > div:nth-child(2){
        margin-top: 40px
    }
    #agreements .agreements-list > div:nth-child(2) .valign-content {
        width: 50%;
    }
    #agreements .agreements-list > div:nth-child(2) .valign-content > div {
        padding: 0px;
    }
    #agreements .agreements-list > div:nth-child(2) .valign-content:first-child {
        padding-right: 20px;
        box-sizing: border-box;
    }
    #agreements .agreements-list .search-agreements {
        padding: 24px 32px;
        width: 100%;
        font-size: 28px;
    }
    #agreements .agreements-list > div:nth-child(2) .valign-content > div span {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #agreements .agreements-list > div:nth-child(2) .valign-content > div .fa {
        position: absolute;
        right: 24px;
        top: 26px;
    }

    .agreements-list .agreement {
        margin-top: 50px;
        padding: 0px;
        width: 100%;
        height: auto;
    }
    .agreements-list .agreement > div .fa {
        font-size: 50px;
    }
    .agreements-list .agreement > div > div:nth-child(2) {
        font-size: 40px;
    }
    .agreements-list .agreement > div > div:nth-child(3) {
        font-size: 32px;
    }
    .agreements-list .agreement > div > div:last-child {
        position: relative;
        padding: 30px 0 0 0;
    }
    .agreements-list .agreement > div > div:last-child span {
        display: inline-block;
        padding: 26px 32px;
        width: calc(50% - 10px);
        font-size: 28px;
        text-align: center;
        border-radius: 50px;
        box-sizing: border-box;
    }

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