html, body{
    background:#eee url('/img/library-bg1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body table:nth-child(1) tr:nth-child(1) {
    height: 50px!important;
}

.singlelogin td#footer{
    border:0;
}

.singlelogin .color1{
    color: #eee !important;
}

.singlelogin a:link, .singlelogin a:visited {
    color: #333;
}

.singlelogin .well, .singlelogin .panel {
    border: none;
    width: 400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 26px 20px 30px 20px;
}

.singlelogin .well > a > img {
    width: 100%;
    margin-bottom: 15px
}

.singlelogin .well > legend {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #434343;
    border-bottom: none;
}

.singlelogin .well form .form-control::placeholder {
    color: #BFBFBF;
}

.singlelogin .well form .form-control:disabled {
    cursor: default;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
}
.singlelogin .well form .form-control {
    padding: 6px 8px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.singlelogin .well .glyphicon.glyphicon-eye-open,
.singlelogin .well form .glyphicon.glyphicon-eye-close {
    right: 9px;
    top: 9px;
    padding: 0;
}

.singlelogin .well .glyphicon.glyphicon-eye-open:before {
    content: ' ';
    width: 16px;
    height: 16px;
    display: block;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99978 2C11.5944 2 14.5851 4.58667 15.2124 8C14.5858 11.4133 11.5944 14 7.99978 14C4.40511 14 1.41444 11.4133 0.787109 8C1.41378 4.58667 4.40511 2 7.99978 2ZM7.99978 12.6667C9.35942 12.6664 10.6787 12.2045 11.7417 11.3568C12.8047 10.509 13.5484 9.32552 13.8511 8C13.5473 6.67554 12.8031 5.49334 11.7402 4.64668C10.6773 3.80003 9.35864 3.33902 7.99978 3.33902C6.64091 3.33902 5.32224 3.80003 4.25936 4.64668C3.19648 5.49334 2.45229 6.67554 2.14844 8C2.45117 9.32552 3.19489 10.509 4.25787 11.3568C5.32085 12.2045 6.64013 12.6664 7.99978 12.6667ZM7.99978 11C7.20413 11 6.44106 10.6839 5.87846 10.1213C5.31585 9.55871 4.99978 8.79565 4.99978 8C4.99978 7.20435 5.31585 6.44129 5.87846 5.87868C6.44106 5.31607 7.20413 5 7.99978 5C8.79543 5 9.55849 5.31607 10.1211 5.87868C10.6837 6.44129 10.9998 7.20435 10.9998 8C10.9998 8.79565 10.6837 9.55871 10.1211 10.1213C9.55849 10.6839 8.79543 11 7.99978 11ZM7.99978 9.66667C8.4418 9.66667 8.86573 9.49107 9.17829 9.17851C9.49085 8.86595 9.66644 8.44203 9.66644 8C9.66644 7.55797 9.49085 7.13405 9.17829 6.82149C8.86573 6.50893 8.4418 6.33333 7.99978 6.33333C7.55775 6.33333 7.13383 6.50893 6.82126 6.82149C6.5087 7.13405 6.33311 7.55797 6.33311 8C6.33311 8.44203 6.5087 8.86595 6.82126 9.17851C7.13383 9.49107 7.55775 9.66667 7.99978 9.66667Z' fill='%238C8C8C'/%3E%3C/svg%3E%0A");
}

.singlelogin .well form .glyphicon.glyphicon-eye-close:before {
    content: ' ';
    width: 16px;
    height: 16px;
    display: block;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9211 12.8647C10.7486 13.6084 9.38826 14.0022 7.99978 14C4.40511 14 1.41444 11.4133 0.787109 8C1.0738 6.44714 1.85486 5.0286 3.01378 3.956L0.927776 1.872L1.87111 0.928665L15.0704 14.1287L14.1271 15.0713L11.9204 12.8647H11.9211ZM3.95644 4.9C3.05045 5.72372 2.41932 6.80585 2.14844 8C2.35664 8.91097 2.77462 9.76076 3.36911 10.4817C3.9636 11.2027 4.71819 11.7749 5.57281 12.1529C6.42743 12.5308 7.35847 12.704 8.29184 12.6587C9.2252 12.6135 10.1351 12.3509 10.9491 11.892L9.59711 10.54C9.02157 10.9025 8.33991 11.0587 7.66393 10.983C6.98796 10.9072 6.3578 10.6039 5.87682 10.123C5.39584 9.64197 5.09259 9.01181 5.01682 8.33584C4.94104 7.65986 5.09723 6.9782 5.45978 6.40267L3.95644 4.9ZM8.60911 9.552L6.44778 7.39067C6.32915 7.69262 6.30123 8.02263 6.36745 8.34023C6.43366 8.65782 6.59112 8.94919 6.82052 9.17859C7.04992 9.40799 7.34129 9.56545 7.65888 9.63166C7.97647 9.69787 8.30649 9.66995 8.60844 9.55133L8.60911 9.552ZM13.8711 11.0613L12.9171 10.108C13.3628 9.47287 13.68 8.75679 13.8511 8C13.6699 7.20648 13.3293 6.4581 12.8499 5.80033C12.3705 5.14256 11.7623 4.58915 11.0624 4.17373C10.3624 3.75832 9.5853 3.48958 8.77826 3.38384C7.97122 3.27811 7.15111 3.33758 6.36778 3.55866L5.31578 2.50667C6.14711 2.18 7.05311 2 7.99978 2C11.5944 2 14.5851 4.58667 15.2124 8C15.0082 9.11046 14.549 10.1584 13.8711 11.0613ZM7.81511 5.00533C8.23945 4.97911 8.66452 5.04338 9.06214 5.19388C9.45976 5.34438 9.82085 5.57767 10.1215 5.8783C10.4221 6.17892 10.6554 6.54002 10.8059 6.93764C10.9564 7.33526 11.0207 7.76032 10.9944 8.18467L7.81444 5.00533H7.81511Z' fill='%238C8C8C'/%3E%3C/svg%3E%0A");
}

.singlelogin .well form .form-control-password {
    padding-right: 30px;
}

.singlelogin .well form .form-group {
    margin: 0;
}

.singlelogin .well form .form-group+.form-group {
    margin-top: 20px;
}

.singlelogin .well form .password-recovery-btn:focus {
    border: none;
    outline: none;
}

.singlelogin .well form .password-recovery-btn {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 22px;
    color: #8C8C8C;
    text-decoration: none;
}
.singlelogin .well form .password-recovery-btn span {
    border-bottom: 1px dashed;
    color: #8C8C8C;
}

.singlelogin .well form .sitemode-toggle,
.singlelogin.welcome-container .sitemode-toggle {
    background: #FFFFFF;
    border: 1px solid rgba(73, 175, 208, 0.6);
    border-radius: 34px;
    width: 100%;
    display: flex;
    padding: 2px;
    position: relative;
    margin-top: 14px;
}

.singlelogin .well form .sitemode-toggle input,
.singlelogin.welcome-container .sitemode-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    z-index: 1;
}

.singlelogin .sitemode-toggle > label {
    text-align: center;
    width: 50%;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.singlelogin .sitemode-toggle span {
    padding: 4px;
    display: block;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    border-radius: 100px;
    color: #434343;
}

.singlelogin .sitemode-toggle > label .overlay {
    border-radius: 100px;
    width: 100%;
    top: 0;
    position: absolute;
    height: 100%;
    background: rgba(73, 175, 208, 0.18);
}

.singlelogin .sitemode-toggle > label .overlay {
    transition: left 0.5s;
}
.singlelogin .sitemode-toggle > label input ~ .overlay {
    left: -100%;
}
.singlelogin .sitemode-toggle > label input:checked ~ .overlay {
    left: 0;
}

.singlelogin .sitemode-toggle label > input:not(:disabled):not(:checked)+span:hover {
    color: #49AFD0;
}

.singlelogin .sitemode-toggle label > input:checked+span {
    color: #49AFD0;
    font-weight: bold;
}

.singlelogin .well form button[type=submit]:focus,
.singlelogin .well form button[type=submit]:visited {
    outline: none;
    background: #49AFD0;
    border: 1px solid #49AFD0;
}
.singlelogin .well form button[type=submit] {
    background: #49AFD0;
    border: 1px solid #49AFD0;
    border-radius: 2px;
    outline: none;
    padding: 5px 16px;
    color: #FFFFFF;
}
.singlelogin .well form .sitemode-toggle+div.validation-error {
    margin-top: 16px;
}
.singlelogin .well form input.validation-error {
    border: 1px solid #FF4D4F;
}

.singlelogin .well form div.validation-error {
    color: #FF4D4F;
    margin-top: 20px;
    min-height: 30px;
}

.singlelogin .bottom-block {
    display: flex;
    margin-top: 26px;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.singlelogin .bottom-block .left {
    color: #434343;
}

.singlelogin .bottom-block a {
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    padding: 5px;
    color: #434343;
    text-decoration: none;
    display: block;
    text-align: center;
    min-width: 140px;
    outline: none;
}

.singlelogin .well.login-success {
    padding-top: 64px;
    display: none;
}

.singlelogin .well.no-available-domains {
    padding-top: 64px;
    display: none;
    text-align: center;
    padding-bottom: 20px;
}
.singlelogin .login-success .icon-success,
.singlelogin .no-available-domains .icon-error {
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
}
.singlelogin .login-success .icon-success {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='49' fill='%23BAE0BD' stroke='%235E9C76' stroke-width='2'/%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M24 51.6589L41.8071 69.5L76 35.3408L71.091 30.4998L41.8071 59.7497L28.841 46.7837L24 51.6589Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='52' height='52' fill='white' transform='translate(24 24)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.singlelogin .no-available-domains .icon-error {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='49' fill='%23F78F8F' stroke='%23C74343' stroke-width='2'/%3E%3Cpath d='M72 32.4L67.6 28L50 45.6L32.4 28L28 32.4L45.6 50L28 67.6L32.4 72L50 54.4L67.6 72L72 67.6L54.4 50L72 32.4Z' fill='white'/%3E%3C/svg%3E");
}

.singlelogin .login-success .title,
.singlelogin .no-available-domains .title {
    padding-top: 32px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    color: #595959;
    margin: auto;
}

.singlelogin .no-available-domains .title {
    width: 300px;
}

.singlelogin .login-success .description,
.singlelogin .no-available-domains .description {
    width: 300px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #595959;
    margin: auto;
    padding-top: 16px;
}

.singlelogin .no-available-domains .description {
    width: 360px;
}

.singlelogin .login-success .spinner {
    margin-top: 11px;
    margin-bottom: 40px;

}

.singlelogin .no-available-domains .btn:focus,
.singlelogin .no-available-domains .btn:visited,
.singlelogin .no-available-domains .go-login-btn:focus,
.singlelogin .no-available-domains .go-login-btn:visited {
    outline: none;
    box-shadow: none;
}

.singlelogin .no-available-domains .go-tor-btn,
.singlelogin .no-available-domains .go-vpn-btn {
    width: 360px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    outline: none;
    color: #434343;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.singlelogin .no-available-domains .description+.go-tor-btn,
.singlelogin .no-available-domains .description+.go-vpn-btn {
    margin-top: 32px;
}

.singlelogin .no-available-domains .go-vpn-btn .icon-vpn,
.singlelogin .no-available-domains .go-tor-btn .icon-tor {
    width: 16px;
    height: 16px;
    background-size: 100%;
    display: block;
    margin-right: 6px;
}
.singlelogin .no-available-domains .go-vpn-btn .icon-vpn {
    background-image: url("/img/icon-vpn.svg");
}
.singlelogin .no-available-domains .go-tor-btn .icon-tor {
    background-image: url("/img/icon-tor.svg");
}
.singlelogin .no-available-domains .go-vpn-btn {
    margin-top: 16px;
    margin-bottom: 20px;
}

.singlelogin .no-available-domains .go-login-btn span {
    border-bottom: 1px dashed;
    color: #8C8C8C;
}
.singlelogin .no-available-domains .go-login-btn {
    text-decoration: none;
}

.singlelogin a.btn.go-login-btn:focus,
.singlelogin a.btn.go-login-btn:visited {
    box-shadow: none;
    outline: none;
}
.singlelogin a.btn.go-login-btn {
    width: 100%;
    background: #49AFD0;
    border: 1px solid #49AFD0;
    border-radius: 2px;
    margin-top: 117px;
    margin-bottom: 5px;
    outline: none;
    color: #FFFFFF;
}

.singlelogin hr {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.1);
}

.singlelogin .hideOnSSO{
    display:none;
}

.singlelogin .hxLable{
    display: inline-block;
    background: rgba(255,255,255,0.7);
    padding: 2px 8px;
    color: #000 !important;
}

.singlelogin .myBreadcrumb,
.singlelogin .myBreadcrumb a:link,
.singlelogin .myBreadcrumb a:visited,
.singlelogin .myBreadcrumb a,
.singlelogin .myBreadcrumb h2
{
    text-align: center;
    margin:0 0 15px 0;
    color: #31B0D5;
    
}

.singlelogin .SLTextOnImage{
    text-shadow: -1px 0 3px #333, 0 1px 3px #333, 1px 0 3px #333, 0 -1px 3px #333;
}

.singlelogin .button-f {
    display: inline-block;
    height: 35px;
    line-height: 40px;
    
    padding-right: 95px;
    padding-left: 100px;
    position: relative;
    background-color: #fff;
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    /* text-shadow: 0px 1px 0px rgba(0,0,0,0.5); */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}

.singlelogin .button-f:hover{
    text-decoration: none;
    color: #eeeaee;
}

.singlelogin .button-f p{
    margin-top:-2px;font-size: 14px; padding-top:0px;}
.singlelogin .button-f span {
    margin-left: 70px;
    margin-top: -2px;
    position: absolute;
    left: 0;
    width: 30px;
    font-size: 20px;
    /* -webkit-border-top-left-radius: 5px; */
    /* -webkit-border-bottom-left-radius: 5px; */
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    /* border-top-left-radius: 5px; */
    /* border-bottom-left-radius: 5px; */
    /* border-right: 1px solid rgba(0,0,0,0.15); */
    text-decoration: none;
}

.singlelogin .button-f.facebook {
    text-align: center;
    background: #3b5998;
}

@media (max-width: 480px) {
    .singlelogin .well {
        width: 100%;
    }
}


/* singlelogin welcome content */

.singlelogin.welcome-container {
    width: 400px;
    height: 360px;
    margin: auto;
    position: relative;
    cursor: default;
}
.singlelogin.welcome-container i.zlibicon-logout {
    position: absolute;
    right: 17px;
    top: 26px;
    cursor: pointer;
    z-index: 2;
    color: white;
    font-size: 13px;
}
.singlelogin.welcome-container:hover .user-card,
.singlelogin.welcome-container .user-card.opened {
    height: 207px;
}
.singlelogin.welcome-container .user-card {
    overflow-y: hidden;
    height: 138px;
    width: 100%;
    background-color: #49AFD0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
    transition: height 0.8s;
}

.singlelogin.welcome-container .user-choice {
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px 6px 4px 4px;
}
.singlelogin.welcome-container .choice-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px 40px 20px;
}
.singlelogin.welcome-container .continue-btn {
    width: 100%;
    background: #49AFD0;
    border: 1px solid #49AFD0;
    box-sizing: border-box;
    border-radius: 2px;
    outline: none;
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 26px;
    padding: 5px;
}
.singlelogin.welcome-container .user-card {
    padding: 26px 26px 16px 26px;
    color: #FFFFFF;
}
.singlelogin.welcome-container .user-card .title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 24px;
    width: 100%;
    line-height: 29px;
}
.singlelogin.welcome-container .user-card .username {
    text-transform: capitalize;
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.singlelogin.welcome-container .user-card .email {
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.singlelogin.welcome-container .user-card .status-info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}
.singlelogin.welcome-container .user-card .account-status {
    white-space: nowrap;
    overflow-x: hidden;
}
.singlelogin.welcome-container .user-card .account-status span {
    background: #FFFFFF;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 14px;
    color: #1890FF;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.singlelogin.welcome-container .user-card .account-status.premium span {
    color: #FAAD14;
}
.singlelogin.welcome-container .account-info {
    overflow: hidden;
    margin-top: 26px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
}
.singlelogin.welcome-container .user-choice .account-info.c-blue {
    position: relative;
    top: 150px;
    color: #49afd0;
    padding: 0 26px;
}
.singlelogin.welcome-container .account-info .item-info i {
    margin-right: 5px;
    font-size: 14px;
}
.singlelogin.welcome-container .account-info .item-info i.zlibicon-download,
.singlelogin.welcome-container .account-info .item-info i.zlibicon-calendar {
    margin-bottom: 2px;
}
.singlelogin.welcome-container .account-info .item-info .item-title {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
}
.singlelogin.welcome-container .account-info .item-info span {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 85px;
    line-height: 20px;
}
.singlelogin.welcome-container .account-info .item-value {
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    white-space: nowrap;
    opacity: 0;
    position: absolute;
}
.singlelogin.welcome-container .account-info .item-value.active {
    position: unset;
    opacity: 1;
    transition: opacity 1s;
}
@media (max-width: 994px) {
    .super-puper-main-container {
        width: 100%!important;
    }
}
@media (max-width: 768px) {
    .singlelogin.welcome-container .user-card {
        height: 207px!important;
    }
}
@media (max-width: 450px) {
    .singlelogin.welcome-container {
        width: 100%;
    }
    .singlelogin.welcome-container .user-card .username {
        max-width: 135px;
    }
    .singlelogin.welcome-container .account-info .item-info + .item-info {
        margin-left: 10px;
    }
    .singlelogin.welcome-container .account-info .item-info span {
        max-width: 70px;
    }
}
@media (max-width: 345px) {
    .singlelogin.welcome-container .user-card .status-info {
        flex-direction: column;
    }
}