@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
@import url('elements/basic-elements.css');
@import url('elements/sweet-alert-custom.css');

/*Basic styles, font family, colours written here
Main colors : #0072BC (blue) #808285 (gray)

Additional colors : #F7CC34 #E8BE2B #BE9A1B (yellows) | #299CE6 #138AD7 #035D98 #014A7A (blues)

Neutral colors : #F9F9F9 #F2F2F2 #E9E9E9 #CDCDCD #ffffff (whites and greys)

Font : SOURCE SANS PRO : https://fonts.googleapis.com/css?family=Source+Sans+Pro


For elements/icons/images refer to the respective folders in assets

 */


body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #ffffff;
    font-size: 13px;
    color: #808285;
    overflow-x: hidden;
}

/*side navigation links*/
.nav > li > a {
    color: #acacac;
    font-weight: 600;
    padding: 14px 20px 14px 20px;
    text-transform: uppercase;
}

.nav > li.active > a {
    color: #0072bc;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: transparent;
    color: #0072bc;
}

.nav > li.active {
    background: transparent;
    border-left: 4px solid #F7CC34;
}

.nav-second-level li a {
    padding: 7px 10px 7px 10px;
    padding-left: 50px;
}

.navbar-fixed-top, .navbar-static-top {
    background: #ffffff;
}

nav ul.metismenu > li {
    border-left: none;
}

.navbar-fixed-top, .navbar-static-top {
    border: none;
}

body.mini-navbar .nav-header {
    background-color: #808285;
}

/*page content background */
.vesta-grey-bkg {
    background-color: #F2F2F2;
}

/*modal blue background*/
.blue-bg{
    background-color:#0072BC;
}

/*loading bar displayed at top of page*/
.pace .pace-progress {
    background: #299CE6;
}

/*highlight plan usage in side nav */
#plan-usage {
    background: #F7CC34;
    color: white;
}

/*footer styles*/
.footer-center {
    text-align: center;
}

.footer {
    background: white;
}

.vesta-copyright {
    padding-top: 10px;
    font-size:10px;
    font-weight: bold;
    color: #808285;
}
.wrapper-content{
    padding: 0px 10px 70px;
}

/*shadow added to header and body*/
.box-shadow{
    box-shadow: -2px 0px 10px -6px rgba(0, 0, 0, .5);
}

@-moz-document url-prefix() {
   .box-shadow{
        box-shadow:none;
    }
}

.page-heading{
    color:#0072BC;
    margin-top:40px;
}

.page-content-wrapper{
    background: white;
    padding-bottom: 40px;
}

.page-content-blue-header{
    height: 80px;
    background: #138ad7;
    margin-bottom: 40px;
}

.page-content{
    margin:20px;
}

.section-heading{
    color:#0072BC;
    font-size:13px;

}

b.form-label{
    font-size:11px;
}
.half-width{
    width:50%;
}

.btn-spacing{
    margin-left:40px;
}

.center-div{
    text-align:center;
    margin-bottom: 20px;
}

/*used inside jqgrid for permission column*/

.switchery {
    background-color: #E9E9E9;
}

/*upload products /images progress bar */

.progressbar-container{

    width: 48%;
    border-radius:20px;
    background-color:#E9E9E9;

}

.progressbar.yellow {
    background-color: #F7CC34;
}

.progressbar-container .progressbar-percentage{
    color:#808285;
}

/*plan  usage/limit progress bar */
.progress-bar{
    background-color:#138AD7;
}

div#report{
    min-height:200px;
    width:100%;
    font-weight:bold;
}

#product-spreadsheet td{
    border:none;
}

.product-spreadsheet-btn{
    margin-top:10px;
    margin-bottom:10px;
}

/*styles for file type input field*/
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

.inputfile:focus + label,
.inputfile.has-focus + label{
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
/*login page styles*/

.login-box .vesta-logo{
    width:30%;
    min-width:250px;
}

.login-box h3 {
    font-size: 70px;
    letter-spacing: 10px;
    margin-top: 40px;
    margin-bottom: 5px;
}

.heading2 {
    font-size: 32px;
    color:white;
    margin-top: 0px;
    margin-bottom: 25px;
    border-bottom:10px solid #299CE6;
    text-transform: uppercase;
}

.login-box .login-form-main-page input:not([type=checkbox]) {
    font-size: 15px;
}

.login-box .login-form-main-page .forgot-pass a {
    border-bottom: 1px dashed white;
    font-size: 12px;
}



.login-box .login-form-main-page .forgot-pass {
    top: 44px;
}

.login-box .login-form-main-page{
    margin-top:50px;
    max-width:50%;
}

.login-btn{
    margin:0 auto;
}
/*.login-box .signup{
    text-align:center;
    padding-top:12px;
}*/
.loginscreen small{
    color:white;
}

.login-form-legend{
    text-align:left;
    color:white;
    padding-left: 10px;
    padding-bottom:10px;
}

.login-box .login-form-main-page .forgot-pass a{

    color:white!important;
}

.login-box .login-form-main-page .forgot-pass{
    top:40px;
}

.login-box .login-form-main-page input:not([type=checkbox]){
    background:transparent;
    border:1px solid white;
    color:white!important;
}

.remember-me-row{
    margin:0 auto;
    color:white;
    /*text-align:left;
    margin-bottom: 40px;*/
    text-align: right;
    margin-bottom: 40px;
    margin-right: 10px;
}

.remember-me-row span{
    padding-right:10px;
    vertical-align:text-bottom;
    font-size: 10px;
}

.login-box .remember-me{
    display:inline-block;
}

.first_row_header span{
    padding-left:10px;
}

.login-btn {
    width: 80%;
}

/*setting footer to fixed because it looks ugly on pages with no/less data
.footer{
    position:fixed;
}*/

/*dropzone-related*/

.dropzone-container{
    border:1px solid #299CE6;
    padding:10px;

}

.dropzone{
    background:#E9E9E9;
}

.dropzone .dz-default.dz-message span{
    color:#808285;


}

.dropzone .dz-default.dz-message .icon-circle-download,.ezdz-dropzone .icon-circle-download{
    fill:#0072BC;
    height:30px;
    width:30px;
}
.ezdz-dropzone span.blue-text {
    border-radius: 0;
    background: none;
    color:#299CE6;
    font-size: 13px;
    font-weight: normal;
    max-width: 90%;
    vertical-align: middle;
    padding: 4%;
    line-height: 10px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: visible;
}

.dropzone .dz-default.dz-message .blue-text{
    color:#0072BC;
}

.profile_ezdz_div{
    width:100%;
    display:inline-block;
}

#edit_profile .ezdz-dropzone, #edit_template .ezdz-dropzone {
    width: 100%;
    min-height: 190px;
    border: 2px solid #E9E9E9;
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0px;
}

#edit_profile .note-editor, #edit_template .note-editor{
    border-radius: 10px;
    width:100%!important;
    max-height:500px;
    border : thin solid #E9E9E9;

}



.profile_ezdz_div .icon-cross.modal-close, .promo_ezdz_div .icon-cross.modal-close{

    width: 15px;
    top: 30px;
    left: -8px;
    z-index:5;
    position:relative;
}

.col-margin-top{
    margin-top:5px;
}

div.no_results{
    padding-left:10px;
}

/*plan page styles*/
.dark-blue-header{
    background:#035D98;
    color:white;
}

.light-blue-header{
    background:#0072BC;
    color:white;
}
.dark-blue-body{
    background:#014A7A!important;
    color:white;
    border:none;
}

.ibox-content{
    text-align:left;
    background:#F9F9F9;
}

.ibox-content small{
    display:block;
    padding:5px 0 5px 0;
    color:#808285;

}

.ibox-content.dark-blue-body small{

    color:white!important;

}
.plan_cell .ibox-content {
    height: 200px;
}

.underline-text{
    border-color:#0072BC;
    padding-bottom:10px;
    border-bottom: 1px solid #0072BC;
    margin-bottom:20px;
}

#usage_id,#plan_panel,.plan_row{
    margin-top:20px;
    margin-bottom:20px;
}

hr.limits{
    margin:3px;
    border-top: 1px solid #CDCDCD;
}

.pricing-text{
    color:#138AD7;
    font-size:larger;
    font-weight:bold;
}

.plan-limit{
    padding:0px!important;
    display:inline!important;
    font-weight:bold;
}

.btn-plan-bottom {
    width: 160px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -80px;
}

.btn-resubscribe {
    width: 160px;
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -80px;
}

/*invite customers */
#invite_send.disabled,
#invite_send.disabled:hover,
#invite_send.disabled:focus,
#invite_send.disabled:active,
#invite_send.disabled.active,
#invite_send[disabled],
#invite_send[disabled]:hover,
#invite_send[disabled]:focus,
#invite_send[disabled]:active,
#invite_send.active[disabled],
fieldset[disabled] #invite_send,
fieldset[disabled] #invite_send:hover,
fieldset[disabled] #invite_send:focus,
fieldset[disabled] #invite_send:active,
fieldset[disabled] #invite_send.active {
    background-color: #E9E9E9!important;
    border-color: #CDCDCD!important;
}

.remove-customer{
    width:15px!important;
    height:15px!important;
}

.btn-remove-customer{
    padding:0px;
    border-color:white;
    border-radius:0px;
}

.btn-remove-customer:hover,.btn-remove-customer:focus,.btn-remove-customer:active{
    background-color: #ffffff ;
    border-color:white ;
    color: #014A7A;
    outline:none;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
    background-color:#0072BC;
}

.div-bottom-padding{
    padding-bottom:20px;
}

/*Styles to overwrite the chrome autofill only on LOGIN,WELCOME ,PROMO_WELCOME,RESET PASSWORD pages*/

#promo_welcome_form input:-webkit-autofill, #reset_password_form input:-webkit-autofill, #login-form input:-webkit-autofill,
#promo_welcome_form input:-webkit-autofill:hover,#confirm_details_form input:-webkit-autofill:hover,#reset_password_form input:-webkit-autofill:hover,#login-form input:-webkit-autofill:hover,
#promo_welcome_form input:-webkit-autofill:focus,#confirm_details_form input:-webkit-autofill:focus,#reset_password_form input:-webkit-autofill:focus,#login-form input:-webkit-autofill:focus
#promo_welcome_form textarea:-webkit-autofill,#confirm_details_form textarea:-webkit-autofill,#reset_password_form textarea:-webkit-autofill,#login-form textarea:-webkit-autofill,
#promo_welcome_form textarea:-webkit-autofill:hover,#confirm_details_form textarea:-webkit-autofill:hover,#reset_password_form textarea:-webkit-autofill:hover,#login-form textarea:-webkit-autofill:hover
#promo_welcome_form textarea:-webkit-autofill:focus,#confirm_details_form textarea:-webkit-autofill:focus,#reset_password_form textarea:-webkit-autofill:focus,#login-form textarea:-webkit-autofill:focus,
#promo_welcome_form select:-webkit-autofill,#confirm_details_form select:-webkit-autofill,#reset_password_form select:-webkit-autofill,#login-form select:-webkit-autofill,
#promo_welcome_form select:-webkit-autofill:hover,#confirm_details_form select:-webkit-autofill:hover,#reset_password_form select:-webkit-autofill:hover,#login-form select:-webkit-autofill:hover,
#promo_welcome_form select:-webkit-autofill:focus,#confirm_details_form select:-webkit-autofill:focus,#reset_password_form select:-webkit-autofill:focus,#login-form select:-webkit-autofill:focus {
    border: 1px solid white;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}
/*end of login form autofill style*/

/*Styles for the previous button svg animation*/
.link {
    color: #808289;
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.link.left {
    /* margin-right: 15px;*/
}

.link--arrowed {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
}

.link--arrowed .arrow-icon {
    position: relative;
    top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
}

.link--arrowed .arrow-icon--circle {
    -webkit-transition: stroke-dashoffset .3s ease;
    transition: stroke-dashoffset .3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}

.arrow-icon.left {
    transform: rotate(180deg);
}

.link:hover {
    /*-webkit-transform: rotate3d(0px,0,0,0deg);
    transform: rotate3d(0px,0,0,0deg)*/
    color: #808289;
}

.link--arrowed:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

/*end of styles for previous button*/

textarea#deny_reason{
    margin:0 auto;
}

.blue-text{
    color:#0072BC;
    font-weight:bold;
}

.white-text{
    color:white;
}

.yellow-text{
    color:#F7CC34;
}

.extra-margin-40{
    margin:40px;
}

@media (max-width: 1140px) {
    .extra-margin-10 {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*white text on blue background*/
.blue-bg-text{
    text-align: center;
    color: white;
    padding-top: 30px;
    font-weight:bold;
}

#website_data_form input#web_address{
    width:100%
}

.extra-padding-top-28{
    padding-top:28px;
}

.extra-padding-top-10{
     padding-top:10px;
 }
.extra-margin-bottom-20{
    margin-bottom:20px;
}
.extra-padding-left-10{
    padding-left:10px;
}

/*Style for a gray coloured vertical separator line*/
.vl {
    border-left: 1px solid #CDCDCD;
    height: 300px;
    position: absolute;
    left: 100%;
    margin-left: -3px;
    top: 0;
}

/*Transparent background*/
.transparent-background{
    background:transparent!important;
}


button:active, button:focus {
    outline: none !important;
}

button::-moz-focus-inner {
    border: 0 !important;
}

/*Hover style for the logout and change account links in top menu*/
.navbar-top-links .dropdown-menu li a:hover{
    color:#0072bc;
}

.customer-group-label{
    font-size:12px!important;
}

table.productsRequest{
    margin:0 auto;
}

a.yellow-text:hover{
    color:white;
}

label#i_agree-error{
    text-transform:initial;
}

.rightAlign{
    text-align:right;
}