/* modal min sizes */
.dialog-box-inner.full { width: 100% }
.dialog-box-inner.m900 { max-width:100%; min-width: 900px }


.alert { display: inline-block; min-width: 100%; box-sizing: border-box; padding: 5px 10px; line-height: 25px; font-size: 14px; border-radius: 3px; margin-bottom: 8px }
.alert-green { background: #85c800; color: #fff }
.alert-red { background: #c70000; color: #fff }
.alert-yellow { background: #ebbc00; color: #fff }

/* layout styles */
.hidden { display: none; }
.out { position: absolute; left: -10000px; top: 0; }
.iblock { display: inline-block; vertical-align: middle; position: relative; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.no-margin { margin: 0 !important; }
.no-pad { padding: 0 !important; }
.nowrap { white-space: nowrap; }
.uppercase { text-transform: uppercase; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pointer { cursor: pointer }

.fl-right { float: right}
.fl-left { float: left}

.f0 { font-size: 0px; position: relative; }
.f14 { font-size: 14px; position: relative; }
.f12 { font-size: 12px; position: relative; }
.f11 { font-size: 11px; position: relative; }
.f10 { font-size: 10px; position: relative; }
.f8  { font-size: 8px; position: relative; }

.ls2 { letter-spacing: 2px }

.flex-vc { display: flex; height: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
.flex-vc.vc-top { align-items: flex-start; }
.flex-vc .flex-base { width: 100%; margin-right: 20px; margin-left: 20px }
.flex-vc .flex-base:first-child { margin-left: 0; }
.flex-vc .flex-base:last-child { margin-right: 0; }


.row { width: 100%; display: block; position: relative; clear: both; box-sizing: border-box; }
.row:before, .row:after { content: ''; display: table; clear: both; height: 0; visibility: hidden; font-size: 0; }

.row.f0, .row.f14, .row.f12 { margin-left: -5%; width: auto; }
.bcol { display: inline-block; vertical-align: top; position: relative; }
.bcol-0 { width: 100%; }
.bcol-1 { width: 95%; margin-left: 5%; }
.bcol-2 { width: 45%; margin-left: 5%; }
.bcol-2H { width: 45%; margin-left: 4.5%; }
.bcol-3 { width: 28.333333%; margin-left: 5%; }
.bcol-4 { width: 20%; margin-left: 5%; }
.bcol-5 { width: 15%; margin-left: 5%; }
.bcol-6 { width: 11.666666%; margin-left: 5%; }
.bcol-3-4 { width: 70%; margin-left: 5%; }

.row.narrow.f0 { margin-left: -2.5%; }
.narrow .bcol-0-61 { width: 59.166666%; margin-left: 2.5%; }
.narrow .bcol-0-49 { width: 46.25%; margin-left: 2.5%; }
.narrow .bcol-0-75 { width: 72.5%; margin-left: 2.5%; }
.narrow .bcol-2 { width: 47.5%; margin-left: 2.5% }
.narrow .bcol-3 { width: 30.833333%; margin-left: 2.5%; }
.narrow .bcol-4 { width: 22.5%; margin-left: 2.5%; }
.narrow .bcol-5 { width: 17.5%; margin-left: 2.5%; }
.narrow .bcol-6 { width: 14.166666%; margin-left: 2.5%; }
.narrow .bcol-20 { width: 2.5%; margin-left: 2.5%; }
.narrow .bcol-0 { width: 0%; margin-left: 2.5%; }

.blue { color: #269400 !important; }
.bg-white { background-color: #fff !important; }
.circle-radius { border-radius: 999px; }

a { cursor: pointer; }
a[href], a:link { color: #697f90; outline: none; text-decoration: underline; transition: all 0.2s ease-out; }
a:visited { color: #697f90; }
a[href]:hover { color: #269400; text-decoration: none; }

h1, h2, h3, h4, h5 { font-family: 'Barlow', Arial, sans-serif; font-weight: 600; color: #292929; margin: 0; }
h2 { font-size: 20px; line-height: 30px; padding: 15px 0; }
h3 { font-size: 17px; line-height: 25px; padding: 15px 0; }
h3 .fa-arrow-down { margin-left: 10px; top: -1px; font-size: 15px; transition: transform 0.2s ease-out; position: relative; }
h3 .active .fa-arrow-down { transform: rotateZ(180deg); }
h2 + h3, h2 + h4, h3 + h4 { padding-top: 0; }
h4 { font-size: 15px; line-height: 23px; padding: 10px 0; color: #323d4d }
p { position: relative; margin: 0; padding: 0 0 20px; }
code, .code { word-break: break-word; font-family: 'Roboto Mono', monospace; font-size: 13px; }
p code, li code, td code { background: rgba(96,105,113,.1); padding: 1px 5px; border-radius: 3px; color: #555; }
pre { margin: 0; overflow: auto; }
pre code { color: #555; background-color: transparent; }
ol, ul { margin: 0 0 15px 20px; padding: 0; }
ol > li { padding-bottom: 5px; }
ol ol, ul ul, ol ul, ul ol { margin-top: 5px; margin-bottom: 0; }

figure { text-align: center; margin: 10px 15px 25px; display: table; }
figure img { margin: 0; display: block; max-width: 100%; max-height: 450px; height: auto; width: auto; }
figure figcaption { color: #555; font-size: 14px; line-height: 20px; font-weight: 400; font-style: italic; padding: 5px 0; display: table-caption; caption-side: bottom; }

/* default .dialog-flex-content table */
.dialog-flex-content table { margin: 0 0 20px; padding: 0; border-spacing: 0; width: 100%; border-collapse: separate; border-radius: 3px; overflow: hidden; }
.dialog-flex-content table td, .dialog-flex-content table th { vertical-align: top; text-align: left; line-height: 18px}
.dialog-flex-content table th { padding: 12px 15px; border-top: 1px solid #e5e6ec; background-color: #fcfcfd; font-weight: 600; }
.dialog-flex-content table td { padding: 8px 15px; border-top: 1px solid #e5e6ec; vertical-align: middle; }
.dialog-flex-content table th p, .dialog-flex-content table td p, .dialog-flex-content table td li, .dialog-flex-content table td label { margin: 0; padding-bottom: 0; position: relative; }
.dialog-flex-content table td img { display: block; margin: 0 auto; }
.dialog-flex-content table td small { line-height: 16px; }

.dialog-flex-content table .active td { border-color: #3d8df5 !important; border-bottom: 1px solid #3d8df5 !important; color: #3d8df5 !important; }
.dialog-flex-content table .active td label { color: #3d8df5 !important; }
.dialog-flex-content table .active td:first-child { border-left: 1px solid #3d8df5; }
.dialog-flex-content table .active td:last-child { border-right: 1px solid #3d8df5; }
.dialog-flex-content table .active + tr td { border-top: 0 none transparent; }
.dialog-flex-content table tr td:first-child, .dialog-flex-content table tr th:first-child { border-left: 1px solid #e5e6ec; }
.dialog-flex-content table tr td:last-child, .dialog-flex-content table tr th:last-child { border-right: 1px solid #e5e6ec; }
.dialog-flex-content table tbody tr:last-child td { border-bottom: 1px solid #e5e6ec; }
.dialog-flex-content table thead tr:first-child th:first-child { border-radius: 5px 0 0 0; }
.dialog-flex-content table thead tr:first-child th:last-child { border-radius: 0 5px 0 0; }
.dialog-flex-content table tbody tr:last-child td:first-child { border-radius: 0 0 0 5px; }
.dialog-flex-content table tbody tr:last-child td:last-child { border-radius: 0 0 5px 0; }


/* sizes */
.min-h-450 main { min-height: 350px }

/* dialogs */
.dialog-box { position: absolute; max-width: 100%; max-height: 100%; height: 100%; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box; padding: 50px; z-index: 101; pointer-events: none; margin: auto; }
.dialog-box:before { content: ''; position: fixed; left: 50%; top: 50%; width: 0; height: 0; /*transition: 0.1s all 0.2s ease-out;*/ }
.dialog-box-inner { max-width: 1000px; /*transition: 0.2s all 0s ease-out;*/ position: relative; left: 0; top: 0; position: relative; overflow: hidden; background-color: #fff; width: auto; display: flex; max-height: 100%; border-radius: 3px; box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: scale(0); }
.dialog-box.active { pointer-events: all; }
.dialog-box.active:before { left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); /*transition: 0.3s background 0s ease-out;*/ }
.dialog-box.active .dialog-box-inner { /*transition: 0.2s all 0.2s ease-out;*/ transform: scale(1); box-shadow: 0 10px 40px 0 rgba(0,50,100,0.12); }
.dialog-box-inner > .progressbar, .dialog-box-inner > .disabled { display: none; }
.dialog-box-inner .close-wrapper { position: absolute; right: 20px; top: 20px; z-index: 2; }
.dialog-box-inner .close-wrapper a { cursor: pointer; text-decoration: none; }
.dialog-box-inner .close-wrapper a:before { font-size: 20px; color: #5d687a; transition: all 0.2s ease-out; }
.dialog-box-inner .close-wrapper a:hover:before { color: #3d8df5; }
.dialog-box-inner .disabled-content { position: absolute; left: 0; top:4px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.25); z-index: 9999999}

.dialog-flex-content { position: relative; display: block; width: 100%; min-width: 450px; }
.dialog-flex-content-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.dialog-flex-content header, .dialog-flex-content footer { width: 100%; box-sizing: border-box; }
.dialog-flex-content header { padding: 0 25px; }
.dialog-flex-content header h2 { padding-bottom: 5px; padding-right: 45px }
.dialog-flex-content footer { padding: 5px 25px; background: #ececec; }
.dialog-flex-content main { position: relative; display: block; overflow: auto; width: 100%; max-width: 100%; padding: 15px 25px; box-sizing: border-box; }
.dialog-flex-content main hr { border: none; margin: 8px 0 16px 0; border-bottom: 1px solid #ececec }
.dialog-flex-content footer.simple { text-align: right }

.dialog-flex-content main .message-error { display: inline-block; padding: 3px 12px; background: #f1d2d2; color: #af2222; border-radius: 3px }
.dialog-flex-content main .message-warn { display: inline-block; padding: 3px 12px; background: #f3f2d3; color: #d79300; border-radius: 3px }
.dialog-flex-content main .message-ok { display: inline-block; padding: 3px 12px; background: #daf3d3; color: #3eb022; border-radius: 3px }



/* tooltips */
.tooltip-wrapper { display: block; position: relative; pointer-events: none; opacity: 0; transition: visibility 0.2s ease-out, opacity 0.2s ease-out; z-index: 5; }
.tooltip-box:hover + .tooltip-wrapper, .tooltip-wrapper:hover { opacity: 1; pointer-events: all; }
.tooltip { display: block; position: absolute; top: 15px; left: 0; width: 100%; background-color: #000; border-radius: 5px; }
.tooltip:before { content: ''; position: absolute; top: -21px; left: 0; width: 100%; height: 21px; }
.tooltip:after { content: ''; position: absolute; transform: rotateZ(-45deg); top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; background-color: #000; }
.tooltip .tooltip-inner { color: #fff; display: block; font-size: 13px; line-height: 16px; padding: 10px; z-index: 2; position: relative; background-color: #000; border-radius: 5px; }
.tooltip .tooltip-inner code { color: #7de1ff !important; margin: 0px; padding: 0px }




/* buttons */
.btn { font-weight: 500; transition: all 0.2s ease-out; margin: 0; display: inline-block; vertical-align: middle; position: relative; border: 0; bottom: 0; padding: 0; text-align: center; cursor: pointer; text-decoration: none; outline: none; box-sizing: border-box; }
.btn, .btn:hover { text-decoration: none !important; }
.btn + .btn { margin-left: 10px; }
.btn.block { display: block; text-decoration: none; }

.btn-back { position: absolute; left: 0; top: 11px; }
.btn-back i { display: inline-block; vertical-align: baseline; margin-right: 7px; }

.btn.small { font-size: 10px; padding: 0px 10px }

.btn-normal i { display: inline-block; vertical-align: baseline; }
.btn-normal i.fa-right { margin-left: 7px; }
.btn-normal i.fa-left { margin-right: 7px; }
.btn-normal { background: #269400; padding: 7px 18px; font-size: 13px; line-height: 19px; color: #fff !important; font-weight: 500; text-align: center; border: 1px solid #269400; border-radius: 5px; font-family: 'Barlow', Arial, sans-serif; }
.btn-normal:hover { background-color: #2caa00; border-color: #2caa00; }
.btn-normal.narrow { padding: 0px 6px !important; font-size: 10px; display: inline-block }
.btn-normal.outline { background-color: transparent; border-color: #697f90; color: #697f90 !important; }
.btn-normal.outline:hover { border-color: #269400; color: #269400 !important; }
.btn-normal.dotted { background-color: transparent; border-color: #697f90; color: #697f90 !important; border-style: dotted; }
.btn-normal.dotted:hover { border-color: #269400; color: #269400 !important; }
.btn-normal.transparent { background-color: transparent; border-color: transparent; color: #697f90 !important; }
.btn-normal.transparent:hover { color: #269400 !important; }

/* H gray f2f2f5 */
.btn-normal.gray { background-color: #697f90 !important; border-color: #697f90 !important; color: #fff }
.btn-normal.gray:hover { background-color: #269400 !important; border-color: #269400 !important }
.btn-normal.red { background-color: #ed5f74; border-color: #ed5f74 }
.btn-normal.red.outline { border-color: #ed5f74 }
.btn-normal.white { background-color: none; color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important }
.btn-normal.white:hover { border-color: #fff; color: #fff !important;  border-color: rgba(255, 255, 255, 1) !important  }




/* forms & form types */
input[type=text], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=password], select, textarea, .range-value { font-family: 'Barlow', Arial, sans-serif; font-weight: normal; box-sizing: border-box; border: 0; -webkit-appearance: none; position: relative; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; }
input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { z-index: 1; }
input[type=submit], button { overflow: visible; border: none; cursor: pointer; background: none; font-family: 'Barlow', Arial, sans-serif; outline: none; }

input[type=text], input[type=number], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=file], input[type=password], textarea, select, .range-value { text-align: left; display: block; font-size: 14px; width: 100%; height: 35px; line-height: 34px; padding: 0 10px; color: #263243; border: 1px solid #c7cace; transition: border 0.2s ease-out; border-radius: 5px; font-weight: 400; margin: 0; background-color: transparent; }
input[type=text].iblock, input[type=date].iblock, input[type=number].iblock, input[type=email].iblock, input[type=tel].iblock, input[type=file].iblock, input[type=password].iblock { display: inline-block; vertical-align: baseline; height: 26px; line-height: 24px; margin: 0 3px; padding: 0; width: auto; text-align: center; }
input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, textarea:focus, select:focus { border-color: #269400; }
input[type=text]:required:invalid, input[type=date]:required:invalid, input[type=number]:required:invalid, input[type=email]:required:invalid, input[type=tel]:required:invalid, input[type=password]:required:invalid, select:required:invalid { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
input[type=text]:required:focus, input[type=date]:required:focus, input[type=number]:required:focus, input[type=email]:required:focus, input[type=password]:required:focus, textarea:required:focus, select:required:focus, input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: none; }
input[type=date]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; }
select.iblock {  width: auto }


form p { padding: 0 0 15px; position: relative; }
form .row.top-padded { margin-top: 15px; }
textarea { position: relative; display: block; width: 100%; height: 100px; line-height: 21px; padding-top: 5px; padding-bottom: 5px; margin: 0; overflow: hidden; resize: none; }
label { color: #323d4d; font-weight: 600; margin: 0 0 7px; display: block; }
select { padding-right: 30px; cursor: pointer; }

.select-wrapper:before { content: '\f107'; display: inline-block; vertical-align: middle; line-height: 35px; position: absolute; top: 0; right: 10px; font-family: 'FontAwesome', Arial, sans-serif; font-weight: 400; text-rendering: auto; }
.plus-wrapper:before { content: '\f067'; display: inline-block; vertical-align: middle; line-height: 40px; position: absolute; top: 0; left: 10px; text-align: center; font-family: 'FontAwesome', Arial, sans-serif; font-weight: 400; text-rendering: auto; }
.plus-wrapper input { padding-left: 30px; }
.date-wrapper:before { content: '\f073'; display: inline-block; vertical-align: middle; line-height: 40px; position: absolute; top: 0; left: 10px; text-align: center; font-family: 'FontAwesome', Arial, sans-serif; font-weight: 400; text-rendering: auto; }
.date-wrapper input { padding-left: 30px; }

.bcol-20 p, .bcol-0 p { font-size: 13px; opacity: 0.5; text-align: center; position: absolute; transform: translateX(-50%); left: 50%; top: 0; line-height: 40px; padding: 0; }

.flex-middle { display: flex; justify-content: space-between; }
.flex-middle > span { display: inline-block; vertical-align: middle; width: 100%; }
.flex-middle .center { padding-left: 15px; padding-right: 15px; }


/* dropdown */
.dropdown-box { position: relative; z-index: 5; }
.dropdown-box .dropdown-wrapper { position: relative; pointer-events: none; opacity: 0; transition: visibility 0.5s 0.2s ease-out, opacity 0.5s 0.2s ease-out; }
.dropdown-box:hover > .dropdown-wrapper { pointer-events: auto; opacity: 1; transition: visibility 0.2s ease-out, opacity 0.2s ease-out; }
.dropdown { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: auto; background-color: #fff; box-shadow: 0 1px 17px rgba(0,0,0,0.24); border-radius: 5px; }
.dropdown:before { content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; }
.dropdown:after { content: ''; position: absolute; transform: rotateZ(-45deg); top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; background-color: #fff; box-shadow: 0 1px 17px rgba(0,0,0,0.24); }
.dropdown.align-left { left: 0; transform: none; }
.dropdown.align-left:after { left: 23px; }
.dropdown.align-right { left: auto; right: 0; transform: none; }
.dropdown.align-right:after { left: auto; right: 14px; }
.dropdown > ul { margin: 0; padding: 10px; background-color: #fff; display: block; border-radius: 5px; z-index: 2; position: relative; white-space: nowrap; }
.dropdown > ul li { text-align: left; display: block; font-size: 14px; line-height: 20px; padding: 5px 10px; margin: 2px 0; cursor: pointer; color: #263243; transition: all 0.2s ease-out; opacity: 0.7; border-radius: 3px; font-weight: 400; }
.dropdown > ul li:hover { opacity: 1; background-color: #ececec; }
.dropdown > ul li.no-hover:hover { background-color:#fff; cursor: default }
.dropdown > ul li a { color: #263243 !important; text-decoration: none; margin: 0 !important; }
.dropdown > ul li hr { height: 0; border:none; border-top:1px solid silver}

/* autocomplete */
.autocomplete { position: absolute; top: 100%; margin-top: -10px; opacity: 0; pointer-events: none; width: 100%; display: block; background-color: #fff; border: 1px solid #c7cace; padding: 10px; border-radius: 5px; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.12); box-sizing: border-box; z-index: -1; transition: opacity 0.2s ease-out; }
.autocomplete.active { opacity: 1; pointer-events: all; z-index: 5; }
.autocomplete ul { margin: 0; padding: 0; display: block; }
.autocomplete ul li { text-align: left; display: block; font-size: 14px; line-height: 20px; padding: 5px 10px; margin: 2px 0; cursor: pointer; color: #263243; transition: all 0.2s ease-out; opacity: 0.7; border-radius: 3px; font-weight: 400; }
.autocomplete ul li:hover { opacity: 1; background-color: #ececec; }
.autocomplete ul li a { color: #263243 !important; text-decoration: none; }

/* tabs */
.tabs-box { display: flex; height: 100%; flex-direction: row; justify-content: space-between; margin: 0 1px 25px; }
.tabs-box .tab { display: inline-flex; align-items: center; position: relative; width: 100%; text-align: center; background-color: #fcfcfd; border: 1px solid #697f90; margin: 0 -1px; }
.tabs-box .tab a { display: inline-block; padding: 7px 18px; font-size: 13px; line-height: 19px; text-decoration: none; width: 100%; box-sizing: border-box; font-weight: 600; }
.tabs-box .tab.active { background-color: #3d8df5; border-color: #3d8df5; }
.tabs-box .tab.active a { color: #fff; cursor: default; }
.tabs-box.f12 .tab a { font-size: 12px; padding: 3px 7px }
.tabs-box .tab:first-child { border-radius: 5px 0 0 5px; }
.tabs-box .tab:last-child { border-radius: 0 5px 5px 0 ; }

/* paging dots */
.paging-dots { display: inline-block; vertical-align: top; text-align: center; font-size: 0; margin: -10px auto 10px; padding: 10px 10px 2px; background-color: #fff; border-radius: 10px; }
.paging-dots > span { width: 10px; height: 10px; margin: 0 5px; border-radius: 999px; background-color: #edeef2; display: inline-block; vertical-align: top; }
.paging-dots > span.active { width: 18px; background-color: #8c94a1; box-shadow: inset 0 0 0 1px #727c8c; }

/* checkbox list */
.check-list { padding-bottom: 20px; }
.check-list p { padding: 0 40px 0 0; margin-top: 5px; border-bottom: 1px solid #c7cace; }
.check-list p:last-child { border-bottom: 0 none transparent; padding-bottom: 2px; }
.check-list .fa-close { position: absolute; right: 0; height: 26px; width: 26px; background-color: #fff; opacity: 0.7; top: 50%; transform: translateY(-50%); margin-top: -3px; border-radius: 3px; transition: all 0.2s ease-out; }
.check-list .fa-close:hover { background-color: #ececec; opacity: 1; }
.check-list .fa-close:before { position: absolute; right: 50%; top: 50%; transform: translateX(50%) translateY(-50%); }

/* radios */
form input[type=radio] + label { margin-left: 30px; padding-top: 3px; cursor: pointer; font-weight: 500; line-height: 26px; }
form input[type=radio] + label i { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; background-color: #fff; border: 1px solid #c7cace; border-radius: 999px; }
form input[type=radio] + label i:before, form input[type=radio] + label i:after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 999px; }
form input[type=radio]:checked + label i:before { background: #3d8df5; margin-left: -11px; margin-top: -11px; width: 22px; height: 22px; }
form input[type=radio]:checked + label i:after { background: #fff; margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; }
form .iblock input[type=radio] + label { margin-right: 25px; }
form .dialog-flex-content table td label { cursor: pointer; }
form .dialog-flex-content table td input[type="radio"] + label { top: -10px; margin: 0; padding: 0; }
form .dialog-flex-content table td input[type="radio"] + label i { top: 0; }

form input[type=radio] + label.radio-img-flex { margin: 0; padding: 15px; line-height: 18px; display: flex; min-height: 60px; height: 100%; flex-direction: row; align-items: center; justify-content: space-between; border: 1px solid #e5e6ec; background-color: #fcfcfd; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0); transition: all 0.2s ease-out; }
form input[type=radio] + label.radio-img-flex > span { display: inline-block; position: relative; }
form input[type=radio] + label.radio-img-flex .img-box { width: 50px; text-align: center; margin: 0 20px 0 0; opacity: 0.7; transition: opacity 0.2s ease-out; position: relative; }
form input[type=radio] + label.radio-img-flex img { display: block; margin: 0 auto; }
form input[type=radio] + label.radio-img-flex .text-box { width: 100%; }
form input[type=radio] + label.radio-img-flex strong { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 600; }
form input[type=radio]:checked + label.radio-img-flex .img-box { opacity: 1; }
form input[type=radio]:checked + label.radio-img-flex { border-color: #3d8df5; box-shadow: inset 0 0 0 1px #3d8df5; }

form input[type=radio] + label.radio-img-flex .img-box.default:before, form input[type=radio] + label.radio-img-flex .img-box.default:after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 999px; }
form input[type=radio] + label.radio-img-flex .img-box.default:before { border: 2px solid #c7cace; margin-left: -11px; margin-top: -11px; width: 18px; height: 18px; }
form input[type=radio]:checked + label.radio-img-flex .img-box.default:before { border-width: 0; background: #3d8df5; margin-left: -11px; margin-top: -11px; width: 22px; height: 22px; }
form input[type=radio]:checked + label.radio-img-flex .img-box.default:after { background: #fff; margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; }

form input[type=radio] + label.radio-img-full { margin: 0; padding: 0; line-height: 18px; display: block; text-align: center; transition: all 0.2s ease-out; opacity: 0.7; }
form input[type=radio] + label.radio-img-full .img-box { display: block; padding: 0 30px 0 0px; text-align: center; transition: opacity 0.2s ease-out; border: 1px solid #e5e6ec; background-color: #fcfcfd; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0); position: relative; }
form input[type=radio] + label.radio-img-full img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
form input[type=radio] + label.radio-img-full .text-box { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; }
form input[type=radio]:checked + label.radio-img-full { opacity: 1; }
form input[type=radio]:checked + label.radio-img-full .img-box { border-color: #3d8df5; box-shadow: inset 0 0 0 1px #3d8df5; }

/* checkbox */
form input[type=checkbox] + label { margin-left: 30px; padding-top: 3px; cursor: pointer; font-weight: 500; line-height: 26px; }
form input[type=checkbox] + label > i { position: absolute; top: 5px; left: 0; display: block; width: 17px; height: 17px; padding: 2px 0 0 2px; border-radius: 5px; border: 1px solid #c7cace; transition: all 0.2s ease-out; }
form input[type=checkbox] + label > i:before { color: #fff; }
form input[type=checkbox]:checked + label > i { background: #3d8df5; border-color: #3d8df5; }

/* range slider */
/*
input[type=range] { -webkit-appearance: none; margin: 15px 0 5px; height: 24px; width: 100%; display: block; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; animate: 0.2s; box-shadow: 0 0 0 rgba(0,0,0,0); background: #c7cace; border-radius: 0; border: 0 none transparent; }
input[type=range]::-webkit-slider-thumb { height: 22px; width: 22px; background: #3d8df5; cursor: pointer; -webkit-appearance: none; margin-top: -10px; border-radius: 999px; box-shadow: box-shadow: 0 0 0 rgba(0,0,0,0); border: 0 none transparent; }
input[type=range]:focus::-webkit-slider-runnable-track { background: #c7cace; }
input[type=range]::-moz-range-track { width: 100%; height: 2px; cursor: pointer; animate: 0.2s; box-shadow: 0 0 0 rgba(0,0,0,0); background: #c7cace; border-radius: 0; border: 0 none transparent; }
input[type=range]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 999px; background: #3d8df5; cursor: pointer !important; box-shadow: 0 0 0 rgba(0,0,0,0); border: 0px solid #000000; }
input[type=range]::-ms-track { width: 100%; height: 2px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 0; color: transparent; }
input[type=range]::-ms-fill-lower { background: #c7cace; border: 0 none transparent; border-radius: 50px; box-shadow: 0 0 0 rgba(0,0,0,0); }
input[type=range]::-ms-fill-upper { background: #c7cace; border: 0 none transparent; border-radius: 50px; box-shadow: 0 0 0 rgba(0,0,0,0); }
input[type=range]::-ms-thumb { height: 22px; width: 22px; margin-top: 0; border-radius: 999px; background: #3d8df5; cursor: pointer; box-shadow: 0 0 0 rgba(0,0,0,0); border: 0 none transparent; }
input[type=range]:focus::-ms-fill-lower { background: #c7cace; }
input[type=range]:focus::-ms-fill-upper { background: #c7cace; }
.range-value { z-index: 2; background: #fff; display: inline-block; vertical-align: baseline; height: 26px; line-height: 24px; margin: 0 auto; padding: 0 10px; width: auto; text-align: center; pointer-events: none; }
.range-texts > span:not(.flex-base) { width: 150px; }
.range-texts .flex-base { position: relative; }
.range-texts .flex-base:after { content: ''; position: absolute; width: 100%; height: 1px; background: #c7cace; left: 0; top: 50%; }
*/

/* double range slider */
.double-range-slider { position: relative; height: 22px; text-align: left; margin: 45px 0 35px; }
.double-range-slider input[type=range] { margin: 0; }
.double-range-slider > div { position: absolute; left: 11px; right: 11px; height: 22px; }
.double-range-slider > div > .range-inverse-left, .double-range-slider > div > .range-inverse-right { position: absolute; height: 2px; background-color: #c7cace; margin: 0; top: 9px; }
.double-range-slider > div > .range-inverse-left { left: -11px; }
.double-range-slider > div > .range-inverse-right { right: -11px; }
.double-range-slider .range-range { position: absolute; left: 0; top: 9px; height: 2px; background-color: #3d8df5; }
.double-range-slider .range-thumb { position: absolute; top: 0; z-index: 2; height: 22px; width: 22px; text-align: left; margin-left: -11px; cursor: pointer; background-color: #3d8df5; border-radius: 999px; outline: none; }
.double-range-slider > input[type=range] { position: absolute; pointer-events: none; -webkit-appearance: none; z-index: 3; height: 22px; top: 0; width: 100%; opacity: 0; background: transparent; }
.double-range-slider > input[type=range]::-ms-track { -webkit-appearance: none; background: transparent; color: transparent; }
.double-range-slider > input[type=range]::-moz-range-track { -moz-appearance: none; background: transparent; color: transparent; }
.double-range-slider > input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; border: transparent; }
.double-range-slider > input[type=range]:focus { outline: none; }
.double-range-slider > input[type=range]::-ms-thumb { pointer-events: all; width: 22px; height: 22px; border-radius: 999px; border: 0 none; background: #3d8df5; }
.double-range-slider > input[type=range]::-moz-range-thumb { pointer-events: all; width: 22px; height: 22px; border-radius: 999px; border: 0 none; background: #3d8df5; }
.double-range-slider > input[type=range]::-webkit-slider-thumb { pointer-events: all; width: 22px; height: 22px; border-radius: 999px; border: 0 none; background: #3d8df5; -webkit-appearance: none; }
.double-range-slider > input[type=range]::-ms-fill-lower { background: transparent; border: 0 none; }
.double-range-slider > input[type=range]::-ms-fill-upper { background: transparent; border: 0 none; }
.double-range-slider > input[type=range]::-ms-tooltip { display: none; }
.double-range-slider .range-sign { position: absolute; left: 50%; top: -32px; z-index: 3; transform: translateX(-50%); }
.double-range-slider .range-texts { pointer-events: none; padding: 20px 0 0; }


::-webkit-input-placeholder { color: #b2b6bd; opacity: 0.9; }
:-moz-placeholder { color: #b2b6bd; opacity: 0.9; }
::-moz-placeholder { color: #b2b6bd; opacity: 0.9; }
:-ms-input-placeholder { color: #b2b6bd; opacity: 0.9; }
:input-placeholder { color: #b2b6bd; opacity: 0.9; }



@media screen and (max-width: 1340px) {

.bcol-3.bcol-md-2 { width: 45%; margin-left: 5%; }

}


@media screen and (max-width: 750px) {

/* layout styles */
.flex-vc .flex-base { margin-right: 15px; margin-left: 15px; }

.row.f0 { margin-left: 0; }
.bcol { display: block; width: 100% !important; margin-left: 0 !important; }

.row.narrow.f0 { margin-left: 0%; }
.narrow .bcol { width: 100% !important; margin-left: 0 !important; }

h2 { font-size: 19px; line-height: 25px; padding: 10px 0; }
h3 { font-size: 17px; line-height: 22px; padding: 10px 0; }
h3 .fa-arrow-down { top: 0; font-size: 13px; }
h4 { font-size: 16px; line-height: 21px; }

/* default .dialog-flex-content table */
.dialog-flex-content table th { padding: 10px 10px; }
.dialog-flex-content table td { padding: 6px 10px; min-width: 10px; }

/* dialogs */
.dialog-box { padding: 40px 25px; }
.dialog-box-inner .close-wrapper { right: 10px; top: 10px; }

.dialog-flex-content header { padding: 0 40px 0 20px; }
.dialog-flex-content footer { padding: 15px 20px; }
.dialog-flex-content main { padding: 10px 20px; }

/* buttons */
.btn-normal { padding: 7px 15px; }
.btn-normal.narrow { padding: 2px 15px; }

/* forms & form types */
.bcol-20 p, .bcol-0 p { position: relative; transform: none; left: 0; line-height: 15px; padding-bottom: 15px;  }

.flex-middle { flex-wrap: wrap; }
.flex-middle > span { margin-bottom: 15px; width: auto; }

/* tabs */
.tabs-box { margin: 0 1px 20px; }
.tabs-box .tab a { padding: 6px 12px; font-size: 13px; }

/* radios */
form input[type=radio] + label.radio-img-flex .img-box { width: 40px; margin: 0 15px 0 0; }
form input[type=radio] + label.radio-img-flex strong { font-size: 15px; }

form input[type=radio] + label.radio-img-full .img-box { padding: 20px; }
form input[type=radio] + label.radio-img-full img { max-height: 60px; width: auto; }
form input[type=radio] + label.radio-img-full .text-box { font-size: 15px; }

}


.preloader { width: 100%; text-align: center}
.preloader svg { width: 80px; height: 80px; margin: 20px; display:inline-block; }
.preloader svg circle { fill:#fff }
.preloader.dark svg circle { fill:#2436D5 !important; color: #2436D5 }


.progress-bar {
  display: block;
  height: 4px;
  width: 100%;
  position: absolute;
  top:0; left: 0; right: 0;
  overflow: hidden;
  background-color: #ddd;
  z-index: 1000;
}
.progress-bar:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #0089ff;
  animation: progressloader 2s linear infinite;
}

@keyframes progressloader {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


.invalid {
    outline-color: red !important;
    -webkit-animation: shake .5s linear;
}
 @-webkit-keyframes shake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}