OwlCyberSecurity - MANAGER

Edit File: installation-wizard.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tc-clear {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: lighter;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', Arial, serif;
    color: #535353;
}

.tc-wiz-screen-wrap  p {
    line-height: 2em;
    font-size: 0.95em;
}

.tc-installation-wizard {
    background-color: #ededed;
}

.tc-wiz-wrapper {
    width: 100%;
    height: 1000px;
    background-color: #ededed;
}

.tc-wiz-screen {
    background-color: #ffffff;
    width: 917px;
    padding: 27px 57px 47px 57px;
    -moz-box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.2);
}

.tc-wiz-screen-wrap {
    width: 917px;
    margin: 0 auto;
    padding-top: 110px;
}

.tc-wiz-screen-header h2 {
    font-weight: lighter;
    font-size: 2.5em;
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid #ececec;
    padding-bottom: 35px;
    text-transform: uppercase;
    color: #8d8d8d;
    letter-spacing: 0.05em;
}

.tc-wiz-screen-half {
    width: 50%;
    float: left;
    padding: 0 23px;
    text-align: center;
}

.tc-wiz-screen-wrap h1 {
    font-size: 3.1em;
    font-weight: lighter;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}

.tc-wiz-screen-half h3 {
    font-size: 1.60em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tc-wiz-screen-footer {
    float: left;
    width: 100%;
    text-align: right;
    border-top: 1px solid #ececec;
    padding: 40px 0 0 0;
    margin-top: 20px;
}

.tc-wiz-screen-footer button {
    -webit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
}

.tc-wiz-screen-content {
    margin: 40px 0 0 0;
}

.tc-button {
    padding: 15px 27px;
    font-weight: lighter;
    font-size: 1.05em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.tc-button.tc-skip-button {
    color: #4a4a4a;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    margin-right: 3px;
    transition: all 0.2s linear;
}

.tc-button.tc-skip-button:hover {
    background-color: #8a7da9;
    color: #fff;
    border: 1px solid #8a7da9;
    transition: all 0.2s linear;
}

.tc-button:hover {
    cursor: pointer;
}

.tc-button.tc-continue-button {
    color: #fff;
    background-color: #8a7da9;
    border: 1px solid #8a7da9;
}

.tc-button.tc-continue-button:hover {
    background-color: #fff;
    color: #4a4a4a;
    border: 1px solid #e0e0e0;
    transition: all 0.2s linear;
}

.tc-button.tc-extra-button {
    color: #fff;
    background-color: #8a7da9;
    border: 1px solid #8a7da9;
}

.tc-button.tc-extra-button:hover {
    background-color: #fff;
    color: #4a4a4a;
    border: 1px solid #e0e0e0;
    transition: all 0.2s linear;
}

.tc-wiz-screen-half input[type="radio"] {
    display:none;
}
.tc-wiz-screen-half input[type="radio"] + label span {
    display:inline-block;
    width:68px;
    height:68px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/radio-button.png') left top no-repeat;
    cursor:pointer;
    transition: all 0.18s linear;
}
.tc-wiz-screen-half input[type="radio"]:checked + label span {
    background:url('../images/radio-button.png') 0 -79px no-repeat;
}

.tc-license-key .tc-wiz-screen-content input[type="text"] {
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 18px 16px;
    width: 100%;
    font-size: 1.1em;
    font-weight: lighter;
    font-family: 'Open Sans', Aria, serif;
    letter-spacing: 0.05em;
}

.tc-wiz-screen-content a {
    color: #8a7da9;
    font-weight: bold;
    text-decoration: none;
}

.tc-steps-countdown {
    width: 680px;
    margin: 0 auto 50px;
    position: relative;
    height: 50px;
}

.tc-wizard-steps-count-1 .tc-steps-countdown{
    display: none;
}

.tc-step-no {
    width: 45px;
    height: 45px;
    background-color: #d7d7d7;
    color: #fff;
    float: left;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
    font-size: 1.7em;
    position: absolute;
    padding: 3px 0 0 0;
    font-weight: 600;
    z-index: 10;
}

.tc-step-1 {
    left: 0;
}

.tc-step-2 {
    left: 31%;
}

.tc-step-3 {
    left: 61%;
}

.tc-step-4 {
    left: 93.4%;
}

/* 3 step wizard */

.tc-wizard-steps-count-3 .tc-step-2 {
    left: 46%;
}

.tc-wizard-steps-count-3 .tc-step-3 {
    left: 94%;
}

.tc-wizard-steps-count-3 .checkin-apps .tc-progress-bar-inside {
    width: 50%;
}

/* 4 steps wizard */

.tc-wizard-steps-count-4 .checkin-apps .tc-progress-bar-inside {
    width: 63%;
}

/* 5 steps wizard */

.tc-wizard-steps-count-5 .tc-steps-countdown .tc-step-2 {
    left: 23%;
}

.tc-wizard-steps-count-5 .tc-steps-countdown .tc-step-3 {
    left: 47%;
}

.tc-wizard-steps-count-5 .tc-steps-countdown .tc-step-4 {
    left: 70%;
}

.tc-wizard-steps-count-5 .tc-steps-countdown .tc-step-5 {
    left: 94%;
}

.tc-wizard-steps-count-5 .settings .tc-progress-bar-inside {
    width: 28%;
}

.tc-wizard-steps-count-5 .pages-setup .tc-progress-bar-inside {
    width: 50%;
}

.tc-wizard-steps-count-5 .checkin-apps .tc-progress-bar-inside {
    width: 75%;
}

.tc-progress-bar {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #d7d7d7;
    top: 21px;
}

.tc-progress-bar-inside {
    width: 0;
    height: 4px;
    background-color: #8a7da9;
    position: absolute;
    z-index: 5;
}

.tc-installation-settings-page .tc-progress-bar-inside {
    width: 33%;
}

.tc-installation-page-setup .tc-progress-bar-inside {
    width: 66%;
}

.tc-finish-setup .tc-progress-bar-inside {
    width: 100%;
}

.tc-active-step {
    background-color: #8a7da9;
}

.tc-setting-label,
.tc-setting-field,
.tc-page-title,
.tc-page-description  {
    float: left;
}

.tc-setting-wrap {
    float: left;
    width: 100%;
    margin: 11px 0 12px;
}

.tc-setting-field {
    width: 35%;
}

.tc-setting-label {
    width: 25%
}

.tc-setting-label {
    font-size: 0.85em;
    padding-top: 10px;
}

.tc-setting-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 17px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 0.85em;
    color: #575757;
    text-transform: uppercase;
    width: 100%;
    background: url('../images/select-arrow.png') 94% 14px no-repeat;
}

.tc-setting-field input[type="text"] {
    padding: 10px 17px;
    border: 1px solid #d9d9d9;
    width: 100%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.tc-setting-field input[type="radio"] {
    position: relative;
    margin-right: 10px;
    margin-top: 11px;
    margin-bottom: 10px;
}

input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #d9d9d9;
}

input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #d9d9d9;
}

input[type='radio']:checked:before {
    width: 9px;
    height: 9px;
    border-radius: 20px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #8a7da9;
    content: '';
    display: inline-block;
    visibility: visible;
    position: absolute;
    z-index: 10;
    text-align: center;
    left: 4px;
    top: 3px;
}

.tc-pages-wrap {
    width: 100%;
    float: left;
    margin: 10px 0 10px;
    border-top: 1px solid #ececec;
    padding-top: 20px;
}

.tc-wiz-screen-content .tc-pages-wrap:nth-child(2) {
    border-top: none;
}

.tc-page-title {
    width: 25%;
    padding-right: 20px;
}

.tc-page-description {
    width: 75%;
}

.tc-page-description p {
    margin: 0;
    line-height: 2em;
    font-size: 0.85em;
}

.tc-page-title span {
    font-weight: bold;
    font-size: 0.85em;
    margin: 15px 0 0 0;
    display: inline-block;
}

.tc-extra-steps {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.tc-extra-steps h3 {
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 1.4em;
}

.tc-extra-steps span.tc-and-between {
    font-weight: bold;
    font-size: 1.5em;
    margin: 0 20px;
    font-weight: lighter;
}

.tc-newsletter-wrap {
    float: left;
    width: 300px;
    text-align: left;
    margin: -15px 0 0 0;
}

.tc-newsletter-wrap input[type="text"]{
    padding: 14px 17px;
    border: 1px solid #d9d9d9;
    width: 220px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    outline: none !important;
    transition: border-color 0.3s linear;
    margin: 15px 0 0 0;
    color: #656565;
    font-size: 0.9em;
    font-weight: lighter;
    font-family: 'Open Sans', Arial, sans-serif;
}

.tc-newsletter-wrap input[type="text"]:focus {
    border-color: #8a7da9;    
}

.tc-installation-wizard .chosen-container-single .chosen-single {
    box-shadow: none;
    font-weight: normal;
    background: #fff;
    border: 1px solid #dde4ef;
    -moz-box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
    -webkit-box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
    box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
}

.tc-installation-wizard input[type="text"], 
.tc-installation-wizard textarea {
    border: 1px solid #dde4ef;
    margin: 1px;
    padding: 8px 7px;
    -moz-box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
    -webkit-box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
    box-shadow: inset 0 0 4px 1px rgba(185, 196, 211, 0.1);
}

.tc-wiz-screen-content ul {
    list-style-type: none;
    padding-left: 20px;
}

.tc-wiz-screen-content ul li {
    margin-bottom: 12px;
    line-height: 1.8em;
}

.tc-wiz-screen-content ul li a {
    border-bottom: 2px dashed #8a7da9;
    font-weight: normal;
}

.tc-aplications-half {
    width: 45%;
    float: left;
}

.tc-aplications-or {
    width: 10%;
    float: left;
    min-height: 100px;
}

.tc-wiz-left-wrap {
    padding-right: 25px;
}

.tc-wiz-right-wrap {
    padding-left: 25px;
}

.tc-app-or {
    width: 67px;
    height: 67px;
    border-radius:50%;
    -webkit-border-radius: 50%;
    background-color: #ededed;
    text-align: center;
    padding: 20px 0 0 0;
    font-size: 20px;
    margin: 150px 0 0 0;
}

.tc-wiz-image-wrap {
    height: 130px;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.tc-wiz-image-wrap img {
    width: auto;
    height: auto;
    align-self: center;
}

.tc-lock-icon {
    background: url(../images/lock-icons-sprite.png) no-repeat 0 0;
    width: 23px;
    height: 21px;
    display: inline-block;
    margin: 2px 0 0 2px;
    float: left;
}

.tc-aplications-half h2 {
    margin-bottom: 5px;
}

.tc-feature-lock-wrap span {
    float: left;
    margin:2px 0 0 0;
    color: #8d8d8d;
}

.tc-feature-lock-wrap {
    background-color: #e4e2e7;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    padding: 3px 11px;
    border-radius: 4px;
    font-size: 0.9em;
}

.tc-feature-lock-wrap.premium {
    background-color: #8a7da9;
    float: right;
}

.tc-feature-lock-wrap.premium span {
    color: #fff;
}

.tc-feature-lock-wrap.premium .tc-lock-icon {
    background-position: -69px 0;
    margin-right: 5px;
}

@media (max-width: 1000px){

.tc-wiz-screen-wrap {
        width: 90%;
    }

.tc-wiz-screen {
        width: 100%;
    }

}

@media (max-width: 800px){
    
    .tc-wiz-screen-half {
        width: 100%;
        margin: 0 0 40px 0;
    }
    
    .tc-extra-steps .tc-and-between {
        display: none;
    }
    
    .tc-extra-steps a {
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .tc-setting-label {
        width: 35%;
    }
    
    .tc-setting-field {
        width: 65%;
    }
    
    .tc-wizard-steps-count-3 .tc-steps-countdown,
    .tc-wizard-steps-count-4 .tc-steps-countdown {
        width: 90%;
    }
    
    .tc-wizard-steps-count-5 .tc-steps-countdown {
        width: 85%;
    }
    
    .tc-aplications-half {
        padding: 0;
        width: 100%;
    }
    
    .tc-aplications-or {
        width: 100%;
    }
    
    .tc-app-or {
        margin: 0 auto;
        text-align: center;
    }
    
    
}

@media (max-width: 680px){
    
    .tc-aplications-half {
        width: 100%;
    }

}

@media (max-width: 560px){ 
    .tc-wiz-screen {
        padding: 27px 20px 47px 20px;
    }
    
    .tc-wiz-screen-half {
        padding: 0;
    }
    
    .tc-wiz-screen-header h2 {
        font-size: 1.7em;
    }
}

@media (max-width: 480px){
    
    .tc-button {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .tc-setting-label,
    .tc-setting-field {
        width: 100%;
    }
    
    .tc-setting-label {
        margin-bottom: 10px;
    }
    
    .tc-page-title,
    .tc-page-description {
        width: 100%;
    }
    
    .tc-page-title {
        margin-bottom: 7px;
    }
    
    .tc-page-title span {
        margin: 0;
    }
    
    .tc-wizard-steps-count-3 .tc-steps-countdown,
    .tc-wizard-steps-count-4 .tc-steps-countdown,
    .tc-wizard-steps-count-5 .tc-steps-countdown {
        display: none;
    }
    
}