:root {
    --brand-app-color: #000000;
    --brand-bg: #FFD600;
    --brand-color: #000000;
    --brand-container-bg: #f7f7f7;
    --brand-logo-bg-img: url("assets/images/online-desk-logo.png");
    --line-color: #000000;
    --master-color: #DBB300;
    --master-color-darken: #B59300;
    --navbar-bg: #FFD600;
    --navbar-border-color: #000000;
    --navbar-container-bg: #999999;
    --navbar-link-active-color: black;
    --navbar-link-color: #FF0000;
    --navbar-link-hover-color: #333;
}

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    /*url('../fonts/Roboto-Regular-webfont.woff2') format('woff2'),*/ url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotocondensed';
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    /*url('../fonts/RobotoCondensed-Regular-webfont.woff2') format('woff2'),*/ url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'), url('../fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'), url('../fonts/RobotoCondensed-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoLight';
    src: url('../fonts/RobotoLight.eot');
    src: local('RobotoLight'), url('../fonts/RobotoLight.woff') format('woff'), url('../fonts/RobotoLight.ttf') format('truetype');
}
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_46401">Text with this font applied</p> */
.fontsforweb_fontid_46401 {
    font-family: 'RobotoLight' !important;
}

@font-face {
    font-family: 'robotobold';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold-webfont.woff2') format('woff2'), url('../fonts/Roboto-Bold-webfont.woff') format('woff'), url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('../fonts/Roboto-Bold-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

iframe {
    border: none;
}

body {
    font-family: 'robotoregular';
    color: #333333;
    font-weight: normal;
}

/*===================================================
  GENERAL
  ===================================================*/

body {
    background-color: #f2f2f2;
    font-family: 'robotocondensed';
}

@media (min-width: 768px) {
    .navbar-brand {
        display: none;
    }
}

.OD-header-container {
    max-width: 1200px;
    background-color: var(--brand-container-bg, unset);
}

.OD-page-container {
    max-width: 1200px;
}

.OD-disp-table {
    display: table;
}

    .OD-disp-table.w100 {
        width: 100%;
    }

    .OD-disp-table > div {
        display: table-cell;
        vertical-align: middle;
    }

.OD-txtstyle {
    font-family: 'robotoregular';
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

/*==================================================
 TITLES
  ==================================================*/

h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #252929;
    font-family: 'RobotoLight';
    margin: 0px;
}

/*---responsive---*/

h3 {
    font-size: 22px;
}

/*==================================================
  HEADER
  ==================================================*/

.OD-header {
    background-color: var(--brand-bg, #00bdd5);
}

/*==== BRAND AREA ====*/

.OD-brand-area {
    float: left;
}

    .OD-brand-area .OD-disp-table {
        height: 80px;
    }

@media (min-width: 992px) {
    .OD-brand-area .OD-disp-table {
        height: 112px;
    }
}

.OD-brand-area .OD-appname .btn {
    font-size: 30px;
    color: #9bf3ff;
    font-family: 'RobotoLight';
}

@media (max-width: 991px) {
    .OD-brand-area .OD-appname .btn {
        font-size: 24px;
        color: #9bf3ff;
        font-family: 'RobotoLight';
    }
}

.OD-brand-area .OD-appname > div > .btn,
.OD-brand-area .OD-appname > div > .btn {
    color: #9bf3ff;
    text-decoration: none;
    cursor: default;
}

.OD-brand-area .OD-appname button.btn:hover,
.OD-brand-area .OD-appname button.btn:focus {
    color: #ffffff;
    text-decoration: none;
}

.OD-brand-area .OD-appname .dropdown {
    display: inline-block;
    vertical-align: middle;
}

.OD-brand-area .OD-logo {
    padding: 0 15px 0 15px;
}

@media (max-width: 767px) {
    .OD-brand-area .OD-appname {
        display: none;
    }
}

@media (max-width: 767px) {
    .OD-brand-screen {
        display: none;
    }
}

/*==== USER AREA ====*/

.OD-user-area {
    float: right;
}

    .OD-user-area .OD-disp-table {
        height: 80px;
    }

@media (min-width: 992px) {
    .OD-user-area .OD-disp-table {
        height: 112px;
    }
}

.OD-user-area .OD-user-photo {
    width: 52px;
}

.OD-user-area .btn-link {
    color: #ffffff;
    text-transform: uppercase;
}

.OD-brand-page .v-line {
    width: 1px;
    height: 52px;
    background-color: var(--line-color,#54d3e3);
    display: block;
}

.OD-user-area .OD-photo {
    background-image: url('../images/user-photo.jpg');
    background-size: cover;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-position: center center;
}

@media (min-width: 768px) and (max-width: 991px) {
    .OD-user-area .OD-photo {
        background-image: url('../images/user-photo.jpg');
        background-size: cover;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-position: center center;
    }

    .OD-user-area .OD-user-photo {
        width: 40px;
    }
}

/*==== NAV ====*/

.navbar-default {
    margin-bottom: 0px;
    border-top: 1px solid #54d3e3;
}

.navbar-nav > li > a {
    text-transform: uppercase;
}

.navbar-default .navbar-toggle {
    border: 0px solid transparent;
}

    .navbar-default .navbar-toggle .icon-bar {
        height: 3px;
        background-color: #ffffff;
    }

.navbar-toggle {
    margin-right: 0px;
}

/*---link---*/

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active {
    background-color: transparent;
}

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar,
    .navbar-default .navbar-toggle:active .icon-bar {
        background-color: #252929;
    }

/*==== RESPONSIVE ====*/

@media (max-width: 767px) {
    .navbar-brand {
        /*float: none;
        display: block;
        margin-right: auto;
        margin-left: auto;*/
        max-width: 180px;
    }

    .navbar-header {
        text-align: center;
    }

        .navbar-header .OD-page-title {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            display: inline-block;
        }

    .navbar-collapse > .OD-user-area {
        float: none;
        display: block;
    }

    .OD-user-area .OD-disp-table {
        height: 80px;
        width: 100%;
    }

    .OD-user-area {
        border-bottom: 1px solid #32c3d8;
    }

        .OD-user-area .OD-disp-table .btn-link {
            float: right;
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    .OD-brand-area .OD-logo > img {
        max-width: 180px;
    }
}

@media (min-width: 992px) {
    .navbar-header .OD-page-title {
        display: none;
        max-width: 180px;
        margin-right: auto;
        margin-left: auto;
        background-color: aqua;
    }
}

/*==================================================
  FOOTER
  ==================================================*/

.OD-footer {
    background-color: #fff;
}

.OD-2ndmenu-screen {
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dadada;
}

    .OD-2ndmenu-screen .OD-2ndmenu-area a {
        color: #252929;
        text-transform: uppercase;
        font-size: 13px;
    }

    .OD-2ndmenu-screen .OD-eu-logos-area {
        float: right;
    }

.OD-signatures-screen {
    padding: 30px 0 30px 0;
}

    .OD-signatures-screen .OD-signature {
        color: #828d94;
        font-size: 12px;
        line-height: 14px;
    }

    .OD-signatures-screen .OD-powered {
        float: right;
    }

/*===================================================
  AUTENTICATION / LOGIN
  ===================================================*/

#OD-login {
    background-color: #fff;
    padding: 35px 20px 55px 20px;
    text-align: center;
}

.OD-login-area {
    margin-bottom: 60px;
}

#OD-login .OD-icon-area {
    color: var(--master-color, #00bdd5);
    padding-bottom: 10px;
    text-align: center;
    font-size: 50px;
}

#OD-login .OD-title-area .OD-title {
    color: var(--master-color, #00bdd5);
    font-size: 22px;
    text-transform: uppercase;
    line-height: 18px;
    margin-top: 15px;
}

#OD-login .OD-text-area {
    color: #000;
    font-size: 15px;
    line-height: 18px;
    margin-top: 15px;
    padding-bottom: 20px;
}

#OD-login .OD-account-area {
    width: 70%;
    display: inline-block;
}

    #OD-login .OD-account-area .form-control {
        height: 55px;
        padding: 20px;
    }

    #OD-login .OD-account-area .formUser.form-control {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    #OD-login .OD-account-area .formPsw.form-control {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top: 0px;
    }

    #OD-login .OD-account-area .btn {
        margin-top: 35px;
        height: 55px;
        margin-bottom: 10px;
    }

#OD-autenticar .OD-backg {
    background-color: #252929;
    padding: 35px;
    text-align: center;
}

#OD-autenticar .OD-icon-area {
    color: var(--master-color, #00bdd5);
    padding-bottom: 10px;
    text-align: center;
    font-size: 50px;
}

#OD-autenticar .OD-title-area .OD-title {
    color: var(--master-color, #00bdd5);
    font-size: 22px;
    text-transform: uppercase;
    line-height: 18px;
    margin-top: 15px;
}

#OD-autenticar .OD-text-area {
    color: #fff;
    font-size: 15px;
    line-height: 18px;
    margin-top: 15px;
}

#OD-autenticar .OD-btn-area {
    padding: 35px;
    min-height: 235px;
}

    #OD-autenticar .OD-btn-area .OD-btn-group {
        display: grid;
        padding-bottom: 15px;
    }

#OD-btn-CC .OD-btn-group .btn.btn-primary.btn-lg > img {
    height: 35px;
    padding-right: 10px;
}

#OD-autenticar .OD-btn-area .OD-btn-group .btn.btn-primary > span {
    padding-right: 10px;
}


#OD-register {
    background-color: #fff;
    padding: 35px 20px 55px 20px;
    text-align: center;
}

.OD-register-area {
    margin-bottom: 60px;
}

#OD-register .OD-icon-area {
    color: var(--master-color, #00bdd5);
    padding-bottom: 10px;
    text-align: center;
    font-size: 50px;
}

#OD-register .OD-title-area .OD-title {
    color: var(--master-color, #00bdd5);
    font-size: 22px;
    text-transform: uppercase;
    line-height: 18px;
    margin-top: 15px;
}

#OD-register .OD-text-area {
    color: #000;
    font-size: 15px;
    line-height: 18px;
    margin-top: 15px;
    padding-bottom: 20px;
}

#OD-register .OD-account-area {
    width: 70%;
    display: inline-block;
}

    #OD-register .OD-account-area .form-control {
        height: 55px;
        padding: 20px;
    }

    #OD-register .OD-account-area .formUser.form-control {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    #OD-register .OD-account-area .formPsw.form-control {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top: 0px;
    }

    #OD-register .OD-account-area .btn {
        margin-top: 35px;
        height: 55px;
        margin-bottom: 10px;
    }

/*===================================================
  PAGE BLOCKS
  ===================================================*/

/*----PAGE TITLE----*/

.OD-page-header .OD-title {
    text-transform: uppercase;
    color: #252929;
    font-family: 'RobotoLight';
    font-size: 30px;
    margin: 25px 0px;
    line-height: 22px;
}

.OD-page-header > h3.OD-title .fas {
    margin: 0px 10px;
    font-size: 22px;
    line-height: 22px;
}

.OD-page-header > h3.OD-title .OD-name {
    text-transform: none;
    font-size: 22px;
    line-height: 22px;
}

/*----PAGE STEPS----*/

.nav-pills.OD-steps {
    margin-bottom: 15px;
}

    .nav-pills.OD-steps > li > a {
        border-radius: 0px;
        background-color: #ffffff;
        padding: 0px;
    }

        .nav-pills.OD-steps > li > a > .OD-disp-table .OD-number {
            line-height: 18px;
            /*width: 24px;
    border-radius: 12px;
    background-color: #fff;*/
            color: #252929;
            display: inline-block;
            margin-right: 6px;
            text-align: center;
            font-weight: 700;
            font-size: 18px;
        }

    .nav-pills.OD-steps > li.active > a,
    .nav-pills.OD-steps > li.active > a:hover,
    .nav-pills.OD-steps > li.active > a:focus {
        background-color: var(--master-color, #00bdd5);
    }

@media (max-width: 767px) {
    #OD-config .OD-tab-2nd > .form-control {
        margin-bottom: 15px;
    }

    /*.nav-pills.OD-steps > li > a .OD-label > i.fas {
        position: absolute;
        bottom: -22px;
        display: block;
        left: 50%;
        font-size: 24px;
        color: #252929;
    }*/
    .nav-pills.OD-steps > li > a > .OD-disp-table .OD-label {
        line-height: 14px;
    }

    .nav-justified > li {
        display: table-cell;
        width: 1%;
        vertical-align: middle;
    }

    .nav-pills.OD-steps > li > a > .OD-disp-table .OD-number {
        display: block;
    }

    .nav-pills.OD-steps > li > a > .OD-disp-table {
        height: 80px;
    }

    .nav-pills.OD-steps > li > a {
        background-image: url(../images/step-triangle.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@media (min-width: 768px) {
    .nav-pills.OD-steps > li > a {
        background-image: url(../images/step-triangle.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

        .nav-pills.OD-steps > li > a > .OD-disp-table {
            height: 60px;
        }
}

.OD-page-screen {
    background-color: #f2f2f2;
}

.OD-page-content {
    margin-bottom: 60px;
}

/*----PAGE TABS----*/

.OD-tab-2nd > .nav-pills {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

/*===================================================
  WARNINGS
  ===================================================*/

.OD-alert.alert {
    background-color: #ffffff;
    border-radius: 0px;
    border: 1px solid;
    border-top: 10px solid;
}

    .OD-alert.alert .OD-txt {
        padding-top: 7px;
        padding-left: 14px;
        color: #252929;
    }

.OD-alert.alert-info {
    border-color: var(--master-color, #00bdd5);
}

.OD-alert.alert-success {
    border-color: #88b147;
}

.OD-alert.alert-warning {
    border-color: #e2ae4f;
}

.OD-alert.alert-danger {
    border-color: #b6301f;
}

.OD-alert.alert-info .OD-icon {
    color: var(--master-color, #00bdd5);
}

.OD-alert.alert-success .OD-icon {
    color: #88b147;
}

.OD-alert.alert-warning .OD-icon {
    color: #e2ae4f;
}

.OD-alert.alert-danger .OD-icon {
    color: #b6301f;
}

.OD-alert.alert > .OD-icon {
    width: 40px;
    text-align: center;
    vertical-align: top;
    font-size: 24px;
}

.OD-alert.alert > div {
    display: table-cell;
}

.OD-alert.alert {
    background-color: #ffffff;
    border-radius: 0px;
}

.cookieConsent {
    background-color: rgba(0, 0, 0, 0.3);
    color: #FFF;
}

.btn-primary {
    background-color: var(--master-color,#00bdd5);
    border-color: var(--master-color-darken,#00bdd5);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:active:focus {
        background-color: var(--master-color,#00bdd5);
        border-color: var(--master-color-darken,#00bdd5);
        box-shadow: inset 0px 0px 200px 200px rgba(1,1,1,10%);
    }

.btn-default {
    color: var(--master-color, #00bdd5);
    background-color: #fff;
    border-color: #ccc;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    .btn-default:active:focus {
        color: var(--master-color, #00bdd5);
        background-color: #fff;
        border-color: #ccc;
        box-shadow: inset 0px 0px 200px 200px rgba(1,1,1,10%);
    }

a, a:active {
    color: var(--master-color, #00bdd5);
}

    a:hover, a:focus {
        color: var(--master-color-darken, #00bdd5);
    }