:root { 
    --primary-color: #1a1a1a;
    --dark: #101010;
    --shadow: 0 0 6px rgba(0,0,0,.2);
}

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; }

html,
body { height: 100%; font-weight: 300; font-size: 12px; font-family: 'lato', Arial, sans-serif; color: var(--dark); background-color:#f1f1f1; }

img, a img { border:none; }
a { outline:none; text-decoration:none; color:#0555fa; }
a:hover { text-decoration:underline; }
ul, ol { list-style-type:none; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; font-size: 1.4rem; line-height:2rem; }
p { font-size:1.2rem; line-height:2rem; margin:0; padding:0; }
strong, b { font-weight:bold; }

.highlight { color: var(--primary-color); }

.subcolumns { overflow:hidden; }
.float-none { float:none!important; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.visible { display:block!important; }
.hidden { display:none!important; }

.grid { display:grid; }
.grid-2-cols { grid-template-columns: repeat(2, 1fr); grid-gap:1rem; }
.grid-3-cols { grid-template-columns: repeat(3, 1fr); grid-gap:1rem; }
.grid-4-cols { grid-template-columns: repeat(4, 1fr); grid-gap:1rem; }

.table { width:100%; height:100%; display:table; }
.table-cell { width:100%; height:100%; display:table-cell; vertical-align:middle; }
.relative { width:100%; height:100%; position:relative; }

.align-center { text-align:center; }
.align-left { text-align:left; }
.align-right { text-align:right; }

.mar0 { margin:0rem!important; }
.mar05b { margin-bottom:0.5rem!important; }
.mar1b { margin-bottom:1rem!important; }
.mar2b { margin-bottom:2rem!important; }
.mar3b { margin-bottom:3rem!important; }

/* ============================================================= */

.wrapper { width:100%; height:100%; position:relative; padding:7rem 0 0; }
.wrapper.fixed-elements { height:100%; }
.form-page { padding:7rem 0 5.1rem; }

/*.wrapper.fixed-elements,*/
.wrapper.form-preview-page,
.wrapper.list-page,
.wrapper.responses-page,
.wrapper.login-page,
 .wrapper.profile-page{ height:100%; }


.header,
.footer { width:100%; height:7rem; position:absolute; top:0; left:0; z-index:100; }
.footer { height:5.1rem; top:auto; bottom:0; }
/*.form-preview-page .header,
.list-page .header,
.fixed-elements .header,
.fixed-elements .footer { position:absolute; top:0; left:0; z-index:100; }
.fixed-elements .footer { top:auto; bottom:0; }*/

.wrapper-content { width:100%; position:relative; padding:0; }
.form-page .wrapper-content { padding:3rem 0; }
.form-preview-page .wrapper-content { padding:3rem 0; }
.fixed-elements .wrapper-content { height:100%; }

/* header ============================================================= */

.header { display:grid; grid-template-columns: 15rem auto 15rem; grid-gap:1rem; padding:0 1rem 0 2rem; align-items:center; justify-items: center; background:#f8f8f8; border-bottom:1px solid #ccc; }

.logo { justify-self: start; margin-bottom:.5rem; }
.logo img { width:auto; height:2.4rem; }
.logo img.white-logo { display:block; }
.logo img.black-logo { display:none; }

.menu { width:100%; height:100%; margin:0 auto; text-align:center; font-size:0; line-height:0; overflow:hidden; /*display:grid; grid-gap:1rem; grid-template-columns: repeat(auto-fit, minmax(6rem, 8rem)); align-content:center; justify-content: center;*/ /*background: rgba(255,255,255,.2);*/ }
.menu a { width:8rem; height:100%; display:inline-block; position:relative; margin:0; color:#999; text-align:center; text-decoration:none; }
.menu a:after { width: 100%; height: 100%; position:absolute; top:0; left:0; font-family: 'icons'; font-size:3.4rem; line-height:7rem; text-align:center; transition: transform .3s ease-in-out; }
.menu a:hover:after { transform: translate3d(0,-100%,0); }

.menu a:nth-child(1):after { content: "\ee7b"; }
.menu a:nth-child(2):after { content: "\ee7c"; }
.menu a:nth-child(3):after { content: "\ee7d"; }
/*.menu a:nth-child(4):after { content: "\ee41"; }
.menu a:nth-child(5):after { content: "\e900"; } 
.menu a:nth-child(6):after { content: "\e90d"; font-size:3.8rem; } 
.menu a:nth-child(7):after { content: "\ee3e"; font-size:3.2rem; }*/ 

.menu a.selected { color:#000; }
.menu a:before { width: 0; height: 0; display:none; position:absolute; bottom:0; left:50%; content:''; transform:translate(-50%,0); border-bottom: .4rem solid #ccc;  border-left: .4rem solid transparent; border-right: .4rem solid transparent; }
.menu a.selected:before { display:block; } 

/*.agents-page .menu a:before,
.clients-page .menu a:before,
.data-explorer-page .menu a:before { border-bottom: .6rem solid #eef0fa; }*/
.session-page .menu a:before { border-bottom: .6rem solid #f1f1f1; }

.menu a strong { width: 100%; height: 100%; position:absolute; top:100%; left:0; display:table; font-size:1.1rem; font-weight:normal; line-height:1.5rem; text-transform:uppercase; transition: transform .3s ease-in-out; }
.menu a:hover strong { transform: translate3d(0,-100%,0); }
.menu a strong span { width: 100%; height: 100%; display:table-cell; vertical-align:middle; }

.user-img { width:4rem; height:4rem; position:relative; border-radius:50%; overflow:hidden; background-color:#dcdefc; margin-left:.7rem; color: var(--primary-color); }
.user-img:after { width:4rem; height:4rem; position:absolute; top:0; left:0; z-index:3; content: "\ee5b"; font-family: 'icons'; font-size:2.4rem; line-height:4rem; text-align:center; color: var(--primary-color); }
.user-img img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:4; }

.menu-right { justify-self: end; display:grid; grid-gap:1rem; grid-template-columns: repeat(3, auto); align-items:center; }

.menu-right a { width:3.2rem; height:3.2rem; position:relative; color:#999; text-align:center; text-decoration:none; transition: all .3s ease-in-out; }
.menu-right a:hover { color:#000; }
.menu-right a:after { width: 100%; height: 100%; display:block; position:absolute; top:0; left:0; z-index:5; content: "\e90f"; font-family: 'icons'; font-size: 2rem; line-height:3.2rem; text-align:center; }
.menu-right a.user:after { content:'\ea0e'; font-size: 2.2rem; }
.menu-right a.settings:after { content:'\e9db'; }
.menu-right a.notifications:after { content:'\e92f'; }
.menu-right a.logout:after { content:'\e9cc'; }

.menu-right .notifications.alert:before { width: .6rem; height: .6rem; display:block; position:absolute; top:.5rem; right:.7rem; z-index:6; content: ""; border-radius:50%; background:#f63636; box-shadow: 1px 1px 1px rgba(0,0,0,.1); }

.menu-right a.logout { margin-left:2rem; }
.menu-right a.logout:before { width:2px; height:40%; position:absolute; top:50%; left:-1.5rem; content: ""; transform: translate(0,-50%); content:''; border-left: 1px dashed #666; opacity:.6; }

/* footer ============================================================= */

.footer { background-color:#f1f1f1; display:grid; grid-template-columns: 10rem 10rem 1fr 10rem 10rem; grid-template-areas:"prev-btn clear-btn pagination end-btn next-btn"; align-items: center; justify-items: center; border-top:1px solid #ccc; }
/*.footer:before { width:100%; height:1px; position:absolute; top:-2px; left:0; background-color:#ccc; content:''; }*/
.footer.gdpr-actions { grid-template-areas:"discard-btn pagination pagination pagination accept-btn"; }

.footer-btn.prev-btn { grid-area:prev-btn; }
.footer-btn.next-btn { grid-area:next-btn; border-right:none; }
.footer-btn.accept-btn { grid-area:accept-btn; }
.footer-btn.end-btn { grid-area:end-btn; }
.footer-btn.discard-btn { grid-area:discard-btn; }
.footer-btn.clear-btn { grid-area:clear-btn; }
.footer-pagination { grid-area:pagination; }

/*.footer-btn.next-btn { grid-column: 5 / -1; border-right:0; }*/
.footer-btn.next-btn:before,
.footer-btn.accept-btn:before { width:1px; height:100%; position:absolute; top:0; left:-2px; background-color:rgba(0,0,0,.1); content:''; }

.footer-btn { width:100%; height:100%; margin-top:-1px; position:relative; display:inline-block; font-size:.7rem; line-height:1rem; font-weight:600; text-transform:uppercase; font-family: 'lato', Arial, sans-serif; border-radius:0; text-align:center; border:none; border-left:1px solid rgba(255,255,255,.8); border-right:1px solid rgba(0,0,0,.1); padding:0; cursor:pointer; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0); -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background:transparent; color:var(--primary-color); }
button.footer-btn { line-height:inherit; }
.footer-btn:hover,
.footer-btn:active { color:#fff; background:var(--primary-color); border-left:1px solid rgba(255,255,255,.2); box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0.2); text-decoration:none; outline:none!important; }

.footer .footer-btn.inactive,
.footer .footer-btn.inactive:hover,
.footer .footer-btn.inactive:active { user-select: none; cursor:none; background:transparent; color:#888eaf; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0.2); border-left:1px solid #eaeef7; }
.footer .footer-btn.inactive i { opacity:.4; }

.footer-btn i { width:100%; height:100%; display:block; font-size:2.2rem; line-height:4.4rem; text-align:center; cursor:pointer; }
.footer-btn i.icon-refresh-cw { font-size:2rem; }

.footer-btn span { width:100%; position:absolute; left:0; bottom:.4rem; opacity:.4; }
.footer-btn strong { height:100%; display:block; font-size:1.1rem; line-height:1.4rem; line-height:5rem; font-weight:600; }

.footer-pagination { width:100%; height:100%; text-align:center; border-left:1px solid rgba(255,255,255,.8); border-right:1px solid rgba(0,0,0,.1); font-size:1rem; line-height:5rem; color:#888aa6; text-transform:uppercase; }
.footer-pagination strong { color:#343750; }

/* content ============================================================= */

.content { width:90%; max-width: 70rem; position:relative; margin:0 auto; padding: 5rem 0; background:#fff; box-shadow: 0.2rem 0 0.5rem #f1f1f1; border:1px solid #ccc; }
/*.content:after,
.content:before { width:100%; height:100%; position:absolute; top:.4rem; left:.4rem; content:''; background:#d2d7f7; }
.content:after { top:0; left:0; background:#fff; border:1px solid #ccc; }*/

/*.fixed-elements .content,
.fixed-elements .form { height:100%; }*/

.content .form { display:grid; position:relative; z-index:1; grid-gap:3rem; }

.fieldset-row { width:100%; position:relative; overflow:hidden; padding:0 12%; }
.fieldset-row.img-fieldset-row { width:auto; margin:0; }
.fieldset-row.img-fieldset-row.header-fieldset-row { margin-top:-5rem; }

.fieldset-row .form-row { margin-bottom:0; }
.fieldset-row .form-grid-row .form-row { margin-bottom:1.5rem; }

/*.fieldset-row-title { margin-bottom:2rem; }*/

.main-title { color: var(--primary-color); font-size: 2.8rem; font-weight: 400; line-height: 3.6rem; /*margin-bottom:2rem;*/ }
.sup-title { width: 100%; font-size: .9rem; font-weight: 600; line-height: 1.2rem; opacity:.6; text-transform: uppercase; margin: 0 auto .75rem; }
.main-description { font-size:1.4rem; line-height:2.2rem; }

.content h3 { width:100%; margin:0 auto 1.5rem; font-size: 1.4rem; font-weight: 600; line-height: 2.2rem; text-align:left; }

.content p { font-size:1.2rem; line-height:2rem; margin:0 0 2rem; }
.content .paragraph { font-size:1.2rem; line-height:2rem; margin:0 auto; }

.form-row-image img { width:100%; height:auto; }
.image-caption { margin-bottom:0!important; padding: 0; font-style:oblique; opacity:.6; }

/* ============================================================= */

.new-form-page .form { height:100%; }

.form-box-header .supTitle { width:100%; opacity:.6; font-size:.8rem; font-weight:normal; line-height:1.2rem; color: var(--dark); text-transform:uppercase; margin:0 auto .5rem; }

.form .form-box-header .form-row { margin-bottom:.5rem; }
.form .form-box-header input { height:6rem; line-height:6rem; font-size:1.6rem; font-weight:400; }

.form-box-body { width: 100%; position: relative; padding: 0 15%; user-select:none; }
.form-step-1 .form-box-body { padding-bottom:14rem; }
.form-step-2 .form-box-body { padding-bottom:14rem; }

.form-box-wrap { width:100%; position:relative; border:1px dashed #ccc; margin-bottom:2rem; transition: background .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out, height .3s ease-in-out, opacity .3s ease-in-out; }
.form-box-wrap:after { width:1px; height:2rem; position:absolute; top:100%; left:50%; transform: translate(-50%,0); border-left:1px dashed #ccc; content:''; }
.form-box-wrap.view-box-drag,
.form-box-wrap.view-box-edit { border:1px dashed var(--primary-color); box-shadow: var(--shadow); }
.form-box-wrap.view-box-delete { display:none; /*height:0; opacity:0; border:none; overflow:hidden;*/ }

.form-box-wrap-drag-btn,
.form-box-wrap-options-btn { width: 1.5rem; height: 100%; position: absolute; top: 0; left: 0; z-index:10; border-right: 1px dashed #ccc; color:#adb2e5; cursor:pointer; transition: all .3s ease-in-out; overflow:hidden; }
.form-box-wrap-drag-btn { cursor:move; }
.form-box-wrap-options-btn { left: auto; right: 0; border-left: 1px dashed #ccc; border-right: none; }
.form-box-wrap-drag-btn:hover,
.form-box-wrap-options-btn:hover,
.form-box-wrap-options-btn.active { background-color:#eef0fa; color:var(--primary-color); }
.view-box-options .form-box-wrap-drag-btn { z-index:8; }
.view-box-drag .form-box-wrap-drag-btn { border-right:1px dashed var(--primary-color); }
.view-box-edit .form-box-wrap-drag-btn,
.view-box-edit .form-box-wrap-options-btn,
.view-box-grid .form-box-wrap-drag-btn,
.view-box-grid .form-box-wrap-options-btn { width:0; opacity:0; }

.form-box-wrap-drag-btn i,
.form-box-wrap-options-btn i { width:3rem; height:3rem; display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); font-size:1.6rem; line-height:3rem; text-align:center; }
.form-box-wrap-drag-btn i { font-size:2.5rem; }

.form-box-wrap-center { width:100%; min-height:7rem; position:relative; overflow:hidden; padding:1.5rem 4rem; }
.form-box-wrap-center-content {  }

.form-box-wrap-options { width:100%; height:100%; position:absolute; top:0; left:100%; z-index:9; background-color:#eef0fa; text-align:center; transition: transform .3s ease-out; }
.view-box-options .form-box-wrap-options { transform: translate3d(-100%,0,0); }

.form-box-wrap-options-buttons { width:100%; height:6rem; position:absolute; top:50%; left:0; transform:translate(0,-50%); font-size:0; line-height:0; text-align:center; }
.form-box-wrap-options-buttons span { width:6rem; height:6rem; display:inline-block; margin:0 .5rem; padding:.5rem 0 .3rem; cursor:pointer; font-size:.8rem; line-height:1rem; color:#969ac6; text-transform:uppercase; transition: background .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out, text-shadow .3s ease-in-out; border-radius:.3rem; }
.form-box-wrap-options-buttons span:hover { background: var(--primary-color); color:#fff; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0); }
.form-box-wrap-options-buttons span i { width:100%; height: 3.2rem; display: block; font-size: 2rem; line-height: 3.2rem; text-align: center; color: var(--primary-color); margin-bottom: .3rem; transition: color .3s ease-in-out; }
.form-box-wrap-options-buttons span:hover i { color:#fff; }

.form-box-wrap-center-edit,
.form-box-wrap-grid-edit { width:100%; display:none; /*height:0;*/ position:relative; overflow:hidden; padding:1.5rem 4rem 4.5rem; background:#eef0fa; transition: height .3s ease-in-out .3s, padding .3s ease-in-out .3s; }
.view-box-edit .form-box-wrap-center-edit,
.view-box-grid .form-box-wrap-grid-edit { display:block; /*height:auto; padding:2rem 3rem 4.5rem;*/ }

.form-box-wrap-center-edit .form-row { opacity:0; transition: opacity .3s ease-in-out .3s; }
.view-box-edit .form-box-wrap-center-edit .form-row { opacity:1; }

.form-box-wrap-button { width:auto; height:4rem; opacity:0; position:absolute; left:0; right:0; bottom:0; display:block; font-size:1.1rem; line-height:4rem; font-weight:600; text-transform:uppercase; font-family: 'lato', Arial, sans-serif; border-radius:0; border:none; border-top:1px dashed #ccc; padding:0 1.5rem; text-align:center; cursor:pointer; color:var(--primary-color); background:transparent; transition:color 0.3s ease-in-out, background 0.3s ease-in-out, opacity 0.3s ease-in-out .3s; }
/*button.button { line-height:inherit!important; }*/
.form-box-wrap-button:hover,
.form-box-wrap-button:active { color:#fff; background:var(--primary-color); text-decoration:none; }
.view-box-edit .form-box-wrap-button,
.view-box-grid .form-box-wrap-button { opacity:1; }

.form-row-validation-text { color:#969ac6; font-size:1rem; line-height:1.2rem; margin:0 auto; padding-top:.5rem; }

.form .form-box-wrap .form-row { margin-bottom:1.5rem; }
.form .form-box-wrap-center-content .form-row:last-of-type { margin-bottom:.5rem!important; }

.form .form-row.multiple-block-inputs input { margin-bottom:.6rem; }

.add-block-input { width:100%; height:3.6rem; display:block; font-size:1rem; line-height:3.6rem; font-weight:400; text-transform:uppercase; font-family: 'lato', Arial, sans-serif; border-radius:0; border:none; border:1px dashed #ccc; padding:0 1.5rem; border-radius:.3rem; text-align:center; cursor:pointer; color:var(--primary-color); background:#f1f1f1; transition:color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; }
.add-block-input:hover,
.add-block-input:active { color:#fff; background:var(--primary-color); text-decoration:none; border:1px solid var(--primary-color); }

.form-box-wrap-title { font-size:1.24rem; line-height:2rem; margin:0 auto 1.2rem; font-weight:700; }
.form-box-wrap-descrition { margin:0 auto 1.5rem; font-size:1.16rem; line-height:1.8rem; }

/* ============================================================= */

.wrapper-content-title { color: var(--primary-color); font-size: 2.4rem; font-weight: 400; line-height: 3rem; padding: 3rem 3%; }

.list-content { width:100%; display:grid; grid-template-columns: repeat(4,1fr); grid-gap:0; justify-items:center; border-top:1px solid #ccc; }
.list-content li { width:100%; position:relative; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; overflow:hidden; }
.list-content li:nth-child(4n) { border-right:none; }
.list-content a { width:100%; height:100%; position:relative; display:block; padding:13rem 1.8rem 2rem; color:#000; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background:transparent; }
.list-content a:hover,
.list-content a:active { text-decoration:none; outline:none; background:#f8f8f8; color:var(--primary-color); }
.list-content a:before { width:9rem; height:9rem; content:''; position:absolute; top:2.5rem; left:50%; transform:translate(-50%,0); background: transparent url(../img/form.svg) no-repeat 50% 50%; background-size: auto 100%; }
.list-content .list-cell-img { width:100%; height: 10rem; display:block; margin:0 auto 2rem; }
.list-content strong { display:block; font-size:1.1rem; line-height:1.6rem; font-weight:600; overflow:hidden; }
.list-content span { display: block; font-size: .9rem; line-height: 1.2rem; font-weight: 400; color: #999; text-transform: uppercase; padding-top:.5rem;  }

/* ============================================================= */

.form-grid { width:100%; display:grid; grid-gap:1.5rem; }
/*.fieldset-row .form-grid { grid-gap:.5rem; }*/

.form .form-grid .form-row-checkbox label, .form .form-grid .form-row-radio label { margin-bottom:0!important; }

.set-grid-box { width:100%; display:grid; grid-template-columns: 1fr 12rem; grid-gap:1rem; align-items: center; margin-bottom: 1rem; }
.set-grid { display:grid; grid-template-columns: 3.6rem 1fr 3.6rem; }
.set-grid i { width:100%; height:3.6rem; display:block; font-size:1.2rem; line-height:3.6rem; text-align:center; color: var(--primary-color); cursor:pointer; transition: all .3s ease-in-out; border:1px solid #ccc; }
.set-grid i.icon-ia-minus { border-radius: .3rem 0 0 .3rem; border-right:none; }
.set-grid i.icon-ia-plus { border-radius: 0 .3rem .3rem 0; border-left:none; }
.set-grid i:hover { background: var(--primary-color); color:#fff; }
.form .set-grid-box label { margin-bottom:0!important; }
.form .set-grid input { border-radius:0!important; text-align:center; }

/* ============================================================= */

.form-box-actions { width: 100%; height:12rem; position: absolute; left:0; bottom:0; display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:2rem; padding: 1.5rem 15%; background-color: #eef0fa; border-top: 1px dashed #ccc; }
.form-box-actions button { color: var(--primary-color); background:transparent; cursor:pointer; border:none; border-radius:.3rem; transition:all .3s ease-in-out; font-size:1rem; line-height:1.4rem; text-align:center; text-transform:uppercase; font-weight:400; }
.form-box-actions button i { width:100%; height:4rem; display:block; font-size:3rem; line-height:4rem; margin:0 auto 1rem; }
.form-box-actions button:hover,
.form-box-actions button:active { background: var(--primary-color); color:#fff; box-shadow: var(--shadow); }

/* ============================================================= */

.step1-btns { width:100%; margin:1rem auto 2rem; display:grid; grid-template-columns: repeat(2,10rem); grid-gap:2rem; align-items:center; justify-content:center; }

.upload-image-box { width:100%; height:8rem; position:relative; overflow:hidden; /*border:1px solid rgba(0,0,0,.1);*/ transition:border .3s ease-in-out, box-shadow .3s ease-in-out; border-radius:.4rem; margin:0; cursor:pointer; }
.upload-image-box:hover { /*border-color: var(--primary-color);*/  }
.upload-image-box:after { width:4rem; height:4rem; position:absolute; top:50%; left:50%; z-index:11; margin-top:-1rem; /*content:'\ee47';*/ transform: translate(-50%,-50%);  color: #999; font-size:3.4rem; line-height:4rem; font-family:icons; text-align:center; transition:color .3s ease-in-out; }
.upload-image-box:before { width:100%; position:absolute; top:50%; bottom:auto; color:#666; text-shadow:none; padding-top:1.2rem; z-index:12; content:'Upload Image'; font-size:.8rem; font-weight:600; line-height:1.2rem; text-transform:uppercase; text-align:center; transition:color .3s ease-in-out; }
.upload-image-box:hover:after,
.upload-image-box:hover:before { color:var(--primary-color); }

/*.upload-image-box div.photo-bg { background: url(../img/photo.svg) no-repeat 50% 50%; background-size:cover; }
.upload-image-box div.camera-bg { background: #f7f7f7 url(../img/camera.svg) no-repeat 50% 25%; background-size:auto 60%; }*/
 
.upload-image-box:before { content:'Upload Image'; }
.upload-image-box:after { content:'\ee47'; }

.upload-image-box.upload-camera-img:before { content:'Camera Image'; }
.upload-image-box.upload-camera-img:after { content:'\e90b'; }

.upload-image-box.doc-upload:before { content:'Upload File'; }
.upload-image-box.doc-upload:after { content:'\ee39'; }

.upload-image-box.file-upload:before { content:'Upload File'; }
.upload-image-box.file-upload:after { content:'\ee3b'; }

.form .form-box-wrap .upload-image-grid .form-row { margin-bottom:0!important; margin-top:1rem; }

.upload-image-box .upload-image-input { width:100%; height:100%; position:absolute; top:0; left:0; z-index:15; opacity:0; cursor:pointer; }

.upload-image-box div { width:100%; height:100%; position:absolute; top:0; left:0; z-index:8; background-color:#e7e9f8; }
.upload-image-box div img { max-width:84%; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

.upload-image-icon { width:100%; height:15rem; display:block; margin:0 auto .5rem; background-color: #f3f4fc; border: 1px solid #ccc; border-radius:.1rem; font-size:8rem; line-height:15rem; text-align:center; color:#969ac6; }

.delete-form-row-btn { width:3.6rem; height:3.6rem; margin-top:1rem; display:inline-block; font-size:2rem; line-height:3.4rem; border-radius:0.3rem; border:1px solid transparent; cursor:pointer; color:var(--primary-color); background:transparent; transition:all 0.3s ease-in-out; text-align:center; }
.delete-form-row-btn:hover,
.delete-form-row-btn:active { color:#fff; background:var(--primary-color); box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0.2); text-shadow: rgba(1,12,118,.3); text-decoration:none; }

.form-row .mrl-row .delete-form-row-btn, 
.form-row .mcl-row .delete-form-row-btn,
.form-row .mbi-row .delete-form-row-btn,
.upload-image-grid .form-row .delete-form-row-btn { position:absolute; right:0.1rem; top:50%; transform: translate(0,-50%); margin-top:0; }
.upload-image-grid .form-row .delete-form-row-btn { margin-top:1rem; }

/* ============================================================= */

.files-list { padding:2.5rem 0 1rem; }

.file {  text-align: center; color: #999; margin-bottom:1rem; }
.file i { height: 9rem;  margin: 0 auto .5rem;  font-size: 8rem; line-height: 9rem; }
.file img { width:auto; height: 10rem;  margin: 0 auto 1rem; }
.file strong { display: block; font-size:1.1rem; line-height:1.4rem; text-transform:uppercase; font-weight:600; margin-bottom:.5rem; text-align:center; }

.signature-pad,
.agent-signature { width:100%; height:30rem; position:relative; display:block; margin:0 auto; background-color: #f8f8f8; border: 1px solid rgba(0,0,0,.1); border-radius:.2rem; }
.agent-signature { width:15rem; height:15rem; margin:0; background: transparent url(../img/agent-signature.svg) no-repeat 50% 50%; background-size: auto 100%; border:none; /*border: 1px dashed #ccc;*/ }

.signature-pad:after { width:auto; height:auto; position:absolute; right:1.2rem; bottom:1rem; content:'Signature pad'; font-size:.8rem; line-height:1rem; text-transform:uppercase; text-align:right; font-weight:600; color:#999; }

.signature-pad.error-box:after { color:#eb2b2b!important; }

.clear-signature-pad { width:3.6rem; height:3.6rem; position:absolute; top:.5rem; right:.5rem; display:inline-block; font-size:1.8rem; line-height:3.4rem; border-radius:0.3rem; border:1px solid transparent; cursor:pointer; color:var(--primary-color); background:transparent; transition:all 0.3s ease-in-out; text-align:center; }
.clear-signature-pad:hover,
.clear-signature-pad:active { color:#fff; background:var(--primary-color); box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0.2); text-shadow: rgba(1,12,118,.3); text-decoration:none; }

.signature-pad .tbl-btn,
.agent-signature .tbl-btn { position:absolute; top:.1rem; right:.1rem; opacity:.5!important; }
.signature-pad .tbl-btn:hover,
.agent-signature .tbl-btn:hover { opacity:1!important; }

/* ============================================================= */

.id-card-extractor { width:100%; height:auto; position:relative; overflow:hidden; /*border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;*/ }
.id-card-extractor-list { width:200%; height:32rem; display:grid; grid-template-columns: repeat(2,50%); transform: translate3d(0,0,0); transition: transform .4s ease-out, height .3s ease-out; align-items:center; }
.id-card-extractor-list .id-card-extractor { height:100%; }
.view-ice-step2 .id-card-extractor-list { transform: translate3d(-50%,0,0); }

.id-card-extractor-cell-step-3 { display:none; grid-gap:1.5rem; }
.view-ice-step3 .id-card-extractor-cell-step-3 { height:auto; display:grid; }

.id-card-extractor-cell { height:100%; padding:1.5rem 0; }
/*.id-card-extractor-cell:nth-child(1) { border-right: 1px dashed #ccc; }
.id-card-extractor-cell:nth-child(1),
.id-card-extractor-cell:nth-child(2) { border-bottom: 1px dashed #ccc; }*/
.id-card-extractor-cell:last-of-type { height:auto; }

.id-card-extractor-cell h3 { text-align:center; font-size:1.1rem; line-height:1.4rem; text-transform:uppercase; font-weight:600; margin-bottom:3rem; }
.id-card-extractor-cell h3 span { display:block; color:#999; font-size:1rem; margin-bottom:.2rem; }

.id-card-image-actions,
.add-photo-image-actions { width:100%; text-align:center; font-size:0; line-height:0; vertical-align:middle; }
.id-card-image-actions .button,
.add-photo-image-actions .button { width:10rem; margin:0 .5rem; height:4rem; line-height:3.9rem; }

.view-ice-step3 .id-card-image-actions { display:none; }

/* ============================================================= */

.upload-image-grid { width:100%; margin:1rem auto 2rem; display:grid; grid-template-columns: 10rem 1fr; grid-gap:2rem; align-items:center; }
.upload-image-grid.with-delete-btn { grid-template-columns: 10rem 1fr 4rem; grid-gap:2rem 1rem; }

.form .upload-image-grid .form-row.with-delete-btn input { padding-right:4rem; }

.upload-image-grid .form-row .delete-form-row-btn { position:absolute; right:1px; top:50%; transform: translate(0,-50%); margin-top:.2rem; }
/*.upload-image-grid .form-row .delete-form-row-btn { margin-top:1rem; }*/

.upload-image-grid .file-size { display:block; padding-top:.5rem; font-size:1rem; font-weight:400; line-height:1.4rem; font-style:oblique; color:#666; }

/* ============================================================= */

.add-photo { width:100%; height:auto; position:relative; overflow:hidden; /*border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;*/ }
.add-photo-list { width:300%; height:28rem; display:grid; grid-template-columns: repeat(3,33.33%); transform: translate3d(0,0,0); transition: transform .4s ease-out, height .3s ease-out; align-items:center; }
.add-photo-list.view-apl-step2 { transform: translate3d(-33.33%,0,0); }
.add-photo-list.view-apl-step3 { height:auto; transform: translate3d(-66.66%,0,0); }

.add-photo-cell { width:100%; height:100%; padding:1.5rem 0; margin:0 auto 2rem; }
.add-photo-cell:last-of-type { height:auto; }

.add-photo-cell h3 { text-align:center; font-size:1.1rem; line-height:1.4rem; text-transform:uppercase; font-weight:600; margin-bottom:3rem; }
.add-photo-cell h3 span { display:block; color:#666; font-size:1rem; margin-bottom:.2rem; }
.add-photo-cell:nth-child(1) p { text-align: center; padding: 0 1rem; line-height: 1.8rem; }
.add-photo-image { width:100%; text-align:center; margin:0 auto 3rem; }
.add-photo-image img { width:auto; height:14rem; margin:0 auto; }

.add-photo-image-view { width:100%; }
.add-photo-image-view img { width:100%; height:auto; }

/* ============================================================= */

.form-grid .form-grid { grid-gap:.5rem; }
.form-grid-row { display:grid; grid-template-columns: repeat(2,1fr); grid-gap:1.5rem; }
.form-grid-row.street-grid,
.form-grid-row.address-grid,
.form-grid-row.id-grid { grid-template-columns: repeat(4,1fr); }

.form-grid-row.street-grid .form-row:first-of-type { grid-column: 1 / 4; }
.form-grid-row.id-grid .form-row:last-of-type { grid-column: 3 / -1; }

.calendar-btn { width:3.6rem; height:3.6rem; margin-top:1rem; display:inline-block; font-size:2rem; line-height:3.4rem; border-radius:0.3rem; cursor:pointer; color:var(--primary-color); background:transparent; transition:all 0.3s ease-in-out; text-align:center; }
.calendar-btn:hover,
.calendar-btn:active { color:#fff; background:var(--primary-color); box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0.2); text-shadow: rgba(1,12,118,.3); text-decoration:none; }

.form-row.with-calendar .calendar-btn  { position:absolute; right:1px; top:1.1rem; }

.step1-icons { display:grid; grid-template-columns: repeat(2,1fr); grid-gap:0; padding:0 15%; margin:0 auto 1rem; justify-items: center; }
.step1-icons i { width:5rem; height:5rem; display:block; color:#ccc; font-size:4rem; line-height: 5rem; text-align:center; }
.id-card-extractor-cell:nth-child(1) p { text-align:center; padding: 0 1rem; line-height:1.8rem; }
.id-card-image { width:100%; text-align:center; margin:0 auto 4rem; }
.id-card-extractor-cell:nth-child(2) img { width:auto; height:14rem; margin:0 auto; }

/* ============================================================= */

.mco-box {  }
.mco-box .form-box-wrap-title { margin-bottom:0; padding:0; }
.mco-box .form-box-wrap-center-edit.hck { width:auto; padding:1.5rem 3rem 4.5rem; margin:0 -1.5rem;  }

.mco-cell { width:100%; padding: 1rem 0; border-bottom: 1px dashed #ccc; }
.mco-cell:last-of-type,
.mco-cell.last { border:none; }

/*.mco-cell .form-grid { padding-top:1.5rem; }*/
.mco-cell .form-grid { padding-bottom:1.5rem; }
.mco-cell-header {  min-height:4.2rem; display:grid; grid-template-columns: repeat(2,1fr); grid-gap:1rem; align-items:center; }
.form .mco-cell-header .form-row-checkbox label { font-weight:600; }
.form .mco-cell .mco-cell-header .form-row-checkbox { margin-bottom:0!important; }
.form .form-row-checkbox:last-of-type, .form .form-row-radio:last-of-type { margin:0; }

.mco-cell-hidden { display:none; }
.view-mco-cell-hidden .mco-cell-hidden { display:block; }

/* ============================================================= */

.tablet-wrapper { background-color: #eaeef7; }

.pts-top .swiper-button-next, 
.pts-top .swiper-button-prev { width:4rem; height:4rem; position:absolute; top:50%; left:1rem; transform: translate(0,-50%); background:none; font-size:1.6rem; line-height:4rem; text-align:center; transition: all .3s ease-in-out; cursor:pointer; color:#aeb1c9; border-radius:50%; }
.pts-top .swiper-button-next { left:auto; right:1rem; }
.pts-top .swiper-button-next:hover, 
.pts-top .swiper-button-prev:hover,
.pts-top .swiper-button-next:active, 
.pts-top .swiper-button-prev:active { color:#fff; background-color: var(--primary-color); box-shadow: var(--shadow); outline:none!important; }

.pts-top { width:100%; position:absolute; top:5rem; left:0; bottom:5rem; z-index:2; }
.swiper-slide { width: 100%; height: 100%; flex-shrink: 0; position: relative; }

.tablet-preview { width:auto; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.tablet-preview img { width:auto; height:100%; margin:0; position:relative; z-index:5; }
.tablet-preview iframe { width:89%; height:85%; position:absolute; top:5%; left:5%; z-index:6; border:1px solid #e2e3f5; }

/* ============================================================= */

.offer-row { position:relative; border:1px dashed #ccc!important; margin-bottom:1.5rem; transition: border .3s ease-in-out, box-shadow .3s ease-in-out, background .3s ease-in-out;  }
.offer-row.selected { border:2px solid var(--primary-color)!important; box-shadow: var(--shadow); background-color: #f8f8f8; }

.offer-row .upload-image-grid { height:auto; grid-template-columns: 1fr; grid-gap:.5rem; margin:0;  }
.offer-row .upload-image-box{ height:auto; margin-bottom:.5rem; }

.offer-row .upload-image-box:after,
.offer-row .upload-image-box:before { display:none; }

.offer-row .upload-image-box { height:auto; border-radius:0; border:none; margin-bottom:1rem; }
.offer-row .upload-image-box img { width:100%; height:auto; }
.offer-row p { width:100%; font-size:1.2rem; line-height:2rem; padding:0 1.2rem; margin-bottom:.5rem; text-align:left; }
.offer-row p:last-of-type { margin-bottom:1rem; }

.offer-row .upload-image-grid {  }
.offers-box .form-grid { grid-gap:1.2rem; }

.edit-offer-row .upload-image-box:before { top:auto; bottom:2rem; font-size:1rem; color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); }

.offer-row .icon-check { width:3rem; height:3rem; padding:0; display:block; position:absolute; top:0; right:0; content:""; font-family:icons; text-align:center; line-height:3rem; font-size:2rem; border-radius:0 0 0 .3rem; color:#fff; background-color: var(--primary-color); box-shadow: 0 1px 2px rgba(114,124,245,.4); transform: scale3d(0,0,0); transition: transform .3s ease-in-out; transform-origin: 100% 0;}
.offer-row.selected .icon-check { transform: scale3d(1,1,1); }

/* ============================================================= */

.form-final-msg { width:86%; max-width:50rem; text-align:center; margin:0 auto; }
.form-final-msg div { margin:0 auto 3rem; }
.form-final-msg .main-title { margin-bottom:.5rem; }

/* ============================================================= */

.fieldset-row-action { text-align:right; padding-bottom:2rem; }
.fieldset-row-action .button { max-width:16rem; width:100%; }

.button { width:auto; height:4.6rem; display:inline-block; font-size:1.1rem; line-height:4.5rem; font-weight:700; text-transform:uppercase; font-family: 'lato', Arial, sans-serif; border:1px solid transparent; padding:0 2rem; cursor:pointer; color:#fff; background:#5d2560; border-radius:2.5rem; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0); -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
/*button.button { line-height:inherit!important; }*/
.button:hover,
.button:active { color:#fff; background:#39193b; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); text-decoration:none; }
.button:active { background:#1a1a1a; outline:none!important; }

.button-outline { color:#666; background:transparent; border-color: rgba(0,0,0,.3); }
.button-outline:hover,
.button-outline:active { color:#fafbfe; background: var(--primary-color); box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); }

.button-link,
.button-link:hover,
.button-link:active { width:auto!important; color:#39193b; background:transparent!important; border-color:transparent!important; padding:0!important; box-shadow:none; }
.button-link:hover { text-decoration:underline; }

.box-action .button { height:3.4rem; line-height:3.2rem; }
.box-action .button i { line-height:3.2rem!important; font-size:1.3rem!important; transition: all .3s ease-in-out; }
.box-action .button-outline,
.export-options .button { border-radius:.3rem; font-size:1rem; }

.button.with-icon-left i,
.button.with-icon-right i { width:2rem; height:100%; display:block; float:left; margin:0 0.5rem 0 -.75rem; font-size:1.1rem; line-height:4.5rem; text-align:center; }
.button.with-icon-right i { float:right; margin:0 -.5rem 0 0.5rem; }

/* ============================================================= */

.link-btn { width:auto; height:3rem; display:inline-block; margin-left:0.1rem; font-size:1.1rem; line-height:3rem; color:#0555fa; font-weight:600; text-transform:uppercase; border-radius:0.3rem; border:none; background:transparent; padding:0 1rem; cursor:pointer; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.link-btn:hover { text-decoration:none; background:#111; color:#fff; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); }
.link-btn i { width:auto; height:100%; float:left; display:inline-block; font-size:1rem; line-height:3rem; margin-right:0.5rem; }

.link { width:auto; display:inline-block; font-size:1.1rem; line-height:2rem; color:#0555fa; font-weight:600; text-transform:uppercase; border-radius:0.3rem; border:none; background:transparent; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.link:hover { text-decoration:underline; }

/* ============================================================= */

.tbl-btn { width:3.2rem; height:3.2rem; display:inline-block!important; opacity:.5!important; position:relative; background:transparent; font-size:2rem!important; line-height:3.1rem!important; text-align:center; color: var(--primary-color)!important; border-radius:0.3rem; border:1px solid transparent!important; cursor:pointer; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.tbl-btn:hover { text-decoration:none; /*border-color:var(--primary-color);*/ }
.tbl-btn:active,
.view-row-options .tbl-btn.trigger-row-options { opacity:1!important; background:var(--primary-color)!important; border-color:var(--primary-color)!important; color:#f8f8f8!important; text-decoration:none; box-shadow:0 0.1rem 0.2rem rgba(125,125,125,.2); } 

.table-ul > li:hover .tbl-btn,
.table-ul .view-row-options .tbl-btn,
.dl-cell-header:hover .tbl-btn { opacity:.5!important; }
.table-ul > li:hover .tbl-btn:hover,
.table-ul .view-row-options .tbl-btn.trigger-row-options,
.dl-cell-header .tbl-btn:hover { opacity:1!important; }

.tbl-btn i { width:100%; height:100%; font-size: 1.6rem; line-height:3rem; text-align:center; }
.tbl-btn i.trigger-row-options,
.tbl-btn i.icon-ia-preview-file { font-size: 2rem; }

/* ============================================================= */

.form-preview-page .content { min-height:100%; }
.form-preview-page .form-preview { height:100%; position:relative; z-index:1; padding:0 12%; }

/*.form-preview-page header { width:100%; position:absolute; top:0; left:0; padding:0 12%; }*/

.form-logo { width:7rem; height:auto; float:right; margin:0 0 2rem 0; }
.form-logo img { width:100%; height:auto; }
.form-preview-page .supTitle { opacity:.6; font-size:1.2rem; font-weight:normal; line-height:1.4rem; text-transform:uppercase; margin:0.5rem auto .5rem; }
.form-preview-page .title { font-size: 2.4rem; font-weight: normal; line-height: 3.2rem; }

.form-preview-page .content-preview { width:100%; min-height:45rem; padding:6rem 0 3rem; display:grid; align-items:center; }
.form-preview-page .content-preview p { font-size:1.4rem; line-height:2.2rem; margin:0 auto; }
.form-preview-page .content-preview p:last-of-type { margin-bottom:0; }

.form-preview-page .content-preview-action { width:100%; text-align:center; padding: 8rem 0 0; }
.form-preview-page .content-preview-action .button { max-width:16rem; width:100%; margin:0 auto; }

/* ============================================================= */

.form { width:100%; position:relative; margin:0 auto; }
.form fieldset { width:100%; border:none; }

.form-row { width:100%; position:relative; margin:0 auto 2rem; text-align:left; }
.notif-recipients-box .form-row { margin:0 auto; }


/*.form .input-box-field,
.form .select-box-field { width:100%; height:4rem; position:relative; margin:0 auto 1.5rem; overflow:hidden; border-bottom:1px solid rgba(0,0,0,0.2); -moz-transition: height 0.3s ease-in-out, border 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out, border 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out, border 0.3s ease-in-out; transition: height 0.3s ease-in-out, border 0.3s ease-in-out; }
.form .input-box-field.active,
.form .select-box-field.active { height:5.5rem; border-bottom:1px solid #0555fa; }
.form .input-box-field:before,
.form .select-box-field:before { width:3.5rem; height:3.5rem; position:absolute; right:0; bottom:0; z-index:3; content:"\e905"; font-size:1.4rem; line-height:3.5rem; text-align:center; font-family: icons; color:#0555fa; opacity:0; -moz-transform:scale3d(0,0,0); -ms-transform:scale3d(0,0,0); -o-transform:scale3d(0,0,0); -webkit-transform:scale3d(0,0,0); transform:scale3d(0,0,0); -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -moz-transition:color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; -webkit-transition:color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transition:color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
.form .input-box-field.valid:before,
.form .select-box-field.valid:before { opacity:1; -moz-transform:scale3d(1,1,1); -ms-transform:scale3d(1,1,1); -o-transform:scale3d(1,1,1); -webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1); }*/

.form span.text { width:100%; display:block; margin:0 auto 1rem; font-size:1.4rem; line-height:2rem; }

.form h4 { font-size:1.4rem; line-height:2rem; margin:0 auto 1.4rem; padding-top:1rem; color: var(--dark); }

.form label { width:100%; display:block; font-size:.9rem; line-height:1.4rem; font-weight:400; text-align:left; text-transform:uppercase; font-family: 'lato', Arial, sans-serif; margin-bottom:.75rem; color: var(--dark); cursor:pointer; }

input,
select,
textarea { width:100%; height:3.6rem; color: var(--dark); font-size: 1.2rem; font-weight:normal; font-family: 'lato', Arial, sans-serif; border-radius:.3rem!important; box-shadow:none!important; border:1px solid #d1d1d1!important; background:#f8f8f8!important; padding:0 1.2rem; margin:0; -webkit-transition: all 0.3s ease-in-out; -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; user-select:text; }

.form select { padding:0 1rem; }
.form select option { padding:.5rem 1rem; }
.form textarea { height:10rem; padding:0.7rem 1.2rem; }

input:hover, 
select:hover, 
textarea:hover,
.form input:hover, 
.form select:hover, 
.form textarea:hover  { outline:none!important; border-color: #aaa!important;  }

input:focus, 
select:focus, 
textarea:focus,
input:active, 
select:active, 
textarea:active,
.form input:focus, 
.form select:focus, 
.form textarea:focus,
.form input:active, 
.form select:active, 
.form textarea:active { box-shadow:var(--shadow)!important; outline:none!important; border-color: var(--primary-color)!important; background:#fff!important; }

.form .error input,
.form .error select,
.form .error textarea,
.form .form-row-checkbox.error label:after,
.form .form-row-radio.error label:after { border-color:#eb2b2b!important; background:rgba(235,43,43,.1)!important; }
.form .error label { color:#eb2b2b!important; }
/*.form .error input::-webkit-input-placeholder, 
.form .error input:-moz-placeholder, 
.form .error input:-ms-input-placeholder { color:rgba(236,50,50,1)!important; }*/

.form .form-row-checkbox,
.form .form-row-radio { width:100%; /*min-height:3rem;*/ position:relative; margin:0 auto!important; text-align:center; padding:0; border:none; transition:all 0.3s ease-in-out; }
.form .form-row-checkbox label,
.form .form-row-radio label { width:100%; display:block; position:static; z-index:5; cursor:pointer; font-size:1.2rem; line-height:1.8rem; padding:.4rem 0 0 3rem; text-transform:none; }
.form .form-row-checkbox input[type=checkbox],
.form .form-row-radio input[type=radio] { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; overflow:hidden; } 
.form .form-row-checkbox label:after,
.form .form-row-radio label:after { width:1.8rem; height:1.8rem; padding:0; display:block; position:absolute; top:.2rem; left:0; border-radius:0.2rem; content:""; border:1px solid rgba(0,0,0,.1); background:#f8f8f8; font-family:icons; text-align:center; line-height:1.9rem; font-size:1.4rem; }
.form .form-row-radio label:after { border-radius:50%; }
.form .form-row-checkbox input[type=checkbox]:checked + label:after,
.form .form-row-radio input[type=radio]:checked + label:after,
.form .form-row-checkbox.error input[type=checkbox]:checked + label:after,
.form .form-row-radio.error input[type=radio]:checked + label:after { content:"\e93d"; border-color:var(--primary-color)!important; background:var(--primary-color)!important; color:#fff; box-shadow: var(--shadow); }

.form .form-row-checkbox:last-of-type,
.form .form-row-radio:last-of-type { margin:0 auto 1rem!important; }

/*.form .form-row-checkbox input[type=checkbox]:checked + label,
.form .form-row-checkbox input[type=radio]:checked + label,
.form .form-row-checkbox:hover label, 
.form .form-row-checkbox:hover label:after,
.form .form-row-checkbox:hover a,
.form .form-row-checkbox input[type=checkbox]:checked + label a,
.form .form-row-checkbox input[type=radio]:checked + label a { color:#0555fa; }*/

.form .form-row-checkbox.error input[type=checkbox]:checked + label,
.form .form-row-radio.error input[type=radio]:checked + label { color: var(--dark)!important; }

.form .form-row-checkbox:hover label:after,
.form .form-row-radio:hover label:after { border-color: var(--primary-color)!important; box-shadow: var(--shadow); }

.form .form-row-checkbox a { color:#999; }

.error-msg, 
.succes-msg { width: 100%; position:relative; margin:-3rem auto 3rem; background:#eb2b2b; color:#fff; font-size:1.2rem; text-align:left; line-height:2rem; }
.succes-msg { background:#07bc88; }

.error-msg .content, 
.succes-msg .content { padding-top:2rem; padding-bottom:2rem; background:none; border:none; box-shadow:none; }
.error-msg .content:after, 
.error-msg .content:before, 
.succes-msg .content:after, 
.succes-msg .content:before { display:none; }


.form fieldset.box .error-msg,
.form fieldset.box .succes-msg { margin:-4rem -4rem 2.5rem; padding:2rem 4rem; }

.error-box { border-color:#eb2b2b!important; background:rgba(242,12,93,.1)!important; }

.form-row-error-msg { width:100%; display:none; position:relative; color:#eb2b2b; border-radius:0 0 .3rem .3rem; padding:.6rem 0 0 3.2rem; margin:.8rem auto 0; font-size:1.1rem; line-height:1.6rem; }
.error .form-row-error-msg { display:block; min-height:2.5rem; }
.form-row-error-msg:after { width: 0; height: 0; position: absolute; top: -.25rem; left: .7rem; content: ''; border-bottom: .6rem solid #eb2b2b; border-left: .6rem solid transparent; border-right: .6rem solid transparent; }
.form-row-error-msg:before { width:2.6rem; height:2.4rem; display:block; position:absolute; top:.1rem; left:0; content:'\e912'; font-size:1.5rem; padding:0; text-align:center; line-height:2.4rem; font-family:icons; color:#fff; background-color:#eb2b2b; border-radius: .3rem!important; }

.form-actions .button { width:12rem; margin-right:2rem; }


/* ============================================================= */

.error-anim,
.login-form.error-anim { opacity:1; -webkit-animation: erroranim 0.5s ease-in-out forwards; -o-animation: erroranim 0.5s ease-in-out forwards; -ms-animation: erroranim 0.5s ease-in-out forwards; animation: erroranim 0.5s ease-in-out forwards; }

@-webkit-keyframes erroranim {
    0% { -webkit-transform: translate(-3rem, 0); }
    12.5% { -webkit-transform: translate(3rem, 0); }
    25% { -webkit-transform: translate(-2rem, 0); }
    37.5% { -webkit-transform: translate(2rem, 0); }
    50% { -webkit-transform: translate(-2rem, 0); }
    62.5% { -webkit-transform: translate(1rem, 0); }
    75% { -webkit-transform: translate(-1rem, 0); }
    87.5% { -webkit-transform: translate(1rem, 0); }
    100% { -webkit-transform: translate(0, 0); }
}

@-moz-keyframes erroranim {
    0% { -moz-transform: translate(-3rem, 0); }
    12.5% { -moz-transform: translate(3rem, 0); }
    25% { -moz-transform: translate(-2rem, 0); }
    37.5% { -moz-transform: translate(2rem, 0); }
    50% { -moz-transform: translate(-2rem, 0); }
    62.5% { -moz-transform: translate(1rem, 0); }
    75% { -moz-transform: translate(-1rem, 0); }
    87.5% { -moz-transform: translate(1rem, 0); }
    100% { -moz-transform: translate(0, 0); }
}

@-ms-keyframes erroranim {
    0% { -ms-transform: translate(-3rem, 0); }
    12.5% { -ms-transform: translate(3rem, 0); }
    25% { -ms-transform: translate(-2rem, 0); }
    37.5% { -ms-transform: translate(2rem, 0); }
    50% { -ms-transform: translate(-2rem, 0); }
    62.5% { -ms-transform: translate(1rem, 0); }
    75% { -ms-transform: translate(-1rem, 0); }
    87.5% { -ms-transform: translate(1rem, 0); }
    100% { -ms-transform: translate(0, 0); }
}

@-o-keyframes erroranim {
    0% { -o-transform: translate(-3rem, 0); }
    12.5% { -o-transform: translate(3rem, 0); }
    25% { -o-transform: translate(-2rem, 0); }
    37.5% { -o-transform: translate(2rem, 0); }
    50% { -o-transform: translate(-2rem, 0); }
    62.5% { -o-transform: translate(1rem, 0); }
    75% { -o-transform: translate(-1rem, 0); }
    87.5% { -o-transform: translate(1rem, 0); }
    100% { -o-transform: translate(0, 0); }
}

@keyframes erroranim {
    0% { transform: translate(-3rem, 0); }
    12.5% { transform: translate(3rem, 0); }
    25% { transform: translate(-2rem, 0); }
    37.5% { transform: translate(2rem, 0); }
    50% { transform: translate(-2rem, 0); }
    62.5% { transform: translate(1rem, 0); }
    75% { transform: translate(-1rem, 0); }
    87.5% { transform: translate(1rem, 0); }
    100% { transform: translate(0, 0); }
}

/* ============================================================= */

/* ============================================================= */

.login-page { height:100%; overflow:hidden!important; display:table; padding:0!important; text-align:center; background:#f1f1f1; user-select:none;
/*background:#0d1823;
background: -moz-linear-gradient(top, #101f2d 0%, #0d1823 100%);
background: -webkit-linear-gradient(top, #101f2d 0%,#0d1823 100%);
background: linear-gradient(to bottom, #101f2d 0%,#0d1823 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101f2d', endColorstr='#0d1823',GradientType=0 );*/ }
.login-page > .table-cell { vertical-align:bottom; }

.logo-box { width:100%; height:30%; position:absolute; top:0; left:0; /*-webkit-animation: logo-box-anim 0.5s ease-in-out 4s forwards; animation: logo-box-anim 0.5s ease-in-out 4s forwards;*/ background:#0d1823 url(../img/alchemist-banner.jpg) no-repeat 50% 50%; background-size:cover; }
.logo-box img { width:auto; height:5rem; position:absolute; top:50%; left:50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); }


.login-box { width:100%; height:70%; position:relative; z-index:1; overflow:hidden; opacity:1; /*visibility:hidden;*/ -webkit-animation: account-box-anim 0.6s ease forwards; animation: account-box-anim 0.6s ease forwards; }

/*@-webkit-keyframes account-box-anim {
    0% { opacity:0; visibility:hidden; -webkit-transform:translate3d(0,3rem,0); }
    100% { opacity:1; visibility:visible; -webkit-transform:translate3d(0,0,0); }
}
@keyframes account-box-anim {
    0% { opacity:0; visibility:hidden; transform:translate3d(0,3rem,0); }
    100% { opacity:1; visibility:visible; transform:translate3d(0,0,0); }
}*/


.forgot-pass-box,
.change-pass-box,
.sms-pass-box { width:100%; height:70%; position:absolute; left:0; top:100%; z-index:10; padding-top:5rem; overflow:hidden; /*opacity:0;*/ background:#f1f1f1; transition: opacity .5s ease-in-out, transform .5s ease-in-out; }
.view-forgot-pass .forgot-pass-box,
.view-change-pass .change-pass-box,
.view-sms-pass .sms-pass-box { /*opacity:1;*/ -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }

.login-tabs,
.forgot-pass-header { width:100%; height:5rem; position:absolute; top:0; left:0; text-align:center; background:#f8f8f8; }
.login-tabs:before,
.forgot-pass-header:before { width:100%; height:1px; position:absolute; bottom:1px; left:0; z-index:2; content:''; background-color: #d1d1d1; }

.login-tabs-content { width:100%; height:100%; position:relative; overflow:hidden; margin:0 auto; }
.login-tabs span { width:12rem; height:100%; position:relative; z-index:3; display:inline-block; margin:0; color:#999; font-size:1.2rem; line-height:5rem; text-align:center; text-transform:uppercase; cursor:pointer; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.login-tabs span.selected { color:#1a1a1a; }

.tab-line { width:12rem; height:3px; position:absolute; left:50%; bottom:0; z-index:3; background-color:#1a1a1a; -webkit-transition:transform 0.3s ease-in-out; transition:transform 0.3s ease-in-out; -webkit-transform:translate3d(-12.1rem,0,0); transform:translate3d(-12.1rem,0,0); border-radius:3px; }
.view-tab-2 .tab-line { -webkit-transform:translate3d(.1rem,0,0); transform:translate3d(.1rem,0,0); }

.login-tabs-content-wrapper { width:200%; height:100%; overflow:hidden; /*-webkit-transition:transform .5s ease-in-out; transition:transform .5s ease-in-out;*/ }
/*.view-tab-2 .login-tabs-content-wrapper { -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); }*/
.login-tab-content { width:100%; height:100%; position:relative; overflow:hidden; text-align:center; transition: opacity .5s ease-in-out; }
/*.login-tab-content:nth-child(1),
.view-tab-2 .login-tab-content:nth-child(2) { opacity:1; visibility:visible; }
.view-tab-2 .login-tab-content:nth-child(1) { opacity:0; visibility:hidden; }*/

.or { width:100%; display:block; padding-top:0.5rem; margin:0 auto 1.5rem; font-size:1.1rem; line-height:2rem; color:#888; text-align:left; text-transform:uppercase; }

.forgot-pass-link { text-align:left; padding:0.5rem 0 1rem; }
.forgot-pass-link i { color:#888; float:left; margin:.4rem .5rem 0 0; }
.forgot-pass-link a { color:#888; transition:color .3s ease-in-out; }
.forgot-pass-link a:hover { color:#1a1a1a; }

.login-form { width:24rem; /*opacity:0;*/ position:relative; z-index:50; margin:0 auto; padding:4rem 0; }
/*.login-form { -webkit-animation: login-anim 0.5s ease-in-out 0.3s forwards; -o-animation: login-anim 0.5s ease-in-out 0.3s forwards; -ms-animation: login-anim 0.5s ease-in-out 0.3s forwards; animation: login-anim 0.5s ease-in-out 0.3s forwards; }*/
.login-form fieldset { position:relative; margin:0; border:none; }

.login-form .box-logo { width:100%; text-align:center; -webkit-transition:all 0.3s ease-in-out; -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; }
.login-form .box-logo img { width:14rem; height:auto; margin:0 auto 4rem; }

.login-form .form-row { margin-bottom:1rem; }
/*.login-form label { color:#cfd2f7; text-shadow: 0 1px 1px rgba(10,21,133,.3); }*/

.login-form-action { padding-top:2rem; }

/*.login-form input { height:4rem; box-shadow: 0 1px 2px rgba(10,21,133,.2)!important; border-color:transparent!important; border-radius:.4rem; }
.login-form input:hover,
.login-form input:focus { box-shadow: 0 1px 2px rgba(10,21,133,.4)!important; border-color:transparent!important; }

.login-form .error input { border-color:#eb2b2b!important; background:#ed2f7d!important; color:#fff!important; }
.login-form  .error input::-webkit-input-placeholder { color:#fff!important; }
.login-form  .error input:-moz-placeholder { color:#fff!important; } 
.login-form  .error input:-ms-input-placeholder { color:#fff!important; }*/

/*.login-form .button { width:12rem; background:#21be8c; box-shadow: 0 1px 2px rgba(10,21,133,.2); }
.login-form .button:hover,
.login-form .button:active { background:#cfd2f7!important; color:var(--primary-color); }*/

.sms-pass-options { width:100%; padding:.5rem 0 1rem; display:grid; grid-template-columns: repeat(2,auto); grid-gap:1rem; font-size:1.2rem; line-height:2rem; text-align:left; }
.sms-pass-options a { color:#888; transition:color .3s ease-in-out; cursor:pointer; }
.sms-pass-options a:hover { color:#1a1a1a; }
.sms-pass-options a:last-child { justify-self:end; } 

.login-form .form-row.last,
.login-form .form-row:last-child { margin-bottom:0; }
 
.login-form .button { width:50%; max-width:100%; text-align:left; margin-top:1.5rem; }
.login-form .button-outline { width:100%; text-align:left; margin-top:0; }
.login-form .button-outline i { width:3rem; /*float:left; margin:0 0.3rem 0 -1.2rem;*/ font-size:1.8rem; margin-left:-1.2rem; }

.login-form .error-msg,
.login-form .succes-msg,
.profile-page .error-msg,
.profile-page .succes-msg { position:relative; margin-bottom:1rem; padding: 1.2rem 1.5rem 1.2rem 3.5rem; border-radius:.3rem; } 
.login-form .error-msg:before,
.login-form .succes-msg:before,
.profile-page .error-msg:before,
.profile-page .succes-msg:before { width:2rem; height:2rem; position:absolute; top:1.2rem; left:1rem; content:'\e913'; color:#fff; font-size:1.8rem; line-height:2rem; text-align:center; font-family:icons; }

.forgot-pass-content { width:100%; height:100%; position:relative; overflow:hidden; }

.forgot-pass-content-wrapper { width:100%; height:200%; overflow:hidden; -webkit-transition:transform .5s ease-in-out; transition:transform .5s ease-in-out; }

.view-forgot-pass-msg .forgot-pass-box .forgot-pass-content-wrapper,
.view-change-pass-msg .change-pass-box .forgot-pass-content-wrapper { -webkit-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); }

.forgot-pass-content-tab { width:100%; height:50%; opacity:0; visibility:hidden; position:relative; overflow:hidden; text-align:center; transition: opacity .5s ease-in-out; }

.forgot-pass-box .forgot-pass-content-tab:nth-child(1),
.view-forgot-pass-msg .forgot-pass-box .forgot-pass-content-tab:nth-child(2) { opacity:1; visibility:visible; }
.view-forgot-pass-msg .forgot-pass-box .forgot-pass-content-tab:nth-child(1) { opacity:0; visibility:hidden; }

.change-pass-box .forgot-pass-content-tab:nth-child(1),
.view-change-pass-msg .change-pass-box .forgot-pass-content-tab:nth-child(2) { opacity:1; visibility:visible; }
.view-change-pass-msg .change-pass-box .forgot-pass-content-tab:nth-child(1) { opacity:0; visibility:hidden; }

.forgot-pass-header { padding:.25rem 0; }
.forgot-pass-header .button-link { padding-left:1rem!important; margin-left:-13.5rem; color:#999; }
.forgot-pass-header .button-link:hover,
.forgot-pass-header .button-link:active { color:#1a1a1a; }

.forgot-pass-content-tab h3,
.login-form h3 { font-size:1.6rem; margin-bottom:.5rem; text-align:left; }
.login-form h3 { margin-bottom:1.5rem; }

.forgot-pass-content-tab .forgot-pass-message h3 { margin-bottom:1rem; }
.forgot-pass-content-tab h3 i { width:2rem; height:2rem; display:block; float:left; margin-right:1rem; font-size:2rem; line-height:2rem; }
.forgot-pass-content-tab p { line-height:1.8rem; margin-bottom:2rem; text-align:left; }

.forgot-pass-content-tab .forgot-pass-message .hide-forgot-pass { display:inline-block; display: inline-block; color:#666; font-size: 1.1rem; font-weight: 400; text-transform: uppercase; }
.forgot-pass-content-tab .forgot-pass-message .hide-forgot-pass:hover { color:#111; text-decoration:underline; cursor:pointer; }

@-webkit-keyframes login-anim {
    0% { -webkit-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
}

@-moz-keyframes login-anim {
    0% { -moz-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -moz-transform: translate3d(0,0,0); opacity: 1; }
}

@-ms-keyframes login-anim {
    0% { -ms-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -ms-transform: translate3d(0,0,0); opacity: 1; }
}

@-o-keyframes login-anim {
    0% { -o-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -o-transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes login-anim {
    0% { transform: translate3d(0,10rem,0); opacity: 0; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

.copy { width:28rem; position:absolute; left:50%; bottom:3rem; opacity:0; z-index:49; text-align:center; -webkit-animation: copy-anim 0.5s ease-in-out 0.7s forwards; -o-animation: copy-anim 0.5s ease-in-out 0.7s forwards; -ms-animation: copy-anim 0.5s ease-in-out 0.7s forwards; animation: copy-anim 0.5s ease-in-out 0.7s forwards; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0); }
.copy img { width:auto; height:3rem; float:right; margin:0 auto 0.5rem; }
.copy p { font-size:1.1rem; line-height:3rem; color:#cfd2f7; text-shadow: 0 1px 1px rgba(10,21,133,.3); }

@-webkit-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes copy-anim {
    0% {  opacity: 0; }
    100% { opacity: 1; }
}

@keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* ============================================================= */

.profile-page {  }

.profile-page .wrapper-content { padding:0; }
.profile-page .content { width:100%; max-width: 100%; height:100%; overflow:hidden; padding:0!important; background:#f8f8f8; box-shadow: none; border: none; }

.profile-box { padding:5rem 15%; margin-bottom:0; background:#f1f1f1; border-bottom:1px solid #ccc; text-align:left; }
.profile-page .profile-box { padding-top:8rem; padding-bottom:3rem; }

.profile-details { width:100%; display:grid; grid-template-columns:auto 1fr; grid-gap:4rem; align-items:center; }
.profile-details p { font-weight:400; font-size:1.3rem; line-height:2rem; margin:0 0 .5rem; }

.profile-details p.last-login { padding-top:2rem; margin-bottom:-2rem; font-size:1.2rem; line-height:1.8rem; font-weight:300; }
.profile-details p.user-type { margin-bottom:1rem; }


.profile-image { width: 20rem; height: 20rem; position:relative; background-color:#f8f8f8; /*border:1px solid rgba(0,0,0,.1);*/ transition:border .3s ease-in-out, box-shadow .3s ease-in-out; border-radius:50%; margin:0; cursor:pointer; }
.profile-image:hover { box-shadow: var(--shadow); }

.profile-image:before { width: 100%; height: 100%; position: absolute; top: 50%;  left: 50%; z-index: 7; transform: translate(-48.5%,-48.5%);  content: ''; border-radius: 50%; background-color:#e1e1e1; opacity:.5; }

.profile-image:after { width:100%; height:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); content:'\ee5b'; z-index:18; color: #5d2560; font-size:8rem; line-height:18rem; font-family:icons; text-align:center; background-color:#f8f8f8; transition:color .3s ease-in-out, background-color .3s ease-in-out; border-radius:50%; overflow:hidden; }
.profile-image:hover:after { background: #fff;  }

.company-box .profile-image:after { content:'\e91a'; }

.profile-image span { width:auto; max-width:15rem; display:inline-block; position:absolute; bottom:4rem; left:50%; z-index:22; transform:translate(-50%,0); color:#999; font-size:1rem; line-height:1.4rem; font-weight:bold; text-transform:uppercase; }

.profile-image .ils-upload-file { width:100%; height:100%; position:absolute; top:0; left:0; z-index:26; opacity:0; cursor:pointer; }

.ils-uploaded-img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:25; background-color:#e7e9f8; border-radius:50%; overflow:hidden; }
.ils-uploaded-img img { width:100%; height:100%; }

.profile-box h3 { font-size:2.1rem; line-height:3.6rem; margin-bottom:.5rem; }

.profile-box .tbl-btn { position:absolute; bottom:-1.5rem; left:50%; z-index:27; transform: translate(-50%,0); border-radius:50%!important; opacity:1!important; background: var(--primary-color)!important; border-color: #f1f1f1!important; color: #f8f8f8!important; /*background: #f1f1f1; border-color: #f1f1f1; color: var(--dark);*/ }

.profile-action { padding-top:6rem; vertical-align:top; }
.profile-action .button { height:3.8rem; line-height:3.7rem; margin:0 1rem 1rem 0; }
.profile-action .button i { line-height:3.7rem; }
.profile-action .button i.icon-ia-edit-bold { font-size:1.3rem; }
.profile-action .button i.icon-ia-trash-bold { font-size:1.28rem; }

.profile-page .form-actions { padding:0; }
.profile-page .form-actions .button { margin-right: 2rem; }

.titleDesc h3 { font-size:1.5rem; line-height:2.4rem; margin:0 0 .5rem; }
.titleDesc p { margin-bottom:2.5rem; }

.change-password,
.edit-details,
.edit-signature { height:0; border-bottom:1px solid #ccc; opacity:0; background:#f8f8f8; transition: opacity .3s ease-in-out, padding .3s ease-in-out, height .3s ease-in-out; overflow:hidden; }

.view-change-password .change-password,
.view-edit-details .edit-details,
.view-edit-signature .edit-signature { height:auto; opacity:1; padding-top:5rem; padding-bottom:5rem; }

.view-change-password .trigger-change-password,
.view-edit-details .trigger-edit-details,
.view-edit-signature .trigger-edit-signature { color:#fff; background: var(--primary-color); }

.titleDesc { margin-bottom:2rem; }
.titleDesc h3 { font-size:1.5rem; line-height:2.4rem; margin:0 0 .5rem; }
.titleDesc p { margin-bottom:2.5rem; }

.change-password .form,
.edit-details .form,
.edit-signature .form { grid-gap:0; }

.change-password .fieldset-row,
.edit-details .fieldset-row,
.edit-signature .fieldset-row { margin-bottom:2rem; padding:0!important; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap: 2.5rem 1.5rem; }
.edit-signature .fieldset-row { display:block; }

.change-password .form .form-row,
.edit-details .form .form-row { margin-bottom:0; }

.profile-page .form .error-msg, 
.profile-page .form .succes-msg { width:auto; display:inline-block; margin-bottom:2rem; }

.profile-box, .change-password , .edit-details, .delete-account, .edit-signature { padding-left: 10%!important; padding-right: 10%!important; }

.edit-signature .signature-pad { height:25rem; }


/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.car-insurance-page-content { padding:4rem 0; }

.car-insurance-form { /*border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-bottom:3rem;*/ }
 
.form.car-insurance-form { grid-gap:0; }

.fieldset-row-header { width:auto; margin:0 auto 2rem; padding: 0 12%; color: var(--primary-color); /*color:rgba(255,255,255,.8);*/  
/*background: -moz-linear-gradient(-45deg,  #8f75db 50%, #8478e5 100%);
background: -webkit-linear-gradient(-45deg,  #8f75db 50%,#8478e5 100%);
background: linear-gradient(135deg,  #8f75db 50%,#8478e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f75db', endColorstr='#8478e5',GradientType=1 );*/  }
.fieldset-row-header .sup-title { font-weight:400; }
.fieldset-row-header .paragraph { font-size:1.2rem; } 

.car-insurance-menu { width:auto; padding: 2rem 0 0; display:grid; grid-template-columns: repeat(4,6.4rem); grid-gap:4rem; }
.car-insurance-menu a { width:6.4rem; display:block; color:#999; text-align:center; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-decoration:none; cursor:pointer; }
.car-insurance-menu i { width:6.4rem; height:6.4rem; display:block; position:relative; margin:0 auto 2rem; font-size:3.6rem; line-height:6.2rem; border-radius:50%; border:1px solid #666; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;  }
.car-insurance-menu i.icon-ia-exterior { font-size:3.8rem; }
.car-insurance-menu i:after { width:4.1rem; height:1px; position:absolute; top:50%; left:100%; content:""; background:#666; }
.car-insurance-menu a:last-child i:after { display:none; }  

.car-insurance-menu span { display:block; text-align:center; font-size:1rem; line-height:1.2rem; text-transform:uppercase; color:#666; }
.car-insurance-menu a:nth-child(3) span { margin-top:-.5rem; }

.exp-row { width:76%; margin:0 auto 1rem; position:relative; padding: 7rem 0 0; border: 1px dashed #ccc; overflow:hidden; }
/*.exp-row:before { width:100%; height:100%; opacity:0; content:""; position:absolute; top:0; left:0; background: #f1f1f1;
background: -moz-linear-gradient(top,  #f1f1f1 0%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #f1f1f1 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=0 ); -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }*/
.exp-row.expand {  }

.exp-row-header { width:100%; height:7rem; position:absolute; top:0; left:50%; transform: translate(-50%,0); padding:2rem 15%; cursor:pointer; -moz-transition: background 0.3s ease-out; -o-transition: background 0.3s ease-out; -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }   
.view-info-content .exp-row-header { background:#eaeef7; }

.exp-row-header h3 { display:block; margin:0; position:relative; color:var(--primary-color); text-align:left; font-size:1.4rem; line-height:3.2rem; }
.exp-row-header h3 i { width:4.8rem; height:4.8rem; position:absolute; top:50%; left:-6.2rem; transform: translate(0,-50%); display:block; font-size:3rem; line-height:4.8rem; border-radius:50%; border:1px solid #454545; color:#333; text-align:center; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.exp-row-arrow { width:3.2rem; height:3.2rem; position:absolute; top:50%; right:1rem; transform: translate(0,-50%) rotateX(0deg); color:#999; display:block; font-size:1rem; line-height:3.2rem; text-align:center; transform-origin:50% 50%; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.expand .exp-row-arrow { transform: translate(0,-50%) rotateX(180deg); color:#666; }

.exp-row-body { height:0; margin:0 auto; padding:0; overflow:hidden; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; -webkit-transition: height 0.3s ease-out; transition: height 0.3s ease-out; }
.expand .exp-row-body { height:auto; }

.exterior-car-diagram,
.interior-car-diagram { width:100%; position:relative; margin:0 auto 1px; padding:2rem 7% 7rem; }
.exterior-car-diagram:last-child { padding-bottom:10rem; }

.exterior-car-diagram svg,
.interior-car-diagram svg { width:100%; height:auto; }

svg .car path { fill:#dadada; }
svg .car-label { cursor:pointer; }
svg .car-label circle { fill:var(--primary-color); -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
svg .car-label.active circle { fill:#5c255f; }
svg .car-label text { fill:#fff; font-size:16px; font-weight:600; font-family: 'lato', Arial; text-anchor:middle; }
svg .car-label.active text { fill:#fff; }

.info-content { width:100%; height:0; position:absolute; top:0; left:0; padding:0 15%; z-index:1; background:#f1f1f1; display:grid; grid-template-columns: repeat(2, 1fr); grid-gap:3rem; overflow:hidden; -moz-transition: height 0.3s ease-out, padding 0.3s ease-out; -o-transition: height 0.3s ease-out, padding 0.3s ease-out; -webkit-transition: height 0.3s ease-out, padding 0.3s ease-out; transition: height 0.3s ease-out, padding 0.3s ease-out; }
.view-info-content .info-content { height:100%; padding-top:2rem; }

.info-content ul { opacity:0; visibility:hidden; list-style-type:none; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
.view-info-content ul { opacity:1; visibility:visible; }
.info-content li { width:100%; position:relative; min-height:2.6rem; margin:0 auto 1rem; padding-left:3.5rem; cursor:pointer; }
.info-content span { width:2.6rem; height:2.6rem; display:block; position:absolute; left:0; left:0; background:var(--primary-color); font-size:1rem; font-weight:600; text-align:center; line-height:2.6rem; color:#fff; border-radius:50%; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.info-content li.active span { background:#5c255f; }
.info-content strong { display:block; font-size:1.2rem; font-weight:600; color:#666; line-height:2.6rem; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; }
.info-content li.active strong { color:#5c255f; }
.info-content li:hover strong { color:#131313; }

.info { width:3.2rem; height:3.2rem; display:block; position:absolute; right:2rem; bottom:4rem; z-index:2; color:#ccc; font-size:1.3rem; text-align:center; line-height:3.2rem; background:#f1f1f1; border-radius:50%; cursor:pointer; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.view-info-content .info  { color:#999; background:#ccc; }

.exp-row .fieldset-row { padding:0; margin-bottom:0; }
.exp-row .fieldset-row:first-child { margin-top:0!important; padding-top:0; }
.exp-row .fieldset-row:last-child { margin-bottom:0; margin-top:1rem; }

.switcher { width:100%; position:relative; margin:0 auto!important; text-align:center; padding:0; border:none; border-top:1px solid rgba(0,0,0,.1); transition:all 0.3s ease-in-out; cursor:pointer; }
.switcher:last-child { border-bottom:none; }
.switcher:nth-child(2n-1) { background:#f8f8f8; }

.switcher input[type=checkbox] { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; overflow:hidden; }
.switcher label { width:100%; display:block; margin-bottom:0; position:static; z-index:5; cursor:pointer; font-size:1.28rem; font-weight:600; line-height:2rem; padding:1.5rem 8.5rem 1.5rem 2rem; text-transform:none; }
.switcher label:before { width:4rem; height:2rem; padding:0; display:block; position:absolute; top:1.5rem; right:1.5rem; border-radius:2rem; content:""; border:1px solid #ccc; background:#f1f1f1; }
.switcher label:after { width:1.8rem; height:1.8rem; padding:0; display:block; position:absolute; top:1.7rem; right:3.6rem; border-radius:2.5rem; content:""; background:#999; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.switcher input[type=checkbox]:checked + label { color:var(--primary-color)!important; }
.switcher input[type=checkbox]:checked + label:before { content:""; border-color:var(--primary-color)!important; background:#fff!important; box-shadow: none; }
.switcher input[type=checkbox]:checked + label:after { background:var(--primary-color); -moz-transform: translate3d(1.8rem,0,0); -o-transform: translate3d(1.8rem,0,0); -webkit-transform: translate3d(1.8rem,0,0); transform: translate3d(1.8rem,0,0); }


.switcher label span.info-txt { display:block; padding-top:.5rem; font-size:1.2rem; line-height:1.6rem; opacity:.5; font-weight:400; }
/*,
.switcher.error input[type=checkbox]:checked + label:after*/

.switcher-expand-box {  margin:0!important; padding:0!important; overflow:hidden; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; -webkit-transition: height 0.3s ease-out; transition: height 0.3s ease-out; }
.switcher-expand-box .form-row { padding:1.5rem; }

/* ============================================================= */

.cld-header { padding:4rem 5rem 3rem; text-align:center; }
.cld-header.active span { width:3.6rem; height:3.6rem; display:block; position:absolute; left:0; left:0; background:#8F75DB; font-size:1.4rem; font-weight:600; text-align:center; line-height:3.6rem; color:#fff; border-radius:50%; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.cld-header strong { display:block; font-size:1.28rem; font-weight:600; line-height:3.6rem; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.cld-header.active strong { color:#8F75DB; }

.cld-header strong { width:4.4rem; height:4.4rem; margin:0 auto; display:block; background:var(--primary-color); font-size:1.6rem; font-weight:600; text-align:center; line-height:4.4rem; color:#fff; border-radius:50%; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.cld-header strong.active {  }
.cld-header span { display:block; color:#666; font-size:1.28rem; font-weight:600; line-height:3.6rem; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }

.cld-body { padding:0 5rem 5rem; }

.cld-list { width:auto; margin:0 -.8rem 2rem; display:grid; grid-template-columns: repeat(4, 1fr); justify-content: center; }
.cld-list li { text-align:center; }

.car-list-detail-button { width:auto; margin:0 auto; cursor:pointer; }
.car-list-detail-button strong { width:3.6rem; height:3.6rem; margin:0 auto 1rem; display:block; background:transparent; font-size:2rem; font-weight:600; text-align:center; line-height:3.4rem; color:#999; border-radius:50%; border:1px solid #999; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.car-list-detail-button.active strong { background:#5c255f; border-color:#5c255f; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,.2); }
.car-list-detail-button span { display:block; color:#999; font-size:.8rem; font-weight:400; line-height:1.2rem; text-transform:uppercase; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.car-list-detail-button.active span { color:#5c255f; }

.cld-body .form-row label { text-transform:uppercase; }
.cld-body .form-row label:before { width:2rem; height:4.2rem; display:block; line-height:4.2rem; position:absolute; top:2rem; right:1.3rem; content:"€"; font-size:1.8rem; font-weight:600; color:#343750; text-align:right; opacity:.5; }
.cld-body .form-row input { font-size:1.8rem; font-weight:600; color:#343750; padding-right:4rem; }
.cld-body .button { width:100%; margin-top:2rem; }

/**/

.tooltip { width:auto; max-width:20rem; position:absolute; z-index:500; opacity:0; background:var(--primary-color); color:#fff; transition: opacity .1s ease-in-out, transform .1s ease-in-out; padding:.5rem .6rem; border-radius:.3rem; font-size:.86rem; line-height:1rem; text-transform:uppercase; text-align:center; white-space:nowrap; }
.tooltip.tooltip-top { bottom:100%; left:50%; transform: translate3d(-50%,0,0); }
.tooltip.tooltip-bottom { top:100%; left:50%; transform: translate3d(-50%,0,0); }

.tooltip:before { width:0; height:0; display:block; position:absolute; left:50%; transform: translate(-50%,0); content:''; }
.tooltip.tooltip-top:before { bottom:-.4rem; border-top: .5rem solid var(--primary-color); border-left: .5rem solid transparent; border-right: .5rem solid transparent; }
.tooltip.tooltip-bottom:before { top:-.4rem; border-bottom: .5rem solid var(--primary-color); border-left: .5rem solid transparent; border-right: .5rem solid transparent; }

.tbl-btn:hover .tooltip,
.menu-right a:hover .tooltip { opacity:1; }
.tbl-btn:hover .tooltip.tooltip-top { transform: translate3d(-50%,-30%,0); }
.tbl-btn:hover .tooltip.tooltip-bottom { transform: translate3d(-50%,30%,0); }

.menu-right a .tooltip.tooltip-bottom { top:50%; transform: translate3d(-50%,0,0); /*background:transparent; color:#fff;*/ }
/*.menu-right a .tooltip.tooltip-bottom:before { border:none; }*/
.menu-right a:hover .tooltip.tooltip-bottom { transform: translate3d(-50%,100%,0); }

/* ============================================================= */

.overlay { width:100%; height:100%; opacity:0; overflow:hidden; position:fixed; left:0; top:100%; z-index:500; background:rgba(200,200,200,.8); }

.view-overlay-car-label-details-outside .overlay-car-label-details-outside,
.view-overlay-car-label-details-inside .overlay-car-label-details-inside { -webkit-animation: overlay-anim 0.5s ease forwards; -moz-animation: overlay-anim 0.5s ease forwards; -o-animation: overlay-anim 0.5s ease forwards; -ms-animation: overlay-anim 0.5s ease forwards; animation: overlay-anim 0.5s ease forwards; }

@-webkit-keyframes overlay-anim {
	0% { opacity:0; -webkit-transform:translate3d(0,0,0); }
    5% { opacity:0; -webkit-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -webkit-transform:translate3d(0,-100%,0); }
}
@-moz-keyframes overlay-anim {
	0% { opacity:0; -moz-transform:translate3d(0,0,0); }
    5% { opacity:0; -moz-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -moz-transform:translate3d(0,-100%,0); }
}
@-ms-keyframes overlay-anim {
	0% { opacity:0; -ms-transform:translate3d(0,0,0); }
    5% { opacity:0; -ms-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -ms-transform:translate3d(0,-100%,0); }
}
@-o-keyframes overlay-anim {
	0% { opacity:0; -o-transform:translate3d(0,0,0); }
    5% { opacity:0; -o-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -o-transform:translate3d(0,-100%,0); }
}
@keyframes overlay-anim {
	0% { opacity:0; transform:translate3d(0,0,0); }
    5% { opacity:0; transform:translate3d(0,-100%,0); }
	100% { opacity:1; transform:translate3d(0,-100%,0); }
}

.overlay-content { width:36rem; height:auto; opacity:0; position:absolute; top:50%; left:50%; padding:0; background:#fff; border-radius:0.3rem; /*border:1px solid rgba(0,0,0,.1);*/ -moz-transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, box-shadow 0.3s ease-out 0.3s; -o-transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, box-shadow 0.3s ease-out 0.3s; -webkit-transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, box-shadow 0.3s ease-out 0.3s; transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, box-shadow 0.3s ease-out 0.3s; -moz-transform: translate3d(-50%,-50%,0) scale(0.8); -ms-transform: translate3d(-50%,-50%,0) scale(0.8); -o-transform: translate3d(-50%,-50%,0) scale(0.8); -webkit-transform: translate3d(-50%,-50%,0) scale(0.8); transform: translate3d(-50%,-50%,0) scale(0.8); }
.overlay-content.with-header { padding-top:5rem; }
.overlay-content.with-footer { padding-bottom:5rem; }

.overlay-car-label-details-outside .overlay-content,
.overlay-car-label-details-inside .overlay-content { width:28rem; height:auto; }

.view-overlay-car-label-details-outside .overlay-car-label-details-outside .overlay-content,
.view-overlay-car-label-details-inside .overlay-car-label-details-inside .overlay-content { opacity:1; box-shadow:0 0 1rem rgba(0,0,0,.3); -moz-transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%) scale(1); -o-transform:translate(-50%,-50%) scale(1); -webkit-transform:scale(1); transform:translate(-50%,-50%) scale(1); }

.overlay-header { width:100%; height:5rem; position:absolute; top:0; left:0; overflow:hidden; padding:0 5.5rem 0 2rem; }
.overlay-interese .overlay-header { height:auto; }
.overlay-header h1 { color:#000; line-height:5rem; margin:0; font-family:'lato', Arial, sans-serif; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.overlay-header h3 { color:#000; font-size:1.8rem; font-weight:normal; line-height:5rem; margin:0; font-family:'lato', Arial, sans-serif; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

.overlay-body { width:100%; height:100%; position:relative; overflow:hidden; overflow-y: auto; padding: 0 2rem; color:#666; font-size:1.2rem; line-height:2rem;  }

.overlay-car-label-details-inside .overlay-body,
.overlay-car-label-details-outside .overlay-body { padding:0; }
.overlay-terms .overlay-body .scroll-bar { padding: 1rem 2rem 2rem; }

.overlay-body h1,
.overlay-body h2,
.overlay-body h3,
.overlay-body h4,
.overlay-body h5,
.overlay-body h6 { padding: 1rem 0 0; margin-bottom:1rem; color:#000; font-weight:normal; font-family:'lato', Arial, sans-serif; }
.overlay-body h1,
.overlay-body h2 { font-size:1.8rem; line-height:2.4rem; }
.overlay-body h3,
.overlay-body h4 { font-size:1.4rem; line-height:2rem; }
.overlay-body h5,
.overlay-body h6 { font-size:1.2rem; line-height:1.6rem; font-weight:bold; text-transform:uppercase; }
.overlay-body p { color:#666; font-size:1.4rem; line-height:2rem; margin:0 auto 1rem; }
.overlay-body p:last-of-type { margin-bottom:0; }

.overlay-footer { width:100%; height:5rem; position:absolute; bottom:0; left:0; overflow:hidden; border-top:1px solid rgba(0,0,0,0.1); }
.overlay-footer .overlay-action-btn { width:auto; height:100%; display:inline-block; position:relative; float:right; cursor:pointer; color:#888; font-size:1.2rem; line-height:5rem; text-align:center; text-transform:uppercase; padding:0 2rem; border-radius:0; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
.overlay-footer .overlay-action-btn:first-of-type { color:#000; }
.overlay-footer .overlay-action-btn:before { width:1px; height:2.4rem; position:absolute; top:1.3rem; left:0; content:''; background-color:rgba(0,0,0,0.1); }
.overlay-interese .overlay-footer .overlay-action-btn:before { content: none }
.overlay-footer .overlay-action-btn:last-of-type:before { background:transparent; }
.overlay-footer .overlay-action-btn:hover { color:#fff; background:#8F75DB; }
.overlay-footer .overlay-action-btn.left { float: left; }
.overlay-footer .overlay-action-btn.inactive-btn { color:#ccc; pointer-events: none; cursor: default; }

.overlay .close-overlay { width:3.6rem; height:3.6rem; display:block; position:absolute; top:.5rem; right:.5rem; color:#ccc; font-size:1.4rem; line-height:3.6rem; text-align:center; cursor:pointer; border-radius:0.3rem; -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; }
.overlay .close-overlay:active { background-color:var(--primary-color)!important; color:#fff!important; }

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.feedback-component { width:100%; padding:2rem; margin:0 auto 2rem; display:grid; grid-template-columns: repeat(5,6rem); grid-gap:5rem; align-items:center; justify-content:center; }
.feedback-component li { text-align:center; }
.feedback-component i { width:6rem; height:6rem; display:block; margin:0 auto 1.5rem; font-size:6rem; line-height:6rem; color: #ccc; cursor:pointer; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.feedback-component li.active i,
.feedback-component i:hover,
.feedback-component li.active span { color:var(--primary-color); }
.feedback-component span { display:block; font-size:.9rem; line-height:1.2rem; text-transform:uppercase; color:var(--dark); -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

/* ============================================================= */

.table-ul { width:100%; height:auto; text-align:left; }
.table-ul > li { width:100%; height:auto; position:relative; margin:0; padding:0; background-color:#f8f8f8; border-bottom:1px solid rgba(128,128,128,.1); transition: background-color .3s ease-in-out; }
.table-ul > li:nth-child(2n) { background-color:#f1f1f1; }
.table-ul > li:hover { background-color:#fff!important; }
.table-ul > li:last-of-type { border-bottom:none; }
.table-ul > li strong { width:100%; display:block; font-weight:400; font-size:1.2rem; line-height:1.6rem; overflow:hidden; }
.table-ul > li.table-ul-header { min-height:4rem; background:#fff; }
.table-ul > li.table-ul-header strong { width:auto; display:inline-block; font-weight:bold; color: var(--dark); font-size:1.1rem; line-height:1.4rem; }
.table-ul > li.selected { background: var(--primary-color); color:#fff; }

.table-ul.docs-list { position:relative!important; }

.table-ul ul { width:100%; height:100%; display: grid; grid-gap:.5rem; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); padding:0 1.5rem; }

.table-ul.forms-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(8rem, 1.5fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 14.3rem; }
.table-ul.sessions-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(8rem, 1.5fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 3.5rem; }
.table-ul.subheader-list ul { grid-template-columns: minmax(5rem, 1fr) 14.3rem; }
.table-ul.category-list ul { grid-template-columns: minmax(5rem, 1fr) 7rem; }
.table-ul.clients-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 10.6rem; }
.table-ul.users-agents-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 3.2rem; }
.table-ul.docs-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 9rem; }

.table-ul ul li { width:auto; height:100%; display:grid; align-content:center; padding:.75rem 0; }
.table-ul > li.table-ul-header li { min-height:4rem; padding: 1rem 0; overflow:visible; }

.table-ul > li.table-ul-header li.with-cntrl-box { display:grid; grid-template-columns: auto 4rem; grid-gap:.5rem; align-items:center; transition: background .3s ease-in-out; }
.table-ul > li.table-ul-header li.with-cntrl-box:hover { background:#f8f8f8; }

.table-ul ul li strong { width:100%; padding:0 .5rem; }
.table-ul ul li span { display:block; font-size:1.1rem; color: var(--dark); opacity:.5; }
.table-ul ul li b { display:block; font-size:1.1rem; font-weight:normal; }
.table-ul ul li strong em { margin-left:0.5rem; font-weight:normal; text-transform:uppercase; font-size:1rem; font-family: 'lato', Arial, sans-serif; font-style:normal; font-weight:normal; }
.table-ul ul li .link { display:inline-block; font-size:1.2rem; font-weight:normal; line-height:1.6rem; text-transform:none; color:var(--dark); cursor:pointer; text-decoration:none!important;  opacity:1; border-bottom:1px solid transparent; border-radius:0; }
.table-ul ul li .link:hover { border-color:var(--dark); }
.table-ul ul li .link i { font-size:1.2rem; margin-left:.5rem; }

.table-ul .square-btn-light { position:absolute; top:0.5rem; right:0.5rem; /* top:50%; margin-top: -1.5rem;*/ font-size: 1rem; }
.table-ul .more-options-list { top:3.8rem; right:0.5rem; }

.tbl-li-img { display:grid; grid-gap:1rem; grid-template-columns: 3rem 1fr; align-items:center; }

.tbl-img div { width:3rem; height:3rem; position:relative; border-radius:50%; overflow:hidden; background-color:rgba(128,128,128,.1); color: var(--primary-color); }
.tbl-img div:after { width:3rem; height:3rem; position:absolute; top:0; left:0; z-index:3; font-family: 'icons'; font-size:1.8rem; line-height:3rem; text-align:center; color: var(--primary-color); }
.tbl-img.tbl-agent-img div:after { content: "\ee5b"; }
.tbl-img div img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:4; }


.table-ul.saved-filters-list > li,
.table-ul.saved-filters-list > li:nth-child(2n) { background: transparent; border-bottom:1px solid rgba(128,128,128,.1)!important; }

/* ============================================================= */

.cntrl-box { width:3rem; height:1.6rem; display:block; opacity:0!important; border-radius:.3rem; transition: box-shadow .3s ease-in-out, opacity .3s ease-in-out; }
.table-ul li.table-ul-header:hover .cntrl-box { opacity:1!important; }
.cntrl-box:hover { box-shadow: var(--shadow); opacity:1!important; }
.cntrl-box i { width:50%; height:100%; display:block; float:left; cursor:pointer; border: 1px solid rgba(125,125,125,.1); background:#f8f8f8; font-size:1rem; line-height:1.5rem; text-align:center; color:#999; transition: all .3s ease-in-out; }
.cntrl-box i:first-of-type { border-right:none; border-radius:.3rem 0 0 .3rem; }
.cntrl-box i:last-of-type { border-radius: 0 .3rem .3rem 0; }
.cntrl-box i:hover { color:#fff; background: var(--primary-color); border-color: var(--primary-color); text-shadow: rgba(1,12,118,.3); }
.cntrl-box i:first-of-type:hover { border-right-color:rgba(125,125,125,.1); }
.cntrl-box i.selected { color:#fff; background: var(--primary-color); border-color: var(--primary-color); text-shadow: rgba(1,12,118,.3); }
/*.cntrl-box i.selected:hover { color:#14ae7d; background: #fff; border-color: rgba(125,125,125,.1); text-shadow: none; }*/

.table-actions { width:100%; position:relative; }
.table-actions .tbl-btn { float:left; margin-left:.5rem; }
.table-actions .tbl-btn:first-child { margin:0; }

/* ============================================================= */

.table-ul .row-options { width:16rem; height:0; display:block; position:absolute; top:3.4rem; right:0; z-index:49; padding:0; overflow:hidden; /*border:1px solid transparent;*/ background:#fff; opacity:0; border-radius: 0.3rem; -ms-transition: height 0.3s ease-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; -moz-transition: height 0.3s ease-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; -o-transition: height 0.3s ease-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; -webkit-transition: height 0.3s ease-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; transition: height 0.3s ease-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; }
.view-row-options .row-options  { height:15.2rem; opacity:1; padding:0.5rem 0; /*border-color:rgba(0,0,0,0.2);*/ box-shadow:0 0.1rem 1rem rgba(0,0,0,0.2); }

.table-ul .row-options li { width:100%; height:3.6rem; position:relative; font-size:1.2rem; line-height:3.6rem; display:block; padding:0 1rem; cursor:pointer; text-align:left; cursor:pointer; color:#666; overflow:hidden; /*border-bottom:1px solid rgba(125,125,125,0.1);*/ -ms-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; overflow:hidden; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; }

.row-options li:hover { background:#f1f1f1; color:#111; text-decoration:none; }
.row-options li i,
.row-options li i { width:3rem; height:100%; display:block; float:left; font-size:1.8rem!important; line-height:3.6rem; text-align:center; margin-left:-.5rem; }

.table-ul .row-options li span { font-size:1.2rem!important; line-height:3.6rem; }

/* ============================================================= */

.filters .form { display: grid; grid-template-columns: repeat(4,1fr); grid-gap:1.5rem; margin-bottom:0!important; }

.forms-page .filters .form {  }

.filters,
.table-ul.saved-filters-list ul,
.table-ul.subheader-list > li,
.content-box-subheader h4,
.no-results { padding-left:5%!important; padding-right:5%!important; }

.filters .form-row { margin-bottom:0; }
.filters .form label {  }

.form-row-search { grid-column: 5/-1; }
.form-row-search .content-search input,
.form-row-search .content-search input:hover,
.form-row-search .content-search input:focus { width:100%; height:3.6rem; }
.form-row-search .content-search button { height:3.6rem; }

.filters-actions { padding-top:2rem; grid-column: 1 / span 3; }
.filters-actions .button { height:3.6rem; line-height:3.6rem; margin-right:1rem; }

.applied-filters { width:100%; position:relative; margin:0; padding:0 8rem 1rem 5rem; margin:-1.5rem auto 3rem; border-bottom:1px dashed rgba(0,0,0,.1); text-align:left; font-size:0; line-height:0; user-select:none; }
.applied-filters li { width:auto; display:inline-block; height:2.4rem; margin:0 .5rem .5rem 0; padding-right:3rem; position:relative; color:#666; background:#f1f1f1; transition: color .3s ease-in-out, background .3s ease-in-out; border-radius:.3rem; }
.applied-filters li:hover { background:var(--primary-color); color:#fff; }
.applied-filters li:first-child { position:absolute; top:0; left:0; background:transparent!important; } 
.applied-filters li:hover:first-child { color:#666; }

.applied-filters li.applied-filters-actions { position:absolute; top:-.3rem; right:0; background:transparent!important; padding:0; text-align:right; }
.applied-filters li.applied-filters-actions .tbl-btn { opacity:.5!important; float:right; margin-left:.5rem; }
.applied-filters li.applied-filters-actions .tbl-btn:hover { opacity:1!important; }
/*.applied-filters li.applied-filters-actions .button { height:2.6rem; font-size:1rem; line-height:2.4rem; padding-left:1.1rem; padding-right:1.5rem; }
.applied-filters li.applied-filters-actions .button i { line-height:2.4rem; }*/

.applied-filters span,
.applied-filters em { width:100%; height:100%; display:block; font-size:1.1rem; line-height:2.4rem; font-style:normal; padding:0 0 0 1rem; }
.applied-filters em { width:auto; text-transform:uppercase; color:#666; padding:0; }
.applied-filters li:first-of-type span,
.applied-filters li:first-of-type em { padding:0; }

.applied-filters i.delete-filter { width:2.4rem; height:2.4rem; display:block; position:absolute; top:0; right:0; color:#fff; opacity:0; border-left:1px solid rgba(255,255,255,.1); }
.applied-filters i.delete-filter:after { width:100%; height:100%; display:block; position:absolute; top:0; right:0; font-size:.8rem; line-height:2.4rem; content:'\ee6a'; font-family:'icons'; font-style:normal; text-align:center; transition: opacity .3s ease-in-out; cursor:pointer; }
.applied-filters li:hover i.delete-filter { opacity:1; border-right-color:rgba(255,255,255,.2); }

.tbl-btn.close-subheader { position:absolute; top:.1rem; right:4.8%; opacity:.5!important; }
.tbl-btn.close-subheader:hover { opacity:1!important; }

.no-content { width:100%; height:100%; display:grid; align-items:center; padding:1rem 1.5rem; }
.dropdown .no-content { padding:1rem 1.2rem; }

.dropdown { width:100%; height:0; position:absolute; top:100%; left:0; z-index:100; background: #fff;  overflow:hidden; margin-top:1px; -webkit-transition: height .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out; transition: height .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out; border:0 solid transparent; box-shadow:none; border-radius: .3rem; }
.view-dropdown .dropdown { height:13rem; border:1px solid #ccc; box-shadow: var(--shadow); }


.dropdown .scrollbar { /*max-height:16rem;*/ padding:0!important;  }
.dropdown ul { width:100%; margin:auto; padding:0; }
.dropdown ul li { width:100%; position:relative; font-size:1.2rem; font-weight:400; line-height:1.8rem; color:#333; border-bottom:1px solid #ccc; padding:.7rem 2rem .7rem 1.2rem; cursor:pointer; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; -webkit-transition: color .3s ease-in-out, background .3s ease-in-out; transition: color .3s ease-in-out, background .3s ease-in-out; }
.dropdown ul li:hover { color:#000; background:#f8f8f8; }
.dropdown ul li.selected { color:#5d2560; }
.dropdown ul li:last-child { border:none; }

.dropdown ul li:after { width:1.5rem; height:1.5rem; position:absolute; top:50%; right:.5rem; -webkit-transform: translate(0,-50%) scale(0); transform: translate(0,-50%) scale(0); content:'\ee68'; font-size:.8rem; line-height:1.5rem; text-align:center; font-family:icons; background:#5d2560; color:#fff; border-radius:50%; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.dropdown ul li.selected:after { -webkit-transform: translate(0,-50%) scale(1); transform: translate(0,-50%) scale(1); }

.view-dropdown input { box-shadow: var(--shadow)!important; outline: none!important; border-color: var(--primary-color)!important; background: #fff!important; }

/* ============================================================= */

.search { width:50%; height:100%; float:left; }

.search fieldset { width:100%; height:100%; border:none; position:relative; overflow:hidden; }
.search input { width:100%; height:100%; color:#fff; font-size: 1.1rem; border-radius:0!important; box-shadow:none!important; border:none!important; padding:0 2rem 0 4.2rem; background:transparent!important; text-transform:uppercase; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
.search input:hover,
.search input:focus { box-shadow:none!important; border:none!important; outline:none!important; background:rgba(255,255,255,.1)!important; }
.search input::-webkit-input-placeholder { opacity:1; color: #fff; }
.search input::-moz-placeholder { opacity:1; color: #fff; }
.search input:-ms-input-placeholder { opacity:1; color: #fff; }
.search input:-moz-placeholder { opacity:1; color: #fff; }

.search button { width:2rem; height:3rem; position:absolute; top:1.5rem; left:2rem; background:none; cursor:pointer; border:none; padding:0; }
.search button i { width:100%; height:100%; display:block; color:#fff; font-size: 1.1rem; line-height:3rem; text-align:center; }

/* ============================================================= */

.responses-page .content { width:100%; max-width:100%; height:100%; padding:0!important; position:relative; padding: 5rem 0; background: transparent; box-shadow: none; border:none; }

.content-box { width: 100%; height: 100%; position: relative; padding: 7rem 0 0; overflow: hidden; }

.content-box-header { width:100%; height:7rem; position:absolute; top:0; left:0; z-index:10; padding:0; padding:0 15rem 0 2rem; background:#f1f1f1; border-bottom: 1px solid rgba(0,0,0,.1); }

.new-form-page .content-box-header { height:auto; position:static; padding:0; margin-bottom:2.5rem; }
.preview-page .content-box-header,
.parameters-page .content-box-header { border:none; background-color: transparent; }

.content-box-body { width:100%; height:100%; padding:0; position:relative; overflow:hidden; }
.new-form-page .content-box-body { height:auto; background:transparent; border-radius:0; box-shadow: none;  }

.content-box-body > .scrollbar { padding:0; }
.new-form-page .content-box > .scrollbar { padding:1.5rem 15% 4rem; }

.content-box-header h3 { color: var(--dark); font-size:2.1rem; font-weight:normal; line-height:7rem; }
.new-form-page .content-box-header h3 { line-height:2.6rem;  }

.content-box-header .supTitle { width:100%; opacity:.6; font-size:.8rem; font-weight:normal; line-height:1.2rem; color: var(--dark); text-transform:uppercase; margin:0 auto .5rem; }
.content-box-header .supDescription { width:100%; font-size:1.2rem; font-weight:normal; line-height:2rem; color: var(--dark); margin:-1.5rem auto 0; }

.box { width:100%; margin:0 auto 1.5rem; position:relative; overflow:hidden; background:#fff; border-radius:0.3rem; }
.box.mar0b { margin-bottom:0; }
.box.with-header { padding-top:5rem; }

.box-pad0,
.flex-sidebar .box-pad0 { padding:0; }

.box-header { width:100%; height:5rem; position:absolute; top:0; left:0; padding:0 2rem; overflow:hidden; }
.flex-sidebar .box-header { padding:0 1.5rem; }

.box-header h3 { font-size: 1.3rem; line-height:5rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.box-header .button { position:absolute; top:0.8rem; right:1rem; }

.box-body { width:100%; height:100%; position:relative; overflow:hidden; padding:0; }
.content-box-body-fixed-elements .box-body,
.forms-page .content-box-body-fixed-elements .box-body { padding:4rem 0 6rem; }

.content-box-with-tabs .content-box-body { padding-top:7rem; }

.box-action { padding:1.4rem 2rem; text-align:right; border-top:1px solid rgba(0,0,0,.1); background:#f1f1f1; }
.sidebar .box-action { padding:1.5rem 0; }
.content-box-body-fixed-elements .box-action,
.table-action-fixed { width:100%; height:6rem; position:absolute; bottom:0; left:0; }

.box-title { font-size:1.4rem; line-height:1.8rem; font-weight:600; color: var(--black); padding:0 2rem; margin-bottom:1.5rem; }
.content-box-body-fixed-elements .box-title-fixed { width:100%; height:5rem; padding-top: 1.5rem; position:absolute; top:0; left:0; }

.table-fixed-header { width:100%; min-height:4rem; position:absolute; top:0; left:0; z-index:6; box-shadow: 0.3rem 0 1rem rgba(0,0,0,.1);  }

.with-pagination { padding-top:0; padding-bottom:0; display:grid; /*grid-template-columns: 1fr 2fr 1fr;*/ grid-gap:2rem; justify-items: start; align-items:center; }

.export-options { height:3.4rem; position:relative;  }
.export-options span { color:#666; display:inline-block; font-size:1rem!important; font-weight:400; text-transform:uppercase; margin-right:.3rem; }
.export-options .button { margin-left:.3rem; padding:0 1rem!important; height: 3.4rem; line-height: 3.2rem; }

.content-box-options { width:auto; height:3.4rem; position:absolute; top:1.8rem; right:2rem; }
.content-box-options .button { float:left; margin-left:.75rem; }

.content-box-header-search { width:auto; height:3.4rem; float:left; position:relative; margin-right:.5rem; }

.content-search { width:100%; height:100%; position:relative; }

.content-search fieldset { width:100%; height:100%; border:none; position:relative; }
.content-search input { width:12rem; height:100%; padding:0 4.5rem 0 1.5rem; color:#111; background: #f8f8f8!important; border-color:rgba(0,0,0,.3)!important; border-radius:2rem!important; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, width 0.3s ease-in-out; }
.content-search input:hover,
.content-search input:focus { color: var(--dark); box-shadow:none!important; background:#fff!important; border-color:var(--primary-color)!important; outline:none!important; }
.content-search input:focus { width:20rem; box-shadow: var(--shadow); }
.content-search input::-webkit-input-placeholder { opacity:1; color: #666; }
.content-search input::-moz-placeholder { opacity:1; color: #666; }
.content-search input:-ms-input-placeholder { opacity:1; color: #666; }
.content-search input:-moz-placeholder { opacity:1; color: #666; }

.content-search button { width:4rem; height:3.4rem; position:absolute; top:0; right:0; border:1px solid transparent; padding:0; background:transparent; color: #333!important; border-radius:2rem!important; cursor:pointer; opacity:.3!important; }
.content-search:hover button,
.content-search input:focus + button { opacity:1!important; }
.content-search button:hover,
.content-search button:active {background:var(--primary-color)!important; color:#f8f8f8!important; text-decoration:none; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,.2); outline:none!important; opacity:1; }
.content-search button:focus { outline:none!important; }
.content-search button:after { width:100%; height:100%; position:absolute; top:0; left:0; content:'\ee4e'; font-family:icons; font-size: 1.8rem; line-height:3.2rem; text-align:center;}

.content-box-header .button-outline { font-size:1rem; height:3.4rem; line-height:3.3rem; padding:0 1.2rem 0 1.5rem; }
.content-box-header .button-outline i { font-size:.8rem; line-height:3.4rem; margin:0 -.5rem 0 .2rem; }

.view-filters .content-box-header .button-outline.trigger-filters,
.view-saved-filters .content-box-header .button-outline.trigger-saved-filters,
.view-map .content-box-header .button-outline.trigger-map { color:#fafbfe; background: var(--primary-color); box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); }

.content-box-header .button-outline.trigger-filters i,
.content-box-header .button-outline.trigger-saved-filters i,
.content-box-header .button-outline.trigger-map i { transition: transform .3s ease-in-out; }
.view-filters .content-box-header .button-outline.trigger-filters i,
.view-saved-filters .content-box-header .button-outline.trigger-saved-filters i,
.view-map .content-box-header .button-outline.trigger-map i{ transform: rotateX(180deg); }

/* ============================================================= */

.session-page { height:100%!important; }

.session-page .content { width:100%; max-width:100%; height:100%; overflow:hidden!important; padding:0!important; position:relative; padding: 5rem 0; background: transparent; box-shadow: none; border:none; }

.session-page .content-box { padding:0; }

.session-page .content-box-header { min-height:14rem; height:auto; position:static; background:#f8f8f8; padding:3rem 2rem; padding-bottom:3rem; display:grid; grid-template-columns:1fr 20rem; grid-gap:2rem; align-items: center; }
.session-page .content-box-header div:last-child { align-self:start; justify-self:end; }

.session-page .content-box-header h1 { font-size: 2.1rem; font-weight: normal; line-height: 2.8rem; margin: 0 auto .5rem; }
.session-page .content-box-header h5,
.session-page .content-box-header span { opacity: .6; font-size: .9rem; font-weight: normal; line-height: 1.2rem; color: var(--dark); text-transform: uppercase; margin: -1rem auto 1rem; }
.session-page .content-box-header span { margin: 0; }

.session-page .content-box-body { width: 90%; max-width: 70rem; height:auto; margin:4rem auto; box-shadow:0.2rem 0 0.5rem #f1f1f1; background:#fff; }

.session-page .tbl-li-img { grid-template-columns: 1fr 3rem; }
.session-page .tbl-li-img strong { font-weight:normal; font-size:1.2rem; }

/* ============================================================= */

.content-box-subheader { width:100%; height:auto; position:absolute; top:7rem; left:0; z-index:9; /*opacity:0;*/ color:#666; padding: 3rem 0 0; background:#fff;  transform: translate3d(0,-100%,0);  transition: transform .4s ease-in-out, opacity .4s ease-in-out, box-shadow .4s ease-in-out; } 
.content-box-subheader.map { height:auto; bottom:0; transition: transform .6s ease-in-out, opacity .6s ease-in-out, box-shadow .6s ease-in-out; }
.content-box-subheader.filters { padding-top:6.5rem; padding-bottom:4rem; }
.content-box-subheader.saved-filters { height:25rem; }

.view-filters .content-box-subheader.filters,
.view-saved-filters .content-box-subheader.saved-filters,
.view-map .content-box-subheader.map { /*opacity:1;*/ transform: translate3d(0,0,0); box-shadow: 0.3rem 0 1rem rgba(0,0,0,.1); }

.content-box-subheader h3 { width:100%; position:absolute; top:0; left:0; padding:0 2rem; font-size:1.2rem; line-height:3rem; font-weight:normal; color:#111;  background:#f1f1f1; }
.content-box-subheader h4 { width:100%; position:absolute; top:0; left:0; padding-top:0; padding-bottom:0; font-size:1rem; line-height:3rem; font-weight:bold; color:#111; text-transform:uppercase; background:#f8f8f8; }

.content-box-subheader .scrollbar { position:relative; }
.content-box-subheader .map-box,
.content-box-subheader .map-box #map { width:100%; height:100%; position:relative; }

.table-ul.subheader-list {  }
.table-ul.subheader-list > li,
.table-ul.subheader-list > li:nth-child(2) { padding-top:0; padding-bottom:0; background:transparent!important; border-bottom: 1px solid rgba(128,128,128,.1)!important; }
.table-ul.subheader-list > li:hover { background:#f8f8f8!important; }
.table-ul.subheader-list ul { padding:0; }
.table-ul.subheader-list ul li { padding:.5rem 0; }
.table-ul.subheader-list ul li:nth-child(2) { justify-self:end; }
.table-ul.subheader-list ul strong { padding:0; }
.table-ul.subheader-list .tbl-btn i { font-size:1.8rem; }

.no-results { font-size:1.4rem; line-height:2rem; padding-top:7rem; padding-bottom:5rem; color:#666; font-style:italic; }

/* ============================================================= */

.map-content-simulation { width:100%; height:100%; position:absolute; top:0; left:0; }

/*.pin { width:30px; height:46px; display:block; position:absolute; background: transparent url(../img/pin.png) no-repeat 50% 50%; background-size:100% 100%; cursor:pointer; }
.pin1 { top:20%; left:30%; }
.pin2 { top:40%; right:30%; }
.pin3 { top:50%; left:50%; transform:translate(-50%,-50%); }
.pin4 { bottom:30%; left:30%; }
.pin5 { bottom:40%; right:40%; }

.map-tooltip { width:25rem; position:absolute; top:50%; left:50%; margin-top:-8.5rem; transform: translate(-50%, -50%); background:#fff; box-shadow:0 .5rem 2rem rgba(0,0,0,.3); border-radius:.3rem; overflow:visible; }
.map-tooltip:after { width:0; height:0; display:block; position:absolute; left:50%; bottom:-.6rem; transform: translate(-50%,0); content:''; border-top: .7rem solid #fff; border-left: .7rem solid transparent; border-right: .7rem solid transparent;  }

.map-tooltip .tbl-li-img { padding:1.2rem 4rem 1.2rem 1.5rem; background:#f8f8f8; border-bottom:1px solid rgba(0,0,0,.1); border-radius:.5rem .5rem 0 0; }
.map-tooltip .map-details { padding:1.2rem 1.5rem; }
.map-tooltip .map-details h6 { font-size: 1.3rem; line-height: 1.8rem; margin-bottom:.5rem; color: var(--primary-color); }
.map-tooltip .map-details span { display:block; font-size:1.1rem; line-height:1.6rem; }

.close-map-tooltip { position:absolute; top:1rem; right:0.5rem; font-size:1rem; line-height:3rem; text-align:center; color:#666; opacity:.3; }
.map-tooltip:hover .close-map-tooltip { opacity:1; }*/

.location-box { width:100%; height:30rem; position:relative; }
.location-box #map { width:100%; height:100%; }

.search-location { width:auto; position:absolute; top:.8rem; left:.8rem; z-index:1000; }
.search-location:before { width: 3.6rem; height: 3.6rem;  position:absolute; top:0; left:0; content:'\e9d8'; text-align:center; font-size:1.4rem; line-height:3.6rem; text-align:center; font-family:icons; }
.search-location input { width:25rem; background:#fff!important; padding-left:3.5rem; }

.tbl-btn.close-form { position:absolute; top:7.5rem; right:.5rem; z-index:45; opacity:.5!important; }
.tbl-btn.close-form:hover { opacity:1!important; }

/* ============================================================= */

.pagination { width:auto; height:3.4rem; display:grid; grid-template-columns: repeat(7,3.4rem); grid-gap:.3rem; justify-content:start; font-size:0; line-height:0; text-align:center; vertical-align:middle; }

.pagination a { width:3.4rem; height:3.4rem; display:inline-block; border:1px solid rgba(0,0,0,.3); border-radius:.3rem; font-size:1.1rem; line-height:3.4rem; cursor:pointer; transition: all .3s ease-in-out; color:#666; font-weight:600; }
.pagination a i { width:100%; height:100%; display:block; font-size:1.1rem; line-height:3.4rem; text-align:center; color:var(--primary-color); transition: color .3s ease-in-out; }
.pagination a:hover { border-color:var(--primary-color); color:var(--primary-color); text-decoration:none; }
.pagination a:first-child:hover,
.pagination a:last-child:hover,
.pagination a.active,
.pagination a.active:hover { border-color:var(--primary-color); background:var(--primary-color); color:#fff; text-shadow:0 1px 1px rgba(114,124,245,.2); }

.pagination a:first-child:hover i,
.pagination a:last-child:hover i { color:#fff; }

.list-content-pagination { padding: 2rem 3%; }

/* ============================================================= */

.dropdown { width:100%; height:0; position:absolute; top:100%; left:0; z-index:100; background: #fff;  overflow:hidden; margin-top:1px; -webkit-transition: height .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out; transition: height .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out; border:0 solid transparent; box-shadow:none; border-radius: .3rem; }
.view-dropdown .dropdown { height:13rem; border:1px solid #ccc; box-shadow: var(--shadow); }

.dropdown .scrollbar { /*max-height:16rem;*/ padding:0!important;  }
.dropdown ul { width:100%; margin:auto; padding:0; }
.dropdown ul li { width:100%; position:relative; font-size:1.2rem; font-weight:400; line-height:1.8rem; color:#333; border-bottom:1px solid #ccc; padding:.7rem 2rem .7rem 1.2rem; cursor:pointer; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; -webkit-transition: color .3s ease-in-out, background .3s ease-in-out; transition: color .3s ease-in-out, background .3s ease-in-out; }
.dropdown ul li:hover { color:#000; background:#f8f8f8; }
.dropdown ul li.selected { color:#5d2560; }
.dropdown ul li:last-child { border:none; }

.dropdown ul li:after { width:1.5rem; height:1.5rem; position:absolute; top:50%; right:.5rem; -webkit-transform: translate(0,-50%) scale(0); transform: translate(0,-50%) scale(0); content:'\ee68'; font-size:.8rem; line-height:1.5rem; text-align:center; font-family:icons; background:#5d2560; color:#fff; border-radius:50%; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.dropdown ul li.selected:after { -webkit-transform: translate(0,-50%) scale(1); transform: translate(0,-50%) scale(1); }

.view-dropdown input { box-shadow: var(--shadow)!important; outline: none!important; border-color: var(--primary-color)!important; background: #fff!important; }

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

.scrollbar,
.wrapper-content,
.tree,
.content-box-body-slider .swiper-slide { width:100%; height:100%; overflow-x:hidden; overflow-y:auto; }

.scrollbar::-webkit-scrollbar-track,
.wrapper-content::-webkit-scrollbar-track,
.tree::-webkit-scrollbar-track,
.content-box-body-slider .swiper-slide::-webkit-scrollbar-track { background-color: #f1f1f1; }
.docs-list .scrollbar::-webkit-scrollbar-track { background-color: transparent; }
.scrollbar::-webkit-scrollbar,
.wrapper-content::-webkit-scrollbar,
.tree::-webkit-scrollbar,
.content-box-body-slider .swiper-slide::-webkit-scrollbar { width: 0.4rem; background-color: transparent; }
.scrollbar::-webkit-scrollbar-thumb,
.wrapper-content::-webkit-scrollbar-thumb,
.tree::-webkit-scrollbar-thumb,
.content-box-body-slider .swiper-slide::-webkit-scrollbar-thumb,
.docs-list .scrollbar::-webkit-scrollbar-thumb { background-color: rgba(13,24,35,0.2); -moz-transition: background 0.3s ease-out; -o-transition: background 0.3s ease-out; -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
.scrollbar::-webkit-scrollbar-thumb:hover,
.wrapper-content::-webkit-scrollbar-thumb:hover,
.tree::-webkit-scrollbar-thumb:hover,
.content-box-body-slider .swiper-slide::-webkit-scrollbar-thumb:hover,
.docs-list .scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(13,24,35,.6); }

/* ============================================================= */
/* ============================================================= */
/* ============================================================= */

@media screen and (orientation:landscape) and (max-width: 1366px) { 
	.wrapper-content,
	.form-page .wrapper-content,
	.form-preview-page .wrapper-content { padding:0; }
	.form-page .wrapper-content,
	.form-preview-page .wrapper-content { background:#fff; }

	.content { padding-left: 10%; padding-right: 10%; }
    .content,
	.error-msg, 
	.succes-msg { width:100%; max-width:100%; margin:0; }

	.content { background:#fff; border:none; box-shadow: none; }
	.content:after, 
	.content:before { display:none; }
	.content.car-insurance-page-content { background:#fff; }

}

@media screen and (orientation:portrait) and (min-width: 1024px) {
	html, body { font-size: 14px!important; }
	.main-title { font-size: 2.4rem; line-height: 3rem; }
}

@media screen and (orientation:portrait) {

	html, body { font-size: 12px; }

	.wrapper-content,
	.form-page .wrapper-content,
	.form-preview-page .wrapper-content { padding:0; }
	.form-page .wrapper-content,
	.form-preview-page .wrapper-content { background:#fff; }

	.content { padding-left: 10%; padding-right: 10%; }
    .content,
	.error-msg, 
	.succes-msg { width:100%; max-width:100%; margin:0; }

	.content { background:#fff; border:none; box-shadow: none; }
	.content:after, 
	.content:before { display:none; }
	.content.car-insurance-page-content { background:#fff; }

	.session-page .content { max-width:100%; margin:0;  }
	.session-page .content-box-body { width:100%; max-width:100%; margin:0!important; background:#fff; border:none; box-shadow: none; }

	.fieldset-row.img-fieldset-row.header-fieldset-row { margin-top:-4rem; }

	.footer { grid-template-columns: 8rem 8rem 1fr 8rem 8rem; }

	/*.fieldset-row-title { margin-bottom: 1rem; }*/
	.main-title,
	.wrapper-content-title { font-size:2.1rem; line-height:2.8rem; }


	.wrapper-content-title { padding: 3rem 6%; }
	.list-content { grid-template-columns: repeat(3,1fr); }
	.list-content li,
	.list-content li:nth-child(5n),
	.list-content li:nth-child(4n) { border-right:1px solid #ccc; }
	.list-content li:nth-child(3n) { border-right:none; }

	/* ============================================================= */
	/* ============================================================= */
	/* ============================================================= */

	.car-insurance-page-content { padding:0; background:#fff;  }
	.car-insurance-page-content .fieldset-row-header { padding: 6rem 12%!important; }

	.exp-row-header { padding:2rem 2rem; }
	.exp-row-header h3 { padding-left:7rem; }
	.exp-row-header h3 i { left:0; }
	
	.exp-row:before {  }

	.exp-row .fieldset-row { padding:1.5rem 9%; }
	.view-info-content .info-content { padding-top:3rem; }

	.info-content { padding-left: 9%; padding-right: 9%; }

	.exterior-car-diagram,
	.interior-car-diagram { padding:3rem 9% 9rem; }
	
	.feedback-component { grid-gap:2rem; }
	
	.pagination { width:100%; justify-content:center; }

	.fieldset-row { padding:0; }
	/*.form-page .form { padding:3rem 0; }*/ 

	.form-preview-page .form-preview { padding:0; }

	.change-password .fieldset-row, 
	.edit-details .fieldset-row, 
	.edit-signature .fieldset-row { grid-template-columns: 1fr; grid-gap: 1.5rem; }
}



/*@media only screen and (max-width: 1920px) and (min-width: 960px) and (max-height: 760px) {
    html, body { font-size: 10px; }   
}*/