* {
    outline: none !important;
}
body {
    overflow-x: hidden;
    width: 100vw !important;
    font-family: "Open Sans";
    font-size: 15px;
    color: #58595B;
    height: auto !important;
}
.en {
    font-family: "Open Sans";
}
body.ar {
    font-family: "GESSTwoBold" !important;
}
body.ar {
    text-align: right;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0;
}
button {
    cursor: pointer;
}
::-moz-selection {
    color: #fff;
    background: #006DAF;
}
::selection {
    color: #fff;
    background: #006DAF;
}
p {
    margin: 0;
}
loader {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: #fff;
    z-index: 9999999999999999999999999999999999999999;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
a { 
    color: inherit;
    text-decoration: none !important; 
}
output { 
    position: absolute;
    font-family: var(--font-heavy);
    font-size: 15px;
    top: 20px;
}
textarea {
    width: 100%;
    height: 146px;
    background-color: var(--color-job-footer);
    color: var(--color-modal-placeholder);
    border: none;
    padding: 10px;
    resize: none;
}
textarea::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
    color: var(--color-modal-placeholder);
}
textarea::-moz-placeholder /* Firefox 19+ */ {
    color: var(--color-modal-placeholder);
}
textarea:-ms-input-placeholder /* IE 10+ */ {
    color: var(--color-modal-placeholder);
}
textarea:-moz-placeholder /* Firefox 18- */ {
    color: var(--color-modal-placeholder);
}
label {
    margin: 0;
}
select {
    -webkit-appearance : none;
    -moz-appearance: none;
    appearance: none;
    padding: 0px 30px 0px 10px !important;
}
title {
    display: block;
    color: #3686C7;
    font-weight: bold;
}
.overflow {
    overflow: hidden;
}
.underline {
    text-decoration: underline !important;
}
input.email {
    font-family: "Open Sans";
}
.bold {
    font-weight: bold;
}
block {
    display: block;
    width: 100%;
}
.min-height {
    overflow-x: hidden;
    width: 100vw !important;
    min-height: calc(100vh - 60px);
    position: relative;
    padding-top: 70px;
}
.dropdown {
    cursor: pointer;
}
.dropdown-block {
    display: none;
}
blue, .blue {
    color: #3686C7;
}
backgound-opacity {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(54,134,199,0.2); 
    top: 0;
    left: 0;
    z-index: 10000;
}
float-right {
    float: right;
}
float-left {
    float: left;
}
float-left {
    float: left;
}
gray {
    color: #6D6E71;
}
block {
    display: block;
}
font-13 {
    font-size: 13px;
}
d-flex {
    display: flex;
}
char-length {
    display: block;
    margin-top: 5px;
    color: #A7A9AC;
    font-size: 13px;
    font-style: italic;
}
input[type=file] {
    opacity: 0;
    position: absolute;
}
skip-form {
    cursor: pointer;
    float: left;
    position: absolute;
}
group {
    display: block;
}
.btn {
    position: relative;
    padding: 15px 20px;
    min-width: 200px;
    background: transparent;
    color: #3686C7;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
}
.btn:after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - 20px);
    height: 100%;
    border-bottom: 1px solid #3686C7;
    border-left: 1px solid #3686C7;
    bottom: 0;
    left: 0;
    transition: 0.3s all;
}
.btn:before {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - 20px);
    height: 100%;
    border-top: 1px solid #3686C7;
    border-right: 1px solid #3686C7;
    top: 0;
    right: 0;
    transition: 0.3s all;
}
.btn:hover:after, .btn:hover:before {
    width: 100%;
    height: 100%;
}
show-pass {
    position: absolute;
    bottom: 5px;
    right: 0;
    cursor: pointer;
}
.ar show-pass {
    right: unset;
    left: 0px;
}
.forget-password {
    text-align: right;
}
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
inline-block {
    display: inline-block;
}
input.nonstyled-input {
    width: 100%;
    text-align: right;
    border: 0;
    background: transparent;
    color: #58595B;
}
input.nonstyled-input::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
    color: #58595B;
}
input.nonstyled-input::-moz-placeholder /* Firefox 19+ */ {
    color: #58595B;
}
input.nonstyled-input:-ms-input-placeholder /* IE 10+ */ {
    color: #58595B;
}
input.nonstyled-input:-moz-placeholder /* Firefox 18- */ {
    color: #58595B;
}
niceScroll {
    display: block;
    height: calc(100% - 40px);
}

/*---------- Cropped ----------*/
    .cropper-dashed {
        border: unset !important;
    }
    .cropper-line, .cropper-point {
        background-color: unset !important;
    }
    .cropper-crop-box .cropper-view-box:after {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: -webkit-linear-gradient(left, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(left, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(top, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(top, #6D6E71 50%, transparent 50%);
        background: linear-gradient(left, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(left, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(top, #6D6E71 50%, transparent 50%), -webkit-linear-gradient(top, #6D6E71 50%, transparent 50%);
        background-size: 50px 2px, 50px 2px, 2px 50px, 2px 50px;
        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
        background-position: 0px 0px, left bottom, 0 0, right 0;
        border-radius: inherit;
        z-index: 0;
    }
/*---------- Cropped ----------*/

/*---------- Document Detail ----------*/
documents {
    display: block;
    width: 100%;
}
documents document {
    display: inline-flex;
    height: 55px;
    font-weight: bold;
    color: #A7A9AC;
    margin-right: 30px;
    margin-top: 30px;
}
documents document.pointer, documents document.pointer * {
    cursor: pointer;
}
.ar documents document {
    margin-right: 0px;
}
documents document.active *  {
    cursor: pointer;
}
documents document.active {
    color: #3686C7;
    cursor: pointer;
}
documents document pic {
    position: relative;
    display: inline-block;
    width: 55px;
    background-color: #A7A9AC;
    text-align: center;
}
documents document pic svg, documents document content label {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
documents document.active pic {
    background-color: #3686C7;
}
documents document content {
    position: relative;
    border: 1px solid #D1D3D4;
    border-left: 0;
    padding: 0 15px;
    width: calc(100% - 55px) !important;
}
.ar documents document content {
    border: 1px solid #D1D3D4;
    border-right: 0;
}
document-detail {
    position: relative;
    color: #A7A9AC;
    display: block;
    width: 100%;
    padding: 25px 35px;
    border: 1px solid #D1D3D4;
    height: 700px;
    overflow: hidden;
    direction: ltr;
    text-align: left;
}
document-detail header {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}
document-detail logo {
    display: block;
    height: 75px;
}
document-detail logo img {
    width: auto;
    max-width: 100%;
}
document-detail title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    text-transform: uppercase;
}
document-detail p {
    font-size: 13px;
}
document-detail p:not(:last-child) {
    margin-bottom: 15px;
}
document-detail p:not(:first-of-type) {
    /*filter: blur(5px);*/
}
document-detail .btn-login:after, .document-page document-detail .btn-login:before {
    width: 100%;
    height: 100%;
}
document-detail .btn-login {
    background-color: #3686C7;
    color: #fff;
    border-radius: 0;
    padding: 10px;
    width: 50px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 60%;
    z-index: 2;
}
/*---------- Document Detail ----------*/

/*---------- Modal ----------*/
.custom-modal  {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(54,134,199,0.3); 
    z-index: 99999999999999999999999999;
    display: none;
}
.custom-modal > div {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    bottom: unset;
    right: unset;
    max-width: 500px;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background-color: #fff;
    padding: 50px 60px;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
}
.custom-modal > div > .header {
    position: relative;
    margin: -50px -60px 0px -60px;
    padding: 14px 30px;
    background-color: #3686C7;
    color: white;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    z-index: 1;
}
.custom-modal > div > .header close-icon {
    position: absolute;
    transform: translateY(-50%);
    right: 20px;
    top: 50%;
    height: 20px;
    cursor: pointer;
}
.ar .custom-modal > div > .header close-icon {
    left: 20px;
    right: unset;
}
.custom-modal > div > .content {
    padding-top: 50px;
    height: 100%;
    max-height: fill-content;
    max-height: -webkit-fill-available;
    overflow-y: hidden !important;
    margin-left: -60px;
    margin-right: -60px;
    padding-left: 60px;
    padding-right: 60px;
}
.custom-modal > div.cropImage-modal {
    transform: translateX(-50%);
    top: 15%;
    left: 50%;
    height: 50%;
    padding: 0px;
}
.custom-modal > div.crop-modal {
    transform: translateX(-50%);
    padding: 20px;
    text-align: center;
    top: 70%;
}
.custom-modal > div.crop-modal .button {
    margin-top: 25px;
}
/*---------- Modal ----------*/

/*---------- Currency ----------*/
currency {
    display: inline-block;
    color: #3686c7;
    font-weight: bold;
    position: relative;
    user-select: none;
    cursor: pointer;
    font-family: "Open Sans";
}
currency > span {
    padding-right: 10px;
}
.ar currency > span {
    padding-right: 0px;
    padding-left: 10px;
}
currency dropdown {
    position: absolute;
    display: none;
    top: 40px;
    width: auto;
    padding: 10px 15px;
    text-align: center;
    right: 0px;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    z-index: 5;
}
currency dropdown span:not(:last-child) {
    display: inherit;
    margin-bottom: 10px;
}
currency:after {
    content: "\203A";
    font-family: "Open Sans";
    position: relative;
    display: inline-block;
    font-size: 30px;
    transform: rotate(90deg);
    top: 5px;
    direction: ltr;
}
/*---------- Currency ----------*/

/*---------- Question ----------*/
question {
    position: relative;
    display: block;
    padding-left: 20px;
    margin-bottom: 20px;
}
.ar question {
    padding-left: 0px;
    padding-right: 20px;
}
question:before {
    content: "\2022"; 
    color: #3686C7;
    font-size: 30px;
    position: absolute;
    top: 11px;
    transform: translateY(-50%);
    left: 0;
}
.ar question:before {
    left: unset;
    right: 0;
}
square {
    position: relative;
    display: block;
    padding-left: 20px;
    margin-bottom: 20px;
    color: #3686C7;
    font-weight: bold;
}
.ar square {
    padding-left: unset;
    padding-right: 20px;
}
square:before {
    content: "\25A0"; 
    color: #3686C7;
    font-size: 15px;
    position: absolute;
    top: 10px;
    transform: translateY(-50%);
    left: 0;
}
.ar square:before {
    left: unset;
    right: 0px;
}
/*---------- Question ----------*/

/*---------- Input Custom ----------*/
.input-custom {
    border: 1px solid #D1D3D4;
    padding: 9px 15px;
    width: 100%;
    color: #A7A9AC;
    /*margin-bottom: 30px;*/
}
.ar .input-custom {
    text-align: right;
}
.input-custom.blue {
    border: 1px solid #50A4DD;
}
.input-custom::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #A7A9AC;
}
.input-custom::-moz-placeholder { /* Firefox 19+ */
    color: #A7A9AC;
}
.input-custom:-ms-input-placeholder { /* IE 10+ */
    color: #A7A9AC;
}
.input-custom:-moz-placeholder { /* Firefox 18- */
    color: #A7A9AC;
}
/*---------- Input Custom ----------*/

/*---------- Thumb ----------*/
.da-thumbs {
    list-style: none;
    position: relative;
    margin: 60px -8px;
    margin-bottom: 0px;
    padding: 0;
    column-count: 3;
}
.da-thumbs li {
    margin: 0 22.5px 60px 22.5px;
    margin-top: 0;
    background: #fff;
    position: relative;
    display: block;
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
    width: 100%;
}
.da-thumbs li a div {
    position: absolute;
    background: #3686C7;
    width: 100%;
    height: 100%;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
.da-thumbs li a div p {
    position: absolute;
    top: 100px;
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: white;
    text-align: justify;
    transition: 1s;
    z-index: 2;
    max-height: 150px;
}
.ar .da-thumbs li a div p {
    text-align: justify;
    text-align-last: right;
}
.da-thumbs li a div {
    top: 0px;
    left: -100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.da-thumbs li a:hover div {
    left: 0px;
}
/*---------- Thumb ----------*/

/*---------- Panel ----------*/
.panel {
    display: block;
    width: 100%;
    padding: 25px 60px;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
}
/*---------- Panel ----------*/

/*---------- Form Error ----------*/
error {
    position: relative;
    display: none;
    margin-bottom: 40px; 
    width: 100%;
}
error icon svg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
error icon {
    background-color: #F6343A;
    display: inline-block;
    position: relative;
    width: 40px;
}
error text {
    display: inline-block;
    border: 1px solid #A7A9AC;
    border-left: 0;
    padding: 8px 10px;
    color: #A7A9AC;
    width: calc(100% - 40px);
}
.ar error text {
    border: 1px solid #A7A9AC;
    border-right: 0;
}
success {
    position: relative;
    display: none;
    margin-bottom: 40px; 
    width: 100%;
}
success icon svg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
success icon {
    background-color: #69bc45;
    display: inline-block;
    position: relative;
    width: 40px;
}
success text {
    display: inline-block;
    border: 1px solid #69bc45;
    border-left: 0;
    padding: 8px 10px;
    color: #A7A9AC;
    width: calc(100% - 40px);
}
.ar success text {
    border-left: 1px solid #69bc45;
    border-right: 0;
}
error-m {
    display: none;
    margin: 5px 0;
}
error-m text {
    display: inline-block;
    color: #F6343A;
    line-height: 26px;
    padding-left: 10px;
}
error-m icon {
    position: relative;
    display: inline-block;
    padding: 4px;
    height: 26px;
    height: 26px;
}
.error-message {
    border-color: #F6343A !important;
}
input.nonstyled-input.error-message {
    border-width: 1px;
    border-style: solid;
    padding: 5px 0px;
}
.error-message ~ label {
    color: #F6343A !important;
}
box.error-message:after {
    color: #F6343A;
}
/*---------- Form Error ----------*/

/*---------- Input Custom ----------*/
.group { 
    position: relative; 
}
.group:not(:last-child) { 
    margin-bottom: 45px; 
}
.group.optional label {
    width: 100%;
}
.group.optional label:after {
    content: "(Optional)";
    position: absolute;
    right: 6px;
    color: #A7A9AC;
}
.ar .group.optional label:after {
    content: "(اختياري)" !important;
}
.ar .group.optional label:after {
    left: 6px;
    right: unset;
}
.group.optional input:focus ~ label:after, .group.optional input.has-content ~ label:after {
    color: #3686C7;
}
.group input {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #A7A9AC;
    color: #414042;
    font-size: 15px;
}
.group input:focus { 
    outline: none; 
}
.group label {
    color: #A7A9AC; 
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 15px;
    -webkit-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all; 
    transition: 0.2s ease all; 
}
.ar .group label {
    left: unset;
    right: 5px;
}
.ar .group input {
    text-align: right;
}
.group show-pass {
    -webkit-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all; 
    transition: 0.2s ease all; 
}
.group input:focus, .group input.has-content, .group input[readonly] {
    border-bottom: 1px solid #3686C7 !important;
}
.group input:focus ~ label, .group input.has-content ~ label, .group input[readonly] ~ label {
    top: -20px;
    font-size: 14px;
    color: #3686C7;
    font-weight: bold;
}
.group input:focus ~ show-pass .st120, .group input.has-content ~ show-pass .st120 {
    fill: #3686C7;
}
/*---------- Input Custom ----------*/

/*---------- Social Media ----------*/
.social-media {
    text-align: center;
}
.social-media text {
    margin-bottom: 25px;
}
.social-media a {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin: 0 15px;
    border-radius: 50%;
    cursor: pointer;
}
.social-media li {
    display: inline-block;
}
.social-media i {
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
    font-size: 22px;
    line-height: 45px;
}
.btn-fb {
    background-color: #5D85F3!important;
    color: #fff!important;
}
.btn-tw {
    background-color: #00C7FF!important;
    color: #fff!important;
}
.btn-gplus {
    background-color: #F36541!important;
    color: #fff!important;
}
.btn-li {
    background-color: #0B86CA!important;
    color: #fff!important;
}
.btn-fb.deactive , .btn-tw.deactive , .btn-gplus.deactive , .btn-li.deactive  {
    background-color: #D1D3D4 !important;
}
/*---------- Social Media ----------*/

/*---------- Progress Bar ----------*/
c-progress {
    display: none;
}
c-progress .close, c-progress .close:focus, c-progress .close:hover {
    float: right;
    color: #D1D3D4;
    opacity: 1;
}
.ar c-progress .close, .ar c-progress .close:focus, .ar c-progress .close:hover {
    float: left;
}
c-progress size {
    color: #D1D3D4;
    padding-left: 10px;
}
c-progress progress {
    background-color: #D1D3D4;
    border-radius: unset;
    height: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
}
c-progress progress[value]::-webkit-progress-bar {
    background-color: #D1D3D4;
}
c-progress progress[value]::-webkit-progress-value {
    background-color: #3686C7; 
}
/*---------- Progress Bar ----------*/

/*---------- Upload button ----------*/
span.upload-btn {
    width: calc(100% - 210px);
    padding-right: 20px;
}
label.upload-btn {
    width: 210px;
    height: 50px;
    line-height: 50px;
    background-color: #3686C7;
    color: white;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}
/*---------- Upload button ----------*/

/*---------- Tooltip ----------*/
tooltip {
    width: 100% !important;
    padding: 15px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    display: block;
    transition: .5s all;
}
tooltip tooltip-icon {
    display: block;
    height: 20px;
}
tooltip text {
    display: block;
    color: #A7A9AC;
}
tooltip.closed text {
    display: none !important;
}
/*---------- Tooltip ----------*/

/*---------- Dropdown ----------*/
dropdown {
    position: relative;
    display: block;
    color: #A7A9AC;
    width: 100%;
    max-width: 300px;
}
dropdown.has-content .input-custom {
    border: 1px solid #3686C7 !important;
}
dropdown.counrtycode {
    width: 200px;
}
dropdown.counrtycode options {
    position: absolute;
}
dropdown box {
    position: relative;
    display: block;
    cursor: pointer;
    user-select: none;
}
dropdown box:after {
    content: "\203A";
    position: absolute;
    transform: translateY(-50%) rotate(90deg);
    top: 50%;
    right: 15px;
    font-size: 30px;
}
.ar dropdown box:after {
    left: 15px;
    right: unset;
    transform: translateY(-50%) rotate(-90deg);
}
dropdown options {
    display: none;
    width: 100%;
    z-index: 1;
    background-color: #fff;
    position: relative;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
    max-height: 171px;
}
dropdown shadow {
    display: block;
    position: relative;
    width: 100%;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
    max-height: 171px;
    background-color: white;
    z-index: 10;
}
dropdown options input {
    position: absolute;
    opacity: 0;
}
dropdown options label {
    padding: 10px 25px;
    width: 100%;
    user-select: none;
    cursor: pointer;
}
dropdown options input:checked ~ label {
    color: #3686C7;
}
dropdown options check-mark {
    position: absolute;
    display: none;
    transform: translateY(-50%);
    top: 50%;
    right: 15px;
}
.ar dropdown options check-mark {
    right: unset;
    left: 15px;
}
dropdown options check-mark svg {
    height: 15px;
}
dropdown options input:checked ~ check-mark {
    display: block;
}
dropdown c-option input:checked ~ label:before {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 5.1px;
    background-color: #3686C7;
}
.ar dropdown c-option input:checked ~ label:before {
    left: unset;
    right: 0;
}
dropdown options c-option {
    display: block;
    position: relative;
    width: 100%;
}
dropdown options c-option:not(:last-child) {
    border-bottom: 1px solid #D1D3D4;
}
/*---------- Dropdown ----------*/

/*---------- Radio Button ----------*/
radio-button {
    display: inline-block;
    min-height: 60px;
}
radio-button input {
    opacity: 0;
    position: absolute;
}
radio-button > .item {
    display: inline-block;
    color: #cacaca;
}
radio-button > .item:not(:last-child) {
    margin-right: 25px;
}
.ar radio-button > .item:not(:last-child) {
    margin: 0px;
    margin-left: 25px;
}
radio-button > .item label {
    width: 40px;
    height: 40px;
    text-align: center;
    box-shadow: 3px 3px 11px;
    line-height: 40px;
    transition: 0.1s all;
    user-select: none;
    cursor: pointer;
}
radio-button > .item input:checked ~ label {
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: #3686C7;
    color: white;
}
/*---------- Radio Button ----------*/

/*---------- Check box ----------*/
check-box > .item {
    display: block;
    margin-bottom: 15px;
}
check-box > .item .check {
    position: relative;
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 1px solid #a9a9a9;
    margin-right: 10px;
    top: 7px;
}
.ar check-box > .item .check {
    margin-left: 10px;
    margin-right: 0px;
}
check-box > .item input {
    position: absolute;
    opacity: 0;
}
check-box > .item label .check:after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 17.5px;
    height: 17.5px;
    border: 1px solid #3686C7;
}
check-box > .item input:checked ~ label .check:after {
    background-color: #3686C7;
}
/*---------- Check box ----------*/

/*---------- Steps ----------*/
.steps {
    display: flex;
    width: calc(100% + 210px);
    color: #6D6E71;
    text-transform: uppercase;
    margin-top: 50px;
    margin: 50px -105px;
}
.steps.xs {
    display: none;
}
.steps > div {
    flex: 1;
    text-align: center;
    width: 100%;
    position: relative;
}
.steps > div:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 33%;
    height: 10px;
    left: 0;
    border-bottom: 1px solid #3686C7;
}
.steps > div:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 33%;
    height: 10px;
    right: 0;
    border-bottom: 1px solid #3686C7;
}
.steps > div.active {
    color: #6D6E71;
}
.steps > div.active:before {
    left: 5%;
    width: 28%;
    border-bottom: 2px solid #3686C7;
}
.ar .steps > div.active:before {
    left: unset;
    right: 5%;
}
.steps > div.active:first-of-type:before {
    width: 30%;
    left: 0;
}
.steps > div.active:last-of-type:after {
    width: 30%;
    right: 0;
}
.ar .steps > div.active:first-of-type:before {
    width: 30%;
    right: 0;
}
.ar .steps > div.active:last-of-type:after {
    width: 30%;
    left: 0;
}
.steps > div.active:after {
    right: 5%;
    width: 28%;
    border-bottom: 2px solid #3686C7;
}
.ar .steps > div.active:after {
    right: unset;
    left: 5%;
}
.steps > div.active:not(:first-of-type) arrow:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    border-bottom: 2px solid #3686C7;
    left: 5%;
    top: 49%;
    transform: rotate(-25deg);
}
.ar .steps > div.active:not(:first-of-type) arrow:before {
    left: unset;
    right: 5%;
    transform: rotate(25deg);
}
.ar .steps > div.active:not(:last-of-type) arrow:after {
    right: unset;
    left: 5%;
    transform: rotate(25deg);
}
.steps > div.active:not(:last-of-type) arrow:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    border-top: 2px solid #3686C7;
    right: 5%;
    bottom: 34%;
    transform: rotate(-25deg);
}
.steps > div > title {
    font-size: 25px;
    display: block;
}
.steps > div title {
    direction: ltr;
}
.steps > div title, .steps > div ans {
    font-weight: bold;
    color: #3686C7;
}
.steps > div.active ~ div title, .steps > div.active ~ div ans {
    font-weight: 100;
    color: #6D6E71;
}
.steps.xs steps {
    background-color: #fff;
    display: none;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 6px);
    box-shadow: 0px 3px 12px rgba(0,0,0,0.1);
}
.steps.xs steps step {
    display: block;
    padding: 15px;
}
/*---------- Steps ----------*/

/*---------- Scroll Icon ----------*/
scroll-div {
    position: absolute;
    transform: translateX(-50%);
    top: calc(100vh - 200px);
    left: 50%;
    display: block;
}
scroll-div text {
    position: relative;
    text-transform: uppercase;
    color: white;
    margin-bottom: 25px;
    display: block;
}
scroll-div scroll-icon {
    position: relative;
    /*width: 50px;*/
    height: 50px;
    /*border: 1px solid white;*/
    cursor: pointer;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}
scroll-div scroll-icon svg {
    position: absolute;
    animation: bouncey 1s linear infinite;
    transform: translateX(-50%);
    left: 50%;
}
/*---------- Scroll Icon ----------*/

/*---------- Animations ----------*/
@keyframes bouncey {
    0% {
        top: 20%;
    }
    50% {
        top: calc(80% - 12px);
    }
    100% {
        top: 20%;
    }
}
@keyframes borderOpacity {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: calc(100% + 50px);
        height: calc(100% + 50px);
        opacity: 0;
    }
}
@keyframes open {
    0% {
        left: -110%;
    }
    100% {
        left: 0%;
    }
}
@keyframes finished {
    0% {
        left: 0%;
    }
    100% {
        left: 110%;
    }
}
/*---------- Animations ----------*/

/*---------- Navigation ----------*/
.navbar-custom {
    position: fixed;
    height: 70px;
    padding: 0px 25px;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    width: 100%;
    background-color: #fff;
}
.navbar-custom navbar-brand {
    position: relative;
    display: inline-block;
    height: 70px;
    padding-top: 7.5px;
    padding-bottom: 7.5px;
    width: 150px;
}
.navbar-custom navbar-brand logo2 svg {
    cursor: pointer;
}
.navbar-custom navbar-brand logo1 {
    height: 40px;
    width: 70px;
    display: inline-block;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
.ar .navbar-custom navbar-brand logo2 {
    left: 45px;
}
.navbar-custom navbar-brand logo2 {
    display: inline-block;
    position: absolute;
    top: 50%;
    height: 25px;
    transform: translateY(-50%);
}
.navbar-custom .navbar-nav li {
    position: relative;
    padding: 0 10px;
    text-transform: capitalize;
    line-height: 34px;
    min-width: 55px;
    text-align: center;
}
.navbar-custom .navbar-nav .dropdown-block a {
    line-height: 40px !important;
}
.navbar-custom .navbar-nav li a:hover title {
    color: #3686C7;
}
.navbar-custom .navbar-nav .active, .navbar-custom .navbar-nav .dropdownactive {
    position: relative;
    color: #3686C7;
    font-weight: bold;
}
.navbar-custom .navbar-nav .dropdown:hover:after,  .navbar-custom .navbar-nav .dropdownactive:after {
    content: "";
    position: absolute;
    top: 70px;
    right: 0px;
    width: 55px;
    border-bottom: 5px solid;
    border-radius: 12px;
    z-index: 1;
}
.navbar-custom .dropdown-menu-custom {
    position: absolute;
    background-color: white;
    top: 75px;
    box-shadow: 3px 4px 9px rgba(0,0,0,0.12);
    width: 130px;
    left: 8px;
    font-weight: 100;
    text-align: left;
}
.ar .navbar-custom .dropdown-menu-custom {
    left: unset;
    right: 0px;
    text-align: right;
}
.navbar-custom .dropdown-menu-custom > a {
    display: block;
    padding: 7px 15px 7px 15px;
    color: #212529;
}
.navbar-custom .dropdown-menu-custom.notifications-dropdown {
    width: 400px;
    left: unset; 
    right: 0;
    z-index: 10;
    max-height: 200px;
    overflow: hidden;
}
.ar .navbar-custom .dropdown-menu-custom.notifications-dropdown {
    left: 0px;
    right: unset;
}
.navbar-custom .notifications-dropdown title {
    display: block;
    line-height: 25px;
    font-weight: bold;
    color: #A7A9AC;
}
.navbar-custom .notifications-dropdown > a:hover title {
    color: #3686C7;
}
.navbar-custom .notifications-dropdown content {
    display: block;
    line-height: 21px;
}
.navbar-custom .notifications-dropdown > a {
    position: relative;
    display: block;
    padding: 10px 30px;
    color: #A7A9AC;
}
.navbar-custom .notifications-dropdown > a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    border-left: 5.1px solid;
    left: 0;
    color: #3686C7;
}
.ar .navbar-custom .notifications-dropdown > a:hover:after {
    left: unset;
    right: 0px;
}
.navbar-custom .center-side {
    width: calc(100% - 210px);
}
.navbar-custom .center-side .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.navbar-custom .center-side .navbar-nav a {
    line-height: 70px;
}
.navbar-custom .dropdown-block a {
    line-height: 40px;
}
.navbar-custom .right-side {
    min-width: 240px;
}
.ar .navbar-custom .right-side {
    min-width: 240px;
}
.navbar-custom .right-side .username {
    position: relative;
    height: 70px;
    color: #3686C7;
    z-index: 1;
    font-weight: bold;
    min-width: 160px;
    padding: 0px;
}
.navbar-custom .right-side .username span {
    display: block;
    padding: 0 25px;
    border: 1px solid #3686C7;
    line-height: 40px;
    position: relative;
    min-width: 130px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.navbar-custom .right-side .username number {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: -12.5px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    background-color: #3686C7;
    border-radius: 50%;
}
.ar .navbar-custom .right-side .username number {
    left: unset;
    right: -14px;
}
.navbar-custom .right-side .lang {
    padding-left: 50px;
    padding-right: 0;
    min-width: 110px;
}
.ar .navbar-custom .right-side .lang {
    padding-left: 0;
    padding-right: 50px;
}
.navbar-custom .right-side .lang a {
    line-height: 70px;
}
.navbar-custom .right-side .lang label {
    line-height: 36px;
}
.navbar-custom .right-side .lang a.active {
    color: #3686C7;
    font-weight: bold;
}
/*---------- Navigation ----------*/

/*---------- Footer ----------*/
footer.footer-custom {
    position: relative;
    height: 60px;
    background-color: #3686C7;
    color: #FFFFFF;
    line-height: 60px;
    font-size: 14px;
    z-index: 1000;
}

.ar footer.footer-custom > .container > .row > .text-right {
    text-align: left !important;
}
footer.footer-custom live-chat {
    display: inline-block;
    height: 60px;
    background-color: #50A4DD;
}
footer.footer-custom live-chat niceScroll {
    overflow-x: visible !important; 
    overflow-y: hidden; 
    margin: 0px -15px;
}
footer.footer-custom live-chat open-chat {
    cursor: pointer;
    display: block;
    padding: 0 30px 0 25px;
    text-align: center;
}
footer.footer-custom live-chat open-chat span {
    margin-right: 15px;
}
footer.footer-custom live-chat svg {
    position: relative;
    top: 9px;
}
/*---------- Footer ----------*/

/*---------- Menu ----------*/
menu {
    margin: 0;
    position: fixed;
    height: 100vh;
    top: 0;
    width: 100%;
    max-width: 400px;
    background-color: white;
    padding: 0;
    z-index: 100000;
    left: -420px;
    transition: all 0.5s;
}
menu.open {
    left: 0;
}
.ar menu {
    left: unset;
    right: -420px;
}
.ar menu.open {
    left: unset;
    right: 0;
}
menu header-custom {
    position: relative;
    display: block;
    height: 70px;
    padding: 7.5px 16px;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
    z-index: 1;
    background-color: white;
    text-align: left !important;
}
menu header-custom svg {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
menu header-custom close-icon {
    position: absolute;
    transform: translateY(-50%);
    right: 10px;
    top: 50%;
    height: 20px;
    cursor: pointer;
}
menu content-custom {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
    background-color: #3686C7;
}
menu content-custom .item {
    position: relative;
    height: 25px;
    padding: 35px 20px;
    display: inline-table;
    width: 100%;
}
menu content-custom .item.active {
    background-color: #2A7EB7;
}
menu content-custom .item.active:after {
    left: -1.9px;
}
menu content-custom .item:hover {
    background-color: #2A7EB7;
}
menu content-custom .item:hover:after {
    left: 0px;
}
menu content-custom .item:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -8px;
    height: 100%;
    border-left: 7px solid;
    color: #69BC45;
    transition: .3s all;
}
.ar menu content-custom .item.active:after {
    left: unset;
    right: -1.9px;
}
.ar menu content-custom .item:hover:after {
    left: unset;
    right: 0px;
}
.ar menu content-custom .item:after {
    left: unset;
    right: -8px;
}
menu content-custom .item icon {
    display: inline-block;
    margin-right: 25px;
}
.ar menu content-custom .item icon {
    margin-right: 0px;
    margin-left: 25px;
}
menu content-custom .item icon svg {
    position: relative;
    top: 6px;
}
menu content-custom .item div {
    display: inline-block;
    line-height: 25px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}
/*---------- Menu ----------*/

/*---------- Hamburger Menu ----------*/
.navbar-custom .hamburger-menu {
    height: 54px;
    cursor: pointer;
}
.navbar-custom .navbar-toggler {
    padding: 0px;
    margin: 0px;
}
.navbar-custom .bar, .navbar-custom .bar:after, .navbar-custom .bar:before {
    width: 37px;
    height: 3px;
    background: #3686C7;
    border-radius: 25px;
}
.navbar-custom .bar {
    position: relative;
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
    -webkit-transition: all 0ms 300ms;
    transition: all 0ms 300ms;
}
.navbar-custom .bar.animate {
    background: rgba(255, 255, 255, 0);
}
.navbar-custom .bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.navbar-custom .bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.navbar-custom  .bar.animate:after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.navbar-custom .bar.animate:before {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
/*---------- Hamburger Menu ----------*/

/*---------- Live Chat ----------*/
live-chat chat-room  {
    position: absolute;
    display: none;
    right: 0;
    bottom: 1px;
    text-align: left;
    width: 100%;
    max-width: 350px;
}
.ar live-chat chat-room  {
    right: unset;
    left: 0px;
}
live-chat chat-room chatting {
    display: block;
}
live-chat chat-room chatting form {
    display: flex;
}
live-chat chat-room chatting .input-custom {
    height: 60px;
    border: 0 !important;
    width: calc(100% - 70px);
    padding: 20px;
    color: #414042;
    font-family: "OpenSans-Light";
}
live-chat chat-room chatting .input-custom::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #414042;
}
live-chat chat-room chatting .input-custom::-moz-placeholder { /* Firefox 19+ */
    color: #414042;
}
live-chat chat-room chatting .input-custom:-ms-input-placeholder { /* IE 10+ */
    color: #414042;
}
live-chat chat-room chatting .input-custom:-moz-placeholder { /* Firefox 18- */
    color: #414042;
}
live-chat chat-room chatting .btn-chat {
    background-color: #69BC45;
    border-radius: 0;
    border: 0;
    height: 60px;
    width: 70px;
}
live-chat chat-room chatting .btn-chat svg {
    position: relative;
    top: 5px;
}
live-chat chat-room chat {
    position: absolute;
    right: 0;
    bottom: 59px;
    height: 400px;
    width: 100%;
    background-color: #F1F2F2;
    padding: 20px;
    line-height: 20px;
}
live-chat chat-room chat .end-chat {
    color: #3686C7;
    margin-bottom: 20px;
}
live-chat chat-room chat .messages {
    position: relative;
    left: 15px;
    width: calc(100% - 30px);
    min-height: 265px;
}
.ar live-chat chat-room chat .messages {
    left: unset;
    right: 15px;
}
live-chat chat-room chat .message {
    position: relative;
    width: 100%;
    color: white;
    padding: 10px 20px 15px 20px;
    margin-bottom: 15px;
}
live-chat chat-room chat .message hr {
    border-color: white;
    margin: 10px 0;
}
live-chat chat-room chat .message date, live-chat chat-room chat .message username {
    font-size: 13px;
    text-transform: capitalize;
}
live-chat chat-room chat .message username {
    font-weight: bold;
}
live-chat chat-room chat .message p {
    font-size: 16px;
}
live-chat chat-room chat .message.received {
    background-color: #BCBEC0;
}
live-chat chat-room chat .message.received:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #BCBEC0;
    position: absolute;
    top: 0;
    left: -10px;
}
live-chat chat-room chat .message.sent {
    background-color: #3686C7;
}
live-chat chat-room chat .message.sent:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #3686C7;
    position: absolute;
    top: 0;
    right: -10px;
}
live-chat chat-room chat .message.received date, live-chat chat-room chat .message.sent username {
    float: right;
}
live-chat chat-room chat .message.sent p {
    text-align: right;
}
live-chat chat-room chat .tip {
    color: #B9BBBD;
    padding: 0px 15px;
}
.ar live-chat chat-room chat .tip, .ar live-chat chat-room chat .end-chat {
    text-align: right;
}
live-chat chat-room chat .end-chat {
    cursor: pointer;
}
/*---------- Live Chat ----------*/

/*---------- Index Page ----------*/
.index-page first-section {
    position: relative;
    display: block;
    height: calc(100vh - 70px);
}
.index-page .navbar-custom navbar-brand logo1 svg {
    cursor: default;
}
.index-page first-section .slick-slide {
    height: calc(100vh - 70px);
}
.index-page first-section .slick {
    position: relative;
    height: calc(100vh - 70px);
    width: 100%;
    color: #fff;
    overflow: hidden;
}
.index-page first-section .slick .slick-slide {
    position: relative;
}
.index-page first-section .slick main {
    height: 100%;
}
.index-page first-section .slick main img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.index-page first-section .slick main:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.index-page first-section .slick logo {
    width: 100%;
    max-width: 420px;
    display: block;
    position: absolute;
    z-index: 1;
    top: 10vh;
    transform: translateX(-50%);
    left: 50%;
    padding: 0 20px;
}
.index-page first-section .slick logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.index-page first-section .slick title {
    display: block;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
}
.index-page first-section .slick text {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 30vh;
    z-index: 1;
    text-align: center;
    width: 100%;
    max-width: 760px;
    padding: 0 20px;
}
.index-page first-section .button {
    height: 50px;
    line-height: 50px;
    background-color: #3686C7;
    position: absolute;
    top: calc(100vh - 145px);
    display: flex;
    color: white;
    font-size: 16px;
    right: 60px;
    overflow: visible;
    width: 245px;
    font-weight: bold;
    box-shadow: 0 8px 20px #000000a6;
    transition: .3s all;
}
.index-page first-section .button:hover{
    box-shadow: 0px 5px 20px #000000a6;
    top: calc(100vh - 143px);
}
.index-page first-section .button:active{
    box-shadow: 0px 0px 20px #000000a6;
    top: calc(100vh - 140px);
}
.ar .index-page first-section .button {
    right: unset;
    left: 60px;
}
.index-page first-section .button:after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border: 3px solid #3686C7;
    /*-webkit-animation: borderOpacity 1s infinite; /* Safari 4.0 - 8.0 */*/
    /*animation: borderOpacity 1s infinite;*/
    transition: 1s all;
}
.index-page first-section .button div:first-child {
    background-color: #69BC45;
    text-align: center;
    width: 50px;
    position: relative;
}
.index-page first-section .button div:first-child svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.index-page first-section .button div:last-child {
    padding: 0 10px;
    font-weight: bold;
}
.index-page first-section .button div {
    z-index: 1;
}
.index-page second-section {
    display: block;
    margin-bottom: 0px;
}
.index-page second-section ul .nicescroll-cursors {
    border: none !important;
}
.index-page second-section .row > div {
    margin-top: 50px;
}
.index-page second-section .img {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    display: block;
}
.index-page second-section .img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(#ffffff00, #000000a3);
    z-index: 0;
    transition: 0.5s;
}
.index-page second-section .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.index-page second-section .img text {
    color: #ffffff;
    font-weight: bold;
    width: 250px;
    display: block;
    position: absolute;
    top: 25%;
    font-size: 18px;
    padding: 0px 20px;
    z-index: 2;
    transition: 0.5s;
}
.ar .index-page second-section .img text {
    right: 0;
}
.index-page second-section .img text:after {
    content: "\203A";
    font-family: "Open Sans";
    position: absolute;
    left: 20px;
    bottom: -40px;
    font-size: 40px;
}
.ar .index-page second-section .img text:after {
    left: unset;
    right: 20px;
}
.index-page .da-thumbs li a:hover divv text:after {
    display: none;
}
.index-page .da-thumbs li a:hover divv text {
    top: 10px;
}
.index-page third-section {
    position: relative;
    display: block;
    padding: 100px 0px;
    overflow: hidden;
}
.index-page third-section .parallax-window {
    min-height: 400px;
    background: transparent;
}
.index-page third-section .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    text-align: left !important;
    direction: ltr;
}
.index-page third-section .background:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}
.index-page third-section .background img {
    position: absolute;
    width: 100%;
    height: calc(100% + 900px);
    object-fit: cover;
    top: -10%;
    transition: .1s all;
}
.index-page third-section .content {
    position: relative;
    width: 100%;
    background-color: white;
    padding: 80px 0;
}
.index-page third-section .block {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}
.index-page third-section .block:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}
.index-page third-section .block img {
    height: 200%;
    object-fit: cover;
    position: relative;
}
.index-page third-section title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #58595B;
}
.index-page third-section .content text {
    display: block;
    width: 100%;
    max-width: 1300px;
}
.index-page third-section .costs {
    padding-top: 100px;
}
.index-page third-section .costs .cost {
    transition: .3s all;
}
.index-page third-section .costs .cost:hover {
    transform: scale(1.1);
}
.index-page third-section .costs title {
    color: #50A4DD;
    text-align: center;
}
.index-page third-section .costs price {
    position: relative;
    display: block;
    text-align: center;
    color: #50A4DD;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 20px;
}
.index-page third-section .costs price span {
    font-size: 50px;
    position: relative;
}
.index-page third-section .costs price span:before {
    content: "$";
    font-size: 20px;
    position: absolute;
    top: 4px;
    left: -20px;
}
.index-page third-section .costs text {
    text-align: justify;
    display: block;
}
.ar .index-page third-section .costs price span:before {
    right: -20px;
    left: unset;
}
/*---------- Index Page ----------*/

/*---------- Login Page ----------*/
.login-page, .signup-page {
    margin: 50px 0px;
    box-shadow: 0px 0px 18px 0px rgb(0,0,0,0.25);
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
.login-page > .row {
    min-height: calc(100vh - 70px - 100px - 60px);
}
.signup-page > .row {
    min-height: calc(100vh - 130px - 100px);
}
.login-page .row, .signup-page .row {
    height: 100%;
}
.login-page .left-side, .signup-page .left-side {
    padding-right: 0px;
}
.login-page .left-side .background-image, .signup-page .left-side .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.login-page .left-side .background-image:after, .signup-page .left-side .background-image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
    top: 0;
    left: 0;
}
.login-page .left-side .background-image img, .signup-page .left-side .background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-page .left-side logo1, .signup-page .left-side logo1 {
    margin-top: 5vw;
    margin-bottom: 5vw;
    display: block;
    width: 100%;
}
.login-page .left-side logo1 svg, .signup-page .left-side logo1 svg {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
}
.ar .login-page .left-side logo1 svg, .ar .signup-page .left-side logo1 svg {
    left: unset;
    right: 50%;
    transform: translateX(50%);
}
.login-page .left-side text, .signup-page .left-side text, .login-page .left-side text2, .signup-page .left-side text2 {
    color: white;
    text-align: center;
    width: 100%;
    display: block;
}
.login-page .left-side text, .signup-page .left-side text {
    padding: 0 5vw;
    margin-bottom: 25vh;
}
.login-page .left-side text2, .signup-page .left-side text2 {
    margin-bottom: 25px;
}
.login-page .left-side .social-media, .signup-page .left-side .social-media {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 20px;
    width: 100%;
}
.login-page .left-side .social-media text, .signup-page .left-side .social-media text {
    padding: 0;
}
.login-page .right-side, .signup-page .right-side {
    padding: 50px;
}
.login-page .right-side .button, .signup-page .right-side .button {
    text-align: center;
    position: relative;
    margin-top: 20%;
}
/*---------- Login Page ----------*/

/*---------- Questions ----------*/
.question-page title {
    display: block;
    font-size: 25px;
    text-transform: uppercase;
}
.question-page .content1 title {
    padding-bottom: 40px;
    color: #3686C7;
    font-weight: bold;
}
.question-page block {
    margin-bottom: 50px;
}
.question-page .btn-next {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.ar .question-page .btn-next {
    left: 0%;
    right: 50%;
    transform: translateX(50%);
}
.question-page block .left-side tooltip {
    display: none;
}
.ar .question-page block float-right {
    float: left !important;
}
.ar .question-page .text-right {
    text-align: left !important;
}
/*---------- Questions ----------*/

/*---------- Pay Page ----------*/
.pay-page .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pay-page dropdown options {
    position: absolute;
    top: 42px;
}
.pay-page .background:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}
.pay-page .background img {
    object-fit: cover;
}
.pay-page .left-side content {
    display: block;
    color: #A7A9AC;
    text-align: justify;
    margin-bottom: 15px;
}
.pay-page .panel {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
}
.pay-page check-box > .item label .check:after {
    border: 0;
}
.pay-page .left-side .panel title {
    display: block;
    text-align: center;
    font-size: 25px;
    color: #50A4DD;
    margin-bottom: 10px;
}
.pay-page .left-side .panel price {
    position: relative;
    display: block;
    text-align: center;
    color: #50A4DD;
    margin-bottom: 20px;
    font-weight: bold;
}
.pay-page .left-side .panel price span {
    font-size: 50px;
    position: relative;
}
.pay-page .left-side .panel price span:before {
    content: "$";
    font-size: 25px;
    position: absolute;
    top: 4px;
    left: -25px;
}
.ar .pay-page .left-side .panel price span:before {
    left: unset;
    right: -25px;
}
.pay-page .left-side .panel c-footer {
    display: block;
    margin: -30px;
    margin-top: 20px;
    background-color: #50a4dd;
}
.pay-page .left-side .panel c-footer title, .pay-page .left-side .panel c-footer price {
    color: #fff !important;
}
.pay-page .left-side .panel c-footer price {
    margin-bottom: 0px;
}
.pay-page .right-side .panel2, .pay-page .right-side .panel3 {
    display: none;
}
.pay-page .right-side .panel1.finished, .pay-page .right-side .panel2.finished {
    left: 110%;
}
.pay-page .right-side, .pay-page .left-side {
    margin: 70px 0;
}
.pay-page .right-side, .pay-page .left-side .panel {
    padding: 30px;
}
.pay-page dropdown {
    max-width: unset;
    margin-bottom: 45px;
}
.pay-page .left-side dropdown {
    margin-bottom: 30px;
}
.pay-page .left-side subscribe {
    display: none;
}
/*---------- Pay Page ----------*/

/*---------- Authenticator Page ----------*/
.authenticator-page .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.authenticator-page .background img {
    object-fit: cover;
}
.authenticator-page .background:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.authenticator-page .panel {
    margin-top: 70px;
    margin-bottom: 70px;
    padding-top: 70px;
    padding-bottom: 70px;
}
.authenticator-page .btn-check {
    width: 100%;
}
.authenticator-page form {
    position: relative;
}
.authenticator-page .g-recaptcha {
    margin-bottom: 45px;
}
.authenticator-page .g-recaptcha > div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.ar .authenticator-page .g-recaptcha > div {
    left: unset;
    right: 50%;
    transform: translateX(50%);
}
/*---------- Authentication Page ----------*/

/*---------- About Page ----------*/
.about-page main-title {
    display: block;
    width: 100%;
    text-align: center;
    color: #3686C7;
    padding: 50px 0;
    font-size: 25px;
    font-weight: bold;
}
.about-page first-section, .about-page second-section {
    position: relative;
    display: block;
    color: white;
    padding: 50px 0;
}
.about-page first-section {
    background-color: #50A4DD;
}
.about-page .title {
    font-size: 24px;
    font-weight: bold;
}
.about-page .user {
    overflow: hidden;
}
.about-page .content {
    text-align: justify;
}
.ar .about-page .content {
    text-align: justify;
    text-align-last: right;
}
.about-page second-section .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.about-page second-section .background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.about-page second-section .background img {
    object-fit: cover;
}
.about-page third-section {
    position: relative;
    color: #5D5D5D;
    display: block;
    padding: 50px 0;
}
.about-page fourth-section .background {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    z-index: -1;
}
.about-page fourth-section .background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    transition: 0.4s all;
}
.about-page fourth-section .user:hover .background:after {
    top: 100%;
}
.about-page fourth-section .user .content:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    transition: 0.4s all;
    z-index: -1;
}
.about-page fourth-section .user:hover .content:after {
    top: 0;
}
.about-page fourth-section .background img {
    object-fit: cover;
}
.about-page fourth-section .content {
    position: absolute;
    bottom: 0;
    padding: 35px 15px;
    width: 100%;
}
.about-page fourth-section name {
    font-size: 20px;
    display: block;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
}
.about-page fourth-section p {
    color: white;
    text-align: center;
}
/*---------- About Page ----------*/

/*---------- Solutions Page ----------*/
.solutions-page .background {
    position: relative;
    height: 400px;
    width: 100%;
}
.solutions-page .background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.solutions-page .background img {
    object-fit: cover;
}
.solutions-page first-row {
    display: block;
    position: relative;
    padding: 30px 50px 50px 50px;
    text-align: center;
    margin-top: -55px;
    background-color: #fff;
    box-shadow: 4px 2px 10px rgba(0,0,0,0.2);
    z-index: 1;
}
.solutions-page title {
    display: block;
    color: #3686C7;
    font-weight: bold;
    margin-bottom: 15px;
}
.solutions-page content {
    color: #5D5D5D;
}
.solutions-page second-row {
    display: block;
    margin-top: 30px;
}
.solutions-page second-row content {
    display: block;
    margin-bottom: 15px;
}
.solutions-page third-row {
    display: block;
    margin: 100px 0;
}
.solutions-page third-row left-side {
    text-align: justify;
}
.solutions-page third-row left-side, .solutions-page third-row .img {
    display: block;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
}
/*---------- Solutions Page ----------*/

/*---------- FAQ Page ----------*/
.faq-page block {
    margin: 50px 0;
}
.faq-page > .container block:last-child {
    margin-bottom: 70px;
}
.faq-page title {
    margin-bottom: 20px;
    font-size: 18px;
}
.faq-page c-footer {
    position: relative;
    display: block;
    padding: 70px 0px;
}
.faq-page c-footer .background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
    top: 0;
    left: 0;
}
.faq-page c-footer .background img {
    object-fit: cover;
}
.faq-page c-footer .form {
    position: relative;
    padding: 40px;
    background-color: white;
}
.faq-page c-footer block {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.5);
    padding: 50px 0;
    margin: 0px;
}
.faq-page c-footer .group {
    margin-bottom: 0;
}
.faq-page c-footer .btn {
    min-width: unset;
    width: 100%;
}
/*---------- FAQ Page ----------*/

/*---------- Contact Us Page ----------*/
.contactus-page {
    width: 100%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}
.contactus-page > .container {
    position: relative;
}
.contactus-page .main-row {
    position: relative;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    height: 100%;
}
.contactus-page .left-side {
    background-color: #50A4DD;
    color: white;
    padding: 15px 20px;
}
.contactus-page .left-side title {
    color: white;
    font-size: 22px;
    margin: 20px 0px;
}
.contactus-page .left-side content {
    padding-top: .5rem!important;
    margin-bottom: 15px;
}
.contactus-page .left-side a {
    font-weight: bold;
}
.contactus-page right-side, .contactus-page left-side {
    display: block;
    padding: 30px;
}
.contactus-page right-side title {
    float: left;
    color: #414042;
    font-size: 22px;
    margin: 20px 0px;
}
.ar .contactus-page right-side title {
    float: right;
    margin: 0px;
    margin-bottom: 20px;
}
.contactus-page right-side title ~ float-right {
    margin: 20px 0px;
}
.contactus-page social-media {
    color: #3686C7;
    font-size: 30px;
    position: absolute;
    display: block;
    bottom: 30px;
}
.contactus-page social-media a {
    position: relative;
    transition: 0.5s all;
    bottom: 0px;
}
.contactus-page social-media a:hover {
    color: white;
    /*bottom: 5px;*/
}
.contactus-page social-media a:not(:last-child) {
    padding-right: 20px;
}
.ar .contactus-page social-media a:not(:last-child) {
    padding-right: 0px;
    padding-left: 20px;
}
.contactus-page .input-custom {
    border: 1px solid #F1F2F2;
    background-color: #F1F2F2;
}
.ar s.contactus-page d-flex {
    display: block;
}
.ar .contactus-page dropdown.counrtycode {
    width: 100%;
}
.contactus-page dropdown.has-content .input-custom {
    border: 1px solid #F1F2F2 !important;
}
.contactus-page dropdown.has-content box.error-message:after {
    color: #A7A9AC !important;
}
.contactus-page .button {
    margin-top: 18px;
}
/*---------- Contact Us Page ----------*/

/*---------- Profile Page ----------*/
.profile-page {
    margin-top: 100px;
    margin-bottom: 100px;
}
.profile-page first-row {
    display: flex;
    position: relative;
    left: 20%;
    width: 60%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    margin-bottom: 80px;
}
.ar .profile-page first-row {
    left: unset;
    right: 20%;
}
.profile-page second-row .btn-save {
    display: none;
}
.profile-page profile-img {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.profile-page profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-page content {
    display: inline-block;
    width: calc(100% - 150px);
}
.profile-page content title {
    margin-bottom: 10px;
}
.profile-page content title, .profile-page content title ~ * {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}
.profile-page .panel {
    margin-bottom: 30px;
    margin-top: 50px;
}
.profile-page .social-media {
    text-align: right !important;
}
.ar .profile-page .social-media {
    text-align: left !important
}
.profile-page .button {
    text-align: center;
}
.profile-page .btn {
    text-transform: none;
    padding: 10px 20px;
    font-size: 15px;
}
.profile-page .edit {
    font-weight: bold;
    color: #3686C7;
    padding-right: 30px;
    cursor: pointer;
    user-select: none;
}
.ar .profile-page .parent .text-right {
    text-align: left !important;
}
.ar .profile-page .edit {
    padding-right: 0px;
}
.ar .profile-page .delete {
    padding-right: 30px;
}
.profile-page .delete {
    font-weight: bold;
    color: #ED1C24;
    cursor: pointer;
    user-select: none;
}
.profile-page .btn:after, .profile-page .btn:before {
    width: 100%;
    height: 100%;
}
.profile-page sixth-row p {
    color: #414042;
    cursor: pointer;
}
.profile-page sixth-row .deactive ~ p {
    color: #3686C7;
    font-weight: bold;
}
.profile-page inline-block {
    text-align: center;
}
.profile-page inline-block:not(:last-child) {
    margin-right: 20px;
}
.profile-page third-row .parent:not(:last-child), .profile-page fourth-row .parent:not(:last-child) {
    margin-bottom: 10px;
}
/*---------- Profile Page ----------*/

/*---------- Settings Page ----------*/
.settings-page {
    margin-top: 100px;
    margin-bottom: 50px;
}
.settings-page first-row {
    display: flex;
    position: relative;
    left: 20%;
    width: 60%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    margin-bottom: 80px;
}
.ar .settings-page first-row {
    left: unset;
    right: 20%;
}
.settings-page profile-img {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.settings-page profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.settings-page content {
    display: inline-block;
    width: calc(100% - 150px);
}
.settings-page content title {
    margin-bottom: 10px;
}
.settings-page content title, .settings-page content title ~ * {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}
.settings-page .panel {
    margin-bottom: 30px;
    margin-top: 50px;
}
.settings-page .button {
    text-align: center;
}
.settings-page .btn {
    text-transform: none;
    padding: 10px 20px;
    font-size: 15px;
    margin-top: 20px;
}
.settings-page .btn:after, .settings-page .btn:before {
    width: 100%;
    height: 100%;
}
/*---------- Settings Page ----------*/

/*---------- History Page ----------*/
.history-page {
    margin-top: 100px;
    margin-bottom: 50px;
}
.history-page .panel2 {
    padding: 25px 30px;
}
.history-page first-row {
    display: flex;
    position: relative;
    left: 20%;
    width: 60%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    margin-bottom: 80px;
}
.ar .history-page first-row {
    left: unset;
    right: 20%;
}
.history-page second-row {
    display: block;
    position: relative;
    left: 10%;
    width: 80%;
}
.ar .history-page second-row {
    left: unset;
    right: 10%;
}
.history-page profile-img {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.history-page profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.history-page first-row content {
    display: inline-block;
    width: calc(100% - 150px);
}
.history-page first-row content title {
    margin-bottom: 10px;
}
.history-page first-row content label {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.history-page second-row .panel {
    margin-bottom: 30px;
    margin-top: 50px;
}
.history-page documents {
    display: block;
}
.history-page third-row {
    display: block;
    margin: 0 5%;
}
.history-page third-row .search {
    position: relative;
}
.history-page third-row .search svg {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 11px;
    width: 15px;
    z-index: 2;
}
.history-page third-row .search .input-custom {
    border: 0px;
    background-color: #F1F2F2;
    color: #3686C7;
    font-weight: bold;
    padding-left: 40px;
}
.history-page third-row .search .input-custom::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #3686C7;
    font-weight: bold;
}
.history-page third-row .search .input-custom::-moz-placeholder { /* Chrome/Opera/Safari */
    color: #3686C7;
    font-weight: bold;
}
.history-page third-row .search .input-custom::-ms-input-placeholder { /* Chrome/Opera/Safari */
    color: #3686C7;
    font-weight: bold;
}
.history-page third-row .search .input-custom::-moz-placeholder { /* Chrome/Opera/Safari */
    color: #3686C7;
    font-weight: bold;
}
.history-page third-row document-detail {
    height: 500px;
}
.history-page third-row documents {
    display: none;
}
.history-page third-row documents document {
    margin-right: 0px;
}
.history-page third-row documents document:first-child {
    margin-top: 0px;
}
.history-page third-row documents document:last-child {
    margin-bottom: 30px;
}
.history-page third-row .panel title {
    position: relative;
    margin: 25px 0px;
    cursor: pointer;
}
.history-page third-row .panel title.closed {
    color: #A7A9AC;
}
.history-page third-row .panel title.closed:after {
    content: "+";
    color: #A7A9AC;
    font-size: 30px;
}
.history-page third-row .panel title.opened:after {
    content: "-";
    font-size: 35px;
}
.history-page third-row .panel title:after {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: -10px;
    font-weight: 100;
    font-size: 35px;
}
.ar .history-page third-row .panel title:after {
    right: unset;
    left: 0px;
}
/*---------- History Page ----------*/

/*---------- Privacy Policy page | Terms and Conditions Page ----------*/
.privacy-page {
    margin: 50px 0;
    font-size: 17px;
}
.privacy-page title {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}
.privacy-page p {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}
/*---------- Privacy Policy page | Terms and Conditions Page ----------*/

/*---------- Documents Page ----------*/
.document-page {
    margin: 50px 0;
}
.document-page title {
    text-transform: uppercase;
    font-size: 23px;
}
.document-page documents {
    display: block;
}
.document-page first-row {
    display: block;
    margin: 50px 0;
}
.document-page first-row title {
    font-size: 18px;
    margin-bottom: 25px;
}   
.document-page first-row p {
    margin-bottom: 50px;
    color: #A7A9AC;
}
.document-page document-detail {
    position: relative;
    color: #A7A9AC;
    display: block;
    width: 100%;
    padding: 25px 35px;
    border: 1px solid #D1D3D4;
    height: 700px;
    overflow: hidden;
}
.document-page document-detail header {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.document-page document-detail logo {
    display: block;
    height: 75px;
}
.document-page document-detail logo img {
    width: auto;
    max-width: 100%;
}
.document-page document-detail title {
    text-align: center;
    margin-bottom: 20px;
}
.document-page document-detail p:not(:last-child) {
    margin-bottom: 15px;
}
.document-page document-detail p:not(:first-of-type) {
    filter: blur(5px);
}
.document-page document-detail .btn-login:after, .document-page document-detail .btn-login:before {
    width: 100%;
    height: 100%;
}
.document-page document-detail .btn-login {
    background-color: #3686C7;
    color: #fff;
    border-radius: 0;
    padding: 10px;
    width: 50px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 60%;
    z-index: 2;
}
.document-page .buttons {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: right;
}
.document-page .buttons .btn-download:not(:last-child) {
    margin-right: 25px;
}
/*---------- Documents Page ----------*/

/*---------- Edit page ----------*/
.custom-modal dropdown {
    max-width: unset;
    margin-bottom: 45px;
}
/*---------- Edit page ----------*/

/*---------- Answered Modal ----------*/
.custom-modal .answered-modal .btn {
    width: 100%;
    min-width: unset;
}
/*---------- Answered Modal ----------*/

/*---------- Unsubscribe page ----------*/
    .unsubscribe-page {
        margin-bottom: 50px;
        margin-top: 50px;
    }
    .unsubscribe-page title {
        display: block;
        font-size: 25px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }
/*---------- Unsubscribe page ----------*/


/****************************************************************************************************************************/
/* web responsive layout */
/* Smartphones Portrait */
@media (min-width: 768px) {
    .left-side tooltip-icon {
        display: none;
    }
}
@media (max-width: 767px) {
    .navbar-custom .dropdown-menu-custom > a {
        text-align: center;
    }
    .steps > div title:after {
        content: "\f107";
        font-family: FontAwesome;
        position: relative;
        transform: rotate(90deg);
        margin-left: 10px;
    }
    .ar .steps > div title:after {
        content: "";
    }
    .ar .steps > div title:before {
        content: "\f107";
        font-family: FontAwesome;
        position: relative;
        transform: rotate(90deg);
        margin-right: 10px;
    }
    .custom-modal > div {
        padding: 30px;
    }
    .custom-modal > div > .header {
        margin: -30px -30px 0px -30px;
    }
    .index-page first-section, .index-page first-section .slick, .index-page first-section .slick-slide {
        height: calc(100vh - 60px) !important;
    }
    skip-form {
        float: unset;
        position: relative;
        text-align: center;
        display: block;
        margin-bottom: 15px;
    }
    body {
        font-size: 13px;
    }
    question {
        margin-bottom: 3px;
    }
    .custom-modal .answered-modal .col {
        margin-top: 25px;
    }
    .panel {
        padding: 25px 25px;
    }
    documents document {
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
    }
    div > question:not(:first-child) {
        margin-top: 15px;
    }
    .navbar-custom {
        height: 60px;
    }
    .min-height {
        padding-top: 60px;
    }
    .ar .navbar-custom .right-side .lang {
        padding-right: 0px;
    }
    .align-center-sm-down {
        text-align: center;
    }
    .da-thumbs {
        column-count: 1;
        margin: 0;
        margin-top: 40px
    }
    label.upload-btn {
        width: 100%;
        margin-top: 15px;
    }
    .index-page third-section .costs .cost:not(:last-child) {
        margin-bottom: 30px;
    }

    /*---------- ReCAPTCHA ----------*/
    .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        float: unset !important;
    }
    /*---------- ReCAPTCHA ----------*/

    /*---------- Index Page ----------*/
    .index-page first-section .slick title {
        font-size: 18px
    }
    .index-page first-section .button {
        top: calc(100vh - 185px);
        font-size: 14px;
        width: 220px;
        height: 45px;
        line-height: 45px;
        left: 50% !important;
        transform: translateX(-50%);
    }
    .index-page first-section .button:hover{
        top: calc(100vh - 183px);
    }
    .index-page first-section .button:active{
        top: calc(100vh - 180px);
    }
    .index-page first-section .button div:first-child svg {
        width: 20px;
        height: 20px;
    }
    .index-page first-section .button div:first-child {
        width: 45px;
    }
    .index-page third-section .background img {
        top: 35%;
    }
    /*---------- Index Page ----------*/

    /*---------- Questions Page ----------*/
    .question-page block .left-side tooltip {
        display: block;
    }
    .question-page block .right-side tooltip {
        display: none;
    }
    /*---------- Questions Page ----------*/

    /*---------- Steps ----------*/
    .steps {
        display: none;
    }
    .steps.xs {
        display: block;
    }
    /*---------- Steps ----------*/

    /*---------- Scroll Icon ----------*/
    scroll-div {
        top: calc(100vh - 120px);
    }
    scroll-div text {
        display: none;
    }
    scroll-div scroll-icon {
        width: 40px;
        height: 40px;
    }
    scroll-div scroll-icon svg {
        height: 12px;
    }
    /*---------- Scroll Icon ----------*/

    /*---------- Footer ----------*/
    footer.footer-custom {
        height: auto;
        font-size: 11px;
        text-align: center;
    }
    footer.footer-custom .text-right {
        text-align: center !important;
    }
    footer.footer-custom live-chat {
        width: calc(100% + 30px);
        position: relative;
        left: -15px;
    }
    .ar footer.footer-custom live-chat {
        left: unset;
        right: -15px;
    }
    .ar footer.footer-custom > .container > .row > .text-right {
        text-align: center !important;
    }
    /*---------- Footer ----------*/

    /*---------- Navigation ----------*/
    .navbar-custom .navbar-collapse {
        background-color: white;
        position: absolute;
        left: 0;
        top: 55px;
        width: 100vw;
        text-align: center;
        box-shadow: 0px 13px 20px rgba(0,0,0,0.2);
    }
    .navbar-custom .center-side {
        width: 100%;
        height: auto;
    }
    .navbar-custom .center-side .navbar-nav {
        position: unset;
        transform: unset;
    }
    .navbar-custom .dropdown-menu-custom {
        position: relative;
        top: 11px;
        left: unset;
        transform: unset;
        z-index: 1;
        width: 100%;
        box-shadow: unset;
        border: 1px solid #ddd;
    }
    .navbar-custom .navbar-nav .dropdown:hover:after, .navbar-custom .navbar-nav .dropdownactive:after {
        right: unset;
        left: 50%;
        top: 45px;
        transform: translateX(-50%);
    }
    .navbar-custom .navbar-nav li a {
        line-height: 40px !important;
    }
    .navbar-custom .right-side .username {
        height: 40px !important;
    }
    .navbar-custom .navbar-nav li {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0px;
    }
    .navbar-custom .right-side {
        padding: 0 10px;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }
    .ar .navbar-custom .right-side {
        left: unset;
        right: 50%;
        transform: translateX(50%);
    }
    .navbar-custom .right-side .lang {
        padding: 0;
    }
    .navbar-custom .right-side .username {
        width: 200px;
        left: 50%;
        transform: translateX(-50%);
    }
    .ar .navbar-custom .right-side .username {
        left: unset;
        right: 50%;
        transform: translateX(50%);
    }
    .navbar-custom .dropdown-menu-custom.notifications-dropdown {
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }
    .ar .navbar-custom .dropdown-menu-custom.notifications-dropdown {
        transform: translateX(50%);
        left: unset;
        right: 50%;
    }
    /*---------- Navigation ----------*/

    /*---------- Index Page ----------*/
    .index-page second-section .img {
        width: 100%;
    }
    .index-page third-section .content {
        padding: 80px 30px;
    }
    /*---------- Index Page ----------*/

    /*---------- Login Page ----------*/
    .login-page, .signup-page {
        margin: 15px;
        width: calc(100% - 30px);
        min-height: unset;
        height: auto;
    }
    .login-page .left-side logo1, .signup-page .left-side logo1 {
        margin-top: 30px;
    }
    .login-page .left-side text, .signup-page .left-side text {
        margin-top: 50px;
    }
    .login-page .left-side .social-media, .signup-page .left-side .social-media {
        position: relative;
        transform: unset;
        left: unset;
        margin-top: 70px;
    }
    .login-page .left-side, .signup-page .left-side {
        padding-right: 15px; 
    }
    .social-media a {
        margin: 0 10px;
    }
    .solutions-page third-row .img {
        margin-top: 15px;
    }
    /*---------- Login Page ----------*/

    /*---------- Dropdown ----------*/
    dropdown {
        max-width: unset;
    }
    /*---------- Dropdown ----------*/

    /*---------- Tooltip ----------*/
    tooltip {
        margin-top: 15px;
        margin-bottom: 15px;
        box-shadow: unset;
        padding: 0px;
    }
    tooltip text {
        display: none;
    }
    tooltip-icon {
        position: relative;
        top: 5px;
        margin-left: 10px;
    }
    .ar tooltip-icon {
        margin-left: 0px;
        margin-right: 10px;
    }
    .right-side tooltip-icon {
        display: none;
    }
    /*---------- Tooltip ----------*/

    /*---------- About page ----------*/
    .about-page .title {
        margin-bottom: 20px;
    }
    .about-page .user:not(:last-child) {
        margin-bottom: 20px;
    }
    /*---------- About page ----------*/

    /*---------- Contect Us page ----------*/
    .contactus-page {
        position: relative;
        top: unset;
        transform: unset;
        height: auto;
        width: auto;
    }
    .contactus-page social-media {
        position: relative;
        bottom: unset;
        font-size: 25px;
        margin-top: 25px;
    }
    .contactus-page .left-side {
        padding: 15px;
    }
    .contactus-page right-side {
        padding: 25px 0px;
    }
    .contactus-page .btn {
        min-width: unset;
        width: 100%;
    }
    .contactus-page .contactus-page {

    }
    .contactus-page .left-side title, .contactus-page right-side title ~ float-right, .contactus-page right-side title {
        margin-top: 0;
    }
    /*---------- Contect Us page ----------*/

    /*---------- Documents page ----------*/
    .document-page documents {
        display: block;
    }
    .document-page .btn:not(:last-child) {
        margin-bottom: 15px;
    }
    .document-page .btn {
        margin-right: 0px !important;
        right: 50%;
        transform: translateX(50%);
    }
    /*---------- Documents page ----------*/

    /*---------- FAQ page ----------*/
    .faq-page {
        padding-top: 30px;
    }
    .faq-page > .container block:last-child {
        padding-bottom: 50px;
    }
    .faq-page .group input {
        margin-bottom: 25px;
    }
    .faq-page .btn {
        min-width: unset;
        width: 100%;
    }
    /*---------- FAQ page ----------*/

    /*---------- History page ----------*/
    .history-page {
        margin-top: 50px;
    }
    .history-page first-row {
        width: 100%;
        left: 0 !important;
        right: 0 !important;
        margin-bottom: 50px;
    }
    .history-page first-row profile-img {
        width: 70px;
        height: 70px;
    }
    .history-page first-row content {
        width: calc(100% - 70px);
    }
    .history-page third-row document-detail {
        margin-top: 25px;
    }
    .history-page second-row {
        width: 100%;
        left: 0 !important;
        right: 0 !important;
    }
    .history-page .btn {
        min-width: unset;
        width: 100%;
    }
    .history-page .btn:not(:last-child) {
        margin-bottom: 15px;
    }
    /*---------- History page ----------*/

    /*---------- Pay page ----------*/
    .pay-page .panel {
        width: 100%;
    }
    .pay-page .right-side, .pay-page .left-side {
        margin: 50px 0;
        padding: 0px 15px;
    }
    .pay-page .left-side {
        margin-bottom: 0px;
    }
    /*---------- Pay page ----------*/

    /*---------- Privacy page ----------*/
    .privacy-page {
        font-size: 14px;
    }
    /*---------- Privacy page ----------*/

    /*---------- Profile page ----------*/
    .profile-page {
        margin-top: 50px;
    }
    .profile-page first-row {
        width: 100%;
        left: unset !important;
        right: unset !important;
        margin-bottom: 50px;
    }
    .profile-page first-row profile-img {
        width: 70px;
        height: 70px;
    }
    .profile-page first-row content {
        width: calc(100% - 70px);
    }
    .profile-page content title, .profile-page content title ~ * {
        top: 30%;
    }
    .profile-page .social-media {
        text-align: center !important;
        padding: 0px;
    }
    .ar .profile-page .social-media {
        text-align: center !important;
    }
    .profile-page .social-media > inline-block {
        margin-right: 0px;
        margin-top: 10px;
    }
    .profile-page sixth-row .social-media p {
        font-size: 12px;
    }
    .profile-page sixth-row .social-media a {
        width: 40px;
        height: 40px;
    }
    .profile-page sixth-row .social-media i {
        line-height: 40px;
    }
    .profile-page sixth-row > .panel > .row {
        padding: 0px !important;
    }
    .profile-page third-row .parent:not(:last-child), .profile-page fourth-row .parent:not(:last-child) {
        margin-bottom: 20px;
    }
    /*---------- Profile page ----------*/

    /*---------- Settings page ----------*/
    .settings-page {
        margin-top: 50px;
    }
    .settings-page first-row {
        width: 100%;
        left: 0 !important;
        right: 0 !important;
        margin-bottom: 50px;
    }
    .settings-page first-row profile-img {
        width: 70px;
        height: 70px;
    }
    .settings-page first-row content {
        width: calc(100% - 70px);
    }
    .settings-page content title, .settings-page content title ~ * {
        top: 30%;
    }
    .settings-page fourth-row .pb-4 {
        padding: 0!important;
    }
    .settings-page fourth-row currency {
        line-height: 18px;
        height: 20px;
    }
    .settings-page currency:after {
        top: 6px;
    }
    /*---------- Settings page ----------*/

    .da-thumbs li a div span, .panel, .login-page, .signup-page, .solutions-page first-row, .contactus-page .main-row, .profile-page first-row, .settings-page first-row, .history-page first-row {
        box-shadow: unset;
        border: 1px solid #ddd;
    }
}
@media (max-width: 375px) {
    .profile-page .social-media > inline-block:nth-child(4) {
        margin-right: 0;
    }
}
@media (max-width: 320px) {
    .profile-page .social-media > inline-block:nth-child(even) {
        margin-right: 0;
    }
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Smartphones Landscape */
@media (max-width : 767px) and (orientation : landscape) {
    .navbar-custom {
        height: 60px;
    }
    .index-page first-section, .index-page first-section .slick, .index-page first-section .slick-slide {
        height: calc(100vh - 60px) !important;
    }
    .min-height {
        padding-top: 60px;
    }
    .contactus-page {
        position: relative;
        top: unset;
        transform: unset;
        height: auto;
        width: auto;
    }
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Tablets Landscape */
@media (min-width : 768px) and (max-width : 1023px)  {
    .navbar-custom .dropdown-menu-custom > a {
        text-align: center;
    }
    .navbar-custom .dropdown-menu-custom {
        position: relative;
        top: 11px;
        left: unset;
        transform: unset;
        z-index: 1;
        width: 50%;
        box-shadow: unset;
        border: 1px solid #ddd;
    }
    .navbar-custom {
        height: 60px;
    }
    .index-page first-section, .index-page first-section .slick, .index-page first-section .slick-slide {
        height: calc(100vh - 60px) !important;
    }
    .min-height {
        padding-top: 60px;
    }
    body {
        font-size: 14px;
    }
    .da-thumbs {
        column-count: 2;
    }
    .steps {
        display: flex;
        width: calc(100% + 154px);
        color: #6D6E71;
        text-transform: uppercase;
        margin-top: 50px;
        margin: 50px -80px;
    }
    .ar .navbar-custom .right-side .lang {
        padding-right: 0px;
    }

    .contactus-page {
        position: relative;
        top: unset;
        transform: unset;
        height: auto;
        width: auto;
    }
    /*---------- Navigation ----------*/
    .navbar-custom .navbar-collapse {
        background-color: white;
        position: absolute;
        left: 0;
        top: 55px;
        width: 100vw;
        text-align: center;
        box-shadow: 0px 16px 20px rgba(0,0,0,0.3);
    }
    .navbar-custom .center-side {
        width: 100%;
        height: auto;
    }
    .navbar-custom .center-side .navbar-nav {
        position: unset;
        transform: unset;
    }
    .navbar-custom .navbar-nav li a {
        line-height: 40px !important;
    }
    .navbar-custom .right-side .username {
        height: 40px !important;
    }
    .navbar-custom .navbar-nav .dropdown:hover:after, .navbar-custom .navbar-nav .dropdownactive:after {
        right: unset;
        left: 50%;
        top: 45px;
        transform: translateX(-50%);
    }
    .navbar-custom .navbar-nav li {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .navbar-custom .right-side {
        width: 100%; 
        padding: 0 10px;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }
    .navbar-custom .right-side .lang {
        padding: 0;
    }
    .navbar-custom .dropdown-menu-custom {
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        top: 37px;
    }
    .navbar-custom .dropdown-menu-custom.notifications-dropdown {
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }
    .navbar-custom .right-side .username {
        position: relative;
        width: 250px;
        left: 50%;
        transform: translateX(-50%);
    }
    .ar .navbar-custom .right-side .username {
        left: unset;
        right: 50%;
        transform: translateX(50%);
    }
    /*---------- Navigation ----------*/

    /*---------- Footer ----------*/
    footer.footer-custom {
        height: auto;
    }
    footer.footer-custom .row > div {
        text-align: center !important;
    }
    /*---------- Footer ----------*/

    /*---------- Index Page ----------*/
    .index-page second-section .img {
        width: 100%;
    }
    .index-page first-section .button {
        right: 20px;
        font-size: 14px;
        width: 230px;
    }
    .index-page first-section .button div:first-child svg {
        width: 20px;
        height: 20px;
    }
    /*---------- Index Page ----------*/

    /*---------- Login Page ----------*/
    .login-page .left-side text {
        padding: 0 3vw;
    }
    /*---------- Login Page ----------*/

    /*---------- Pay Page ----------*/
    .pay-page .panel {
        width: 100%;
    }
    .pay-page .right-side, .pay-page .left-side {
        margin: 50px 0;
        padding: 0px 15px;
    }
    .pay-page .left-side {
        margin-bottom: 0px;
    }
    /*---------- Pay Page ----------*/
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Tablets Landscape */
@media (min-width : 1024px) and (max-width : 1339px)  {
    .question-page .left-side {
        padding-right: 60px;
    }
    .contactus-page {
        position: relative;
        top: unset;
        transform: unset;
        height: auto;
        width: auto;
    }
    .ar .question-page .left-side {
        padding-right: 0px;
        padding-left: 60px;
    }
    .navbar-custom .center-side .navbar-nav {
        position: unset;
        transform: unset;
    }
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Laptops 1440px */
@media (min-width : 1440px) and (max-width : 2559px) {
    .question-page .right-side {
        padding-left: 60px;
    }
    .ar .question-page .right-side {
        padding-left: 0px;
        padding-right: 60px;
    }
    .question-page .left-side {
        padding-right: 60px;
    }
    .ar .question-page .left-side {
        padding-right: 0px;
        padding-left: 60px;
    }
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Laptops 2560px */
@media (min-width : 2560px) {
}

@media (max-width : 400px) {
    .navbar-custom .dropdown-menu-custom.notifications-dropdown {
        width: 320px;
    }
}