: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; -webkit-font-smoothing: antialiased; }

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

img, a img { border:none; }
a { outline:none; text-decoration:none; color:#79367d; font-weight: 400;  }
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; }

.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%; /*display:grid; grid-gap:0;*/ position:relative; overflow:hidden; /*grid-template-rows: 7.6rem 1fr; grid-template-columns: 70% 30%; grid-template-areas: 'header header' 'content sidebar';*/ }

.header { width:100%; height:7rem; position:absolute; top:0; left:0; z-index:100; user-select:none; }
.content { width:70%; position:absolute; top:7rem; bottom:0; left:0; background:#f8f8f8; }
.sidebar { width:30%; position:absolute; top:7rem; bottom:0; right:0; user-select:none; }


/* header */

.header { display:grid; grid-template-columns: 15rem auto 15rem; grid-gap:1rem; padding:0 2rem; align-items:center; justify-items: center; 
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 ); }

.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; /*padding-top:3.5rem;*/ color:#888; text-align:center; text-shadow: 1px 1px 1px rgba(0,0,0,.1); 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: "\ee31"; } /*dashboard*/
.menu a:nth-child(2):after { content: "\ee7b"; font-size:3rem; } /*forms*/
.menu a:nth-child(3):after { content: "\ee7c"; font-size:3rem; } /*sessions*/ 
.menu a:nth-child(4):after { content: "\e900"; } /*users*/
.menu a:nth-child(5):after { content: "\e90d"; } /*clients*/
.menu a:nth-child(6):after { content: "\ea2d"; font-size:2.8rem; } /*categories*/

.menu a.selected { color:#fff; }
.menu a:before { width: 0; height: 0; display:none; position:absolute; bottom:0; left:50%; content:''; transform:translate(-50%,0); border-bottom: .6rem solid #f1f1f1;  border-left: .6rem solid transparent; border-right: .6rem 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 #f1f1f1; }*/
.session-page .menu a:before { border-bottom: .6rem solid #dde0f5; }

.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.6rem; 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; }

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

/*.user-img { width:3rem; height:3rem; position:relative; display:inline-block; border-radius:50%; background-color:#545c63; margin-right:2.5rem; color: var(--primary-color); }
.user-img:after { width:100%; height:100%; position:absolute; top:0; left:0; z-index:3; content: "\ea0e"; font-family: 'icons'; font-size:1.8rem; line-height:3rem; text-align:center; color: var(--primary-color); }
.user-img:before { width:1px; height:60%; position:absolute; top:50%; right:-2rem; content: ""; transform: translate(0,-50%); content:''; background:#545c63; }

.user-img img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:4; border-radius:50%; }*/

.menu-right a { width:3.2rem; height:3.2rem; position:relative; color:#666; text-align:center; text-shadow: 1px 1px 1px rgba(0,0,0,.1); text-decoration:none; transition: all .3s ease-in-out; }
.menu-right a:hover { color:#fff; }
.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; }

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


/* sidebar ============================================================= */

.sidebar { padding:0; background-color:#f1f1f1; overflow:hidden; user-select:none; border-left: 1px solid rgba(0,0,0,.1); }
.sidebar .scrollbar { padding:0 3rem 1.5rem; }

.sidebar-title,
.sidebar-title-2 { width:100%; margin:0 auto 2rem; font-size: 1.6rem; line-height: 2rem; font-weight: normal; padding:0; }
.sidebar-title { position:static; top:0; left:0; font-size: 1.8rem; line-height: 2.2rem; padding:2.5rem 3rem 2.2rem 0; margin:0; }

.sidebar-title-fixed { height: 7rem; line-height:7rem; position: absolute; top: 0; left: 0; padding: 0 3rem; }

.activity-pie { width:26rem; height:26rem; position:relative; text-align:center; margin:0 auto 3rem; }
.activity-pie:after,
.activity-pie:before { width:100%; height:100%; position:absolute; top:50%; left:50%; z-index:7; transform:translate(-49%,-49%); content:''; border-radius:50%; background-color:rgba(0,0,0,.1);}
.activity-pie:before { transform:translate(-50%,-50%); z-index:9; background: transparent url(../img/svg/pie-gradient.svg) no-repeat 50% 50%; background-size: auto 100%; }

.activity-pie img,
.activity-pie svg { width:100%; height:100%; position:relative; z-index:8; margin:0 auto; }

.activity-pie-list { width:100%; display:grid; grid-gap:.7rem; margin:0 auto; }
.activity-pie-list li { width:100%; min-height:4rem; padding:1rem 1.5rem; position:relative; display: grid; grid-gap:1rem; grid-template-columns: 1fr 9rem; align-items:center; box-shadow: var(--shadow); background-color:#fff; border-radius:.4rem; overflow:hidden; }

.activity-pie-list li:before { width:.4rem; height:100%; position:absolute; top:0; left:0; content:''; }
.activity-pie-list li:nth-child(1):before { background-color:#0acf97; }
.activity-pie-list li:nth-child(2):before { background-color:#727cf5; }
.activity-pie-list li:nth-child(3):before { background-color:#ff0f64; }
.activity-pie-list li:nth-child(4):before { background-color:#f3f3f9; }

.activity-pie-list h4,
.activity-pie-list h6 { font-size:1.2rem; line-height:1.6rem; font-weight:600; color: var(--dark); }
.activity-pie-list h4 { margin-top:.3rem; }
.activity-pie-list h6 { font-weight:400; } 

.activity-pie-list div { text-align:right; }
.activity-pie-list div:first-child { text-align:left; }
.activity-pie-list span { display:block; font-size:1.1rem; line-height:1.4rem; color: var(--dark); opacity:.5; }
.activity-pie-list strong { display:block; font-size:1.4rem; line-height:1.4rem; font-weight:700; padding-bottom:.3rem; }
.activity-pie-list strong em { display:inline; font-size:1.2rem; line-height:1.4rem; font-weight:400; font-style:normal; color: var(--dark); }

.activity-pie-list li:nth-child(1) strong { color:#0acf97; }
.activity-pie-list li:nth-child(2) strong { color:#727cf5; }
.activity-pie-list li:nth-child(3) strong { color:#ff0f64; }
.activity-pie-list li:nth-child(4) strong { color:#91919f; }

.sidebar-list { width:100%; margin:0 auto 2.5rem; background-color:#fff; border-radius:.5rem; box-shadow: var(--shadow); }
.sidebar-list li { width:100%; padding:1rem 1.5rem; position:relative; display: grid; grid-gap:1rem; grid-template-columns: 3.6rem 1fr 10.5rem; align-items:center; overflow:hidden;   border-bottom:1px solid rgba(0,0,0,.1); }
.sidebar-list li:last-of-type { border:none; }

.sidebar-list i { width:3.4rem; height:3.4rem; position:relative; z-index:3; font-size:2.8rem; line-height:3.4rem; color:var(--primary-color); text-align:center; }
.sidebar-list i.icon-ia-agents { font-size:3.4rem; }
.sidebar-list i.icon-ia-document,
.sidebar-list i.icon-ia-gdpr { font-size:3.1rem; }

.sidebar-list i span,
.sidebar-list i span i { width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:2; }
.sidebar-list i span i { color:#aeaeae; z-index:1; }

.sidebar-list strong,
.sidebar-list span { font-size:1.2rem; line-height:1.6rem; font-weight:400; color: var(--dark); }
.sidebar-list span { text-align:right; font-weight:400; color:#666; }
.sidebar-list span.highlight { font-size:1.6rem; font-weight:700; color:var(--primary-color); }
.sidebar-list span em { display:block; font-size:1.2rem; line-height:1.6rem; font-weight:400; font-style:normal; color: var(--dark); opacity:.5; }

.sidebar-list .good i,
.sidebar-list .good span { color:#06b986!important; }

.sidebar-list .alert i,
.sidebar-list .alert span { color:#f50c5f!important; }


.evolution-chart { width:26rem; height:26rem; position:relative; text-align:center; margin:0 auto 3rem; }
/*.evolution-chart:after,
.evolution-chart:before { width:100%; height:100%; position:absolute; top:50%; left:50%; z-index:7; transform:translate(-49%,-49%); content:''; border-radius:50%; background-color: rgba(114,124,245,.2);}
.evolution-chart:before { transform:translate(-50%,-50%); z-index:9; background: transparent url(../img/svg/pie-gradient.svg) no-repeat 50% 50%; background-size: auto 100%; }*/

.evolution-chart img,
.evolution-chart svg { width:100%; height:100%; position:relative; z-index:8; margin:0 auto; }

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

.sidebar.sidebar-preview-slider { padding:6rem 0 25rem; }
.sidebar.sidebar-preview-slider:before,
.new-form-page .sidebar:before { width:90rem; height:80rem; position:absolute; top:50%; left:50%; z-index:0; transform: translate(-50%,0); content:''; border-radius:50%; background: #e7e8e8;
background: -moz-linear-gradient(-45deg,  #e7e8e8 0%, #d3d4d5 100%);
background: -webkit-linear-gradient(-45deg,  #e7e8e8 0%,#d3d4d5 100%);
background: linear-gradient(135deg,  #e7e8e8 0%,#d3d4d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e8e8', endColorstr='#d3d4d5',GradientType=1 );}

.sidebar-preview-slider .sidebar-title,
.sidebar-preview-tablet .sidebar-title,
.sidebar-title-fixed { font-size:1.1rem; line-height:6rem; font-weight:600; text-transform:uppercase; }

.pts-top { width:100%; position:absolute; top:5rem; left:0; bottom:20rem; z-index:2; overflow:visible; }
.sidebar-preview-tablet .pts-top { bottom:5rem; }

.pts-top .tablet-preview { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /*opacity:0;*/ transition: opacity .3s ease-in-out; }
/*.pts-top .swiper-slide-active .tablet-preview { opacity:1; }*/

.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:#999; 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-thumbs { width:100%; position:absolute; left:0; bottom:2rem; padding:0 10%; }
.pts-thumbs .swiper-slide { height:100%; position:relative; text-align:center; cursor:pointer; }
.pts-thumbs .tablet-thumb { width:11.6rem; height:16rem; position:relative; opacity:.5; padding:2rem 1.5rem 2.5rem 1.6rem; margin:0 auto; background: transparent url(../img/tablet.svg) no-repeat 50% 50%; background-size: auto 100%; border-radius:.3rem; overflow:hidden; transition: opacity .3s ease-in-out; }
.pts-thumbs .tablet-thumb:before { width:auto; height:auto; position:absolute; top:.7rem; bottom:1.8rem; left:.6rem; right:.8rem; background-color:#f8f8f8; border:1px solid rgba(128,128,128,.1); content:''; border-radius:.3rem; }
.pts-thumbs .tablet-thumb span,
.pts-thumbs .tablet-thumb strong { width:100%; position:relative; z-index:3; display:block; text-align:left; }
.pts-thumbs .tablet-thumb span { font-size:.8rem; line-height:1rem; color:#999; font-weight:600; text-transform:uppercase; }
.pts-thumbs .tablet-thumb strong { width:70%; max-height:8.4rem; position:absolute; top:50%; left:15%; transform: translate(0,-52%); font-size:1rem; line-height:1.2rem; font-weight:600; overflow:hidden; }

.pts-thumbs .swiper-slide-thumb-active .tablet-thumb,
.pts-thumbs .swiper-slide:hover .tablet-thumb { opacity:1; }

.tablet-preview { width:auto; height:100%; max-height:40rem; position:relative; margin:0 auto; padding:0; }
.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 rgba(0,0,0,.1); }

.edit-slide-preview { width:3.4rem; height:3.4rem; display:block; position:absolute; top:2rem; right:-3.1rem; z-index:4; background:#d3d4d5; font-size:1.6rem; line-height:3.4rem; text-align:center; transition: all .3s ease-in-out, transform .3s ease-in-out .3s; cursor:pointer; color:var(--primary-color); border-radius:0 1rem 1rem 0; cursor:pointer; transform: translate3d(-100%,0,0); }
.edit-slide-preview:hover,
.edit-slide-preview:active { color:#fff; background-color: var(--primary-color); box-shadow: var(--shadow); outline:none!important; }

.pts-top .swiper-slide-active .edit-slide-preview { transform: translate3d(0,0,0); }

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

.img-logo-sidebar { width: 26rem; height: 26rem; position:relative; background-color:#e7e9f8; border:2px solid transparent; transition:border .3s ease-in-out, box-shadow .3s ease-in-out; border-radius:50%; margin:0 auto 3rem; cursor:pointer; }
.img-logo-sidebar:hover { box-shadow: var(--shadow); }

.img-logo-sidebar: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: rgba(114,124,245,.2); }

.img-logo-sidebar:after { width:100%; height:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); content:'\e985'; z-index:18; color: rgba(0,0,0,.1); font-size:14rem; line-height:26rem; font-family:icons; text-align:center; background-color:#e7e9f8; transition:color .3s ease-in-out, background-color .3s ease-in-out; border-radius:50%; overflow:hidden; }
.img-logo-sidebar:hover:after { color: #fff; background: var(--primary-color);  }

.img-logo-sidebar.img-user-sidebar:after { content:'\ee5b'; }

.img-logo-sidebar .ils-upload-file { width:100%; height:100%; position:absolute; top:0; left:0; z-index:20; opacity:0; cursor:pointer; }

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

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

.content-box { width:100%; height:100%; position:relative; padding:7rem 0 0; overflow:hidden; }
.new-form-page .content-box,
.agent-page .content-box,
.company-page .content-box { padding:0; }

.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);  }

.table-fixed-header .tbl-btn { position:absolute; top:.4rem; right:1rem; opacity:.5!important; }
.table-fixed-header .tbl-btn:hover { opacity:1!important; }

.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; }
.with-pagination .pagination { justify-self: 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; }

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

.session-page .content { width:100%; max-width:100%; }

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

.session-page .content-box-header { min-height:14rem; height:auto; position:static; background:#f1f1f1; 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; text-align:right; }


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

.pagination { width:auto; height:3.4rem; display:grid; grid-template-columns: repeat(7,3.4rem); grid-gap:.3rem; justify-content:center; 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; }

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

.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,
.save-filter-box,
.content-box-subheader .no-content { 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: 2 / span 3; justify-self: end; }
.filters-actions .button { height:3.6rem; line-height:3.6rem; margin-left: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; }

.content-box-subheader.map .tbl-btn.close-subheader { right:1.2rem; }

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

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

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

.content-box-body-slider { width:100%; height:100%; position:relative; overflow:hidden; }
.content-box-body-slider .swiper-slide { overflow:hidden; padding:0; }

/* new-form-page ============================================================= */

.new-form-page .content { width:63%; padding-left:17rem; }
.company-page .content { width:70%; padding-left:17rem; }

.new-form-page .sidebar { width:37%; }

.new-form-page .toolbox,
.company-page .toolbox { width:17rem; height:100%; position:absolute; top:0; left:0; padding-top:6rem; overflow:hidden; background-color:#f1f1f1; border-right:1px solid rgba(0,0,0,.1); user-select:none; }

.tb-header-title { width:100%; height:6rem; position:absolute; top:0; left:0; z-index:10; padding:0; padding:2.4rem 2.5rem; font-size:1.1rem; line-height:1.4rem; font-weight:600; color: var(--black); text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,.1); }
.toolbox-2 .tb-header-title { padding: 2.4rem 1.2rem; }

.toolbox-1 .scrollbar { padding: 3rem 2.4rem 0; }
.toolbox-2 .scrollbar { padding:0; }

.toolbox-components { width:100%; height:4rem; overflow:hidden; -webkit-transition: height .4s ease-in-out; transition: height .4s ease-in-out; }
.toolbox-components.active { height:auto; }
.toolbox-components.active:nth-child(1) { height:41.2rem; }
.toolbox-components.active:nth-child(2) { height:48.2rem; }
.toolbox-components.active:nth-child(3) { height:17.5rem; }
.toolbox-components.active:nth-child(4) { height:10.3rem; }

.toolbox h4,
.toolbox h6 { position:relative; font-size:1rem; line-height:1.4rem; font-weight:600; color: var(--black); opacity:.8; text-transform:uppercase; margin:0 auto 1rem; padding-right:4rem; }
.toolbox h4 { height:4rem; padding:0 3rem 0 1.2rem; line-height:4rem; opacity:1; background:#f8f8f8; color:#666; margin:0; border-bottom:1px dashed rgba(0,0,0,.1); cursor:pointer; }

.toolbox-components h4 i { width:3rem; height:4rem; position:absolute; top:0; right:0; display:block; color:#666; font-size:.8rem; line-height:4rem; text-align:center; transition: transform .3s ease-in-out; }
.toolbox-components.active h4 i { transform: rotateX(180deg); }

.tb-upload-logo { width:100%; height:10rem; position:relative; overflow:hidden; 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:.4rem; margin:0 auto 3rem; cursor:pointer; }
.tb-upload-logo:hover { border-color: var(--primary-color); box-shadow: var(--shadow);  }
/*.tb-upload-logo:after { width:6rem; height:6rem; position:absolute; top:50%; left:50%; content:'\e985'; z-index:18; transform: translate(-50%,-50%); color: var(--primary-color); font-size:5rem; line-height:6rem; font-family:icons; text-align:center; }*/

.tb-upload-logo .tb-upload-file { width:100%; height:100%; position:absolute; top:0; left:0; z-index:20; opacity:0; cursor:pointer; }

.tb-uploaded-img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:19; background-color:#f8f8f8; }
.tb-upload-logo img { max-width:65%; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

.palette-list { width:100%; display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:2px; margin:0 auto 3rem; }
.palette-list li { height:1.9rem; position:relative; cursor:pointer; transition: border .3s ease-in-out; border:2px solid transparent; }

.palette-list li.selected { border-color: var(--primary-color); }
.palette-list li:after { width:1rem; height:1rem; position:absolute; top:0; right:0; content:'\e93d'; z-index:15; font-family:icons; font-size:.7rem; line-height:.9rem; text-align:center; border-radius:0 0 0 .3rem; transform: scale3d(0,0,0); transform-origin:100% 0%; background-color:var(--primary-color); color:#fff; padding-left:.1rem; }
.palette-list li.selected:after { transform: scale3d(1,1,1); }

.palette-list li:nth-child(1) { background-color:#333; }
.palette-list li:nth-child(2) { background-color:#ad3ee3; }
.palette-list li:nth-child(3) { background-color:#7fcce5; }
.palette-list li:nth-child(4) { background-color:#fea540; }
.palette-list li:nth-child(5) { background-color:#ff8888; }

.palette-list li:nth-child(6) { background-color:#333; }
.palette-list li:nth-child(7) { background-color:#ad3ee3; }
.palette-list li:nth-child(8) { background-color:#7fcce5; }
.palette-list li:nth-child(9) { background-color:#fea540; }
.palette-list li:nth-child(10) { background-color:#ff8888; }

.palette-list li:nth-child(11) { background-color:#333; }
.palette-list li:nth-child(12) { background-color:#ad3ee3; }
.palette-list li:nth-child(13) { background-color:#7fcce5; }
.palette-list li:nth-child(14) { background-color:#fea540; }
.palette-list li:nth-child(15) { background-color:#ff8888; }

.choose-font { width:100%; margin:0 auto 3rem; }
.choose-font select,
.choose-font select option { padding: 0 .5rem!important; }

.toolbox .button { width:100%; }

/* --------------------------------- */

.notif-recipients-box { width:100%; display: grid; grid-gap:1rem; grid-template-columns: 10rem 1fr; margin:0 auto 1rem; align-items:center; }

.info-row { font-size:1.1rem; line-height:1.6rem; font-style:oblique; margin:0 auto 1rem; }

.approval-box-header { width:100%; position:relative; overflow:hidden; margin-bottom:1rem; }
.approval-box-header .button { height:3.2rem; line-height:3rem; position:absolute; top:.6rem; right:0; padding:0 1.5rem; }
.approval-box-header .button.with-icon-right i { line-height:3rem; margin-right:-.5rem; }

.new-form-page .mBox { border-bottom: 1px dashed rgba(0,0,0,.1); padding-bottom: .5rem; margin-bottom:2rem; }
.new-form-page .mBox:last-of-type { border:none; }
.new-form-page .mBox-hidden { padding:0; border:none; display:none; }
.new-form-page .view-hidden-box .mBox-hidden { display:block; }
.new-form-page .mBox h4 { padding-top:0; }
.new-form-page .mBox.approval-box h4 { padding-top:1rem; }

.availability-box {  }

.redirect-grid { display:grid; grid-template-columns: 3.2fr .8fr 1fr 1.5fr; grid-gap:1rem; }
.redirect-grid span { display:inline-block; font-size:1.2rem; line-height:1.8rem; padding: .4rem 0 0 0; color: var(--dark); font-weight:400; }
.redirect-grid input,
.redirect-grid select { margin-top:-.5rem; }

/* --------------------------------- */

.new-form-page .box-action { padding:0; }
.new-form-page .box-action .button { min-width:12rem; }

/*.tablet-preview { width:36rem; height:49.7rem; position:relative; margin:0 auto; padding:0; }
.tablet-preview img { width:100%; height:100%; margin:0; }
.tablet-preview iframe { width:32rem; height:41.8rem; position:absolute; top:2.7rem; left:1.7rem; border:1px solid #e2e3f5; }*/

.form-preview-1  {  }

.components-list { width:100%; display:grid; grid-template-columns: repeat(2,1fr); justify-content:center; }
.components-list li { display:block; border-bottom:1px dashed rgba(0,0,0,.1); border-right:1px dashed rgba(0,0,0,.1); overflow:hidden; padding:.5rem 0 1rem; text-align:center; cursor:move; transition: background .3s ease-in-out, border .3s ease-in-out; }
.components-list li:nth-child(2n) { border-right:none; }
.components-list li:hover { background-color:#f8f8f8; }
.components-list i { width:3.6rem; height:3.6rem; display:block; margin: 0 auto; font-size:3rem; line-height:3.6rem; color:#999; transition: color .3s ease-in-out, text-shadow .3s ease-in-out; }
.components-list i.icon-ia-input-box,
.components-list i.icon-ia-select-box,
.components-list i.icon-ia-textarea,
.components-list i.icon-ia-checkbox-button,
.components-list i.icon-ia-radio-button,
.components-list i.icon-ia-signature { font-size:2.6rem; }
.components-list i.icon-ia-offers,
.components-list i.icon-ia-mail { font-size:3.3rem; }
.components-list i.icon-ia-text { font-size:2.5rem; }
.components-list i.icon-ia-chassis { font-size:2.6rem; }
.components-list i.icon-ia-iban { font-size:2.8rem; }
.components-list i.icon-ia-auto-registration-no { font-size:2.8rem; }
.components-list i.icon-ia-satisfaction { font-size:2.8rem; }
.components-list i.icon-smiling-face,
.components-list i.icon-ia-image-checked { font-size:2.8rem; }
.components-list i.icon-ia-pin-map { font-size:3rem; }


.components-list span { display:block; font-size:.7rem; line-height:1rem; font-weight:600; color:#666; text-transform:uppercase; transition: color .3s ease-in-out, text-shadow .3s ease-in-out; }
.components-list li:hover i,
.components-list li:hover span { color: var(--primary-color); }

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

.page-404 .content { width:100%; }

.content-404 { width:72rem; height:30rem; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
/*.content-404:before { width:100%; height:100%; position:absolute; top:50%; left:-15%; transform: translate(0,-50%); background: transparent url(../img/404-bg.png) no-repeat 0% 50%; background-size: auto 100%; content:''; }*/

.content-404 h2 { font-size:2.8rem; line-height:3.4rem; font-weight:600; color:#151515; margin-bottom:1rem; margin-top:-1rem; }
.content-404 h6 { font-size:5.6rem; line-height:6rem; font-weight:900; color:#5d2460; margin-bottom:1.5rem; }
.content-404 .table-cell { padding-left:27rem; }

.content-404-icon { width:20rem; height:16rem; position:absolute; top:50%; left:0; transform: translate(0,-50%); background: transparent url(../img/404-icon.svg) no-repeat 50% 50%; background-size: 100% auto; }

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

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

.form-box-header { width:100%; position:relative; padding:1.5rem 15%; background-color:#f8f8f8; /*background-color:#f1f1f1;*/ border-bottom:1px dashed rgba(0,0,0,.2); margin-bottom:2rem; }
.form-box-header:after { width:1px; height:2rem; position:absolute; top:100%; left:50%; transform: translate(-50%,0); border-left:1px dashed rgba(0,0,0,.1); content:''; }
.form-step-1 .form-box-header:after { display:none; }

.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 rgba(0,0,0,.2); background:#fff; 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 rgba(0,0,0,.1); content:''; }
.form-box-wrap.view-box-drag,
.form-box-wrap.view-box-edit,
.form-box-wrap.view-box-validation { 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 rgba(0,0,0,.2); color:#999; 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 rgba(0,0,0,.2); border-right: none; }
.form-box-wrap-drag-btn:hover,
.form-box-wrap-options-btn:hover,
.form-box-wrap-options-btn.active { background-color:#f1f1f1; 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,
.view-box-validation .form-box-wrap-drag-btn,
.view-box-validation .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 2rem; }
.form-box-wrap-center-content {  }

.form-box-wrap-options { width:100%; height:100%; position:absolute; top:0; left:100%; z-index:9; background-color:#f1f1f1; 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 .75rem; padding:.5rem 0 .3rem; cursor:pointer; font-size:.8rem; line-height:1rem; color:#666; 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; overflow:hidden; }
.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-options-buttons span.txt2rows i { margin-bottom:-.1rem; }
.form-box-wrap-options-buttons span.trigger-show-components,
.form-box-wrap-options-buttons span.trigger-hide-components { display:none; }
.form-box-wrap-options-buttons span.hide { display:none!important; }
.form-box-wrap-options-buttons span.show { display:inline-block!important; }
.form-box-wrap-options-buttons span i.icon-ia-close { font-size: 1.4rem; }

.form-box-wrap-center-edit,
.form-box-wrap-grid-edit,
.form-box-wrap-center-validation { width:100%; display:none; /*height:0;*/ position:relative; overflow:hidden; padding:2rem 4rem 5rem; background:#f1f1f1; 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,
.view-box-validation .form-box-wrap-center-validation { 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 rgba(0,0,0,.2); 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; outline:none;  }
/*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; outline:none; }
.view-box-edit .form-box-wrap-button,
.view-box-grid .form-box-wrap-button,
.view-box-validation .form-box-wrap-button { opacity:1; }

.form-row-validation-text { color:#999; 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-box-wrap-center-edit .form-row,
.form .form-box-wrap .mco-cell-hidden .form-row { margin-bottom:1rem!important; }

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

.add-block-input,
.add-component { 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:#f8f8f8; transition:color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out; outline:none; }
.add-block-input:hover,
.add-block-input:active,
.add-component:hover,
.add-component:active { color:#fff; background:var(--primary-color); text-decoration:none; border:1px solid var(--primary-color); outline:none; }

.form-box-wrap-title { font-size:1.24rem; line-height:2rem; margin:0 auto 1.2rem!important; font-weight:700; }
.form-box-wrap-description { margin:-.7rem auto 2.5rem; font-size:1.16rem; line-height:1.8rem; }

.multiple-radio-checkbox-list .add-block-input { margin-top:1rem; }
.mrl-row,
.mcl-row,
.mbi-row { width:100%; height:3.6rem; margin-bottom:.8rem; position:relative; padding-left:3.2rem; }
.mbi-row { padding-left:0; }

.form-row.multiple-block-inputs label,
.form-row.multiple-radio-checkbox-list label { padding:.7rem 0 .3rem; }

.mrl-row:after,
.mcl-row:after { width: 1.8rem; height: 1.8rem; padding: 0; display: block; position: absolute; top: .7rem; left: 0; border-radius: 0.2rem; content: ""; border: 1px dashed #ccc;  background: #f8f8f8; }
.mrl-row:after { border-radius:50%; }

/*.mrl-row.with-delete-btn,
.mcl-row.with-delete-btn { padding-right:4.6rem; }*/

.form .form-box-wrap .upload-image-grid .form-row.with-delete-btn input, 
.form .form-box-wrap .mcl-row.with-delete-btn input,
.form .form-box-wrap .mrl-row.with-delete-btn input,
.form .form-box-wrap .mbi-row.with-delete-btn input,
.form .form-box-wrap .form-row.with-calendar input { padding-right:4rem; }

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

.docs-preview .files-list { margin-bottom:1rem; }

.form-box-wrap .supTitle { width: 100%; font-size: .8rem; font-weight: 400; line-height: 1.2rem; color: #666; opacity:.6; text-transform: uppercase; margin: 0 auto .5rem; }
.form-box-wrap .mco-cell .supTitle { padding-top:.8rem; }
.mco-cell .form-box-wrap-description { margin-bottom:1.2rem; }

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

.form-grid { width:100%; display:grid; grid-gap:.7rem; }

.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 rgba(0,0,0,.1); }
.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 { font-size:1rem; 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(6, 1fr); grid-gap:2rem; padding: 1.5rem 15%; background-color: #f8f8f8; border-top: 1px dashed rgba(0,0,0,.1); align-items:center; /*justify-items:center;*/ }
.agent-page .form-box-actions,
.company-page .form-box-actions,
.client-page .form-box-actions { background:#f1f1f1; }

.form-box-actions-block { position: static; }

.form-box-actions .button:last-child { grid-column: 6/-1; justify-self:end; }

.form-box-actions .button { width:8rem; height:8rem; position:relative; /*color: var(--primary-color); background:transparent; border:none;*/ cursor:pointer;  border-radius:50%; 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:8rem; display:block; font-size:2.4rem; line-height:6.8rem; margin:0; }
.form-box-actions .button i.icon-refresh-cw { font-size:1.9rem; }

.form-box-actions .button-outline { border:none; }
.form-box-actions .button-outline i.icon-ia-arrow-left { font-size: 2.2rem; }
.form-box-actions .button-outline i.icon-refresh-cw { font-size: 2rem; }

.form-box-actions .button span { width: 100%; position: absolute; top: 50%; left: 0;transform: translate(0,1.2rem); opacity: .5; font-size: .8rem; line-height: 1rem; text-align: center; font-weight:600; }

/*.form-box-actions .button:hover,
.form-box-actions .button:active { background: var(--primary-color); color:#fff; box-shadow: var(--shadow); }*/

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

.autocomplete-tags { width:100%; height:11rem; position:relative; padding:0; margin-bottom:2rem; border-radius:.3rem!important; box-shadow:none!important; border:1px solid #d1d1d1!important; background:#f8f8f8!important; font-size:0; line-height: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; }
.autocomplete-tags:hover { border-color: #999!important; }

.autocomplete-tags .scrollbar { padding:.5rem!important; }

.at-tag { width:auto; height:2.4rem; display:inline-block; /*float:left;*/ vertical-align:top; margin:0 .5rem .5rem 0; color:#666; background:#e9e9e9; border-radius:0.2rem; font-size:1.2rem; padding:0.2rem 0.2rem 0.2rem 1rem; line-height:2rem; font-weight:400; -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; }
.at-tag i { width:2rem; height:2rem; display:block; float:right; font-size:0.6rem; line-height:2rem; text-align:center; border-radius:0.2rem; cursor:pointer; margin-left:0.5rem; -moz-transition:background 0.3s ease-in-out; -o-transition:background 0.3s ease-in-out; -webkit-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; }
.at-tag i:hover { background: var(--primary-color); color:#fff; }

.at-tag.non-editable { padding-right:1rem; background:rgba(0,0,0,0.1); color:#454545; }

.autocomplete-tags .at-input { width:auto!important; height:2.4rem!important;  /*float:left;*/ padding:0 1rem; border:none!important; background:#fff!important; color:#131313; }
.autocomplete-tags .at-input:hover { background:#fff!important; box-shadow: var(--shadow)!important; }

.at-autocomplete-list { width:100%; height:0; position:absolute; top:100%; left:0; z-index:80; border: 1px solid transparent; border-radius: 0 0 0.3rem 0.3rem; overflow:hidden; -moz-transition: height 0.3s ease-out, border 0.3s ease-in-out; -o-transition: height 0.3s ease-out, border 0.3s ease-in-out; -webkit-transition: height 0.3s ease-out, border 0.3s ease-in-out; transition: height 0.3s ease-out, border 0.3s ease-in-out; }
.autocomplete-tags:hover .at-autocomplete-list,
.autocomplete-tags.view-at-autocomplete-list .at-autocomplete-list { height:9rem; border-color:rgba(0,0,0,0.2); box-shadow:0 2px 3px rgba(0,0,0,0.2); }

.at-autocomplete-list ul { width:100%; height:auto; margin:0; padding:0; background:#fff; }
.at-autocomplete-list ul li { width:100%; height:3rem; font-size:1.1rem; line-height:3rem; padding:0 1.5rem 0 1.5rem; cursor:pointer; text-align:left; color:#666; -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; }
.at-autocomplete-list ul li:hover { background:rgba(0,0,0,0.1); color:#111; }

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

.drag-zone-box { height:30rem; background-color:#f1f1f1; display:grid; grid-template-columns: 1fr; align-items:center; }
.drag-zone-box:after { display:none; }
.drag-zone-box div { text-align:center; color:#666; }
.drag-zone-box i { width:5rem; height:5rem; margin:0 auto 1rem; display:inline-block; font-size:3.6rem; line-height:5rem; text-align:center; }
.drag-zone-box span { display:block; font-size:1.1rem; line-height:1.6rem; text-transform:uppercase; }

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

.form-box-wrap .paragraph { font-size:1.2rem; line-height:1.8rem; }

.form-row-image { width:100%; }
.form-row-image-cell { background-color: #f8f8f8; padding:1.5rem; text-align:center; margin:0 auto .5rem; }
.form-row-image-cell img { width:auto; height:15rem; margin:0 auto; }
.form-row-image .image-caption { font-size:1.1rem; line-height:1.4rem; }

.form-row-image-cell.map-box { margin:-1rem auto 0; }
.form-row-image-cell.map-box img { height:12rem; }

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

.upload-image-box { width:100%; height:7rem; position:relative; overflow:hidden; background-color:#f8f8f8; border:1px solid #ccc; 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); box-shadow: var(--shadow);  }
.upload-image-box:after { width:3rem; height:3rem; position:absolute; top:50%; left:50%; z-index:5; margin-top:-.8rem; /*content:'\ee47';*/ transform: translate(-50%,-50%);  color: #999; font-size:2.8rem; line-height:3rem; 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:#999; text-shadow:none; padding-top:1rem; z-index:5; 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; }

.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 rgba(0,0,0,.1); border-radius:.1rem; font-size:8rem; line-height:15rem; text-align:center; color:#969ac6; }

.form .form-row-checkbox.mar2b, 
.form .form-row-radio.mar2b { margin-bottom: 2rem!important; }

/*.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 .tbl-btn, 
.form-row .mcl-row .tbl-btn,
.form-row .mbi-row .tbl-btn,
.upload-image-grid .form-row .tbl-btn { position:absolute; right:0.1rem; top:50%; transform: translate(0,-50%); margin-top:0; opacity:.5!important; }
.form-row .mrl-row .tbl-btn:hover, 
.form-row .mcl-row .tbl-btn:hover,
.form-row .mbi-row .tbl-btn:hover,
.upload-image-grid .form-row .tbl-btn:hover { opacity:1!important; }


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

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

.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 .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; }

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

.form-box-wrap-center.id-card-box { padding:0 1.5rem; }

.id-card-extractor { display:grid; /*grid-template-columns: repeat(2,50%);*/ }
.id-card-extractor-cell,
.photo-upload-box { padding:1.5rem 2.5rem; }
/*.id-card-extractor-cell:nth-child(1) { border-right: 1px dashed rgba(0,0,0,.1); }
.id-card-extractor-cell:nth-child(1),
.id-card-extractor-cell:nth-child(2) { border-bottom: 1px dashed rgba(0,0,0,.1); }
.id-card-extractor-cell:last-of-type { grid-column: 1 / -1; }*/
.id-card-extractor-cell:nth-child(1) { padding-bottom:3rem; border-bottom: 1px dashed rgba(0,0,0,.1); }

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

.form-grid {  }
.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:.6rem; 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(0,0,0,0.1); text-shadow: rgba(0,0,0,.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 30%; margin:0 auto 1rem; justify-items: center; }
.step1-icons i { width:5rem; height:5rem; display:block; color:#999; 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; }
.id-card-extractor-cell:nth-child(2) img { max-width:75%; height:auto; margin:0 auto; }

.photo-upload-box .step1-icons { padding:0 25%; }

.file-upload-box { width:100%; height:15rem; position:relative; }
.file-upload-box  i { width:7rem; height:7rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; font-size:4.4rem; line-height:7rem; color:var(--primary-color); text-align:center; }
.file-upload-box  i span,
.file-upload-box  i span i { width:100%; height:100%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; }
.file-upload-box  i span i { color:#ccc; z-index:1; }

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

.form-box-wrap-center.mco-box { padding:0 1.5rem; }
.form-box-wrap-center-validation.mco-box { padding:.75rem 1.5rem 5rem; }

.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:.7rem 2.5rem .5rem; border-bottom:1px dashed rgba(0,0,0,.1); }
.form-box-wrap-center-validation .mco-cell { width:100%; padding:0 2.5rem; border:none; }

.mco-cell:last-of-type,
.mco-cell.last { border:none; }

.mco-cell .form-grid { padding-top: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; }

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

.mco-cell h5 { width:100%; padding:.5rem 0 1rem; font-size:1.1rem; line-height:1.6rem; color:#000; font-weight:600; text-transform:uppercase; margin:0; } 
.mco-cell h5:first-of-type { padding-top:0; }

.cfv-row { position:relative; padding-right:5rem; display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:1.5rem; }

.cfv-row i { width:3.6rem; height:3.6rem; position:absolute; top:0; right:0; z-index:15; display:inline-block; background:transparent; font-size:1.6rem; line-height:3.6rem; text-align:center; color: var(--primary-color); background:#f8f8f8; border-radius:.3rem; border: 1px dashed #ccc!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; }
.cfv-row i:hover,
.cfv-row i:active { background:var(--primary-color); color:#fff; border:1px solid var(--primary-color); text-decoration:none; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,.1); } 
 
.form-box-wrap-id { width:auto; display:inline-block; position:absolute; bottom:0; right:1.5rem; background:#f1f1f1; color:#666; padding:.3rem 2.6rem .4rem 1rem; font-size:1rem; line-height:1.4rem; transform: translate3d(0,100%,0); opacity:0; transition: transform .3s ease-out, opacity .3s ease-in-out; user-select:text; cursor: copy; }
.form-box-wrap-id:after { width:1.2rem; height:1.4rem; position:absolute; top:0; right:.6rem; content:'\e955'; font-size:.9rem; line-height:2rem; text-align:center; color:#666; font-family:icons; }
.form-box-wrap-center:hover .form-box-wrap-id,
.view-box-edit .form-box-wrap-id { transform: translate3d(0,0,0); opacity:1; } 

.frc-box,
.ssm-box { padding:1rem 0 0; margin-top:1.6rem; border-top: 1px dashed rgba(0,0,0,.1); }
.ssm-box { padding-top:1.5rem }
.ssm-box select { width:50%; }

.formula-box { padding:1.5rem 0 0; border-top: 1px dashed rgba(0,0,0,.1); }
.formula-box .autocomplete-tags { height:auto; min-height:3.5rem; padding:.5rem; }

.at-symbol {  }

.math-symbols { width:2.4rem; height:2.4rem; position:relative; display:inline-block; margin: 0 .5rem .5rem 0; vertical-align:top; }
.math-symbols .tbl-btn.add-math-symbol,
.math-symbols .tbl-btn.active-math-symbol { width:2.4rem!important; height:2.4rem!important; position:absolute; top:0; left:0; opacity:1!important; background: var(--primary-color)!important; border-color: var(--primary-color)!important; color: #f8f8f8!important; transform-origin: 50% 50%; }
.math-symbols .tbl-btn.active-math-symbol { transform:scale(0); background: #ddd!important; border-color: #ddd!important; color: #666!important; }
.view-active-symbol.math-symbols .tbl-btn.active-math-symbol { -webkit-transform:scale(1); transform:scale(1); }
.view-active-symbol.math-symbols .tbl-btn.add-math-symbol { -webkit-transform:scale(0); transform:scale(0); }

.math-symbols .tbl-btn.add-math-symbol i,
.math-symbols .tbl-btn.active-math-symbol i { font-size:1.2rem; line-height:2.4rem!important; }
.math-symbols .tbl-btn.add-math-symbol i { font-size:2.2rem;}

.view-math-symbols.math-symbols .tbl-btn .tooltip { display:none; }

.math-symbols-list { width:12rem; height:3rem; position:absolute; bottom:100%; left:50%; transform: translate3d(-50%,0,0); z-index:500; opacity:0; background: var(--primary-color); color:#000; padding:0; border-radius:.3rem; backface-visibility: hidden; -webkit-transition: opacity .1s ease-in-out, transform .1s ease-in-out; transition: opacity .1s ease-in-out, transform .1s ease-in-out; font-size:0; line-height:0; }
.math-symbols-list:before { width:0; height:0; display:block; position:absolute; left:50%; bottom:-.4rem; border-top: .4rem solid var(--primary-color); border-left: .4rem solid transparent; border-right: .4rem solid transparent; transform: translate(-50%,0); content:''; }
.view-math-symbols .math-symbols-list { opacity:1; transform: translate3d(-50%,-30%,0); }

.math-symbols-list li { width:3rem; height:3rem; display:inline-block; vertical-align:top; font-size:1.4rem; line-height:3rem; text-transform:uppercase; text-align:center; cursor:pointer; color:#fff; border-right:1px solid rgba(255,255,255,.2); -webkit-transition: color .3s ease-in-out, background .3s ease-in-out; transition: color .3s ease-in-out, background .3s ease-in-out; }
.math-symbols-list li:last-child { border:none; border-radius:0 .3rem .3rem 0; font-size:1.2rem; }
.math-symbols-list li:first-child { border-radius:.3rem 0 0 .3rem; }
.math-symbols-list li:hover { background: #ddd; color:#333; }



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

.offer-row,
.edit-offer-row { position:relative; padding:1.2rem; border:1px dashed #ccc!important; margin-bottom:1.5rem; }
.offer-row { padding:0 0 1rem; }

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

.offer-row .upload-image-box,
.edit-offer-row .upload-image-box { height:12rem; margin-bottom:.5rem; overflow:hidden; }
.offer-row .upload-image-box { border:none; border-radius:0; background: #f8f8f8 url(../img/photo.svg) no-repeat 50% 50%; background-size:auto 7rem; }
.edit-offer-row .upload-image-box { min-height:12rem; height:auto; }


.offer-row .upload-image-box img { width:auto; height:120%; position:absolute; top:50%; left:50%; z-index:7; transform: translate(-50%,-50%); }
.edit-offer-row .upload-image-box img { width:100%; height:auto; margin:0 auto -.5rem; position:relative; z-index:7; }

.offer-row p { font-size:1.1rem; line-height:1.8rem; padding:0 1.2rem; }

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

.offers-box .form-grid { grid-gap:1.2rem; }

/*.edit-offer-row .upload-image-grid { grid-template-columns:12rem 1fr; }
.edit-offer-row .upload-image-box:first-child { grid-row: 1 / 3; }*/
.edit-offer-row .upload-image-box:before { top:auto; bottom:2rem; font-size:.8rem; }

.offer-row .upload-image-box:hover { box-shadow:none; border:none; }

.edit-offer-row .tbl-btn { position:absolute; top:.2rem; right:.2rem; z-index:15; opacity:1!important; background:#f1f1f1; }

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

.tabs { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); position: absolute; top: 0; left: 0; right: 0; /*left:3rem; right:3rem;*/	z-index: 5; text-align: left; font-size: 0; line-height: 0; background: #f8f8f8; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; }
.tabs a,
.tabs span { width:auto; height:7rem; position:relative; font-size:1.1rem; line-height:4rem; font-weight:600; border-right:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); text-transform:uppercase; padding:0 6%; 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; }
.tabs a:last-of-type,
.tabs span:last-of-type { border-right:none; }
.tabs a:hover,
.tabs span:hover { color:#666; }
.tabs a.selected,
.tabs span.selected { background:#fff; border-bottom-color: transparent; }

.sp-tabs a,
.sp-tabs span { display:grid; grid-template-columns:4.8rem 1fr 5.6rem; grid-gap:1.2rem; align-items:center; overflow:hidden; }
.sp-tabs .tab-icon { width:4.8rem; height:4.8rem; /*position:absolute; top:50%; left:1.5rem; margin-top:-2.5rem; display:block;*/ overflow:hidden; border-radius:50%; background-color:#eee; color: var(--primary-color); font-size:3.2rem; line-height:4.8rem; text-align:center; transition: background .2s ease-in-out, color .2s ease-in-out; }
.sp-tabs .selected .tab-icon { color:#fff; background-color: var(--primary-color); }

.sp-tabs strong { font-weight:normal; font-size:1.1rem; line-height:1.6rem; color: #666; }
.sp-tabs strong u { display:block; text-decoration:none; font-size:2.1rem; line-height:2.2rem; font-style:normal; font-weight:bold; color: var(--primary-color); }

.sp-tabs .tab-graph { display:none; margin-top:.7rem; border:none; padding:0; font-size:0; line-height:0; align-self: flex-start; }
.sp-tabs .tab-graph img,
.sp-tabs .tab-graph svg { width:100%; height:auto; }

.tabs a.alert,
.tabs span.alert { padding-right:2.5rem; color: #ff1464; }

.tabs a em,
.tabs span em { width:1.4rem; height:1.4rem; position:absolute; top:auto; right:.5rem; opacity:0; color: #ff1464; margin:0.5rem 0 0.2rem 0.5rem; font-size:1.2rem; line-height:1.4rem; -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; -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); }
.tabs a.alert em,
.tabs span.alert em { 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); }

.tabs a.new-tab, 
.tabs span.new-tab { padding-right:0; }
.tabs a.new-tab i,
.tabs span.new-tab i { width:2.8rem; height:2.8rem; float:right; margin:0.2rem 0.3rem 0.2rem 0.5rem; font-size:1rem; line-height:2.8rem; -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; -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); }
.tabs a.new-tab.selected i,
.tabs span.new-tab.selected i { -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); }

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

.preview-page .content,
.parameters-page .content { width:100%; background-color:#e7e8e8; }
.preview-page .content:before,
.parameters-page .content:before { width:120rem; height:120rem; position:absolute; top:50%; left:50%; z-index:0; transform: translate(2%,-50%) rotate(-80deg); background:#f1f1f1!important; border-radius:0; content:''; }
.preview-page .content:before { transform: translate(7%,-50%) rotate(-80deg); }

.preview-page .pts-top,
.parameters-page .pts-top { width:60%; height:auto; top:7rem; bottom:0; left:0; z-index:11; overflow:hidden; user-select:none; }
.parameters-page .pts-top { width:50%; }

.preview-page .tablet-preview,
.parameters-page .tablet-preview { height:80%; max-height:55rem; margin-top:-3.5rem; }
.parameters-page .tablet-preview { margin-top:-2rem; }

.pts-thumb-container { width:40%; height:100%; position:absolute; top:0; bottom:0; right:0; overflow:hidden; padding:0; z-index:20; }
.preview-page .pts-thumb-container .scrollbar { padding:3rem 10%!important; }

.preview-page .pts-thumbs { height:auto; position:relative; top:auto; bottom:auto; left:auto; padding:0; }
.preview-page .pts-thumbs .swiper-wrapper { width:100%!important; transform: translate3d(0,0,0)!important; height:auto; display:grid; grid-template-columns: repeat(3,1fr); grid-gap:2rem .5rem; user-select:none; }
.preview-page .pts-thumbs .swiper-slide { height:auto; margin:0!important; }

.preview-page .edit-slide-preview { top:3rem; }

.preview-page .pts-top .swiper-button-next, 
.preview-page .pts-top .swiper-button-prev,
.parameters-page .pts-top .swiper-button-next, 
.parameters-page .pts-top .swiper-button-prev { left:50%; right:auto; outline:none; }
.preview-page .pts-top .swiper-button-next,
.parameters-page .pts-top .swiper-button-next { transform: translate(22rem,-50%); margin-top:-3.5rem; }
.preview-page .pts-top .swiper-button-prev,
.parameters-page .pts-top .swiper-button-prev { transform: translate(-26.5rem,-50%); margin-top:-3.5rem; }
 
.preview-page .pts-top .swiper-pagination-fraction,
.parameters-page .pts-top .swiper-pagination-fraction { bottom:3.5rem; font-size:1.1rem; line-height:2rem; color: #999; }
.preview-page .pts-top .swiper-pagination-fraction .swiper-pagination-current { color:var(--dark); }

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

.docs-list { width:50%; height:100%; position:absolute; top: 0; bottom: 0; right:0; z-index:12; /*display:grid; grid-gap:2rem; grid-template-rows: auto; align-items:center; justify-content:center;*/ text-align:center; overflow:hidden; user-select:none; }
.docs-list .scrollbar { padding:3.5rem 7%; }

.docs-list .dl-cell { width:86%; max-width:44rem; height:auto; margin:0 auto 2rem; padding: 0; position:relative; color: var(--dark); font-size: 1.2rem; text-align:left; font-weight:normal; box-shadow:0.4rem 0.4rem 0 rgba(0,0,0,.2); border-radius:.6rem; background:#f8f8f8; -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; }

.docs-list .dl-cell.active,
.docs-list .dl-cell:hover  { outline:none; border-color: var(--primary-color);  }

.dl-cell-header { width:100%; position:relative; z-index:15; padding: 1rem 1rem 1rem 2rem; display:grid; grid-gap:2rem; grid-template-columns: 1fr auto; align-items:center; overflow:hidden; cursor:pointer; transition: background .3s ease-in-out; }

.dl-cell-header h3 { max-height:6rem; font-size: 1.4rem; line-height: 2rem; font-weight:400; padding: 0; overflow:hidden; transition: color .3s ease-in-out; }
.dl-cell.active .dl-cell-header { color:var(--primary-color); }

.dl-cell-header ul { height:3.2rem; display:grid; grid-gap:.3rem; grid-template-columns: repeat(3, 3.2rem); }
.dl-cell-header ul .icon-chevron-down { font-size:1.8rem; }

.dl-cell .tbl-btn.dl-arrow { position:relative; }
.dl-cell.active .tbl-btn.dl-arrow { opacity:1; /* background:var(--primary-color);  text-decoration:none; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,.2);*/ } 

.dl-cell .tbl-btn.dl-arrow i { width:100%; height:100%; position:absolute; top:0; left:0; transition: transform .3s ease-in-out; line-height:3.2rem; text-align:center; }
.dl-cell.active .tbl-btn.dl-arrow i { transform: rotateX(180deg); }

.dl-cell-body { width:100%; height:0; position:relative; z-index:15; overflow:hidden; transition: height .3s ease-in-out, padding .3s ease-in-out, border .3s ease-in-out; }
.dl-cell.active .dl-cell-body { height:auto; border-top:1px solid #ccc; }

.document { position:relative; padding: 2.5rem 3rem 4rem; }

.dl-cell-body h1,
.dl-cell-body h2 { font-size: 1.6rem; line-height: 2.2rem; font-weight:400; padding-top:1rem; margin-bottom:1.5rem; }
.dl-cell-body h3,
.dl-cell-body h4 { font-size: 1.4rem; line-height: 2rem; font-weight:600; padding-top:1rem; margin-bottom:1.5rem;  }
.dl-cell-body h5,
.dl-cell-body h6 { font-size: 1.1rem; line-height: 1.4rem; font-weight:600; text-transform:uppercase; padding-top:1rem; margin-bottom:1.5rem;  }

.dl-cell-body h1:first-child,
.dl-cell-body h2:first-child,
.dl-cell-body h3:first-child,
.dl-cell-body h4:first-child,
.dl-cell-body h5:first-child,
.dl-cell-body h6 { padding-top:0; }

.doc-row { width:100%; position:relative; margin:0 auto 3rem; }
.doc-row span { display:inline; font-size: 1.1rem; line-height: 2.6rem; margin-right:.5rem; margin-bottom:1rem; }
.doc-row input { width:auto; height:2rem; border:none!important; padding:0; border-bottom:1px dashed #ccc!important; background:transparent!important; color:var(--dark)!important; text-align:center!important; border-radius:0!important; }
.doc-row input:focus,
.doc-row input:active,
.doc-row input:hover { color:var(--primary-color)!important; /*box-shadow: var(--shadow)!important;*/ box-shadow: none!important; outline: none!important; border-color: var(--primary-color)!important; background:transparent!important; }

.doc-row .w100p input { width:100%!important; }
.doc-row .w5r input { width:5rem!important; }
.doc-row .w7r input { width:7rem!important; }
.doc-row .w10r input { width:10rem!important; }
.doc-row .w15r input { width:15rem!important; }
.doc-row .w20r input { width:20rem!important; }
.doc-row .w60r input { width:60rem!important; }

.doc-button { width:100%; height:4rem; opacity:1; 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; border-radius:0 0 .6rem .6rem; }
/*button.button { line-height:inherit!important; }*/
.doc-button:hover,
.doc-button:active { color:#fff; background:var(--primary-color); text-decoration:none; }
 
.upload-btn { position:relative; overflow:hidden; z-index:15; background-color:#eaeef7; border:none; transition:all .3s ease-in-out; border-radius:.3rem; margin:0; cursor:pointer; }
.upload-btn:hover,
.upload-file-btn:hover { background-color: var(--primary-color); color:#fff; border-color:var(--primary-color); }

.upload-file-btn { height:5rem; position:relative; z-index:15; border:none; border-radius:.6rem; transition:all .3s ease-in-out; }

.upload-file-btn:before { width:5rem; height:100%; position:absolute; top:.5rem; left:.5rem; content:"\ee5a"; color: #666; font-size:2.4rem; line-height:4rem; font-family:icons; text-align:center; transition:color .3s ease-in-out; }
.upload-file-btn:hover:before { color:#fff; }
.upload-file-btn:hover:after { display:none; }

.upload-btn input,
.upload-file-btn input,
.upload-file-btn span { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; padding:0; z-index:16; cursor:pointer; }
.upload-file-btn span { width:100%; height:100%; display:block; opacity:1; font-size:1.2rem; line-height:5rem; text-align:center; font-weight:600; text-transform:uppercase; }

.parameters-page .export-options { width:auto; position:absolute; left:3rem; bottom:2rem; z-index:18; }

.page-btn { width:auto; position:absolute; right:2rem; bottom:2rem; z-index:50; }
.page-btn .button { width:8rem; margin-top:-.5rem; height:8rem; line-height:7rem; font-size:1.2rem; font-weight:600; border-radius:50%; padding:0; }
.page-btn .button i {  width:100%; height:100%; line-height:6.8rem; margin:0; float:none; font-size:2rem; }
.page-btn .button span { width:100%; position:absolute; top:50%; left:0; transform:translate(0,1rem); opacity:.5; font-size:.8rem; line-height:1rem; text-align:center; }


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

.overlay-body-actions { overflow:hidden; padding-top:2rem; }
.overlay-body-actions .button { float:left; margin-right:1rem; }
.overlay-body-actions .button:last-of-type { float:right; margin-right:0; margin-left:1rem; }

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

.add-users-box { padding:1.5rem 2rem; }
.add-users-box .form-actions { padding:0.5rem 0; }
.add-users-box .form-actions .button { margin-right: 1rem; }

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

.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) 18.5rem; }
.table-ul.sessions-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(8rem, 1.5fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 8rem; }
.table-ul.subheader-list ul { grid-template-columns: minmax(5rem, 1fr) 14.3rem; }
.table-ul.category-list ul { grid-template-columns: minmax(5rem, 1fr) 8rem; }
.table-ul.clients-list ul { grid-template-columns: minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 11.2rem; }
.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:right; margin-left:.5rem; }
/*.table-actions .tbl-btn:last-child { margin:0; }*/

.tbl-btn.trigger-overlay-email-form i { font-size:1.8rem; }

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

.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; }

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

.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:8rem; }

.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; }

.profile-details p.last-login { padding-top: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:''; background: #f8f8f8 url(../img/alchemist-logo-black.png) no-repeat 50% 50%; background-size: auto 2.6rem; }

.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:#fff; border-radius:50%; overflow:hidden; }
.ils-uploaded-img img { width:100%; height:100%; }
.company-box .profile-image .ils-uploaded-img img { width:60%; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

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

.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.2rem; line-height:3.1rem;*/ margin:0 1rem 0 0; }
/*.profile-action .button i { line-height:3.1rem; }*/
.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 { width:50%; 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 { width:50%; margin-bottom:2.5rem; }

.change-password .fieldset-row,
.edit-details .fieldset-row { margin-bottom:2rem; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap: 2.5rem 1.5rem; }
.edit-signature .fieldset-row { width:65%; }

.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: 15%!important; padding-right: 15%!important; }

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

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

.button { width:auto; height:4rem; display:inline-block; font-size:1.1rem; line-height:3.8rem; font-weight:400; text-transform:uppercase; font-family: 'Lato', Arial, sans-serif; border:1px solid transparent; padding:0 2rem; cursor:pointer; color:#fff; background:#5d2560; border-radius:2rem; text-align:center; 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;  outline:none; }
/*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; outline: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 { 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; justify-self: end; }
.box-action .button i { line-height:3.2rem!important; }
/*.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:3.8rem; text-align:center; }
.button.with-icon-right i { float:right; margin:0 -.75rem 0 0.5rem; }



/*
.button.white.select-rows-btn { color:#666; }
.button.white.select-rows-btn:hover { color:#fff; }
.button.white.select-rows-btn.active { color:#fff; background:#e66414; }
.button.white.select-rows-btn.active i { color:#e66414; }
.button.white.select-rows-btn.active i:before { content:'\e933'; color:#fff; }
*/

.button i.icon-ia-trash-bold { font-size:1.3rem; } 

.tbl-btn { width:3.2rem; height:3.2rem; display:inline-block!important; opacity:0!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; display:block; }
.tbl-btn i.trigger-row-options { font-size: 2rem; }

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

.link-btn { width:auto; height:3rem; display:inline-block; margin-left:0.1rem; font-size:1.1rem; line-height:3rem; color:#5d2560; 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:#5d2560; 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; }

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

.square-btn-light { width:3rem; height:3rem; display:inline-block; color:#4d4d4d; font-size:1.2rem; line-height:3rem; text-align:center; cursor:pointer; border-radius:0.3rem; -moz-transition:color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, transform 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, transform 0.3s ease-in-out; -webkit-transition:color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, transform 0.3s ease-in-out; transition:color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, transform 0.3s ease-in-out; }
.square-btn-light:hover,
.table-ul .view-more-options-list .square-btn-light { border-color:#0555fa!important; color:#fff!important; box-shadow:0 0 0.3rem rgba(0,0,0,0.1); background:#0555fa!important; }

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

.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; }


.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; backface-visibility: hidden; }
.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%,50%,0); }

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

.profile-page .content,
.client-page .content { width:100%; }

.agent-form .scrollbar,
.profile-form .scrollbar,
.company-form .scrollbar { padding:0; }

.agent-page .content-box,
.profile-page .content-box,
.company-page .content-box,
.client-page .content-box { padding:0; }

.tree { height:22rem!important; padding:0; border: 1px solid rgba(0,0,0,.1); background: #f8f8f8; overflow-x:hidden; overflow-y:auto; border-radius:.3rem; }
.tree > li { width:100%; padding:1.5rem 2rem; border-bottom:1px dashed rgba(0,0,0,.1); }
.tree ul { padding-top:.5rem; }
.tree ul li { padding-left:3rem; }
.form .tree .form-row-checkbox { min-height:2.2rem; }

.agent-form .form-box-body,
.profile-form .form-box-body,
.company-form .form-box-body { min-height:100%; padding-bottom:12rem; padding-top:3rem; } 

.client-page .form-box-body,
.client-page .form-box-actions  { padding-left: 25%; padding-right: 25%; }

.agent-form fieldset,
.profile-form fieldset,
.company-form fieldset { padding-bottom:2rem; }
.form-grid-row .agent-signature { height:22rem!important; border:1px solid rgba(0,0,0,.1); border-radius:.3rem; }

.agent-signature .tbl-btn.upload-btn { position:absolute; top:.2rem; right:.3rem; position:absolute; opacity:1; cursor:pointer; }
.agent-signature .tbl-btn.upload-btn input { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; cursor:pointer; padding:0; }

.form-row a { font-size:1.2rem; line-height:1.8rem; }


.overlay-assign-agents .scrollbar { max-height:29.5rem; padding-top:1rem!important; }

.assign-agents-list { width:100%; }
.assign-agents-list li { margin-bottom:1rem; padding-left:3.5rem; }
.assign-agents-list li:last-of-type { margin-bottom:0; }

.form .assign-agents-list .form-row-checkbox label { display: grid; grid-template-columns: 4rem 1fr; grid-gap:1rem; align-items:center; overflow:hidden; padding-top:0; }
.form .assign-agents-list .form-row-checkbox label .tbl-img.tbl-agent-img { justify-self: end; }
.form .assign-agents-list .form-row-checkbox label:after { top:.6rem; }

.fixed-label { width:100%; height:5rem; position:relative; }
.assign-agents-list.assign-agents-list-fixed li { padding-top:1.5rem; padding-left:3rem; }
.form .assign-agents-list.assign-agents-list-fixed .form-row-checkbox label { grid-template-columns: 1fr; }
.form .assign-agents-list.assign-agents-list-fixed .form-row-checkbox label:after { top:.2rem; }
.form .assign-agents-list.assign-agents-list-fixed .form-row-checkbox label span { padding-top:.5rem; padding-left:.5rem; }

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

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

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

.form-row a,
.form-row p { display:inline-block; padding:.5rem 0; line-height:2rem; }
 
/*.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 h1,
.form h2 { font-size:2.1rem; line-height:2.8rem; margin:0 auto 2.5rem; padding-top:1rem; color: var(--dark); }
.form h4 { font-size:1.4rem; line-height:2.2rem; margin:0 auto 1.2rem; padding-top:1rem; color: var(--dark); }

.form label { width:100%; display:block; font-size:.8rem; line-height:1rem; font-weight:400; text-align:left; text-transform:uppercase; font-family: 'Lato', Arial, sans-serif; margin-bottom:.7rem; 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: #666!important; background:#f8f8f8!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(242,12,93,.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.1rem; 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!important; }*/

.mBox .form-row-checkbox { margin-bottom:2rem!important; }
.mBox { margin-bottom:2rem; }
.mBox-hidden { border-bottom:1px dashed rgba(0,0,0,.1); padding-bottom:.5rem; }

/*.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:0 auto; padding:2.5rem 15%; background:#eb2b2b; color:#fff; font-size:1.2rem; text-align:left; line-height:2rem; }
.succes-msg { background:#07bc88; }


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

/*.error-msg a,
.succes-msg a { color:#fff; font-family: MessinaSans-Bold, Arial, sans-serif; }
.error-msg a:hover,
.succes-msg a:hover { text-decoration:underline; }*/

.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 .ant-select { color: var(--dark); border: 1px solid #d1d1d1!important; background: #f8f8f8!important; border-radius: .3rem!important;
    box-shadow: none!important; }
.form .ant-select:focus, 
.form .ant-select:hover { box-shadow: var(--shadow)!important; outline: none!important; border-color: var(--primary-color)!important; background: #fff!important; }  

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

select#selectPartner,
select#selectAgent { width:86%; height:3.4rem; padding:0 0 0 1rem; border: 1px solid rgba(0,0,0,0.1)!important; background:#e5e5e5; font-size:1.1rem; font-weight:bold; }

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

.radioCheckbox-list { width:100%; margin:0 auto 4rem; display:grid; grid-template-columns: 1fr; grid-gap:.75rem 1.5rem; }
.radioCheckbox-list li { /*display:grid; grid-template-columns: auto 1fr; grid-gap:1.5rem;*/ }

.radioCheckbox-list .form-row-radio {  }
.form-row-radio-error-msg { display:none; position:relative; color: rgba(235,43,43,1); padding:0 0 .5rem 3rem; border-radius:.3rem; }
.error .form-row-radio-error-msg { display:block; }
.form-row-radio-error-msg p { width:auto; display:inline; font-size:1.2rem; font-weight:400; line-height:2rem; margin:0 1.2rem 0 0; }
.form-row-radio-error-msg .button { height:2rem; line-height:1.8rem; text-transform:none; padding:0 1.5rem; }

.radioCheckbox-list .error .form-row-radio input[type=radio]:checked + label:after, 
.radioCheckbox-list .error .form-row-radio input[type=radio]:checked + label:after { content:'\e9ad'!important; border-color: rgba(235,43,43,1)!important;
    background: rgba(235,43,43,1)!important; box-shadow:none!important; }

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

.main-notification { width:100%; position:absolute; top:7rem; left:0; z-index:99; background:rgba(26,26,26,.9); color:#fff; /*padding: 2.5rem 2.4rem 2.5rem 6.5rem;*/ padding: 2.5rem 2.4rem; transition: transform .3s ease-in-out; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-transform: translate(0,-101%); transform: translate(0,-101%); -webkit-transition: transform .4s ease-out; transition: transform .4s ease-out; }
/*.main-notification:after { width:2.4rem; height:2.4rem; position:absolute; top:50%; left:2.4rem; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); content:'\ea1c'; font-size:2.2rem; line-height:2.4rem; text-align:center; font-family:icons; }*/

.main-notification.alert { background:rgba(235,43,43,.95); }
.main-notification.succes { background:rgba(60,186,43,.95); }
.main-notification.info { background:rgba(70,185,251,.95); }

.view-main-notification .main-notification { -webkit-transform: translate(0,0); transform: translate(0,0); }

.main-notification p { width:auto; display:inline; font-size:1.3rem; font-weight:300; line-height:2rem; margin:0 1.5rem 0 0; }
.main-notification .button { height:2.8rem; line-height:2.6rem; padding:0 1.3rem; font-size:1rem; border-color:#fff; color:#fff; }
.main-notification .button-outline:hover, 
.main-notification .button-outline:active { border-color:var(--primary-color); }

.generated-link { width:100%; height:4rem; position:relative; margin:0 auto 1.5rem; background:#f1f1f1; border-radius:.3rem; }
.generated-link a { position:absolute; top:0; left:1.5rem; right:4rem; display:block; overflow:hidden; font-size:1.1rem; line-height:4rem; text-overflow:ellipsis; white-space:nowrap; color:#5d2560; }
.generated-link a:hover { text-decoration:none; }
.generated-link .tbl-btn { position:absolute; top:.3rem; right:.4rem; opacity:.5!important; }
.generated-link .tbl-btn:hover { opacity:1!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; }

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

.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.4rem; 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); }

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

.content-box-subheader { width:100%; height:auto; position:absolute; top:7rem; left:0; z-index:9; /*opacity:0;*/ color:#666; padding: 3.5rem 0 0; background:#fff; /*overflow:hidden;*/ 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:24.8rem; }

.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:3.5rem; 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:3.5rem; 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; }

.saved-filter-list { width:100%; height:100%; position:relative; }

.save-filter-box { width:100%; position:absolute; left:0; top:3.4rem; bottom:0; transform: translate3d(0,-100%,0); visibility:hidden; background:#fff; display:grid; align-items:center; transition: transform .4s ease-in-out, opacity .4s ease-in-out, box-shadow .4s ease-in-out; }
.view-save-filter-box .save-filter-box { visibility:visible; transform: translate3d(0,0,0); }

.save-filter-box .form { margin:0; text-align:left; }
.save-filter-box .form-row { width:40%; margin:0 0 1.5rem; }
.save-filter-actions .button { margin-right:1.5rem; }

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

.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; }

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

.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; }

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

.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%; padding:0!important; display:table; 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 { 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 { /*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); }*/

.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:.5rem 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; }
}

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

.portrait-page .login-form { width: 45rem; max-width:84%; }
.portrait-page .login-form fieldset { padding: 20rem 8% 4rem; margin-bottom:0; }
.portrait-page .login-form .box-logo { width: 14rem; height: 14rem; top:3rem; left:50%; margin-left:-7rem; }
.portrait-page .login-form .box-logo img { margin: 5rem auto; }
.portrait-page .login-form h3 { text-align:center; margin-bottom:2.5rem; }
.portrait-page .login-form input,
.portrait-page .login-form .button { width:100%; height:5rem; font-size:1.5rem; text-align:center; }
.portrait-page .login-form .button { margin-top: 2rem; }
.portrait-page .copy { width:34rem; }
.portrait-page .copy p { font-size:1.4rem; }
.portrait-page .error-msg, .succes-msg { padding: 1.5rem 8%; font-size: 1.45rem; line-height: 2.2rem!important; }

.capcha-code-box { width:100%; position:relative; margin:0 auto 1rem; overflow:hidden; }

.mod-info { width:100%; position:relative; display:block; padding:1rem 0 0 0; color: rgba(236,50,50,0.8)!important; font-size: 1.2rem; line-height:1.8rem; overflow:hidden; }
.mod-info i { float:left; display:inline-block; margin-right:0.7rem; margin-top:0.2rem; font-size:1.4rem; }

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

.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-edit-slide .overlay-edit-slide,
.view-delete-slide .overlay-delete-form,
.view-overlay-finish-steps .overlay-finish-form-steps,
.view-overlay-send-emails .overlay-send-emails,
.view-overlay-users-sent .overlay-users-sent,
.view-overlay-users-completed .overlay-users-completed,
.view-overlay-delete-form .overlay-delete-form,
.view-overlay-add-category .overlay-add-category,
.view-overlay-edit-category .overlay-edit-category,
.view-overlay-delete-category .overlay-delete-category,
.view-overlay-delete-client .overlay-delete-client,
.view-overlay-client-sessions .overlay-client-sessions,
.view-overlay-allow-documents-storage .overlay-allow-documents-storage,
.view-overlay-assign-agents .overlay-assign-agents,
.view-overlay-email-form .overlay-email-form,
.view-overlay-add-approvers .overlay-add-approvers,
.view-overlay-approve-session .overlay-approve-session,
.view-overlay-approved-session .overlay-approved-session,
.view-overlay-delete-session .overlay-delete-session,
.view-overlay-table-layout .overlay-table-layout { -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:45rem; 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(.9); -ms-transform: translate3d(-50%,-50%,0) scale(.9); -o-transform: translate3d(-50%,-50%,0) scale(.9); -webkit-transform: translate3d(-50%,-50%,0) scale(.9); transform: translate3d(-50%,-50%,0) scale(.9); backface-visibility: hidden; }

.overlay-content.with-header { padding-top:6rem; }
.overlay-content.with-footer { padding-bottom:8rem; }

.view-edit-slide .overlay-edit-slide .overlay-content,
.view-delete-slide .overlay-delete-form .overlay-content,
.view-overlay-finish-steps .overlay-finish-form-steps .overlay-content,
.view-overlay-send-emails .overlay-send-emails .overlay-content,
.view-overlay-users-sent .overlay-users-sent .overlay-content,
.view-overlay-users-completed .overlay-users-completed .overlay-content,
.view-overlay-delete-form .overlay-delete-form .overlay-content,
.view-overlay-add-category .overlay-add-category .overlay-content,
.view-overlay-edit-category .overlay-edit-category .overlay-content,
.view-overlay-delete-category .overlay-delete-category .overlay-content,
.view-overlay-delete-client .overlay-delete-client .overlay-content,
.view-overlay-client-sessions .overlay-client-sessions .overlay-content,
.view-overlay-allow-documents-storage .overlay-allow-documents-storage .overlay-content,
.view-overlay-assign-agents .overlay-assign-agents .overlay-content,
.view-overlay-email-form .overlay-email-form .overlay-content,
.view-overlay-add-approvers .overlay-add-approvers .overlay-content,
.view-overlay-approve-session .overlay-approve-session .overlay-content,
.view-overlay-approved-session .overlay-approved-session .overlay-content,
.view-overlay-delete-session .overlay-delete-session .overlay-content,
.view-overlay-table-layout .overlay-table-layout .overlay-content { opacity:1; box-shadow:0 0 1rem rgba(0,0,0,.3); -moz-transform: translate3d(-50%,-50%,0) scale(1); -ms-transform: translate3d(-50%,-50%,0) scale(1); -o-transform: translate3d(-50%,-50%,0) scale(1); -webkit-transform: translate3d(-50%,-50%,0) scale(1); transform: translate3d(-50%,-50%,0) scale(1); }

.overlay-header { width:100%; height:6rem; position:absolute; top:0; left:0; overflow:hidden; padding:0 5.5rem 0 3rem; border-bottom:1px dashed rgba(0,0,0,.1); }
.overlay-interese .overlay-header { height:auto; }
.overlay-header h1,
.overlay-header h3 { color:#000; font-size:1.4rem; font-weight:600; line-height:6rem; /*text-transform:uppercase;*/ margin:0;  text-overflow:ellipsis; white-space:nowrap; overflow:hidden; backface-visibility: hidden; }

.overlay-body { width:100%; height:100%; position:relative; overflow:hidden; overflow-y: auto; padding: 0; font-size:1.1rem; line-height:1.8rem;  }
.overlay-alert .overlay-body { text-align:center; padding:1rem 3rem 2rem; }
.overlay-template .overlay-body { padding:3rem 10%; }

.overlay-body .scrollbar { padding:2rem 3rem; }

.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; }
.overlay-body h1,
.overlay-body h2 { font-size:1.8rem; line-height:2.4rem; }
.overlay-body h3,
.overlay-body h4 { font-size:1.6rem; line-height:2.2rem; }
.overlay-alert .overlay-body h3,
.overlay-alert .overlay-body h4 { margin-bottom:1.5rem; }
.overlay-body h5,
.overlay-body h6 { font-size:1.2rem; line-height:1.6rem; font-weight:bold; text-transform:uppercase; }
.overlay-body p { color:var(--dark); font-size:1.2rem; line-height:1.8rem; margin:0 auto 1rem; }

.overlay-footer { width:100%; height:8rem; position:absolute; bottom:0; left:0; overflow:hidden; border-top:1px dashed rgba(0,0,0,.1); padding: 2rem 3rem; }
.overlay-footer .overlay-action-btn { width:auto; height:100%; display:inline-block; position:relative; float:right; cursor:pointer; color:var(--primary-color); font-size:1.1rem; font-weight:600; 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 { float:right; }
.overlay-footer .overlay-action-btn:last-of-type { color:var(--dark); float:left; }
.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:var(--primary-color); text-decoration:none; }
.overlay-footer .overlay-action-btn.left { float: left; }
.overlay-footer .overlay-action-btn.inactive-btn { color:#ccc; pointer-events: none; cursor: default; }

.overlay-footer .button { margin-right:1rem; backface-visibility: hidden; }

.overlay .close-button-overlay { width:4rem; height:4rem; position:absolute; top:.6rem; right:.6rem; display:block; border-radius:0.3rem; font-size:1.4rem; line-height:4rem; text-align:center; color:rgba(0,0,0,0.3); cursor:pointer; -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 .close-button-overlay:hover { color:#fff; background:var(--primary-color); }
.overlay .overlay-header .close-button-overlay { top:.9rem; right:.8rem; }

.overlay-alert .button { margin-top:1rem; }

.overlay .table-ul.simple-emails-list ul { padding:0 2rem 0 2.5rem; }

.overlay-template .overlay-icon { width:100%; height:20rem; position:relative; text-align:center; margin:1rem auto 1.5rem; }
.overlay-template .overlay-icon img { width:auto; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

.overlay-template h3 { margin-bottom:.5rem; }
.overlay-add-category.overlay-template h3,
.overlay-edit-category.overlay-template h3 { font-size:1.4rem; margin-bottom:1rem; }

.overlay-template p { margin-bottom:1.5rem; }
.overlay-template .form-row { overflow:visible; margin-bottom:3rem; }

.overlay-template .button.with-icon-right { width:11rem; margin-right:1.5rem; padding-right:2.5rem; }
.overlay-template .button i.icon-mail,
.overlay-template .button i.icon-ia-checked-outline { font-size:1.3rem; }
.overlay-template .button i.icon-ia-trash,
.overlay-template .button i.icon-ia-delete { font-size:1.5rem; }
.overlay-template .button i.icon-ia-trash { line-height:3.7rem; }


.overlay-template .button-link { width:auto; }

.overlay-template .overlay-actions { margin:2.5rem auto 1rem; overflow:hidden; }
.overlay-template .overlay-footer.overlay-actions { margin:0 auto; overflow:hidden; }
.overlay-send-emails .overlay-actions { margin:2.5rem auto 2rem; overflow:hidden; }

.emails-list-content { height:50rem; }

.overlay-body .scrollbar.emails-list-content { padding:0; }

.overlay-client-sessions .overlay-content { width:60rem; }
.overlay-client-sessions .overlay-body .scrollbar { min-height:14rem; max-height:23.5rem; padding:0; }
.table-ul.clients-sessions-list ul { grid-template-columns: 3fr 1fr; padding: 0 3rem; cursor:pointer; }
.table-ul.clients-sessions-list ul li:last-child { justify-self:end; }

.overlay-allow-documents-storage.overlay-template .overlay-content { width:56rem; }
.overlay-allow-documents-storage .overlay-body { padding:5rem 0 6rem; }

.overlay-allow-documents-storage h3 { text-align:center; margin:0 auto 5rem; }

.ads-steps { width:25rem; position:relative; margin:0 auto 3rem; display:grid; grid-template-columns: repeat(2,auto); }
.ads-steps:before,
.ads-steps:after { width:17rem; height:1px; position:absolute; top:50%; left:4rem; transform: translate(0,-50%); background:#e6e6e6; content:''; border:none; }
.ads-steps:after { width:0; background:#5d2560; -webkit-transition: width .3s ease-in-out; transition: width .3s ease-in-out; }
.view-next-step .ads-steps:after { width:17rem; }

.ads-steps li { width:4rem; height:4rem; position:relative; display:inline-block; text-align:center; justify-self: start; }
.ads-steps li:last-child { justify-self: end; }
.ads-steps li:first-child:after { width:100%; height:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(0); background:#5d2560; font-size:1.6rem; line-height:4rem; text-align:center; font-family: icons; content:'\ee69'; color:#fff; border-radius:50%; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.view-next-step .ads-steps li:first-child:after { transform: translate(-50%,-50%) scale(1); }

.ads-steps li span { width:100%; height:100%; display:block; border-radius:50%; border:1px solid #ccc; font-size:1.4rem; line-height:3.8rem; text-align:center; color:#333; -webkit-transition: color .3s ease-in-out .2s, background .3s ease-in-out .2s, border-color .3s ease-in-out .2s; transition: color .3s ease-in-out .2s, background .3s ease-in-out .2s, border-color .3s ease-in-out .2s; }
.view-next-step .ads-steps li:last-child span { border-color:#5d2560; color:#fff; background:#5d2560; }

.ads-steps-content { width:100%; margin:0 auto; display:grid; grid-template-columns: repeat(2,20rem); grid-gap:1.5rem; justify-content:center; /*align-items:center;*/ }
.ads-steps-content li { text-align:center; }
.ads-steps-content li:last-child { opacity:0; visibility:hidden; -webkit-transition: opacity .3s ease-in-out .2s; transition: opacity .3s ease-in-out .2s; }
.view-next-step .ads-steps-content li:last-child { opacity:1; visibility:visible; }

.ads-steps-content h6 { font-size:1.4rem; line-height:2.2rem; font-weight:bold; margin-bottom:1.5rem; text-transform:none; }
.ads-steps-content p { margin:0 auto; }
.ads-steps-content .button { width:auto!important; height:3.4rem; line-height:3.2rem; margin:0 auto!important; padding: 0 2rem!important; }

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

.overlay-finish-form-steps .overlay-content { width:60rem; }
.overlay-finish-form-steps .overlay-body .scrollbar { padding-top:5rem; padding-bottom:5rem; }
.overlay-finish-form-steps .overlay-body-actions { padding-top: 4rem; }

.overlay-edit-slide .overlay-content { width:60rem; }

.overlay-template .overlay-content { width:35rem; }

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

.overlay-email-form .overlay-header,
.overlay-email-form .overlay-footer { background:#f8f8f8; }

.oef-tabs { width:100%; height:5rem; position:relative; border-bottom: 1px dashed rgba(0,0,0,.1); backface-visibility: hidden; }
.oef-tabs:after { width:50%; height:2px; position:absolute; top:100%; left:0; background:#5d2560; content:''; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.view-sms-tab .oef-tabs:after { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); }

.oef-tabs span { width:50%; height:100%; display:block; float:left; font-size:1.2rem; line-height:5rem; font-weight:bold; text-transform:uppercase; color:#999; text-align:center; cursor:pointer; }
.oef-tabs span:first-child { color:#5d2560; border-right: 1px dashed rgba(0,0,0,.1); }
.view-sms-tab .oef-tabs span:first-child { color:#999; }
.view-sms-tab .oef-tabs span:last-child { color:#5d2560; }

.oef-tabs-content { width:100%; height:40rem; position:relative; overflow:hidden; }
.oef-tabs-content-wrapper { width:200%; height:100%; -webkit-transition: transform .4s ease-in-out; transition: transform .4s ease-in-out; overflow:hidden; }
.view-sms-tab .oef-tabs-content-wrapper { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
.oef-tab-content { width:50%; height:100%; float:left; position:relative; backface-visibility: hidden; padding-top:5rem; padding-bottom:8rem; overflow:hidden; }

.oef-tab-content .fixed-label { width:100%; height:5rem; position:absolute; top:0; left:0; }
.oef-tab-content .scrollbar { padding:.5rem 3rem 1rem!important; } 

.send-mail-list { width:100%; }
.send-mail-list li { margin-bottom:1rem; padding-left:3.5rem; }
.send-mail-list li:last-of-type { margin-bottom:0; }
.send-mail-list.send-mail-list-fixed li { padding-top:1.5rem; }
.form .send-mail-list .form-row-checkbox label em { display: inline-block; position:relative; font-style:normal; color:#999; padding-left:1.6rem; position:relative; }
.form .send-mail-list .form-row-checkbox label em:before { width:.3rem; height:.3rem; position:absolute; top:50%; left:.65rem; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); margin-top:.1rem; border-radius:50%; content:''; background:#ccc; }

.overlay-footer.overlay-actions .button { margin-right:1.5rem; }

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

.overlay-add-approvers {  }

.overlay-body .form { background: transparent!important; }
.overlay-add-approvers .scrollbar { max-height: 29.5rem; padding-top: 1rem!important; }

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

.overlay-table-layout .overlay-content { width:45rem; }
.overlay-template.overlay-table-layout .overlay-body { padding: 0; }

.overlay-template.overlay-allow-documents-storage .overlay-body { padding-top: 6rem; padding-bottom: 6rem; }

.column-box-wrap { width: 100%; position: relative; border: 1px dashed rgba(0,0,0,.2); background: #fff; margin-bottom: 1rem; 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, margin .3s ease-in-out; }
.column-box-wrap.view-column-box-edit,
.column-box-wrap.view-only-column-box-edit { border: 1px dashed var(--primary-color); box-shadow: var(--shadow); }

.column-box-details { width: 100%; position: relative; display:grid; grid-template-columns:1fr 7rem; grid-gap:1rem; align-items:center; padding:1.2rem 1rem 1.2rem 1.5rem; }
.column-box-details h3 { font-size: 1.24rem; line-height: 2rem; margin: 0 0 .5rem!important; padding:0!important; font-weight: 700; }
.column-box-details .tbl-btn { opacity:.5!important; }
.column-box-details .tbl-btn:hover { opacity:1!important; }

.column-box-details .column-categories { color:#999; font-size:1.1rem; line-height:1.6rem; font-weight:400; margin:0; }
.column-box-details .column-categories span { font-style:oblique; }

.column-box-edit { height:0; opacity:0; width: 100%; position: relative; padding: 0 1rem; background: #f1f1f1; transition: height .3s ease-in-out, opacity .3s ease-in-out, padding .3s ease-in-out; visibility:hidden; }
.view-column-box-edit .column-box-edit,
.view-only-column-box-edit .column-box-edit { height:auto; opacity:1; padding: 1rem 1rem 5rem; visibility:visible; }

.column-box-edit h6 { width: 100%; display: block; padding:0!important; font-size: .8rem; line-height: 1rem; font-weight: 400; text-align: left; text-transform: uppercase; margin-bottom: .7rem; color: var(--dark); transition: opacity .3s ease-in-out }
.column-box-edit .autocomplete-tags { display:none; height:auto; min-height:3.6rem; padding:.5rem 0 0 .5rem; margin:0; }
.view-column-box-edit .column-box-edit .autocomplete-tags,
.view-only-column-box-edit .column-box-edit .autocomplete-tags { display:block; }
.column-box-edit.view-dropdown .dropdown { height:11.5rem; }

.column-box-save-button { width: 100%; height: 4rem; position: absolute; left: 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 rgba(0,0,0,.2); 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; outline:none; }
.column-box-save-button:hover, 
.column-box-save-button:active { color: #fff; background: var(--primary-color); text-decoration: none; outline:none; }

.column-box-edit h6,
.column-box-edit .column-box-save-button,
.column-box-edit .column-box-save-button { opacity:0; }
.view-column-box-edit .column-box-edit h6,
.view-column-box-edit .column-box-edit .column-box-save-button,
.view-column-box-edit .column-box-edit .column-box-save-button,
.view-only-column-box-edit .column-box-edit h6,
.view-only-column-box-edit .column-box-edit .column-box-save-button,
.view-only-column-box-edit .column-box-edit .column-box-save-button { opacity:1; }

.column-box-wrap.hide-new-column-box-wrap { height:0; margin-bottom:0; border-color:transparent; }
.column-box-wrap.hide-new-column-box-wrap .column-box-details { height:0; padding:0; transition: height 0.3s ease-in-out, padding 0.3s ease-in-out; }
.column-box-wrap.hide-new-column-box-wrap .column-box-details div { display:none; }

.view-only-column-box-edit .column-box-details { display:none; }

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

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

.scrollbar::-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,
.tree::-webkit-scrollbar,
.content-box-body-slider .swiper-slide::-webkit-scrollbar { width: 0.4rem; background-color: transparent; }
.scrollbar::-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,
.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); }

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

.portrait { width:100%; height:100%; position:relative; text-align:center; display:none; color:rgba(255,255,255,.6); text-shadow: 1px 1px 1px rgba(0,0,0,.1); }
.portrait i { width:10rem; height:10rem; display:inline-block; margin:0 auto; font-size:10rem; line-height:10rem; text-align:center; margin:0 auto 2rem; text-shadow:0 1px 1px rgba(0,0,0,0.2); }
.portrait p { font-size:1.6rem; line-height:2.4rem; margin:0 auto; }

.portrait .logo { margin:0 auto 2.5rem; }
.portrait .logo img { height:5rem; }



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

.car-insurance-menu { width:34.6rem; margin:0 auto; padding: 2rem 0 5rem; display:grid; grid-template-columns: repeat(4,6.4rem); grid-gap:3rem; }
.car-insurance-menu a { width:6.4rem; display:block; color:var(--primary-color); 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 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;  }
.car-insurance-menu i.icon-ia-exterior { font-size:3.8rem; }
.car-insurance-menu i:after { width:3.1rem; height:1px; position:absolute; top:50%; left:100%; content:""; background:var(--primary-color); }
.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:var(--primary-color); }
.car-insurance-menu a:nth-child(3) span { margin-top:-.5rem; }

.cars-component-img { width:100%; margin:0 auto 4rem; }

.fieldset-row fieldset-row-header,
.exp-row-full { width:auto;  }

.car-insurance-component { text-align:center; }


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

.feedback-component { width:100%; padding:2rem; margin:0 auto 2rem; display:grid; grid-template-columns: repeat(5,5rem); grid-gap:2rem; align-items:center; justify-content:center; }
.feedback-component li { text-align:center; }
.feedback-component i { width:5rem; height:5rem; display:block; margin:0 auto 1.5rem; font-size:5rem; line-height:5rem; color: rgba(0,0,0,.1); 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; }

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

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

@media only screen and (max-width: 3000px) {
    html, body { font-size: 14px; }
}

@media only screen and (max-width: 1920px) {
    html, body { font-size: 13px; }
}

@media only screen and (max-width: 1680px) {
    html, body { font-size: 12px; }
}

@media only screen and (max-width: 1440px) {
    html, body { font-size: 11px; }

	.form-box-body,
	.form-box-header,
	.form-box-actions,
	.profile-box { padding-left: 10%; padding-right: 10%; }

	.client-page .form-box-body,
	.client-page .form-box-actions  { padding-left: 20%; padding-right: 20%; }
}

@media only screen and (max-width: 1280px) {
    html, body { font-size: 10px; }

	.form-box-body,
	.form-box-header,
	.form-box-actions,
	.profile-box { padding-left: 8%; padding-right: 8%; }

	.client-page .form-box-body,
	.client-page .form-box-actions  { padding-left: 18%; padding-right: 18%; }
}

@media only screen and (max-width: 1100px) {
    
	.form-box-body,
	.form-box-header,
	.form-box-actions,
	.profile-box { padding-left: 6%; padding-right: 6%; }

	.client-page .form-box-body,
	.client-page .form-box-actions  { padding-left: 15%; padding-right: 15%; }
	
	.activity-pie { width: 25rem; height: 25rem; }

	.pts-top { top:6rem; bottom:19rem; }
	.pts-thumbs .tablet-thumb { width:10.2rem; height:14rem; }
	.pts-thumbs .tablet-thumb span { font-size: .7rem; line-height: .8rem; }
	.pts-thumbs .tablet-thumb strong { font-size: .87rem; line-height: 1rem; }
}

@media only screen and (max-width: 960px) {
    .activity-pie,
    .evolution-chart { max-width:100%; width: 21rem; height: 21rem; }
    .menu a { margin:0; }
}

@media only screen and (max-width: 800px) and (max-height: 480px) {
    html, body { font-size: 7px; }
        
}

@media only screen and (max-width: 773px) and (max-height: 435px) {
    html, body { font-size: 6px; }
}

@media only screen and (max-width: 736px) and (max-height: 414px) {
    html, body { font-size: 6px; }
}

@media only screen and (max-width: 568px) and (max-height: 320px) {
    html, body { font-size: 5px; }
}

@media only screen and (max-width: 1280px) and (min-height: 760px) {
    .tpl-2 .box-2 { height:45%; }
    .tpl-2 .box-3 { height:55%; }
}


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

@media screen and (orientation:portrait) and (max-width: 800px) {
    body { color: #fff; 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 ); }
    body .wrapper { display:none; }
    .portrait { display:block; }
}