/* Setup */
body {
    color: #333;
    font-family: "Lato", sans-serif;
}

:root {
    --right-panel-w: 414px;
}

* {
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

html{font-size:16px;}

.userpage-control {
    padding: 15px;
    padding-left: 35px;
    border-radius: 4px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0.29);
    background-color: #ffffff33;
    width: 100%;
    color: white !important;
    font-weight: 400;
    z-index: 1;
}

.userpage-control::placeholder {
    color: #fff !important;
    font-weight: 300;
}

.userpage-control:focus {
    background-color: transparent !important;
    border-color: unset;
    outline: none;
}

.dropdown-fail-frame {
    height:33px;
    width: 100%;
    border: dashed 1px gray;
    border-radius: 2px;
}

.b-medium{font-weight: 700 !important;}
a{color:#fff !important;}
.nowrap{white-space:nowrap;}
.light{font-weight:100;}
.pointer{cursor:pointer;}

/* Setup end */


body {
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-image: url('/web/assets/images/foto4.jpg');
}

/* Pnotify style */
.alert-warning {
    color: #dd990a;
    background-color: #fce9c1;
}
.alert.alert-info,.alert.alert-danger{
    background: rgba(0,0,0,0.48);
    background: #000000e3;
    color: red;
    padding: 5px;
    border-color: rgba(255,255,255,0.35);
    border-color: #ffffff59;
    font-weight: 300;
    font-size: .9em;
}
.alert-gen {
    background: #000000e3;
    padding: 5px;
    border-color: #ffffff59;
    font-weight: 300;
    font-size: .9em;
}
.alert-gen b {
    font-weight: 900;
}
.ui-pnotify-sticker,
.ui-pnotify-closer 
{
    color: #fff;
}

.userpage-wrapper button,.userpage-wrapper select{
    cursor: pointer !important;
    color: white;
}

select option {
    color: black;
}

.userpage_right {
    min-height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    background: #000000b3;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.userpage_right .mid-panel {
    text-align: center;
    padding: 45px 40px;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
}

.logo-wrapper img {
    width: 200px;
    height: unset;
    max-height: 200px;
}

.mobile-only {
    display: none;
}

.userpage-group>*,.mid-panel>*{
    text-align: center;
    margin-bottom: 1rem;
}

.userpage-title {
    font-size: 2.375rem;
    font-weight: 700;
}

.l-subtitle {
    font-weight: 300;
    font-size: 1.15rem;
}

.chap-button {
    width: 100%;
    text-align: center;
    border: 0;
    background-color: #664097;
    color: white;
    font-size: 1.425rem;
    font-weight: 700;
    padding-top: 15px;
    padding-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-login {
    background-color: #e2e6ea94;
    margin-right: 1rem;
    font-weight: 400;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.password-action-group {
    display: flex;
    justify-content: space-between;
}

.remember-wrap input {
    width: 1rem;
    height: 1rem;
}

.remember-wrap {
    display: flex;
    align-items: center;
}

.register-group {
    display: none;
}

.mid-panel.register-mode .register-group {
    display: block;
}

.register-group .userpage-control {
    padding-left: 20px;
}

.cover-panel {
    background-image: url('/web/assets/images/foto4.jpg');
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.userpage-footer {
    position: fixed;
    bottom: 25px;
    left: 45px;
    color: white;
}

.userpage-footer i {
    padding: 5px 10px;
}

.tabs-group {
    display: flex;
    justify-content: center;
}

.tab-pa {
    margin-right: 1em;
    margin-left: 1em;
    font-size: 1.375rem;
    font-weight: 400;
    padding-bottom: 4px;
    cursor: pointer;
    user-select: none;
}

.tab-pa.active {
    font-weight: 700;
    border-bottom: 3px solid white;
}

.no-account {
    font-weight: 400;
}

.userpage-control~i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.pa-signature {
    position: absolute;
    right: 10px;
    bottom: 5px;
    margin: 0;
    color: #7b7b7b;
    font-size: 1rem;
}

.register-mode .register-hide {
    display: none !important;
}

.mid-panel .register-subtitle {
    display: none;
}

.mid-panel.register-mode .register-subtitle {
    display: block;
}

.mid-panel.register-mode .dd-wrapper,
.mid-panel.register-mode .logo-wrapper,
.mid-panel.register-mode .userpage-subtitle,
.mid-panel.register-mode .userpage-group {
    transition: all .3s ease;
    display: none !important;
}

.userpage-footer span {
    font-size: 1em;
    margin-bottom: 2px;
    font-weight: 300;
}

.div-spacer {
    border-top: 1px solid white;
    border-radius: 15px;
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-right: -3px;
    margin-left: -3px;
}

.userpage-wrapper .language-dd a.dropdown_item {
    color: #fff !important;
    background-color: transparent;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userpage-wrapper .language-dd a.dropdown_item:hover {
    background-color: #1e8cb5 !important;
}

.userpage-wrapper .language-dd a.dropdown_item[data-id="pc"] {
    display: none !important;
}

.userpage-wrapper .language-dd .dropdown-menu {
    width: 100%;
    background-color: #52bae02e;
    border-radius: 0;
    border: 0;
    top: 2px !important;
}

.userpage-wrapper .language-dd button {
    border-radius: 0;
    padding: 10px;
    border: 1px solid;
    background-color: transparent;
    border-color: #6c757d;
}

.userpage-wrapper .language-dd button:hover {
    border-color: #1e8cb5;
    background-color: #1e8cb5;
}

.userpage-wrapper .ul_language-dd {
    background-color: #1e8cb5;
}

.userpage-wrapper .dd-wrapper {
    background-color: transparent;
}

.userpage-wrapper .dropdown.show button {
    background-color: #1e8cb5;
    border-color: #6c757d;
}

.userpage-wrapper input[type="checkbox"] {
    min-width: 15px;
    min-height: 15px;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.userpage-wrapper .custom-checkbox label {
    cursor: pointer;
}

.userpage-wrapper .custom-control-label::before {
    border: 1px solid;
    background-color: transparent;
}

.userpage-wrapper .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #fff;
}

.userpage-wrapper .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")
}

.custom-control-label::before {
    width: 1.1rem;
    height: 1.1rem;
}

.custom-control-label::after {
    width: 1.1rem;
    height: 1.1rem;
}

.reset-password-wrapper .userpage-title {
    font-size: 2rem;
}

.reset-password-wrapper .userpage-subtitle span {
    white-space: nowrap;
}

.dd-wrapper {
    width: 40%;
    position: absolute;
    top: 28px;
    right: 40px;
}
.dd-wrapper i.fa-globe {
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    font-size: 20px;
    left: 10px;
    z-index: 2;
}
.dd-wrapper i.fa-arrow-down {
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    font-size: 20px;
    right: 13px;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}

.reg-country {
    width: 100%;
}

.reg-country-wrap>i {
    position: absolute;
    top: 50%;
    left: unset;
    right: 15px;
    font-size: 28px;
    transform: translateY(-50%);
    pointer-events: none;
}

.reg-country .dropdown-menu {
    width: 100%;
    max-height: 350px;
    background-color: #34303afa;
    box-shadow: 0px 3px 14px 6px #7f7f7f;
    overflow-y: auto;
    border-radius: 4px;
    border: 1px solid white;
}

.reg-country button {
    width: 100%;
    overflow: hidden;
    padding: 15px;
    padding-left: 20px;
    border-radius: 4px;
    border: none;
    color: white !important;
    text-align: left;
    height: 50px;
}

.reg-country .dropdown-item:hover {
    background-color: #f8f9fa40;
}

.reg-country .serach_on_dropdown::placeholder {
    color: black;
}

.userpage-control:hover,
.reg-country .dropdown:hover {
    background-color: rgba(255,255,255,0.29);
    background-color: #ffffff33;
    border-color: #999b9c;
    transition: all .3s ease;
}

.reg-country .dropdown {
    background-color: rgba(255,255,255,0.29);
    background-color: #ffffff33;
    border: 1px solid white;
    transition: all .3s ease;
    border-radius: 4px;
}

.reg-country button.btn_dropdown:active,
.reg-country button.btn_dropdown:focus,
.reg-country button.btn_dropdown:hover {
    background-color: transparent !important;
    border-color: unset;
}

.reg-country .dropdown.show button {
    border-color: #6c757d;
    background-color: rgba(255,255,255,0.29);
    background-color: #ffffff33;
}

.required::before {
    position: absolute;
    left: 5px;
    top: 0;
    content: '*';
    color: red;
    font-size: 22px;
}

.custom-control {
    text-align: left;
}

.left-panel {
    height: 100%;
    position: fixed;
    width: calc(100% - var(--right-panel-w));
    z-index: 99;
}

.left-panel iframe {
    width: 100%;
    height: 100%;
}

.left-panel .left-img {
    min-width: 100%;
}

.language_flag {
    padding-right: 2px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.language_flag span {
    padding-left: 4px;
    margin-top: 4px;
    font-size: 11px;
}

input:focus::-webkit-input-placeholder {
    color: #ffffff5c !important;
}

input[type="checkbox"]~label {
    user-select: none;
}

/* Datepicker */
.datepicker {
    border: 1px solid #ced4da;
}
.datepicker table tr td.active,.datepicker table tr td.active:hover,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.today,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today:hover,.datepicker table tr td.selected,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled:hover,.datepicker table tr td.selected:hover{
    background-color: #7a6fbe !important;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #ffffff;
}
.datepicker-dropdown.dropdown-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
}
.datepicker th,.datepicker td {
    font-size: 14px;
}
.datepicker th {
    font-weight: 900;
    color: #212529;
}
.datepicker table tr td.today {
    background: none !important;
    background-color: transparent !important;
    border: 1px solid #7a6fbe;
    border-radius: 4px;
    color: #999;
}
.datepicker table tr td.today:hover {
    background: #eee !important;
    color: #999;
    border: 1px solid #7a6fbe;
}

.datepicker .table-condensed {
    border-collapse: separate;
}
.datepicker .active,.datepicker_pa .active,.datepicker .active.today,.datepicker table tr td.active.today:hover{
    background: unset !important;
    background-color: #7a6fbe !important;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #ffffff !important;
}
.table-condensed>thead>tr>th,.table-condensed>tbody>tr>td{
    padding: 5px;
}

input.userpage-control:not(:placeholder-shown) + span,
input.userpage-control:focus + span {
    top: 0px !important;
}
.reset-password-wrapper:not(.reset-link) input.userpage-control:not(:placeholder-shown) + span,
.reset-password-wrapper:not(.reset-link) input.userpage-control:focus + span {
    top: 15px !important;
}

/* Label placeholder transition */
.reg-country + span,
input.userpage-control + span {
    position: absolute;
    z-index: 2;
    opacity: 0;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
    transition: all .2s ease;
    pointer-events: none;
}
input.userpage-control,
input.userpage-control::placeholder {
    opacity: 1;
    transition: all .3s ease;
}
input.userpage-control:focus::placeholder {
    opacity: 0;
}
.reg-country + span,
input.userpage-control:not(:placeholder-shown) + span,
input.userpage-control:focus + span{
    transform: translateY(0%);
    opacity: .6;
    top: 15px;
    left: 35px;
    font-size: .84rem;
}

input.userpage-control.password:focus + span{
    top: 0;
}

.reset-link input.userpage-control:not(:placeholder-shown) + span,
.reset-link input.userpage-control:focus + span{
    top:0;
}

.wrapper input.userpage-control:not(:placeholder-shown) + span,
.wrapper input.userpage-control:focus + span{
    top: 0;
}

.register-group input.userpage-control + span{
    left: 21px;
    transform: translateY(-50%);
}
.register-group input.userpage-control:not(:placeholder-shown) + span,
.register-group input.userpage-control:focus + span{
    transform: translateY(0);
    top: 0px;
    left: 21px;
    font-size: .84rem;
}
.reg-country + span{
    top:0 !important;
    left: 20px !important;
}

.chap-button:focus {
    outline: none;
}

.serach_on_dropdown{
    border-radius: 2px;
    border: 0;
}

/* Login saved user */
.cl_saved_user {
    padding: 15px;
    padding-left: 35px;
    border-radius: 4px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0.29);
    background-color: #ffffff33;
    width: 100%;
    color: white !important;
    font-weight: 400;
    z-index: 1;
    margin-bottom: 1rem !important;
    padding: 0;
    display: flex;
}
.cl_saved_users ul {
    max-height: 400px;
    overflow-y: auto;
}
.sp_saved_user {
    cursor: pointer;
    padding: 15px;
    flex: 10;
    text-align:left;
}
.cl_saved_user:hover {
    border-color: #999b9c;
    transition: all .3s ease;
}
.btn_delete_saved_user:hover {
    background-color: #00000057;
}
.btn_delete_saved_user {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cl_saved_user_add_new {
    font-size: 15px;
    background: transparent;
}
.sp_saved_user_new .fa {
    font-size: 14px;
    padding-right: 2px;
}

.userpage-footer {
    z-index: 999;
}

.g-recaptcha {
    display: flex;
    justify-content: center;
}
/* .social-links-pa {
    border-top: 1px solid white;
} */
.social-links-pa a i {
    font-size: 1.3em;
}
a.chap-button:hover,
.social-links-pa a:hover {
    text-decoration: none;
}
.social-links-pa a i:hover {
    cursor: pointer;
    opacity: .7;
}

.field-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    z-index: 2;
}

.social-links-pa {
    display: flex;
    justify-content: space-around;
    padding: .5rem 3rem;
}

.toggle-password {
    cursor: pointer;
}

.userpage-control:disabled {
    opacity: .5;
    background-color: #ffffff33;
    border-color: #999b9c;
}

.userpage-control:disabled ~ * {
    opacity: .5;
    background-color: transparent;
}


/* Media Queries */

@media screen and (min-width: 1600px) {
    .userpage_right .mid-panel {
        padding: 45px 40px;
        width: 490px;
    }

    .left-panel {
        width: calc(100% - 490px);
    }

}

@media screen and (max-width: 1600px) {
    html,*{font-size:14px;}
    .logo-wrapper img {
        width: 190px;
        height: unset;
        max-height: 190px;
    }
    .userpage-control {
        padding-left: 35px;
    }
    .reg-country button {
        padding-left: 20px;
    }

    .userpage_right .mid-panel {
        width: var(--right-panel-w);
        font-size: 15px;
    }

    .reg-country + span {
        left: 21px !important;
    }
    .userpage_right .passowrd + span {
        top: 15px !important;
    }
    
    .reset-password-wrapper input.userpage-control:focus + span {
        transform: translateY(0%);
        opacity: .6;
        top: 15px;
    }

}

@media (min-width: 1200px) and (max-width: 1600px) {
    .userpage-control {
        padding-left: 35px;
    }

    .userpage_right .passowrd:focus span {
        top: 7px !important;
    }
    .reg-country {
        margin-top: 1rem;
    }

    .reg-country + span{
        top: 15px !important;
    }

    .reg-country-wrap>i {
        transform: translateY(-.5rem);
    }

    .l-subtitle.my-4 {
        margin-top: 1rem !important;
    }

    .userpage_right .mid-panel {
        width: var(--right-panel-w);
        font-size: 15px;
    }

    .required.state-group::before {
        margin-top: 1.5rem;
        line-height: 1;
    }



}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {

    .userpage_right .mid-panel {
        width: var(--right-panel-w);
        padding: 29px 40px;
    }

    .userpage-footer {
        background: rgba(0,0,0,0.29);
        background: #0000004a;
        padding: 1em;
    }

}

/* Mobile */
@media (max-width: 768px){
    html,*{font-size:12px;}

    .userpage-control.my-3 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
    }

    .cover-panel {
        min-width: 100vw;
    }

    .reg-country-wrap i {
        font-size: 13px;
    }

    .required::before {
        top: -1px;
        font-size: 16px;
    }
    .reg-country button,
    .register-group .userpage-control {
        padding-left: 15px;
    }

    input.userpage-control:not(:placeholder-shown) + span,
    input.userpage-control:focus + span {
        top: 0px !important;
        left: 35px !important;
    }

    .reset-password-wrapper input.userpage-control:not(:placeholder-shown) + span,
    .reset-password-wrapper input.userpage-control:focus + span {
        top: 6px !important;
    }

    input.userpage-control.password:not(:placeholder-shown) + span,
    input.userpage-control.password:focus + span {
        top: 0px !important;
    }

    .userpage-wrapper:not(.reset-password-wrapper) input.userpage-control.email:not(:placeholder-shown) + span, 
    .userpage-wrapper:not(.reset-password-wrapper) input.userpage-control.email:focus + span{
        top: 0px !important;
    }
    .register-group .reg-country + span,
    .register-group input.userpage-control:focus + span,
    .register-group input.userpage-control:not(:placeholder-shown) + span{
        transform: translateY(0);
        top: 0px !important;
        left: 16px !important;
        font-size: .84rem;
    }
    .register-group input.userpage-control + span, .register-group input.userpage-control + span {
        left: 16px !important;
    }

    .userpage_right .mid-panel {
        width: var(--right-panel-w);
        padding: 45px 40px;
    }
    
    .userpage-footer {
        display: none;
    }

    .logo-wrapper img {
        width: 120px;
        height: unset;
        max-height: 120px;
    }

    .mb-3,.my-3,.mb-3,.mt-3{
        margin-top: 0 !important;
        margin-bottom: 0.4rem !important;
    }

    .cl_saved_users ul {
        max-height: 300px;
    }

}

@media (max-width: 576px){
    .userpage_right {
        width: 100%;
        overflow: hidden;
    }
    
    .userpage_right .mid-panel {
        width: 100vw;
        padding-right: 8px;
        padding-left: 8px;
    }

    /* Mobile dropdown */
    .mobile-only{display:block;}
    
    .left-panel,
    .dd-wrapper .language-dd,
    .dd-wrapper .fa-globe {
        display: none;
    }
    .dropdown-toggle::after {
        content: none;
    }
    .reset-password-wrapper .userpage-control.email {
        margin-top: .5rem !important;
    }
    .lang_opt:hover {
        color: #fff;
    }
    .lang_opt {
        display: flex;
        align-items: center;
        padding: 2px 15px 0px 15px;
        color: #fff;
    }
    .dd-wrapper .dropdown-menu {
        right: -12px;
        left: unset;
    }
    .dd-wrapper .dropdown-menu.show {
        min-width: fit-content;
        display: flex;
        flex-direction: column;
        padding: 3px 0;
        background-color: #52bae02e;
        padding-bottom: 6px;
    }
    .mobile-lang-dd li {
        padding: 0 3px;
    }
    .mobile-lang-dd li:hover {
        background-color: #465f6c;
    }
    .dd-wrapper .dropdown-toggle {
        display: flex;
        align-items: center;
    }
    .dd-wrapper .dropdown-item {
        background-color: transparent;
    }

    .userpage-wrapper .dd-wrapper {
        width: unset;
        height: unset;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .userpage-wrapper .language-dd button {
        padding: 5px;
    }
    .dd-wrapper {
        top: 13px;
        right: 13px;
    }
    .mobile-only {
        display: block;
    }
    .dd-wrapper .language-dd,
    .dd-wrapper .fa-globe {
        display: none;
    }

}

@-webkit-keyframes blink {
    from { background-color: #7a6fbe; }
    to { background-color: inherit; }
}
@-moz-keyframes blink {
    from { background-color: #7a6fbe; }
    to { background-color: inherit; }
}
@-o-keyframes blink {
    from { background-color: #7a6fbe; }
    to { background-color: inherit; }
}
@keyframes blink {
    from { background-color: #7a6fbe; }
    to { background-color: inherit; }
}
.blink {
    -webkit-animation: blink 3s; /* Safari 4+ */
    -moz-animation:    blink 3s; /* Fx 5+ */
    -o-animation:      blink 3s; /* Opera 12+ */
    animation:         blink 3s; /* IE 10+ */
}