/**
 * Styles for Payrope SMS
 * TODO: Move to .less file
 *
 * @date: 2018-11-13
 */

.payrope-well {
    background: #fff;
    border: rgba(100, 100, 100, 0.5);
    padding: 15px;
}

.logo-wrapper {
    width: 320px;
    text-align: center;
    margin: 0 auto;
}

.logo-wrapper>img {
    width: 100%;
}

@media(max-width: 320px) {
    .logo-wrapper {
        width: 270px;
    }
}

#payrope-basic-form {
    max-width: 600px;
    min-height: 300px;
    margin: 0 auto;
}

@media(min-width: 768px) {
    #payrope-basic-form {
        margin-top: 10%;
    }
}

@media(min-width: 1268px) {
    #payrope-basic-form {
        margin-top: 15%;
    }
}

#payrope-basic-form .logo-wrapper {
    text-align: center;
}

#payrope-basic-form label {
    color: #48352a;
}

#payrope-basic-form input[type="text"],
#payrope-basic-form input[type="password"] {
    border-color: rgba(150, 150, 150, 1);
}

#payrope-basic-form input[type="text"]:focus,
#payrope-basic-form input[type="password"]:focus {
    border-color: #007fc6;
}

#payrope-basic-form .control-group {
    margin: 10px 0;
}

#payrope-basic-form .pr-btn {
    padding-top: 15px;
    padding-bottom: 15px;
    background: #007FC6;
    border-color: #007FC6;
}


/**
 * ====================================================================
 * Buttons
 * ====================================================================
 */

.pr-btn-login,
.pr-btn-login:hover {
    background-color: #67ba5b;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #fff;
}

.pr-btn.disabled {
    background: rgb(185, 185, 185)!important;
    border: none;
}

.pr-btn-block-1x {
    padding: 0.35em 1.2em;
}

.pr-btn-outline {
    background: none!important;
    border: 2px solid #007fc6;
}

.pr-btn-outline.login-link {
    border: 2px solid #67ba5b;
}

.pr-btn-outline.signup-link {
    border: 2px solid #e58047;
}


/* --- End Buttons --- */

.attached-message {
    margin-top: 6px;
}

.coupon-area {
    padding: 15px;
    border: 1px solid #007fc6;
    text-align: center;
}

.coupon-area .coupon-value {
    font-size: 2em;
}

.click-here-link {
    text-decoration: underline;
}

.btn.pr-verify {
    color: #fff;
    background-color: #e58047!important;
    border-color: #ed8d57!important;
}

.terms-last-updated {
    color: rgba(150, 150, 150, 1);
}

.keyword-checker.success {
    color: rgba(100, 150, 100, 1);
}

.keyword-checker.failed {
    color: rgba(200, 100, 130, 1);
}

.service-filter-pills>li>a {
    background-color: #fff;
    color: rgb(50, 51, 51);
    border: 1px solid rgb(228, 228, 228);
}

.service-filter-pills>li>a.active {
    font-weight: bold;
    background-color: rgba(200, 200, 200, 0.1);
}

.expired-keyword {
    color: rgba(200, 100, 130, 1);
}

@font-face {
    font-family: 'MYRIADPROREGULAR';
    src: url('../fonts/MYRIADPROREGULAR.eot');
    src: local('../fonts/MYRIADPROREGULAR'), url('../fonts/MYRIADPROREGULAR.woff') format('woff'), url('../fonts/MYRIADPROREGULAR.ttf') format('truetype');
}


/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_4410">Text with this font applied</p> */

.fontsforweb_fontid_4410 {
    font-family: 'MYRIADPROREGULAR' !important;
}


/**
 * Masthead
 */

.payrope-masthead {
    background: #fff!important;
    margin-top: 5px;
}

.payrope-masthead .payrope-logo img {
    width: 250px;
}

@media only screen and (min-device-width: 1024px) {
    .payrope-masthead .payrope-top-bar {
        margin-top: 3px;
    }
    .payrope-masthead .payrope-mast-actions {
        position: relative;
        padding-top: 10px;
    }
    .payrope-masthead .payrope-mast-actions a {
        text-decoration: underline!important;
    }
    .payrope-masthead .payrope-logo {
        padding: 7px 0;
    }
}


/**
 * Pages Navbar
 */

.payrope-navbar {
    padding: 0;
}

.payrope-navbar .nav.navbar-nav {
    margin-top: 20px;
    background: #007FC6!important;
    box-shadow: 1px 1px 5px rgba(100, 100, 100, 1);
}

.payrope-navbar .nav.navbar-nav a {
    font-weight: bold;
    color: #fff!important;
}

.payrope-navbar .nav.navbar-nav a:active,
.payrope-navbar .nav.navbar-nav a:visited,
.payrope-navbar .nav.navbar-nav a:hover {
    background: #006AC6!important;
    color: #fff!important;
}

.payrope-top-bar {}

.payrope-top-bar a,
.payrope-top-bar a:visited,
.payrope-top-bar a:hover {}


/**
 * Footer Styling
 */

.payrope-footer {
    padding: 10px 0;
    margin-top: 5px;
}

.payrope.page-footer {
    background: rgba(50, 50, 50, 1);
    min-height: 120px;
    top: 100;
    color: #fff;
}

.payrope.page-footer .page-footer-inner {
    color: #fff;
}

.payrope.page-footer a,
.payrope.page-footer a:active,
.payrope.page-footer a:visited,
.payrope.page-footer a:hover {
    color: #fff;
}


/**
 * Fonts
 * 
 */

.payrope-red {
    color: #EC6B23!important;
}

.payrope-blue {
    color: #007FC6 !important;
}


/**
 * Buttons?
 */

@media only screen and (min-device-width: 600px) {
    .pr-wide-btn {
        width: 77px;
    }
}

.pr-radio {}

.pr-radio-item {}

.pr-radio-item.active {
    padding: 0px;
    border: 3px solid rgba(0, 127, 198, 0.8);
}

.pr-radio-item-descr {
    padding: 5px;
    /* min-height: 500px; */
    width: 100%;
    border-top: 1px solid rgba(240, 240, 240, 1);
    border-bottom: 1px solid rgba(240, 240, 240, 1);
}

.chose-account-type>p {
    padding: 20px!important;
}

.chose-account-type .preview-image-wrapper {
    background: rgba(50, 50, 50, 0.3);
    float: left;
}

.chose-account-type .preview-image-wrapper img {
    display: block;
    width: 190px;
    height: 250px;
    float: left;
    vertical-align: top;
}


/**
 * Wizard Styles. 
 * Overrides for metronic's..
 */

.nav.steps li.payrope-completed-step .step span.number {
    background: #45B6AF!important;
    color: #fff;
}

.nav.steps li.payrope-completed-step .step span.desc {
    color: #45B6AF!important;
}

.nav.steps li.payrope-active-step .step span.number {
    background: #007FC6!important;
    background: #EC6B23!important;
    color: #fff;
}

.nav.steps li.payrope-active-step .step span.desc {
    color: #EC6B23!important;
}


/** Dashboard **/

.dashboard-panel .panel-heading {
    font-size: 2em;
}

.dashboard-panel-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.dashboard-panel-list .dashboard-panel-item,
.dashboard-panel-list li {
    background-color: rgba(250, 250, 250, 0.5);
    display: inline-block;
    float: left;
    padding: 15px;
    text-align: center;
    margin: 5px;
    width: 150px;
}

.dashboard-panel-list li img {
    width: 100%;
    height: 100%;
}

.dashboard-panel-list li a {
    display: block;
    text-align: center;
}

.dashboard-panel-list>li .payrope-icon {
    display: block;
    text-align: center;
    font-size: 3.6em;
}

.dashboard-panel .panel-body {
    color: #fff;
    background-color: #62adfe;
}

.dashboard-panel .panel-body a {
    color: #fff!important;
    text-decoration: underline;
}

.dashboard-icon {
    display: block;
    text-align: center;
    font-size: 3.6em;
}


/** Registration **/

.hero-unit {
    color: #fff;
    background: #333;
    background: url('../img/tile-image.jpg');
    height: 400px;
    padding: 10px;
}

.registration-panel.simple {
    background: #fff;
    color: #333;
    padding: 10px;
    margin: 10px 0;
}

.rating.stars a {
    text-decoration: none;
    background: url(../../img/star-icon-inactive.png) no-repeat;
    background-size: contain;
    width: 20px;
    display: inline-block;
    padding: 0
}

.rating.stars a:hover {
    background-size: contain;
    background: url(../../img/star-icon-active.png) no-repeat;
    width: 20px;
}

.rating.stars a.inactive {
    background-image: url(../../img/star-icon-inactive.png) no-repeat
}

.rating.stars a.active {
    background-image: url(../../img/star-icon-active.png)!important
}

.dashboard .search-bar input {
    height: 41px;
}

.payrope-panel-header {
    padding-bottom: 5px;
}

.payrope-panel-header .header-label {
    padding: 15px 0;
    margin: 5px 0;
}

.payrope-panel-header input.form-control {
    height: 2.4em;
    font-size: 12px!important;
    margin-bottom: 3px!important;
}

.payrope-panel-footer {
    border-top: 1px solid rgba(240, 240, 240, 1);
    padding-top: 10px;
}

.payrope-panel-footer .col-md-3,
.payrope-panel-footer .col-md-4,
.payrope-panel-footer .payrope-pagination {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.auxilliary-info-bar span {
    padding: 5px 7px;
}

.card {
    margin-bottom: 24px;
    border: none;
    box-shadow: 0 0 0.875rem 0 rgba(33, 37, 41, .05);
}

html,
body {
    position: relative;
    overflow-x: hidden;
    background-color: #F7F7F7;
    /*font-family: 'Roboto' sans-serif;*/
}

img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

header {
    position: fixed;
    z-index: 1;
    width: 100%;
    top: 0;
    left: 0;
}

header nav {
    background-color: #FFFFFF;
    height: 70px;
    width: 100%;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .20);
}

header nav .logo-container {
    width: 150px;
    height: 100%;
}

section.login-area,
section.forgot-password-area,
section.download-area,
section.request-notice-area {
    height: 100vh;
    overflow: auto;
}

body.IE section.login-area,
body.IE section.download-area,
body.IE section.forgot-password-area,
body.IE section.request-notice-area {
    display: block!important;
    padding: 0
}

body.IE section.login-area .container,
body.IE section.download-area .container,
body.IE section.forgot-password-area .container,
body.IE section.request-notice-area .container {
    padding-top: 10vh;
    padding-bottom: 10vh
}

section.login-area .container,
section.download-area .container,
section.forgot-password-area .container,
section.request-notice-area .container {
    max-width: 1300px
}

.login-box,
.download-box,
.forgot-password,
.request-notice {
    max-width: 400px;
    width: 100%;
    padding: 20px 20px;
    margin: 5px auto;
    box-shadow: 0 0 0.875rem 0.15rem rgba(33, 37, 41, .20);
}

.invalid-feedback {
    font-size: 1em !important;
}