@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700");

/* Colori Dominanti */
.skin-outlook.login-page #login-form .box-inner form .formbuttons input, .skin-outlook.logout-page #login-form .box-inner form .formbuttons input {background: #10ae3f !important;} /* accedi */
.skin-outlook.login-page #login-form .box-inner form .formbuttons input:hover, .skin-outlook.logout-page #login-form .box-inner form .formbuttons input:hover {background: #0da139 !important;} /* accedi hover */
.skin-outlook.logout-page #login-form .box-inner, .skin-outlook.login-page #login-form .box-inner {background: rgba(255,255,255,.92) !important} /* box login */
.skin-outlook.logout-page::after, .skin-outlook.login-page::after {background: #68CE4E !important} /* fascia destra */


#header .topleft, #taskbar #button-apps {display: none !important}
#login-form .box-inner {top: 0;right: 0;padding: 0 0 0 40px;background: #fff !important;border: none;width: 310px;margin: 0;min-height: 420px;border-radius: 0;box-sizing: content-box;}
.skin-outlook.login-page #login-form .box-inner form .formbuttons input, .skin-outlook.logout-page #login-form .box-inner form .formbuttons input {margin: 0 !important; cursor: pointer; font-size: 14px; text-transform: uppercase; max-width: 150px; font-weight: 700 !important; border-radius: 3px !important; padding: 15px; box-shadow: 0 3px 12px rgba(0,0,0,.06)}
.skin-outlook.login-page #login-form .box-inner form .formbuttons input:hover, .skin-outlook.logout-page #login-form .box-inner form .formbuttons input:hover {box-shadow: 0 3px 12px rgba(0,0,0,.12)}
.logo-shellrent {display: block;text-align: center !important;width: 100%;}
.logo-shellrent img {top: 100%; position: relative;}


/* DESKTOP */

@media(min-width: 1100px) {
#toplogo {transform: translate(0,-7px);}
.titolo-form {display: table; width: 100%;}
.help-link {display: table; width: 100%;text-align: center !important; padding: 0 0 35px !important}
.help-link a {display: table-cell; vertical-align: top; z-index: 999999}
.colonna-info {display: inline-block; height: 100%; width: 62%;float: left;}
.colonna-info h3, .colonna-info h1 {color: #fff !important; font-weight: 400 !important; margin: 0 !important;}
.colonna-info h1, .colonna-sx-links {padding-bottom: 10vh !important}
.colonna-sx-links {display: block; padding-left: 36px !important}
.colonna-sx-links-1, .colonna-sx-links-2 {display: inline-block;}
.colonna-sx-links-1 a, .colonna-sx-links-2 a {font-size: 15px;color: #fff;text-decoration: none;}
.colonna-sx-links-1 a::before, .colonna-sx-links-2 a::before {content: "";background-size: cover;background-position: center center;background-repeat: no-repeat;width: 20px;height: 20px;position: absolute;transform: translate(-35px,0);}
.colonna-sx-links-1 a::before {background-image: url(https://www.shellrent.com/wp-content/uploads/Link-Desktop.png);}
.colonna-sx-links-2 a {padding-left: 55px;}
.colonna-sx-links-2 a::before {background-image: url(https://www.shellrent.com/wp-content/uploads/Link-Laptop.png);}
.colonna-sx-copyright-content {display: table-cell; vertical-align: bottom; color: rgba(255,255,255,.8);}
.logo-shellrent {padding: 45px 0 40px !important}
#login-form #message {padding: 10px 20px !important}
.skin-outlook.logout-page #login-form .box-inner h1, .skin-outlook.logout-page #login-form #bottomline, .skin-outlook.logout-page #login-form #company-name, .skin-outlook.logout-page #vendor-branding, .skin-outlook.logout-page #login-form .box-inner form table td.title,
.skin-outlook.logout-page #login-form .box-inner h1, .skin-outlook.logout-page #login-form #bottomline, .skin-outlook.logout-page #login-form #company-name, .skin-outlook.logout-page #vendor-branding, .skin-outlook.logout-page #login-form .box-inner form table td.title,
.skin-outlook.login-page #login-form .box-inner h1, .skin-outlook.login-page #login-form #bottomline, .skin-outlook.login-page #login-form #company-name, .skin-outlook.login-page #vendor-branding, .skin-outlook.login-page #login-form .box-inner form table td.title,
.skin-outlook.login-page #login-form .box-inner h1, .skin-outlook.login-page #login-form #bottomline, .skin-outlook.login-page #login-form #company-name, .skin-outlook.login-page #vendor-branding, .skin-outlook.login-page #login-form .box-inner form table td.title {display: none !important}
.skin-outlook.logout-page, .skin-outlook.login-page {background-image: url(https://manager.shellrent.com/custom/login-bg.jpg?135246) !important;width: 100%; min-height: 100vh; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important;}
.skin-outlook.logout-page::before, .skin-outlook.login-page::before {z-index: -3 ;content: ""; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.45); display: block}
.skin-outlook.logout-page #login-form, .skin-outlook.login-page #login-form {background: rgba(0,0,0,0) !important;width: 70% !important;display: block !important;margin: 0 auto !important; height: 100% !important; padding: 18vh 0 80px !important}
.skin-outlook.logout-page #login-form .box-inner, .skin-outlook.login-page #login-form .box-inner {display: inline-block;border-radius: 10px !important;box-shadow: 0 3px 15px rgba(0,0,0,.1) !important;width: 38% !important;padding: 0 !important;}
.skin-outlook.logout-page #login-form .box-inner form .formbuttons, .skin-outlook.login-page #login-form .box-inner form .formbuttons {margin: 0 !important; padding: 0 !important; text-align: center;}
.skin-outlook.logout-page #login-form .box-inner form table .input input, .skin-outlook.login-page #login-form .box-inner form table .input input {color: #0964be !important;font-size: 15px;background: rgba(0,0,0,0) !important;border-top: none !important;border-left: none !important;border-right: none !important;padding: 12px 0 !important; padding-left: 48px !important}
.skin-outlook.logout-page #login-form .box-inner form table tr:first-child .input::before,
.skin-outlook.logout-page #login-form .box-inner form table tr:last-child .input::before,
.skin-outlook.login-page #login-form .box-inner form table tr:first-child .input::before,
.skin-outlook.login-page #login-form .box-inner form table tr:last-child .input::before {content: "";width: 30px;height: 30px;background-position: center !important;background-size: cover !important;display: block;position: absolute; transform: translate(0,4px);}
.skin-outlook.logout-page #login-form .box-inner form table tr:first-child .input::before, .skin-outlook.login-page #login-form .box-inner form table tr:first-child .input::before {background: url(images/webmail-email.png);}
.skin-outlook.logout-page #login-form .box-inner form table tr:last-child .input::before, .skin-outlook.login-page #login-form .box-inner form table tr:last-child .input::before {background: url(images/webmail-password.png);}
.skin-outlook.logout-page #login-form .box-inner form table tr, .skin-outlook.login-page #login-form .box-inner form table tr {padding: 10px 0 !important; display: block}
.skin-outlook.logout-page::after, .skin-outlook.login-page::after {content: "";width: 35%;height: 130%;position: fixed !important;z-index: -1;transform: rotate(9deg);top: -6%;right: -16%;}
.skin-outlook.logout-page #login-form .box-bottom, .skin-outlook.login-page #login-form .box-bottom {display: block !important; width: 100% !important; }
.skin-outlook.logout-page #login-form .box-bottom #message div.warning, .skin-outlook.login-page #login-form .box-bottom #message div.warning {font-size: 18px !important;color: #181818 !important; background: rgb(241, 195, 45) !important; border-radius: 3px !important; opacity: 1 !important;padding: 10px 18px !important}
}

/* MOBILE */

@media(max-width: 1099px) {
.titolo-form {display: table; width: 100%;}
.help-link {display: table; width: 100%; text-align: center !important}
.help-link a {display: table-cell; vertical-align: middle; z-index: 999999}
.colonna-info {width: 100% !important; display: block !important; padding-bottom: 40px !important}
.colonna-info h3, .colonna-info h1 {color: #fff !important; font-weight: 400 !important; text-align: center !important}
.colonna-sx-links {display: block; padding-left: 36px; text-align: center !important; padding-bottom: 30px;}
.colonna-sx-links-1, .colonna-sx-links-2 {display: inline-block;}
.colonna-sx-links-1 a, .colonna-sx-links-2 a {font-size: 13px;color: #fff;text-decoration: none;}
.colonna-sx-links-1 a::before, .colonna-sx-links-2 a::before {content: "";background-size: cover;background-position: center center;background-repeat: no-repeat;width: 20px;height: 20px;position: absolute;transform: translate(-35px,0);}
.colonna-sx-links-1 a::before {background-image: url(https://www.shellrent.com/wp-content/uploads/Link-Desktop.png);}
.colonna-sx-links-2 a {padding-left: 55px;}
.colonna-sx-links-2 a::before {background-image: url(https://www.shellrent.com/wp-content/uploads/Link-Laptop.png);}
.colonna-sx-copyright {display: table; text-align: center !important; width: 100% !important;}
.colonna-sx-copyright-content {display: table-cell; vertical-align: bottom; color: rgba(255,255,255,.8);text-align: center !important;}
.skin-outlook.login-page #login-form .box-inner h1, .skin-outlook.login-page #login-form #bottomline, .skin-outlook.login-page #login-form #company-name, .skin-outlook.login-page #vendor-branding, .skin-outlook.login-page #login-form .box-inner form table td.title,
.skin-outlook.logout-page #login-form .box-inner h1, .skin-outlook.logout-page #login-form #bottomline, .skin-outlook.logout-page #login-form #company-name, .skin-outlook.logout-page #vendor-branding, .skin-outlook.logout-page #login-form .box-inner form table td.title {display: none !important}
.skin-outlook.login-page, .skin-outlook.logout-page {overflow-x: hidden !important;width: 100%; min-height: 100vh; background-image: url(https://manager.shellrent.com/custom/login-bg.jpg) !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important;}
.skin-outlook.login-page::before, .skin-outlook.logout-page::before {z-index: -3 ;content: ""; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.7); display: block}
.skin-outlook.login-page #login-form, .skin-outlook.logout-page #login-form {margin: 0 !important; background: rgba(0,0,0,0) !important; background-image: none !important; width: 100% !important; padding: 40px 30px !important; height: 100% !important}
.skin-outlook.login-page #login-form .box-inner, .skin-outlook.logout-page #login-form .box-inner {position: relative !important ;display: block !important; border-radius: 10px !important;box-shadow: 0 3px 15px rgba(0,0,0,.1) !important;height: 100%; background: rgba(255,255,255,.92) !important; width: 100% !important; padding: 35px 0 !important}
.skin-outlook.login-page #login-form .box-inner form .formbuttons, .skin-outlook.logout-page #login-form .box-inner form .formbuttons {margin: 0 !important; padding: 0 !important; text-align: center;}
.skin-outlook.login-page #login-form .box-inner form table .input input, .skin-outlook.logout-page #login-form .box-inner form table .input input {color: #0964be !important;font-size: 15px;background: rgba(0,0,0,0) !important;border-top: none !important;border-left: none !important;border-right: none !important;padding: 12px 0 !important; padding-left: 48px !important}
.skin-outlook.login-page #login-form .box-inner form table tr:first-child .input::before,
.skin-outlook.login-page #login-form .box-inner form table tr:last-child .input::before,
.skin-outlook.logout-page #login-form .box-inner form table tr:first-child .input::before,
.skin-outlook.logout-page #login-form .box-inner form table tr:last-child .input::before {content: "";width: 30px;height: 30px;background-position: center !important;background-size: cover !important;display: block;position: absolute; transform: translate(0,4px);}
.skin-outlook.login-page #login-form .box-inner form table tr:first-child .input::before, .skin-outlook.logout-page #login-form .box-inner form table tr:first-child .input::before {background: url(images/webmail-email.png);}
.skin-outlook.login-page #login-form .box-inner form table tr:last-child .input::before, .skin-outlook.logout-page #login-form .box-inner form table tr:last-child .input::before {background: url(images/webmail-password.png);}
.skin-outlook.login-page #login-form .box-inner form table tr, .skin-outlook.logout-page #login-form .box-inner form table tr {padding: 10px 0 !important; display: block}
.skin-outlook.login-page #login-form .box-bottom, .skin-outlook.logout-page #login-form .box-bottom {display: block !important; width: 100% !important; padding: 15px 0 !important}
.skin-outlook.login-page #login-form .box-bottom #message div.warning, .skin-outlook.logout-page #login-form .box-bottom #message div.warning {font-size: 15px !important;color: #181818 !important; background: rgb(241, 195, 45) !important; border-radius: 3px !important; opacity: 1 !important;padding: 10px 18px !important}
.colonna-sx-links a, .colonna-sx-links a:hover, .colonna-sx-links a:active, .colonna-sx-links a:visited {color: #fff !important}
}
    

@media(min-width: 1580px) {.skin-outlook.login-page #login-form .box-inner form table tbody, .skin-outlook.logout-page #login-form .box-inner form table tbody {padding: 20px 0 25px; display: block;}}
@media(min-width: 768px) and (max-width: 1579px) {.skin-outlook.login-page #login-form .box-inner form table tbody, .skin-outlook.logout-page #login-form .box-inner form table tbody {padding: 10px 0; display: block;}}
@media(max-width: 767px) {.skin-outlook.login-page #login-form .box-inner form table tbody, .skin-outlook.logout-page #login-form .box-inner form table tbody {padding: 25px 0 15px; display: block;}}

/*contenuti*/

@media(min-width: 1281px) {
.colonna-info h1 {font-size: 52px;}
.colonna-info h3 {font-size: 35px;margin: 0 0 15px !important}
.skin-outlook.logout-page #login-form .box-inner h2, .skin-outlook.login-page #login-form .box-inner h2 {margin: 0;padding: 0;font-size: 26px;font-weight: 400;text-align: center; display: table-cell; vertical-align: bottom}
.skin-outlook.logout-page #login-form .box-inner form, .skin-outlook.login-page #login-form .box-inner form {padding: 0 45px !important;}
}

@media(min-width: 768px) and (max-width: 1280px) {
.colonna-info h1 {font-size: 36px;}
.colonna-info h3 {font-size: 25px;margin: 0 0 15px !important}
.skin-outlook.logout-page #login-form .box-inner h2, .skin-outlook.login-page #login-form .box-inner h2 {margin: 0;padding: 0;font-size: 21px;padding-top: 20px;font-weight: 400;text-align: center; display: table-cell; vertical-align: bottom}
.skin-outlook.logout-page #login-form .box-inner form, .skin-outlook.login-page #login-form .box-inner form {padding: 0 32px !important;}
}

@media(max-width: 767px) {
.colonna-info h1 {font-size: 32px;}
.colonna-info h3 {font-size: 22px;margin: 0 0 15px !important}
.skin-outlook.logout-page #login-form .box-inner h2, .skin-outlook.login-page #login-form .box-inner h2 {margin: 0;padding: 0;font-size: 20px;padding-top: 20px;font-weight: 400;text-align: center; display: table-cell; vertical-align: bottom}
.skin-outlook.logout-page #login-form .box-inner form, .skin-outlook.login-page #login-form .box-inner form {padding: 0 25px !important;}
}

/* header iPhone */
@media(max-width: 1099px) {
body.skin-outlook.xmobile.login-page::before {z-index: -3 ;content: ""; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.7); display: block}
body.skin-outlook.xmobile.logout-page::before {z-index: -3 ;content: ""; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.7); display: block}
body.skin-outlook.xmobile { background-size: cover !important; background-position: center top !important}
body.skin-outlook.xmobile::before { background-color: transparent}
}