@charset "UTF-8";
/* CSS Document */

* 		{margin: 0; padding: 0; outline: none; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

h1,h2,h3,h4,h5,h6,p,ol,ul,body,input	{font-family: 'Source Sans Pro', sans-serif;}

h2.template-name {color: #fff; padding-left: 40px; padding-right: 22px; }

::-webkit-input-placeholder     {color:#9F9F9F;}
::-moz-placeholder              {color:#9F9F9F; opacity:1;}
:-ms-input-placeholder          {color:#9F9F9F;}
:-moz-placeholder               {color:#9F9F9F; opacity:1;}


#rightCol img { margin: 0; width: 100%; }

/** BROKER MENTOR OVERRIDES **/
#wrapper { width: 100%; padding: 0 25px; border-radius: 0; display: block; max-width: 100%; background-color: transparent; margin-left: auto; margin-right: auto; min-height: 768px; margin-bottom: 40px; }

/*#breadcrumb,
a.history-link,
#leftNav.desktop { display: none; }*/

/*#rightCol { width: 100%; background-color: #ffffff; float: none; margin: 0; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,0.3); }
body:before { height: 204px; }*/

/******/


.broker-create.inner-content-page { display: block; padding: 20px 0; width: 100%; }
.broker-create .middle-col { width: 100%; max-width: initial; padding: 0 10px;  }

.broker-create.broker-create-template .middle-col { width: 100%; max-width: 1330px; margin: 0 auto; display: block; }

.broker-create.inner { width: 100%; max-width: initial; }

.main-header { background-color: #005A6C; padding: 20px 30px; display: flex; flex-direction: row; align-items: center; }
.main-header h1 { display: inline-block; width: 100%; color: #ffffff; font-weight: 300; margin: 0; line-height: 1.2em; flex: 1 5 50%; }
.main-header h1.strong { font-weight: 700; }

.main-header .actions { display: flex; flex-direction: row; flex: 1 3 50%; padding-left: 20px; }

.main-header .actions .search-container { background-color: #ffffff; padding: 12px 16px; display: flex; position: static; top: initial; text-align: left;  margin: 0; flex: 1 1 100%; }
.main-header .actions .search-container input[type=text] { font-size: 16px; color: #000000; padding: 0; border-bottom: 0; }

.main-header .actions .buttons { padding-left: 30px; flex-shrink: 0; }

.broker-create .main-header .buttons .btn { width: auto; min-width: 130px; border: none; padding: 0 14px; }

div.form-errors { margin: 10px 0; }

div.form-errors ul { color: #ff5050 !important; font-size: 13px !important; list-style: disc !important; margin-left: 20px !important; margin-right: 10px !important; }
div.form-errors ul li { border: 0 !important; line-height: 1.2em !important; }

input[type=text].error,
select.error { background-color: #ffcccc; }

p.disclaimer { font-size: 13px; }

h1 { font-size: 30px; margin: 0; font-weight: 300; position: relative; }
h1 strong { font-weight: 400; }
h2 { margin: 0; padding: 0; background-color: transparent; font-size: 30px; border-bottom: 1px solid #cccccc; font-weight: 300; padding-bottom: 15px; }

p a { color: #004FB6; font-weight: 700; text-decoration: underline; }

.broker-create a.text-button	{font-weight: 700; border-bottom: 1px dotted #004FB6; font-size: 16px; text-decoration: none; padding-bottom: 3px;}

.broker-create .btn { font-size: 13px; color: #004FB6; font-weight: 700; display: block; background-color: #FFD900; border-radius: 4px; padding: 15px 0; text-decoration: none; transition: 0.2s ease-out; cursor: pointer; }
.broker-create .btn:hover { background-color: #444444 !important; color: #ffffff; }
.broker-create .btn.white { background-color: #ffffff; }


.template-chooser { display: flex; flex-direction: row; align-items: flex-start; font-size: 0; background-color: #005A6C; }
.template-chooser .category-selector { width: 100%; max-width: 300px; position: sticky; top: 0; }

ul.filter-list { list-style: none; width: 100%; }
ul.filter-list li { padding: 0; margin: 0; border-bottom: 1px solid #337B89; background-color: #005a5c; }
ul.filter-list li button { width: 100%; margin: 0; background-color: #005A6C; color: #ffffff; padding: 10px 30px; text-align: left; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; transition: all 0.2s; cursor: pointer; font-weight: 400; white-space: normal; display: flex; align-items: center; }

ul.filter-list li button.active,
ul.filter-list li button:hover { background-color: #39A9AD; }

ul.filter-list li button.active { font-weight: 700; }

ul.filter-list ul.subcategories { display: none; border-top: 1px solid #337b89; }
ul.filter-list ul.subcategories li button { padding-left: 50px; }
ul.filter-list ul.subcategories li button:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 6px; background-color: #ffffff; margin-right: 10px; }

.template-chooser .language-selector { margin: 30px 0 30px 0; padding-left: 30px; }
.template-chooser .language-selector h4 { color: #ffffff; font-size: 20px; margin: 0 0 0.5em 0; }
.template-chooser ul.language-lst { margin: 0; list-style-type: 0; }
.template-chooser ul.language-list li { margin: 5px 0; color: #ffffff; font-size: 18px;  }

.template-chooser ul.language-list input[type=checkbox] { display: none; position: absolute; visibility: hidden; opacity: 0; }
.template-chooser ul.language-list label { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.template-chooser ul.language-list label:before { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #ffffff; }
.template-chooser ul.language-list input[type=checkbox]:checked + label:before { background-image: url(/brokercreate/_assets/icon-tick-white.png); background-size: 12px auto; background-position: center; background-repeat: no-repeat; }

.template-chooser .template-selector { width: 100%; padding: 30px 0 0 30px; background-color: #ffffff; }

.template-chooser .intro { margin-bottom: 30px; }
.template-chooser .intro h2 { font-weight: 700; margin: 0 0 0.6em 0; padding: 0; border-bottom: 0; }
.template-chooser .intro p { line-height: 1.4em; margin-bottom: 0.75em; }


.template-chooser .template-filter { position: sticky; top: 0; z-index: 100; background-color: #005A6C; padding: 0 10px; margin-bottom: 20px; display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; }

.template-chooser .template-filter .divider { width: 1px; height: 40px; background-color: #dddddd; }


.template-chooser .type-filter span { display: flex; flex-direction: row; justify-content: center; }
.template-chooser .type-filter span label { background-color: transparent; padding: 15px 20px; color: #ffffff; font-weight: 400; margin: 0 10px; font-size: 18px; cursor: pointer; }

.template-chooser .type-filter span label:first-child { margin-left: 0; }
.template-chooser .type-filter span label:last-child { margin-right: 0; }

.template-chooser .type-filter span input[type=radio] { visibility: hidden; display: none; }
.template-chooser .type-filter span input[type=radio]:checked + label,
.template-chooser .type-filter span label:hover { background-color: #FFD000; color: #000000; }

.language-filter { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.language-filter button { background-color: transparent; color: #ffffff; font-weight: 400; font-size: 16px; cursor: pointer; line-height: 1; padding: 10px 20px; height: 48px; }

.language-filter button.active,
.language-filter button:hover { background-color: #ffd000; color: #000000; }



.no-templates { display: none; font-size: 20px; color: #000000; margin: 40px 0; } 



.broker-create .left-col-padding .btn p		{font-size:18px; margin: 0; color: #004FB6; position: relative; z-index: 5}

.broker-create .btn.big { padding: 20px 40px; font-size: 18px; font-weight: 700; text-align: center; overflow: hidden; position: relative; }
.broker-create .btn.big:hover { background-color: #ffffff !important; }

.broker-create .btn.big.yellow:hover { color: #004FB6; }

.broker-create .btn.animated			{position:relative;}

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

.broker-create ul	{margin:0; list-style: none;}
.broker-create ol	{margin:0}

.broker-create .col-container	{font-size: 0; display: flex;}
.broker-create .bc-left-col { width: 30%; padding: 20px 0; position: relative; background-color: #005A6C; }
.broker-create .bc-right-col		{width:70%; padding:20px 40px 90px; padding-top: 27px; background-color: #ffffff; position: relative;}
.broker-create .bc-right-col p	{line-height:1.5em;}
.broker-create .bc-right-col h3	{font-size:22px; font-weight: 400}

.broker-create.broker-create-template .bc-left-col { padding-top: 0; }

.broker-create .left-col-padding h2.template-name { font-size: 21px; margin: 0; border-bottom: 1px dotted #337B89; padding: 0 20px 10px 20px;  color: #ffffff; }

/* BUTTONS */
.broker-create .buttons { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.broker-create .buttons .btn { margin: 0; padding-left: 8px; padding-right: 8px; min-width: 95px; text-align: center; white-space: break-spaces; }

.broker-create .btn-search { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background-color: transparent; background-image: url("/brokercreate/_assets/broker/icon-search.png"); background-size: 16px 16px; background-position:center; background-repeat: no-repeat;  margin-left: 10px; }

.broker-create .btn.btn-my-documents { background-color: #191919; color: #ffffff; }
.broker-create .btn.btn-my-documents:hover { background-color: #ffffff!important; color: #191919!important; }

.broker-create .btn.btn-recently-uploaded { background-color: #3E812C; color: #ffffff; }
.broker-create .btn.btn-recently-uploaded:hover { background-color: #ffffff!important; color: #3e812c!important; }

.broker-create .btn.active,
.broker-create .btn.active:hover { background-color: #FFD000!important; color: #000000!important; }

.broker-create .btn-back-to-start { color: #ffffff; white-space: nowrap; text-decoration: none; font-size: 18px; font-weight: 700; }
.broker-create .btn-back-to-start:hover { text-decoration: underline; }

/* BROKER LEFT COL */
.broker-create .bc-left-col ul						{color:#ffffff; font-size: 16px;}
.broker-create .bc-left-col ul li:first-child		{border-top: 1px solid rgba(255,255,255,0.5)}
.broker-create .bc-left-col ul li					{margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.5)}
.broker-create .bc-left-col ul li button { color: #ffffff; display: block; text-decoration: none; padding: 10px; padding-left: 40px; position: relative; overflow: hidden; background-color: transparent; width: 100%; text-align: left; }
.broker-create .bc-left-col ul li button span				{position:relative; z-index: 1; display: inline-block; transition:0.3s ease-out; margin-left: 0}
.broker-create .bc-left-col ul li button:before			{width:100%; height: 100%; background-color:#FFD900; content: ''; display: block; position:absolute; z-index: 0; left: -100%; top:0; transition:0.3s ease-out;}
.broker-create .bc-left-col ul li button:hover			{color: #004FB6;}
.broker-create .bc-left-col ul li button:hover span		{transform:translateX(5px);}
.broker-create .bc-left-col ul li button:hover:before		{left:0}
.broker-create .bc-left-col ul li.list-head			{padding-left:40px; padding-bottom: 10px;}

.broker-create .bc-left-col ul li.active button { background-color: #72c7e7; }

.broker-create .bc-left-col:after	{position:absolute; top:32px; right: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 20px 15px 0; border-color: transparent #ffffff transparent transparent;}

.broker-create .bc-left-col p.filter-text		{font-size:16px; color: #ffffff; padding-left: 40px;}
.broker-create .bc-left-col p.filter-text svg	{stroke:#ffffff; transform: rotate(90deg); vertical-align: middle; display: none;}

.broker-create .upload-complete-tick { color: #ffffff; font-size: 14px; margin-top: 20px; display: flex; gap: 10px; }
.broker-create .upload-complete-tick img { display: block; margin-bottom: 5px; width: auto; }

.broker-create .info img { width: auto; }

.broker-create span.info:after { content: ""; display: inline-block; width: 16px; height: 16px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/brokercreate/_assets/broker-create/information-button.png"); }

/* TILE LISTING CHOOSE TEMPLATE */
/*.broker-create .tile-listing { width: calc(100% + 30px); margin-left: -15px; }
.broker-create .tile-listing .col-4 { width: 25%; padding: 15px; display: inline-block; vertical-align: top; text-align: center; transition: all 0.1s; opacity: 1; transform: scale(1); }
.broker-create .tile-listing .col-4 img { width: 100%; border: 1px solid #cccccc; }
.broker-create .tile-listing p { color: #004FB6; }

.broker-create .tile-listing .col-4.shrink { opacity: 0; transform:scale(0); display: none; }*/

.broker-create .preview-error { border-top: 1px dotted #990000; padding-top: 20px; }
.broker-create .preview-error p { color: #cc0000; line-height: 1.3em; margin-bottom: 0.75em; }

.template-list { font-size: 0; }
.template-list .panel { display: inline-block; width: 20%; transition: opacity 0.25s, transform 0.25s, width 0.25s, height 0.25s, padding 0.5s; position: relative; vertical-align: top; margin-bottom: 15px; }
.template-list .panel .inner { /*overflow: hidden;*/ padding: 10px; position: relative; transition: width 0.25s, height 0.25s, padding 0.25s; }

.template-list .panel.shrink { opacity: 0; transform: scale(0); width: 0 !important; height: 0!important; padding: 0; }
.template-list .panel.shrink .inner { width: 0; height: 0!important; padding: 0; }
.template-list .panel.shrink .inner p { font-size: 0; }
.template-list .panel.shrink .my-document { display: none; }

.template-list .panel .inner .panel-image { text-align: center; background-color: #f1f1f1}
.template-list .panel .inner .panel-image img { border: 1px solid #d0d0d0; width:85%; margin: auto}
.template-list .panel .inner p { text-align: center; margin: 8px 0; font-size: 16px; font-weight: 600; transition: font-size 0.25s; }
.template-list .panel .inner p.title { margin-bottom: 2px; }


.template-list .panel[data-new=true]:before { content: ""; position: absolute; }

.template-list .panel .recent-indicator { background-color: #3E812C; color: #ffffff; display: inline-block; padding: 3px 8px; position: absolute; top: 0; left: 50%; margin-left: -48px; z-index: 1; white-space: nowrap; }
.template-list .panel .recent-indicator img { width: 16px; margin-right: 6px; vertical-align: middle; }
.template-list .panel .recent-indicator label { display: inline-block; vertical-align: middle; color: #ffffff; font-size: 14px; padding-bottom: 1px; font-weight: 600; }

.template-list .panel .new-indicator { background-color: #FFA000; color: #015A6C; display: inline-block; padding: 3px 8px; position: absolute; top: 0; left: 50%; margin-left: 30px; z-index: 1; white-space: nowrap; }
.template-list .panel .new-indicator img { width: 16px; margin-right: 6px; vertical-align: middle; }
.template-list .panel .new-indicator label { display: inline-block; vertical-align: middle; color: #015A6C; font-size: 14px; padding-bottom: 1px; font-weight: 600; }


.template-list .panel .my-document { margin-top: 0; width: 100%; text-align: center; }
.template-list .panel .my-document label { display: inline-block; background-color: #000000; color: #ffffff; padding: 5px 10px; font-weight: 600; font-size: 12px; }





.broker-create .panel-image { position: relative; /*overflow: hidden;*/ display: flex; align-items: center; height: 100%; padding-top: 15px; padding-bottom: 15px;}
.broker-create .panel-overlay { /*background-color: rgba(0,90,108,0.85);*/ position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transform: scale(1.1); transition: 0.3s ease-out; z-index: 2; }
.broker-create .panel-image:hover .panel-overlay { opacity: 1; visibility: visible; transform: scale(1); }

.broker-create .panel-image .table { background-color: rgba(0,90,108,0.85); }

.broker-create .panel-image .table-cell { padding-left: 20px; padding-right: 20px; }
.broker-create .panel-image .table-cell .btn { display: block; margin: 10px 0; width: 100%; }

.broker-create .panel-overlay .guidance { margin-bottom: 16px; font-size: 14px; }

.broker-create .panel-overlay .guidance p { color: #ffffff; font-size: 13px; line-height: 1.2em; margin-bottom: 0.6em; }
.broker-create .panel-overlay .guidance p:last-child { margin-bottom: 0; }

.broker-create .panel-overlay .guidance a { color: #FFD900; border-bottom-color: #ffffff; display: inline-block; position: relative; font-weight: normal; }


.broker-create .panel-overlay .guidance a .toast { position: absolute; bottom: 100%; width: 60px; font-size: 10px; background-color: #ffffff; border: 1px solid #000000; border-radius: 3px; color: #000000; padding: 3px; font-weight: normal; margin-left: -15px; left: 0; line-height: 1; }
.broker-create .panel-overlay .guidance a .toast:after { content: ""; position: absolute; width: 0; height: 0; display: block; top: 100%; left: 50%; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom-width: 0; border-top: 4px solid #ffffff; }


/* LEFT COL CONTENT PAGE */
.broker-create .left-col-padding				{padding:40px; padding-top: 0}
.broker-create .left-col-padding hr			{margin:15px 0; display: block}
.broker-create .left-col-padding h2			{color: #ffffff; font-size: 25px; align-items: center; margin-bottom: 0.8em;}
.broker-create .left-col-padding h2 strong	{width:37px; height: 37px; border-radius: 37px; line-height: 37px; color: #004FB6; background-color:#FFD900; text-align: center; font-weight: 700; font-size: 24px; margin-right: 0; display: inline-block; vertical-align: middle;}
.broker-create .left-col-padding h2 span		{display:inline-block; vertical-align: middle; width:calc(100% - 60px);}
.broker-create .left-col-padding h3			{font-size:26px; color: #ffffff; font-weight: 300;}
.broker-create .left-col-padding	label,
.broker-create .left-col-padding	p		{color:#ffffff; font-size: 15px; line-height: 1.3em; margin-bottom: 0.75em; }

.broker-create .left-col-padding.bottom	{margin-top:100px; padding-bottom: 20px; bottom: 0; position: absolute}

.broker-create span.info								{display:inline-block; vertical-align: middle; margin-left: 5px; z-index: 50}
.broker-create span.info[data-tooltip]:before 		{position : absolute; width:250px; line-height: 1.2em; left: auto; right:0; top:20px; box-shadow: 0 0 2px rgba(0,0,0,0.5); content : attr(data-tooltip); opacity : 0; visibility: hidden; font-size: 12px; color: #004FB6; background-color: #FFD900; padding:5px; border-radius: 2px; transition: 0.2s ease-out}
.broker-create span.info[data-tooltip]:hover:before 	{opacity : 1; visibility: visible}

.broker-create .form-cell { display: block; position: relative; z-index: 8; margin-top: 15px; }
.broker-create .form-cell label { margin-bottom: 5px; display: block; }

.broker-create .form-cell textarea,
.broker-create .form-cell input[type="text"] { display: block; width: 100%; padding: 12px 10px; font-size: 14px; }

.broker-create .form-cell input[type="color"] { display: block; width: 100%; padding: 0; font-size: 14px; height: 30px; }

.broker-create .form-cell select { display: block; width: 100%; padding: 6px 5px; font-size: 14px; }

.broker-create .section-intro { margin-bottom: 20px; }

p.image-guidance { margin: 10px 0 10px 0 !important; font-size: 12px !important; }

/* NO TEMPLATE BUTTON */
.broker-create .no-template			{background-image:url(/brokercreate/_assets//broker-create/icon-non-aviva.png); background-size: 25px auto; background-repeat: no-repeat; display: block; padding-left: 40px;}
.broker-create .no-template p		{margin:0em;}
.broker-create .no-template p strong	{color:#FFD900}
.broker-create .no-template:hover	{text-decoration:none;}
.broker-create .no-template:hover p	{color:#FFD900;}

/* PREVIEW PANE */
.broker-create .preview,
.broker-create .review { background-color: #E5EDF8; text-align: center; padding: 40px; margin: 20px 0; }

.broker-create .review img { margin: 0 auto; }

/* BUTTON ACTIONS */
.broker-create .bottom-buttons						{background-color:#005A6C; position: absolute; left:0; bottom: 0; width:100%; padding:25px 40px; display: flex; justify-content: space-between; box-shadow: inset 10px 0 5px rgba(0,0,0,0.2);}
.broker-create .bottom-buttons .text-button			{color:#ffffff; border:none; font-weight: 700; background-color: transparent; }
.broker-create .bottom-buttons .text-button span	{border-bottom:1px dotted #ffffff; display: inline-block; vertical-align: middle; margin-right: 5px; padding-bottom: 3px;}
.broker-create .bottom-buttons .text-button svg		{display:inline-block; vertical-align: middle; stroke:#ffffff}

.broker-create .bottom-buttons .text-button:hover { color: #FFD900 }
.broker-create .bottom-buttons .text-button:hover span { border-color: #FFD900 }
.broker-create .bottom-buttons .text-button:hover svg { stroke: #FFD900 }

.broker-create .bottom-buttons .text-button.previous-btn { flex-direction: column-reverse }
.broker-create .bottom-buttons .text-button.previous-btn svg { transform: rotate(180deg); margin-left: 0; margin-right: 5px; }

.broker-create .cover-image-selector { height: 335px; overflow-y: auto; background-color: #ffffff; }
.broker-create .cover-image-selector .preview-image-holder { position: relative; opacity: 0.94; }
.broker-create .cover-image-selector .preview-image-holder img { width: 100%; cursor: pointer; }

.broker-create .cover-image-selector .preview-image-holder:hover { opacity: 1; }
/*.broker-create .cover-image-selector .preview-image-holder:hover:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid #333333; }*/

.broker-create .cover-image-selector .preview-image-holder.selected:after { content: "Selected"; position: absolute; left: 50%; top: 50%; width: 50%; transform: translateX(-50%) translateY(-50%); color: #ffffff; border: 1px solid #ffffff; border-radius: 5px; padding: 10px 0; display: block; background-color: rgba(0, 0, 0, 0.65); font-size: 14px; text-align: center; }

.broker-create .btn.animated span	{width:80px; height: 100px; display: block; background-color: #ffffff; content:''; z-index: 0; position: absolute; top:-20px; filter: blur(20px); opacity: 0.6; right: 100%; transform: rotate(25deg)}

.broker-create .step-button[disabled] { opacity: 0.5; }


.tooltip { display: block !important; z-index: 10000; position: absolute; font-size: 12px; background-color: #FFD900; color: #000000; padding: 8px 8px 4px 8px; border: 1px solid #000000; border-radius: 3px; max-width: 250px;  }
.tooltip p { margin: 0 0 0.5em 0; line-height: 1.2em; font-size: inherit; color: inherit;  }
.tooltip .tooltip-inner { background: transparent; border: 0; padding: 0; font-size: 12px; font-weight: normal; font-style: normal; /*-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);*/ }
.tooltip .tooltip-arrow { width: 0; height: 0; border-style: solid; position: absolute; margin: 5px; border-color: #FFD900; z-index: 1; }
.tooltip[x-placement^="top"] { margin-bottom: 5px; }
.tooltip[x-placement^="top"] .tooltip-arrow { border-width: 5px 5px 0 5px; border-left-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; bottom: -5px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0; }
.tooltip[x-placement^="bottom"] { margin-top: 5px; }
.tooltip[x-placement^="bottom"] .tooltip-arrow { border-width: 0 5px 5px 5px; border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; top: -5px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0; }
.tooltip[x-placement^="right"] { margin-left: 5px; }
.tooltip[x-placement^="right"] .tooltip-arrow { border-width: 5px 5px 5px 0; border-left-color: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; left: -5px; top: calc(50% - 5px); margin-left: 0; margin-right: 0; }
.tooltip[x-placement^="left"] { margin-right: 5px; }
.tooltip[x-placement^="left"] .tooltip-arrow { border-width: 5px 0 5px 5px; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; right: -5px; top: calc(50% - 5px); margin-left: 0; margin-right: 0; }
.tooltip.popover .popover-inner { background: #f9f9f9; color: black; padding: 24px; border-radius: 5px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); }
.tooltip.popover .popover-arrow { border-color: #f9f9f9; }
.tooltip[aria-hidden='true'] { visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
.tooltip[aria-hidden='false'] { visibility: visible; opacity: 1; transition: opacity .15s; }

.broker-create .btn.animated span { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; animation-iteration-count: 5; -webkit-animation-iteration-count: 5; -webkit-animation-name: shine; animation-name: shine; }


.step-selector { font-size: 0; }
.step-selector .button-container { display: inline-block; margin: 0 1px; position: relative; }

.step-selector .button-container .tt { position: absolute; font-size: 12px; padding: 3px 4px; color: #ffffff; background-color: #000000; border: 1px solid #ffffff; border-radius: 3px; bottom: 29px; white-space: nowrap; }

.step-selector input[type=button] { font-size: 13px; color: #004FB6; background-color: #FFD900; margin: 0; height: 23px; min-width: 23px; padding: 1px; font-family: Arial; font-weight: 700; cursor: pointer; background-size: 13px; background-position: center; background-repeat: no-repeat; }
.step-selector input[type=button]:not(.current):hover { background-color: #F0C900; }

.step-selector input[type=button].current { background-color: #fff; }

.step-selector input[type=button].download { background-image: url("/brokercreate/_assets/icon-download-black.png"); }
.step-selector input[type=button].review { background-image: url("/brokercreate/_assets/icon-search-black.png"); }


.vis-hidden { visibility: hidden; }

.download-warning { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); padding: 0 10px; z-index: 100; }
.download-warning .container { position: static; border: 1px solid #000000; border-radius: 5px; padding: 15px; background-color: #ffffff; display: block; margin: 4vh auto 0 auto; width: 100%; max-width: 500px; }
.download-warning .buttons { justify-content: center; }

.review-page-list { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }

.review-page { background-color: transparent; color: #ffffff; border: 1px solid #ffffff; border-radius: 3px; padding: 10px; font-size: 14px; cursor: pointer; }
.review-page.active { background-color: #FFD900; color: #000000; }
.review-page:hover { background-color: #FFD000; color: #000000; }

@keyframes shine {
	
	0%		{right:100%;}
	100%	{right:-100%;}
	
}

@media (max-width: 1540px) {
   .broker-create .template-list .panel { width: 25%; }
}


@media (max-width:1250px) {
   .broker-create .template-list .panel { width: 33.333%; }
}

@media (max-width: 1030px) {
   .broker-create .template-list .panel { width: 50%; }
}

@media (max-width: 1024px) {
   .broker-create .main-header { flex-wrap: wrap; }
   .broker-create .main-header h1 { flex-shrink: 0; margin-bottom: 10px; }

   .broker-create .main-header .search-container { margin: 0; flex-basis: 60%; }
   .broker-create .main-header .buttons { flex-basis: 40%; padding-left: 20px; }
}


@media (max-width:960px) {
    
    .main-header {flex-direction: column;}
    
    .actions {display: none !important;}
        

    .template-chooser {flex-direction: column;}
    .broker-create .template-list .panel { width: 25%; }
    
    .template-chooser .category-selector {max-width: 100%; position: relative;}
    
    .template-chooser .template-selector {padding-left: 0px; }
    
    .broker-create .col-container {flex-direction: column;}
    
    .broker-create .bc-left-col,
    .broker-create .bc-right-col {width: 100%; padding: 10px 0px;}
    
    .broker-create .bc-left-col:after {display: none;}
    
    .broker-create .bottom-buttons {padding: 10px; }
    
    
    /*
	
	body:before	{height:245px;}
	.mobile-nav-btn	{display:none}
	#rightCol	{box-shadow:none}
	
	#wrapper	{padding-left:0; padding-right: 0}
	
	.broker-create .main-header h1 strong	{display:block}
	.broker-create .main-header	{box-shadow:none; padding-top:20px; padding-bottom: 20px;}
	
	.broker-create .col-container	{display:block;}
	.broker-create .bc-left-col		{width:100%;}
	.broker-create .bc-right-col		{width:100%;}
	
	.broker-create p.filter-text						{cursor:pointer;}
	.broker-create p.filter-text:hover				{color:#FFD900}
	.broker-create p.filter-text:hover svg			{stroke:#FFD900}
	.broker-create .bc-left-col ul					{display:none; padding-top: 15px; padding-bottom: 30px;}
	.broker-create .bc-left-col p.filter-text		{margin:0}
	.broker-create .bc-left-col p.filter-text svg	{display:inline-block;}
	.broker-create .left-col-padding					{padding-bottom:20px;}
	
	.broker-create .bc-left-col:after	{transform:rotate(90deg); right:25px; bottom: -5px; top:auto}
	
	.broker-create .main-header					{display:block;}
	.broker-create .main-header h1				{line-height:1.1em; font-size: 26px;}
	.broker-create .main-header .text-button	{margin:10px 0 0 0; display: inline-block; font-size: 12px;}
	
	.broker-create .panel-overlay			{position:relative; opacity: 1; visibility: visible; top:auto; left: auto; transform:scale(1); background-color: #413E45}
	.broker-create .panel-image .table-cell	{padding-left:15px; padding-right: 15px;}
	
	.broker-create .left-col-padding.bottom	{position:relative; margin-top: 0px;}
	.broker-create .no-template p	{font-size:12px}
	
	.broker-create span.info[data-tooltip]:before 	{right:0; top:0}
    */
	
}

@media (max-width:870px) {
	.broker-create .template-list .panel { width: 33%; }
}


@media (max-width:670px) {
	.broker-create .template-list .panel { width: 50%; }
}

@media (max-width:470px) {
	.broker-create .template-list .panel { width: 100%; }
}




@media (max-width:560px) {
	
	/*TEMPLATE LISTING */
	.broker-create .tile-listing .col-4	{width:50%}
	
	
}