/* ============================================================================ /* HTML /* ============================================================================ */ *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ============================================================================ /* CSS Reset (Based on css reset by E. Meyers) /* ============================================================================ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, /*strong, em,*/ img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, /*b, u, i,*/ center, dl, dt, dd, /*ol, ul, li,*/ fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: none; } html.fullscreen, html.fullscreen body, html.fullscreen body form { width: 100%; height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, iframe { display: block; } body { font-size: 14px; font-family: arial, verdana, sans-serif; font-weight: 300; color: var(--font-color); } h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-bottom: 0.5em; } p { margin-bottom: 1em; } label { font-weight: normal; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } hr { border: 0; height: 1px; margin: 7px 0px; padding: 0px; background-color: #eaeaea; } /* ============================================================================ /* FORM ELEMENTS /* ============================================================================ */ input, textarea { vertical-align: middle; margin: 0px; padding: 6px; border: 1px solid #c6c6c6; /*font: 14px arial, verdana, sans-serif; removed to honoured bootstraps reset font: inherit similar to select and textarea */ color: #111111; outline: none; font: inherit; caret-color: var(--primary-color); /* required for ios safari */ } textarea { vertical-align: top; /* removes space under textareas */ font: inherit; } select { vertical-align: middle; padding: 6px 22px 6px 6px; border: 1px solid #c6c6c6; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHFJREFUeNpsj4ENQBEQQ2sM1jCHNcRK1rCHMVijXy/5yX35Tcql3jlAEr13rrWo2lvZGMNyg3LOLKV8YNW1VjsTbIEgD3tImRqDlr03W2vakVJCjBFzTqvPbQFHBkoeljxkuh+vUe84b/z99M7kR4ABAB2NqrTXuU7BAAAAAElFTkSuQmCC) no-repeat calc(100% - 6px) 50%; /* change this to an svg for font scaling */ -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: white; color: #111111; font: inherit; } textarea:focus, select:focus { outline: none; border-color: var(--primary-color); /* #0486c4;*/ /*background-color: #f2f8fc;*/ } /*input[readonly], textarea[readonly], select[readonly] { border: none; background-color: transparent; }*/ input[type=radio], input[type=checkbox] { vertical-align: middle; width: 16px; height: 16px; /*margin-right: 6px;*/ } input[type='text']:read-only, input[type='text']:disabled, textarea:read-only, textarea:disabled, select:disabled, .disabled, .aspNetDisabled { /*opacity: 0.7;*/ /*border: 10px solid yellow!important;*/ cursor: default!important; pointer-events: none; } input[type='text']:read-only input[type='text']:read-only, input[type='text']:disabled input[type='text']:disabled, textarea:read-only textarea:read-only, textarea:disabled textarea:disabled, select:disabled select:disabled, .disabled .disabled, .aspNetDisabled .aspNetDisabled { /*opacity: 1!important;*/ } /* ============================================================================ /* Number Spinner /* ============================================================================ */ .input--number, .input--number-decrementor, .input--number-decrementor:visited, .input--number-decrementor:hover, .input--number-decrementor:active, .input--number-incrementor, .input--number-incrementor:visited, .input--number-incrementor:hover, .input--number-decrementor:active { vertical-align: middle; display: inline-block; font-size: 18px; text-align: center; text-decoration: none; color: #747474; border: 1px solid #c6c6c6; background-color: #f1f1f1; border-radius: 0px; width: 31px; height: 30px; } .input--number, .input--number:visited, .input--number:hover { background-color: white; width: 45px; color: black; } .input--number-decrementor, .input--number-decrementor:visited, .input--number-decrementor:hover { border-right: none!important; line-height: 26px; } .input--number-incrementor, .input--number-incrementor:visited, .input--number-incrementor:hover { border-left: none!important; line-height: 24px; } /* ============================================================================ /* BASIC /* ============================================================================ */ img.valign, span.valign, span.valign * { display: inline-block; vertical-align: middle; } div.valign { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .inline-block { display: inline-block; } .cursor--pointer, .cursor-pointer { cursor: pointer; } .cursor--help, .cursor-help { cursor: help; } /* ============================================================================ /* PAGE /* ============================================================================ */ .a4-width { width: 210mm; } .a4-height { width: 297mm; } .a4 { width: 210mm; height: 297mm; } .page-break, .page-break-before { page-break-before: always; /*height: 5px; background-color: yellow;*/ } .page-break-after { page-break-after: always; } .avoid-page-break-inside { break-inside: avoid; } /* background-color: red!important; }*/ /* ============================================================================ /* TYPOGRAPHY /* ============================================================================ */ .text-10px { font-size: 10px!important; } .text-11px { font-size: 11px!important; } .text-12px { font-size: 12px!important; } .text-13px { font-size: 13px!important; } .text-14px { font-size: 14px!important; } .text-15px { font-size: 15px!important; } .text-16px { font-size: 16px!important; } .text-17px { font-size: 17px!important; } .text-18px { font-size: 18px!important; } .text-19px { font-size: 19px!important; } .text-20px { font-size: 20px!important; } .text-21px { font-size: 21px!important; } .text-22px { font-size: 22px!important; } .text-23px { font-size: 23px!important; } .text-24px { font-size: 24px!important; } .text-25px { font-size: 25px!important; } .text-26px { font-size: 26px!important; } .text-27px { font-size: 27px!important; } .text-28px { font-size: 28px!important; } .text-29px { font-size: 29px!important; } .text-30px { font-size: 30px!important; } .text-40px { font-size: 40px!important; } .text-1em { font-size: 1em!important; } .text-11em { font-size: 1.1em!important; } .text-12em { font-size: 1.2em!important; } .text-13em { font-size: 1.3em!important; } .text-14em { font-size: 1.4em!important; } .text-15em { font-size: 1.5em!important; } .text-16em { font-size: 1.6em!important; } .text-11em { font-size: 1.7em!important; } .text-18em { font-size: 1.8em!important; } .text-tiny { font-size: 0.75em!important; } .text-small { font-size: 0.88em!important; } .text-medium { font-size: 1.3em!important; } .text-large { font-size: 1.8em!important; } .text-xlarge { font-size: 2.2em!important; } .text-bold { font-weight: bold; } .text-italic { font-style: italic; } .text-uppercase { text-transform: uppercase; } .text-decoration-none, .text-no-underline { text-decoration: none!important; } .text-linethrough { text-decoration: line-through!important; } .text-right, .text-right { text-align: right!important; } .text-left, text-left { text-align: left!important; } .text-center, .text-center { text-align: center!important; } .text-vertical-middle, .text-vertical-middle { vertical-align: middle!important; } /* THESE ARE COMMON DEFAULT COLOURS. DO NOT ADD YOUR OWN RANDOM PROJECT COLOUR CLASSES HERE!!!!!!!!! */ .text-fill { color: var(--fill-color); } .text-fill--hover:hover { color: var(--fill-color)!important; } .text-inherit, .text-inherit { color: inherit; text-decoration: inherit; } .text-inherit\:hover:hover { color: inherit!important; } .text-current, .text-current { color: currentColor; text-decoration: inherit; } .text-current:hover { color: currentColor!important; } .text-grey { color: #ccc; } .text-grey\:hover:hover { color: #ccc!important; } .text-primary { color: var(--primary-color); } .text-primary--hover:hover, .text-primary\:hover:hover { color: var(--primary-color)!important; } .text-secondary { color: var(--secondary-color); } .text-secondary--hover:hover, .text-secondary\:hover:hover { color: var(--secondary-color)!important; } .text-tertiary { color: var(--primary-color); } .text-tertiary--hover:hover, .text-tertiary\:hover:hover { color: var(--tertiary-color)!important; } .text-quaternary { color: var(--quaternary-color); } .text-quaternary--hover:hover, .text-quaternary\:hover:hover { color: var(--quaternary-color)!important; } .text-danger, .text-error, .text-red, .text-red, .text-red--hover:hover { color: var(--danger); } .text-amber, .text-amber { color: #eb7400; } .text-purple, .text-purple { color: #9b26b6; } .text-success, .text-green, .text-green, .text-green--hover:hover { color: var(--success); } .text-blue, .text-blue { color: #0d3e71; } .text-light-blue, .text-light-blue { color: #259be2; } .text-yellow, .text-yellow { color: #ffe616; } .text-white, .text-white, .text-white--hover:hover { color: #ffffff; } .text-soft { opacity: 0.85!important; } .text-muted { opacity: 0.7!important; } .text-muted\:hover:hover { opacity: 0.7!important; } .text-soft { opacity: 0.5!important; } .text-subtle, .text-extra-muted { opacity: 0.3!important; } .text-unmuted, .text-unmuted--hover:hover { opacity: unset!important; } .success { color: #3ebd26; font-weight: bold; } .error { color: #c80000; font-weight: bold; } .form-error { color: #c80000; font-weight: bold; } @media all and (max-width: 479px) { .text-tiny--m { font-size: 0.75em; } .text-small--m { font-size: 0.88em; } .text-medium--m { font-size: 1.3em; } .text-large--m { font-size: 1.8em; } } /* ============================================================================ /* IMAGES /* ============================================================================ */ .image--round { border-radius: 50%; } .image--framed { border: 3px double #cccccc; } .icon-13x13 { position: relative; top: 2px; margin: -13px 3px 0px 0px; width: 13px; height: 13px; } .icon-16x16 { position: relative; top: 2px; margin: -16px 6px 0px 0px; width: 16px; height: 16px; } /* ============================================================================ /* TABLES /* ============================================================================ */ .e-table { border-spacing: 0px; width: 100%; /* added back in as it broke all table widths! */ } .e-table--cell-bordered { background-color: #eeeeee; border-spacing: 1px; border-collapse: separate; } .e-table.e-table--cell-bordered td { background-color: white; } .e-table > thead > tr > th, .e-table > tbody > tr > th { background: #f3f3f3 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAMAAABc3/ZbAAAAJ1BMVEX+/v74+Pj19fX8/Pz5+fnz8/P9/f36+vr39/f09PT7+/v29vb///8R9kRfAAAAJUlEQVQI1x3BAQIAEAgEwSMh/P+9tmb0lNOk8dTFwcbNWzuDLv8WFwC++NuhzwAAAABJRU5ErkJggg==) repeat-x left top; } .e-table > thead > tr > th, .e-table > tbody > tr > th, .e-table > tbody > tr > td, .e-table > tfoot > tr > td { padding: 3px 10px; min-height: 33px; } .e-table > thead > tr > th, .e-table > tbody > tr > th, .e-table.table--has-inputs > tbody > tr > td, .e-table.table--has-inputs > tfoot > tr > td { height: 46px; /* works like min-height because it's on td - we need rows to be same height even if no input elements are in them */ } .e-table.table--tight > thead > tr > th, .e-table.table--tight > tbody > tr > td, .e-table.table--tight > tfoot > tr > td { padding: 5px 10px; } .e-table > thead > tr > th, .e-table > tbody > tr > th { border-top: 1px solid #eeeeee; border-bottom: 1px solid #e4e4e4; text-align: left; font-weight: bold; color: #444444; } .e-table.e-table--bordered { border: 1px solid #eeeeee; } .e-table.e-table--bordered--top { border-top: 1px solid #eeeeee; } .e-table.e-table--divided > tbody > tr:not(.e-table__tr--no-divider)/*:not(:last-child)*/ > td, .e-table.e-table--divided > tfoot > tr:not(.e-table__tr--no-divider)/*:not(:last-child)*/ > td { border-bottom: 1px solid #eeeeee; } /*.e-table.e-table--divide-head > tbody > tr:first-child > td { border-top: 1px solid #eeeeee; } .e-table.e-table--divide-foot > tbody > tr:first-child > td { border-bottom: 1px solid #eeeeee; }*/ .e-table__tr__td--divided-right { border-right: 1px solid #eeeeee; } .e-table__tr__td--striped { background-color: #f9f9f9!important; } .e-table.e-table--striped > tbody > tr:nth-child(even), tr.striped { background-color: #f9f9f9; } .e-table.e-table--striped--dark > tbody > tr:nth-child(even), tr.striped--dark { background-color: #eeeeee; } .e-table > tbody > tr.featured { background-color: #e1f0f5; padding: 0px 10px; } .e-table > tbody > tr.thick-border td { border-bottom-width: 7px!important; } /*.e-table.e-table--divided > tfoot > tr > td { background-color: #e1f0f5; padding: 0px 10px; }*/ table td input[type=text], table td input[type=password], table td textarea, table td select { width: 100%; max-width: 600px; } table td.label { vertical-align: top; padding-top: 12px!important; line-height: 2.5em; } table td.top, table th.top { vertical-align: top; } table td.middle, table th.middle { vertical-align: middle; } /* ============================================================================ /* FORMS /* ============================================================================ */ /*
Form Heading
Some cool cat content goes here...
*/ .row-group-header { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding: 7px 10px; font-weight: bold; } .row-group { container: rowgroup / inline-size; } .row-group.divided .row-group__row:not(:first-child), .row-group--divided--top { border-top: 1px solid #dddddd; } .row-group--divided .row-group__row:not(:last-child), .row-group--divided--bottom { border-bottom: 1px solid #dddddd; } .row-group--divided .row-group__row, .row-group--striped .row-group__row { padding: 7px 10px; } .row-group:not(.row-group--divided):not(.row-group--striped) .row-group__row:not(:last-child) > div { margin-bottom: 7px; } .row-group.row-group--striped .row-group__row:nth-child(odd) { background-color: rgba(0, 0, 0, 0.03); } .row-group__row:before, .row-group__row:after { content: " "; display: table; } .row-group__row:after { clear: both; } .row-group__row:not(:last-child) { margin-bottom: 7px; } .row-group__row { /*max-width: 700px; dont use this but wrap manually*/ } .row-group__row > label { display: block; margin-bottom: 2px; } .row-group__row > div { display: block; } .row-group__row > div input[type=email], .row-group__row > div input[type=password], .row-group__row > div input[type=text], .row-group__row > div select, .row-group__row > div textarea { width: 100%; /*border-radius: 4px; padding: 12px; margin-bottom: 8px;*/ } @container rowgroup (min-width: 768px) { .row-group__row:not(.row-group__row--block-label) > label { float: left; width: 25%; padding-top: 7px; } .row-group__row:not(.row-group__row--block-label) > div { float: left; width: 75%; } .row-group__row:not(.row-group__row--block-label).row-group__row--no-label > div { float: left; margin-left: 25%; } } /* ============================================================================ /* LISTS /* ============================================================================ */ ul, ol { margin: 0px; padding: 0px 0px 0px 17px; } ul li:not(:last-child), ol li:not(:last-child) { margin-bottom: 3px; } .ul--no-bullets { padding-left: 0px; } .ul--no-bullets li { list-style-type: none; } /*ul.formatted { } ul.formatted li { list-style-type: disc; margin-left: 20px; }*/ /* ============================================================================ /* Panels /* ============================================================================ */ .e-panel { /*padding: 0px 10px; min-width: 960px; overflow: auto;*/ display: block; /*background-color: white;*/ } .e-panel--bordered { border: 1px solid #c6c6c6; } .e-panel--bordered-top { border-top: 1px solid #c6c6c6; } .e-panel--bordered-right { border-right: 1px solid #c6c6c6; } .e-panel--bordered-bottom { border-bottom: 1px solid #c6c6c6; } .e-panel--bordered-bottom--light:not(:last-child) { border-bottom-color: #eeeeee; } .e-panel--bordered-left { border-left: 1px solid #c6c6c6; } .e-panel--filled { background-color: #f9f9f9; } .e-panel--filled-dark { background-color: #f3f3f4; } .e-panel--white { background-color: white; } .e-panel--black { background-color: black; } .e-panel--hover:hover { background-color: #d9f0fb; } .e-panel__block { background-color: rgba(0, 0, 0, 0.025); border-bottom: 1px solid #c6c6c6; } .e-panel--highlighted, .e-panel--highlighted .e-panel { border-color: var(--primary-color)!important; background-color: #f2f8fc!important; position: relative; } .e-panel--highlighted .e-panel--filled { background-color: #e6f2fa!important; } /* ============================================================================ /* Border Radius /* ============================================================================ */ .e-border-radius { border-radius: var(--border-radius); } .e-radius-1, .radius--1 { border-radius: 1px; } .e-radius-2, .radius--2 { border-radius: 2px; } .e-radius-5, .radius--5 { border-radius: 5px; } .e-radius-8, .radius--8 { border-radius: 8px; } .e-radius-10, .radius--10 { border-radius: 10px; } /* ============================================================================ /* PILLS /* ============================================================================ */ .pill { background-color: #f50057; font: bold 12px arial, verdana, sans-serif; color: white; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; padding: .25em .54em .25em .5em; } .pill--muted { background-color: rgba(0, 0, 0, 0.125); color: #353535; } .pill--font { background-color: var(--font-color); color: white; } .pill--fill { background-color: var(--fill-color); } .pill--primary { background-color: var(--primary-color); } .pill--secondary { background-color: var(--secondary-color); } .pill--tertiary { background-color: var(--tertiary-color); } .pill--quaternary { background-color: var(--quaternary-color); } /* ======================================================================== */ /* ============================================================================ /* Tabs /* ============================================================================ */ .linkedlist-tabs { } .linkedlist-tabs > ul, .linkedlist-tabs > ul > li { margin: 0px; padding: 0px; list-style-type: none; position: relative; z-index: 1; } .linkedlist-tabs > ul > li > a, .linkedlist-tabs__content > a { display: block; text-decoration: none; border: 1px solid #c1c1c1; color: #585858!important; outline: none; background-color: #F8F8F8; padding: 10px; } .linkedlist-tabs > ul > li.selected > a { background-color: white; transition: box-shadow 0.1s; } .linkedlist-tabs__content { border: 1px solid #c1c1c1; background-color: white; position: relative; } /*.linkedlist-tabs__content > div { padding: 5px; }*/ .linkedlist-tabs__content > a { color: black; border-left: none; border-right: none; margin-bottom: -1px; display: none; /* Responsive Links */ } .linkedlist-tabs__content > a:first-child { border-top: none; } .linkedlist-tabs__content > a.selected { background-color: #eaeaea; } @media all and (max-width: 479px) { .linkedlist-tabs--responsive > ul { display: none; } .linkedlist-tabs--responsive .linkedlist-tabs__content { z-index: 0; left: 0!important; overflow: visible!important; /* use !important to override horizontal/vertical layout styles that have higher specifity */ } .linkedlist-tabs--responsive .linkedlist-tabs__content > a { display: block; } } .linkedlist-tabs--horizontal > ul { overflow: auto; } .linkedlist-tabs--horizontal > ul > li { float: left; } .linkedlist-tabs--horizontal > ul > li > a { border-right: none; } .linkedlist-tabs--horizontal > ul > li:last-child > a { border-right: 1px solid #c1c1c1; } .linkedlist-tabs--horizontal > ul > li > a:hover { box-shadow: 0px 2px #c1c1c1 inset; } .linkedlist-tabs--horizontal > ul > li.selected > a { border-bottom-color: white; box-shadow: 0px 3px var(--primary-color) inset; } .linkedlist-tabs--horizontal .linkedlist-tabs__content { margin-top: -1px; } .linkedlist-tabs--vertical > ul { float: left; width: 260px; } .linkedlist-tabs--vertical > ul > li > a { border-bottom: none; } .linkedlist-tabs--vertical > ul > li:last-child > a { border-bottom: 1px solid #c1c1c1; } .linkedlist-tabs--vertical > ul > li > a:hover { box-shadow: 2px 0px #c1c1c1 inset; } .linkedlist-tabs--vertical > ul > li.selected > a { border-right-color: white; box-shadow: 3px 0px var(--primary-color) inset; } .linkedlist-tabs--vertical .linkedlist-tabs__content { overflow: auto; left: -1px; } /* ============================================================================ /* BUTTONS /* ============================================================================ */ .button, .button:visited { vertical-align: middle; font-weight: normal; background-color: #efefef; border-radius: var(--border-radius); /* was 5px */ color: #555555; cursor: pointer; display: inline-block; padding: 7px 14px; /* 6px padding + 1px border = input calc(var(--spacing) / 2) var(--spacing); */ text-align: center; /*white-space: nowrap;*/ text-decoration:none !important; transition: background-color ease-in 0.15s; /*-webkit-transition: background-color 3000ms ease-in-out; -moz-transition: background-color 250ms ease-in-out; -o-transition: background-color 250ms ease-in-out; -ms-transition: background-color 250ms ease-in-out; transition: background-color 150ms ease-in-out, background-image 150ms ease-in-out;*/ /*background: #e7e7e7 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAFUlEQVQI12P4x8TA9B8NMjBhiqLxAY1cGB1WEmChAAAAAElFTkSuQmCC) repeat-x;*/ /*border-color: #c6c6c6;*/ } .button:hover { color: #555555; /*background-color: #dddddd; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAG0lEQVQI12P4wsTA9B8NMjD9Y2Jg+o8ig6YKAHBRFxSJpr2ZAAAAAElFTkSuQmCC);*/ text-decoration:none !important; } .button.aspNetDisabled, .button[disabled] { opacity: 0.5; pointer-events: none; } .button--fill, .button--fill:visited { color: var(--fill-color-text); background-color: var(--fill-color); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--fill:hover, .button--fill--hover:hover { color: var(--fill-color-text); background-color: var(--fill-color-hover); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--black, .button--black:visited { color: white; background-color: #222222; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--black:hover, .button--black--hover:hover { color: white; background-color: black; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--standard, .button--standard:visited { color: white; background-color: #2a2a2a; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--standard:focus, .button--standard:hover, .button--standard--hover:hover { color: white; background-color: black; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--red, .button--red:visited { color: white; background-color: #be3730; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEXNQz3sXVnQRkDUSUTaTknDOzTJQDnfUk3RRkHGPjfMQzzTSUPmWFPXS0bKQDrBOjO+NzDoWlbbT0rhVE/lV1PYTEfeUUzvfXq/ODHFPTbpW1fiVVDOr4/LAAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7L5FKLD7JZcOq9T7bGoTHolRqvWIGhsfnsGLHABex49MnoAAAAASUVORK5CYII=);*/ } .button--red:focus, .button--red:hover, .button--red--hover:hover { color: white; background-color: #b1332d; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEW/PzmyNC7CQTzXUk3LSUS9PDa+PzjFRD/DQT3ZVVHSTkrMSkW2NzG4OTLcV1PPTEfTT0vGRD/ZVFDfdXLWUU3JRkG0NjCxMy25OjPQTUi8PDXKR0KDflw2AAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7K5rAanym03CjaTWvI4dHolWo3ot5i9Cl8GKigBe0Ma0PwAAAAASUVORK5CYII=);*/ } .button--amber, .button--amber:visited { color: white; background-color: #f37504; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEXNQz3sXVnQRkDUSUTaTknDOzTJQDnfUk3RRkHGPjfMQzzTSUPmWFPXS0bKQDrBOjO+NzDoWlbbT0rhVE/lV1PYTEfeUUzvfXq/ODHFPTbpW1fiVVDOr4/LAAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7L5FKLD7JZcOq9T7bGoTHolRqvWIGhsfnsGLHABex49MnoAAAAASUVORK5CYII=);*/ } .button--amber:focus, .button--amber:hover, .button--amber:hover { color: white; background-color: #f37504; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEW/PzmyNC7CQTzXUk3LSUS9PDa+PzjFRD/DQT3ZVVHSTkrMSkW2NzG4OTLcV1PPTEfTT0vGRD/ZVFDfdXLWUU3JRkG0NjCxMy25OjPQTUi8PDXKR0KDflw2AAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7K5rAanym03CjaTWvI4dHolWo3ot5i9Cl8GKigBe0Ma0PwAAAAASUVORK5CYII=);*/ } .button--highlight, .button--highlight:visited, .button--green, .button--green:visited { color: white; background-color: #65bf4e; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEUvtzMyujZS3FRT31U4wTw1vjlK1E0utTM7xD8+x0IrsjBO2FBH0UpEzkdBy0QsszFL1U5N2VA/yEJI0ksxuTU8xT9Fz0g3wDtCzEVR21N25Xc0vTiwPohrAAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7KJKqXgMNm1LrPX4rc6DR692qeRFG50NmMGLAYBe36akwwAAAAASUVORK5CYII=);*/ } .button--highlight:focus, .button--highlight:hover, .button--highlight--hover:hover, .button--green:focus, .button--green:hover, .button--green--hover:hover { color: white; background-color: #28a82d; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEUpqC4xsjU6uz41tjg4uTtBw0RHyElNz080tTgurjIoqC0+wEEvrzNIzEtv2HBDxUYsrDBAwkMyszY9v0ArqjA4uDtMzk5O0lBJy0s7vD5ExkdGyEhajpNAAAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7JZfTqvxa+VRJvGYXIJSrVHpXcqzAa7G2MGLn4Be+ekcO0AAAAASUVORK5CYII=);*/ } .button--primary, .button--primary:visited { color: white; background-color: var(--primary-color); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--primary:focus, .button--primary:hover, .button--primary--hover:hover { color: var(--primary-color-text); background-color: var(--primary-color-hover); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--secondary, .button--secondary:visited { color: white; background-color: var(--secondary-color-hover); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--secondary:focus, .button--secondary:hover, .button--secondary--hover:hover { color: var(--secondary-color-text); background-color: var(--secondary-color-hover); /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--tertiary, .button--tertiary:visited { color: white; background-color: #222222; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUGl9wGmuAGmN0FicgFi8oFkNIFjM0Gm+EGltwGk9cGnOI4sOkFiMcFicoEh8UGnOMEjs4GlNkGltoGm+IEh8cFj9IFhsUGmd4EjtAEjMwFktW+zPi/AAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obCZbEaXTuFTonc6DGLeePx2raC2qMxuqzcBJscBesqwcysAAAAASUVORK5CYII=);*/ } .button--tertiary:focus, .button--tertiary:hover, .button--tertiary--hover:hover { color: white; background-color: black; /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAUVBMVEUFicgFjs4FerMEgb0Fgr8FhsQEgbsFiMgFjc0Ff7sFiskFjMwFg78zoNQFfbYFjs8FfLUFfbgEe7MFiMYFjc4Fi8oEf7oFh8UFfrgEe7UFhcLHX/ThAAAAL0lEQVR4AQ3BhQGAIAAAsNndofD/obBZbAq33uQxonP5NGI+q1Vag9fvsNoFpzIBJz0Bej/ymQcAAAAASUVORK5CYII=);*/ } .button--disabled { opacity: 0.5; cursor: default!important; } .button--small { padding: 2px 7px 3px 7px; } /* ============================================================================ */ .icon-button, .icon-button:visited { display: inline-block; vertical-align: top; width: 85px; height: 85px; padding: 5px; background-color: #fcfcfc; border: 1px solid #dadada; text-align: center; margin-bottom: 10px; text-decoration: none; color: #555555; font-size: 11px; line-height: 11px; -moz-transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .icon-button:hover { background-color: white; /* #eeeeee */ } .icon-button img { margin-bottom: 5px; } .icon-button:hover img { transform: scale(0.9,0.9); -ms-transform: scale(0.9,0.9); -webkit-transform: scale(0.9,0.9); -o-transform: scale(0.9,0.9); -moz-transform: scale(0.9,0.9); } /* ============================================================================ */ .html-link-button { border-radius: 3px; border: 1px solid #37acdd; padding: 13px 20px; transition: all 0.2s ease; } .html-link-button:hover { border: 1px solid #006d9b; } /* ============================================================================ /* Dropzone /* ============================================================================ */ .dropzone { background: url('/EtellectCommon/Automate/images/holders/dropzone.jpg') no-repeat center center #eee; height: 150px; border: 1px solid #c6c6c6; padding: 20px; margin-bottom: -1px; } /* ============================================================================ /* Power /* ============================================================================ */ .power { display: inline-block; vertical-align: top; height: 18px; width: 18px; border-radius: 50%; box-shadow: inset 0px 0px 1px rgba(255,255,255,0.5); } .power.power--green { background: #2bb230 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhJREFUeNpsiUEKwCAMBMPi/1/Rfq+gBDwkm2hF6aWn2ZmV67mRklBXKBXV29rVWpleundYGCICmfmRL2U6F0n+/NtDTh8CDAD0ZU5IVLkP3QAAAABJRU5ErkJggg==') repeat-x; border: 2px solid #2bb230; } .power.power--amber { background: #db8300 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUeNpi+n9lJhMDAwPT/z8/mP79/sb0/9cnpr8/PzL9B+J/Pz9A2D+AYkDx/yD5vz/A6snEAAEGAGOJIsaeNZ05AAAAAElFTkSuQmCC') repeat-x; border: 2px solid #db8300; } .power.power--red { background: #be3730 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAMAAACXgyX+AAAAVFBMVEXNQz31qKbQRkDUSUTaTknDOzTJQDnthIDTSUPGPjfMQzzRRkHqd3TXS0bmamXKQDrBOjO+NzDbT0rYTEfeUUz3urnjX1q/ODHFPTbynZrwkY7gVVAX91IVAAAAL0lEQVR4AQXBhQGAIAAAsNndocD/f7J5FIKoM1u9ktupdllUepMSo01r8GvsPkcGLAgBe4b3SCwAAAAASUVORK5CYII=') repeat-x; border: 2px solid #be3730; } .power.power--blue { background: #206ca3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhJREFUeNpUi9EJwDAQQov7j9GFukghEBqanJojHyX9kKeoOK8b9oH6RoooLZYvz0DtROuBEYKk3HkjYSWtRZL/fs/6/lOAAQB15FGPF7Un9QAAAABJRU5ErkJggg==') repeat-x; border: 2px solid #206ca3; } .power.power--grey { background: #c6c6c6 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpiev/+PRMDAwPT379/mf79+wfHMP7////BNCMjI1gdDIPEkfnoGFkepBfKBwgwAGX8I9DQrIwUAAAAAElFTkSuQmCC') repeat-x; border: 2px solid #c6c6c6; } /* ============================================================================ /* PROGRESS BAR /* ============================================================================ */ .ecc-progress, .ecc-progress:visited, .ecc-progress:hover { display: block; margin-bottom: 5px; text-decoration: none; } .ecc-progress__bar { width: 100%; background-color: #efefef; /*display: none;*/ border-bottom: 1px solid #0486c4; } .ecc-progress__bar.ecc-progress__bar--red { border-bottom-color: #b30203; } .ecc-progress__bar.ecc-progress__bar--amber { border-bottom-color: #f37504; } .ecc-progress__bar.ecc-progress__bar--green { border-bottom-color: #2bb230; } .ecc-progress__bar__fill { box-sizing: border-box; white-space: nowrap; width: 100%; text-align: right; min-width: 55px; background-color: #0486c4; color: #9ed6f1; padding: 5px 5px 3px 5px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAMAAADXJhpaAAAACVBMVEX///////////+OSuX+AAAAA3RSTlMABhMokiKGAAAANElEQVQ4y+3QIQ4AMAyAQMr/Hz09gd+SSnIORlUHgCtIGVIkRVIkRVIkRVJeid27e//dewA/hQRhiDcnFQAAAABJRU5ErkJggg==); } .ecc-progress__bar.ecc-progress__bar--red .ecc-progress__bar__fill { color: #ff9c9d; background-color: #b30203; } .ecc-progress__bar.ecc-progress__bar--amber .ecc-progress__bar__fill { color: #ffcc9f; background-color: #f37504; } .ecc-progress__bar.ecc-progress__bar--green .ecc-progress__bar__fill { color: #b1f5b3; background-color: #2bb230; } .ecc-progress__bar__fill__loader { float: left; margin-top: -1px; height: 16px; width: 16px; background-image: url(data:image/gif;base64,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); } .ecc-progress__bar__fill__text { font-weight: bold; } .ecc-progress__text { font-size: 11px; color: #808080; padding: 2px 0px; } /* ============================================================================ /* SITEMAP /* ============================================================================ */ .sitemap { } .sitemap ul { margin: 0px; padding: 0px; list-style-type: none; } .sitemap ul li { margin: 0px; padding: 0px 0px 0px 22px; } .sitemap > ul > li { padding-left: 0px; } /*.sitemap > ul > li > ul > li { padding-left: 2px; }*/ .sitemap ul li a, .sitemap ul li a:visited { display: block; margin-bottom: 2px; text-decoration: none; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAElBMVEU7OztBQUFCQkJNTU3///87Ozujh77OAAAABXRSTlMAAAAAAMJrBrEAAAAzSURBVHjaXctBEgAgCEJRKrj/lbM/rHIU3kb5TSidtZ1Es2MjDIUhZ1F9KBFkhNX0b5MXcRMBtBFcUbQAAAAASUVORK5CYII=) no-repeat left center; padding: 0px 0px 2px 20px; border-bottom: 1px solid #efefef; } .sitemap ul li a:hover { text-decoration: underline; } .sitemap ul li ul li a { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAElBMVEVhYWFhYWFhYWFhYWFhYWFhYWE/nNjeAAAABXRSTlMAYLj1+gajUOAAAAAlSURBVAgdBcGBDQAwDIMwSP8/eWK2qJWe0JsCOgFwAdAKKFGrD0laDg0pdtO7AAAAAElFTkSuQmCC); } .sitemap ul li ul li ul li a { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAADFBMVEVhYWFhYWFhYWFhYWG43/uPAAAAA3RSTlM4oPDDtD4DAAAAG0lEQVR4AWNgYGRiBBLMzMyMDExAkgnChogDAAKjACw+EO9VAAAAAElFTkSuQmCC); } /* ============================================================================ /* FORMATTING STYLES /* ============================================================================ */ .none { float: none!important; } .right { float: right!important; } .left { float: left!important; } .center { margin-left: auto!important; margin-right: auto!important; } .overflow-auto { overflow: auto!important; } /* stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width?lq=1 */ .overflow-y { overflow-y: auto; } .overflow-x { overflow-x: auto; } .overflow-hidden { overflow: hidden; } .muted { opacity: 0.5!important; /*color: #bbbbbb!important;*/ } .no-wrap { white-space: nowrap!important; } .break-word { word-break: break-word; } /* breaks very long words at container max size instead of breaking out of structure */ .e-round { border-radius: 999px; } .e-flex { display: flex!important; } .e-inline-flex { display: inline-flex!important; } /*.e-flex-grow { flex: 1; }*/ .e-flex-wrap { flex-wrap: wrap; } .e-flex-auto { flex: 1!important; } .e-flex-grow { flex-grow: 1!important; } .e-flex-nogrow { flex-grow: 0!important; } .e-flex-shrink { flex-shrink: 1!important; } .e-flex-noshrink { flex-shrink: 0!important; } .e-flex-align-start { align-items: flex-start!important; } .e-flex-align-center { align-items: center!important; } .e-flex-align-self-center { align-self: center!important; } .e-flex-align-end { align-items: flex-end!important; } .e-flex-align-self-end { align-self: center!important; } .e-flex-justify-center { justify-content: center!important; } .e-flex-column { flex-direction: column; } .e-block { display: block!important; } .e-inline { display: inline!important; } .e-inline--bottom { display: inline!important; vertical-align: bottom!important; } .e-inline--block, .e-inline-block { display: inline-block!important; } .hidden { display: none!important; } .e-position-absolute, .absolute { position: absolute; } .e-position-relative, .relative { position: relative; } .vtop { vertical-align: top; } .vmiddle { vertical-align: middle; } .vbottom { vertical-align: top; } .hleft { text-align: left; } .hcenter { text-align: center; } .hright { text-align: right; } .background-fixed { background-attachment: fixed; } .background-cover { background-size: cover; background-position: center center; } .background-contain { background-size: contain; background-position: center center; } .stretcher { overflow: hidden!important; } .fill { background-color: var(--fill-color); color: var(--fill-color-text); } .fill-primary { background-color: var(--primary-color); color: var(--primary-color-text); } .fill-secondary { background-color: var(--secondary-color); color: var(--secondary-color-text); } .fill-tertiary { background-color: var(--tertiary-color); color: var(--tertiary-color-text); } .fill-quaternary { background-color: var(--quaternary-color); color: var(--quaternary-color-text); } .fill-red { background-color: #c80000; color: white; } .fill-amber { background-color: #eb7400; color: white; } .fill-green { background-color: #1cad00; color: white; } .fill-white { background-color: white; } @media all and (max-width: 479px) { .m\:e-flex { display: flex!important; } .m\:e-flex-wrap { flex-wrap: wrap!important; } .m\:e-flex-column { flex-direction: column!important; } .m\:e-flex-column-reverse { flex-direction: column-reverse!important; } .m\:e-flex-align-center { align-items: center!important; } .m\:e-flex-justify-center { justify-content: center!important; } .m\:e-block, .block--m, .e-block--m { display: block!important; } .mobile-block, .mobile-block { float: none; width: 100%!important; } .text-left--m { text-align: center!important; } .text-center--m, .text-center-m { text-align: center!important; } .text-right--m { text-align: center!important; } .none--m { float: none!important; } .background-fixed { background-attachment: scroll; } /* IOS goes crazy with fixed backgrounds as it scales them to the body height which will be very high */ } @media all and (max-width: 568px) { .block--ml, .e-block--ml { display: block!important; } .text-center--ml, .text-center-ml { text-align: center!important; } .none--ml { float: none!important; } } @media all and (max-width: 767px) { .block--ts, .e-block--ts { display: block!important; } .text-center--ts, .text-center--ts { text-align: center!important; } .none--ts { float:none!important; } } @media all and (max-width: 959px) { .t\:e-flex { display: flex!important; } .t\:e-flex-wrap { flex-wrap: wrap!important; } .t\:e-flex-column { flex-direction: column!important; } .t\:e-flex-column-reverse { flex-direction: column-reverse!important; } .t\:e-flex-align-center { align-items: center!important; } .t\:e-flex-justify-center { justify-content: center!important; } .t\:e-block, .block--t, .e-block--t { display: block!important; } .text-center--t, .text-center--t { text-align: center!important; } .text-left--t { text-align:left!important; } .none--t { float: none!important; } } /* ============================================================================ /* ASP.NET Specific /* ============================================================================ */ /*.aspNetDisabled { opacity: 1.0!important; cursor: auto; }*/ .aspNetCheckbox input { vertical-align: middle; } .aspNetCheckbox label { vertical-align: middle; margin-left: 7px; } .aspNetCheckboxList input { vertical-align: middle; } .aspNetCheckboxList label { vertical-align: middle; margin-left: 7px; } /* ============================================================================ /* Clearing /* ============================================================================ */ /* .cf:before, .cf:after, .clearfix:before, /* Self element clearing * .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .cf:after, .clearfix:after { clear: both; } .cf, .clearfix { zoom: 1; } .clear { /* Post element clearing * clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }*/ .cf, clear, clearfix { clear: both; } .cf:after, .clear:after, .clearfix:after { content: '\0020'; display: table; clear: both; } /* ============================================================================ /* Mobile Visiblity /* ============================================================================ */ img.responsive, img.scale-with-grid { max-width: 100%; height: auto; display: inline-block; } .button.responsive, .button.scale-with-grid { width: 100%; } .only-mobile { display: none; } .only-tablet { display: none; } @media all and (min-width: 768px) and (max-width: 959px) { div.only-tablet { display: block!important; } span.only-tablet { display: inline!important; } } @media all and (max-width: 959px) { .not-tablet { display: none; } } @media all and (max-width: 767px) { .not-mobile { display: none; } .row-mobile { display: block; } div.only-mobile { display: block } span.only-mobile { display: inline; } td.only-mobile, th.only-mobile { display: table-cell; } td.not-mobile, th.not-mobile { display: none; } img.only-mobile { display:inline; } } /* ============================================================================ /* Columns /* ============================================================================ */ .c5 { float: left; width: 5%; } .c5.m15 { width: calc( 5% - 30px); } .c5.m10 { width: calc( 5% - 20px); } .c5.m5 { width: calc( 5% - 10px); } .c10 { float: left; width: 10%; } .c10.m15 { width: calc(10% - 30px); } .c10.m10 { width: calc(10% - 20px); } .c10.m5 { width: calc(10% - 10px); } .c15 { float: left; width: 15%; } .c15.m15 { width: calc(15% - 30px); } .c15.m10 { width: calc(15% - 20px); } .c15.m5 { width: calc(15% - 10px); } .c16 { float: left; width: 16.667%; } .c16.m15 { width: calc(16.667% - 30px); } .c16.m10 { width: calc(16.667% - 20px); } .c16.m5 { width: calc(16.667% - 10px); } .c20 { float: left; width: 20%; } .c20.m15 { width: calc(20% - 30px); } .c20.m10 { width: calc(20% - 20px); } .c20.m5 { width: calc(20% - 10px); } .c25 { float: left; width: 25%; } .c25.m15 { width: calc(25% - 30px); } .c25.m10 { width: calc(25% - 20px); } .c25.m5 { width: calc(25% - 10px); } .c30 { float: left; width: 30%; } .c30.m15 { width: calc(30% - 30px); } .c30.m10 { width: calc(30% - 20px); } .c30.m5 { width: calc(30% - 10px); } .c33 { float: left; width: 33.333%; } .c33.m15 { width: calc(33.333% - 30px); } .c33.m10 { width: calc(33.333% - 20px); } .c33.m5 { width: calc(33.333% - 10px); } .c35 { float: left; width: 35%; } .c35.m15 { width: calc(35% - 30px); } .c35.m10 { width: calc(35% - 20px); } .c35.m5 { width: calc(35% - 10px); } .c40 { float: left; width: 40%; } .c40.m15 { width: calc(40% - 30px); } .c40.m10 { width: calc(40% - 20px); } .c40.m5 { width: calc(40% - 10px); } .c45 { float: left; width: 45%; } .c45.m15 { width: calc(45% - 30px); } .c45.m10 { width: calc(45% - 20px); } .c45.m5 { width: calc(45% - 10px); } .c50 { float: left; width: 50%; } .c50.m15 { width: calc(50% - 30px); } .c50.m10 { width: calc(50% - 20px); } .c50.m5 { width: calc(50% - 10px); } .c55 { float: left; width: 55%; } .c55.m15 { width: calc(55% - 30px); } .c55.m10 { width: calc(55% - 20px); } .c55.m5 { width: calc(55% - 10px); } .c60 { float: left; width: 60%; } .c60.m15 { width: calc(60% - 30px); } .c60.m10 { width: calc(60% - 20px); } .c60.m5 { width: calc(60% - 10px); } .c65 { float: left; width: 65%; } .c65.m15 { width: calc(65% - 30px); } .c65.m10 { width: calc(65% - 20px); } .c65.m5 { width: calc(65% - 10px); } .c66 { float: left; width: 66.666%; } .c66.m15 { width: calc(66.666% - 30px); } .c66.m10 { width: calc(66.666% - 20px); } .c66.m5 { width: calc(66.666% - 10px); } .c70 { float: left; width: 70%; } .c70.m15 { width: calc(70% - 30px); } .c70.m10 { width: calc(70% - 20px); } .c70.m5 { width: calc(70% - 10px); } .c75 { float: left; width: 75%; } .c75.m15 { width: calc(75% - 30px); } .c75.m10 { width: calc(75% - 20px); } .c75.m5 { width: calc(75% - 10px); } .c80 { float: left; width: 80%; } .c80.m15 { width: calc(80% - 30px); } .c80.m10 { width: calc(80% - 20px); } .c80.m5 { width: calc(80% - 10px); } .c85 { float: left; width: 85%; } .c85.m15 { width: calc(85% - 30px); } .c85.m10 { width: calc(85% - 20px); } .c85.m5 { width: calc(85% - 10px); } .c90 { float: left; width: 90%; } .c90.m15 { width: calc(90% - 30px); } .c90.m10 { width: calc(90% - 20px); } .c90.m5 { width: calc(90% - 10px); } .c95 { float: left; width: 95%; } .c95.m15 { width: calc(95% - 30px); } .c95.m10 { width: calc(95% - 20px); } .c95.m5 { width: calc(95% - 10px); } .c100 { float: left; width: 100%; } .c100.m15 { width: calc(100% - 30px); } .c100.m10 { width: calc(100% - 20px); } .c100.m5 { width: calc(100% - 10px); } @media all and (max-width: 1023px) { /* ss: screen small */ .c5--ss { float: left; width: 5%; } .c5--ss.m15 { width: calc( 5% - 30px); } .c5--ss.m10 { width: calc( 5% - 20px); } .c5--ss.m5 { width: calc( 5% - 10px); } .c10--ss { float: left; width: 10%; } .c10--ss.m15 { width: calc(10% - 30px); } .c10--ss.m10 { width: calc(10% - 20px); } .c10--ss.m5 { width: calc(10% - 10px); } .c15--ss { float: left; width: 15%; } .c15--ss.m15 { width: calc(15% - 30px); } .c15--ss.m10 { width: calc(15% - 20px); } .c15--ss.m5 { width: calc(15% - 10px); } .c16--ss { float: left; width: 16.667%; } .c16--ss.m15 { width: calc(16.667% - 30px); } .c16--ss.m10 { width: calc(16.667% - 20px); } .c16--ss.m5 { width: calc(16.667% - 10px); } .c20--ss { float: left; width: 20%; } .c20--ss.m15 { width: calc(20% - 30px); } .c20--ss.m10 { width: calc(20% - 20px); } .c20--ss.m5 { width: calc(20% - 10px); } .c25--ss { float: left; width: 25%; } .c25--ss.m15 { width: calc(25% - 30px); } .c25--ss.m10 { width: calc(25% - 20px); } .c25--ss.m5 { width: calc(25% - 10px); } .c30--ss { float: left; width: 30%; } .c30--ss.m15 { width: calc(30% - 30px); } .c30--ss.m10 { width: calc(30% - 20px); } .c30--ss.m5 { width: calc(30% - 10px); } .c33--ss { float: left; width: 33.333%; } .c33--ss.m15 { width: calc(33.333% - 30px); } .c33--ss.m10 { width: calc(33.333% - 20px); } .c33--ss.m5 { width: calc(33.333% - 10px); } .c35--ss { float: left; width: 35%; } .c35--ss.m15 { width: calc(35% - 30px); } .c35--ss.m10 { width: calc(35% - 20px); } .c35--ss.m5 { width: calc(35% - 10px); } .c40--ss { float: left; width: 40%; } .c40--ss.m15 { width: calc(40% - 30px); } .c40--ss.m10 { width: calc(40% - 20px); } .c40--ss.m5 { width: calc(40% - 10px); } .c45--ss { float: left; width: 45%; } .c45--ss.m15 { width: calc(45% - 30px); } .c45--ss.m10 { width: calc(45% - 20px); } .c45--ss.m5 { width: calc(45% - 10px); } .c50--ss { float: left; width: 50%; } .c50--ss.m15 { width: calc(50% - 30px); } .c50--ss.m10 { width: calc(50% - 20px); } .c50--ss.m5 { width: calc(50% - 10px); } .c55--ss { float: left; width: 55%; } .c55--ss.m15 { width: calc(55% - 30px); } .c55--ss.m10 { width: calc(55% - 20px); } .c55--ss.m5 { width: calc(55% - 10px); } .c60--ss { float: left; width: 60%; } .c60--ss.m15 { width: calc(60% - 30px); } .c60--ss.m10 { width: calc(60% - 20px); } .c60--ss.m5 { width: calc(60% - 10px); } .c65--ss { float: left; width: 65%; } .c65--ss.m15 { width: calc(65% - 30px); } .c65--ss.m10 { width: calc(65% - 20px); } .c65--ss.m5 { width: calc(65% - 10px); } .c66--ss { float: left; width: 66.666%; } .c66--ss.m15 { width: calc(66.666% - 30px); } .c66--ss.m10 { width: calc(66.666% - 20px); } .c66--ss.m5 { width: calc(66.666% - 10px); } .c70--ss { float: left; width: 70%; } .c70--ss.m15 { width: calc(70% - 30px); } .c70--ss.m10 { width: calc(70% - 20px); } .c70--ss.m5 { width: calc(70% - 10px); } .c75--ss { float: left; width: 75%; } .c75--ss.m15 { width: calc(75% - 30px); } .c75--ss.m10 { width: calc(75% - 20px); } .c75--ss.m5 { width: calc(75% - 10px); } .c80--ss { float: left; width: 80%; } .c80--ss.m15 { width: calc(80% - 30px); } .c80--ss.m10 { width: calc(80% - 20px); } .c80--ss.m5 { width: calc(80% - 10px); } .c85--ss { float: left; width: 85%; } .c85--ss.m15 { width: calc(85% - 30px); } .c85--ss.m10 { width: calc(85% - 20px); } .c85--ss.m5 { width: calc(85% - 10px); } .c90--ss { float: left; width: 90%; } .c90--ss.m15 { width: calc(90% - 30px); } .c90--ss.m10 { width: calc(90% - 20px); } .c90--ss.m5 { width: calc(90% - 10px); } .c95--ss { float: left; width: 95%; } .c95--ss.m15 { width: calc(95% - 30px); } .c95--ss.m10 { width: calc(95% - 20px); } .c95--ss.m5 { width: calc(95% - 10px); } .c100--ss { float: left; width: 100%; } .c100--ss.m15 { width: calc(100% - 30px); } .c100--ss.m10 { width: calc(100% - 20px); } .c100--ss.m5 { width: calc(100% - 10px); } } @media all and (max-width: 959px) { /* t: tablet */ .c5--t { float: left; width: 5%; } .c5--t.m15 { width: calc( 5% - 30px); } .c5--t.m10 { width: calc( 5% - 20px); } .c5--t.m5 { width: calc( 5% - 10px); } .c10--t { float: left; width: 10%; } .c10--t.m15 { width: calc(10% - 30px); } .c10--t.m10 { width: calc(10% - 20px); } .c10--t.m5 { width: calc(10% - 10px); } .c15--t { float: left; width: 15%; } .c15--t.m15 { width: calc(15% - 30px); } .c15--t.m10 { width: calc(15% - 20px); } .c15--t.m5 { width: calc(15% - 10px); } .c16--t { float: left; width: 16.667%; } .c16--t.m15 { width: calc(16.667% - 30px); } .c16--t.m10 { width: calc(16.667% - 20px); } .c16--t.m5 { width: calc(16.667% - 10px); } .c20--t { float: left; width: 20%; } .c20--t.m15 { width: calc(20% - 30px); } .c20--t.m10 { width: calc(20% - 20px); } .c20--t.m5 { width: calc(20% - 10px); } .c25--t { float: left; width: 25%; } .c25--t.m15 { width: calc(25% - 30px); } .c25--t.m10 { width: calc(25% - 20px); } .c25--t.m5 { width: calc(25% - 10px); } .c30--t { float: left; width: 30%; } .c30--t.m15 { width: calc(30% - 30px); } .c30--t.m10 { width: calc(30% - 20px); } .c30--t.m5 { width: calc(30% - 10px); } .c33--t { float: left; width: 33.333%; } .c33--t.m15 { width: calc(33.333% - 30px); } .c33--t.m10 { width: calc(33.333% - 20px); } .c33--t.m5 { width: calc(33.333% - 10px); } .c35--t { float: left; width: 35%; } .c35--t.m15 { width: calc(35% - 30px); } .c35--t.m10 { width: calc(35% - 20px); } .c35--t.m5 { width: calc(35% - 10px); } .c40--t { float: left; width: 40%; } .c40--t.m15 { width: calc(40% - 30px); } .c40--t.m10 { width: calc(40% - 20px); } .c40--t.m5 { width: calc(40% - 10px); } .c45--t { float: left; width: 45%; } .c45--t.m15 { width: calc(45% - 30px); } .c45--t.m10 { width: calc(45% - 20px); } .c45--t.m5 { width: calc(45% - 10px); } .c50--t { float: left; width: 50%; } .c50--t.m15 { width: calc(50% - 30px); } .c50--t.m10 { width: calc(50% - 20px); } .c50--t.m5 { width: calc(50% - 10px); } .c55--t { float: left; width: 55%; } .c55--t.m15 { width: calc(55% - 30px); } .c55--t.m10 { width: calc(55% - 20px); } .c55--t.m5 { width: calc(55% - 10px); } .c60--t { float: left; width: 60%; } .c60--t.m15 { width: calc(60% - 30px); } .c60--t.m10 { width: calc(60% - 20px); } .c60--t.m5 { width: calc(60% - 10px); } .c65--t { float: left; width: 65%; } .c65--t.m15 { width: calc(65% - 30px); } .c65--t.m10 { width: calc(65% - 20px); } .c65--t.m5 { width: calc(65% - 10px); } .c66--t { float: left; width: 66.666%; } .c66--t.m15 { width: calc(66.666% - 30px); } .c66--t.m10 { width: calc(66.666% - 20px); } .c66--t.m5 { width: calc(66.666% - 10px); } .c70--t { float: left; width: 70%; } .c70--t.m15 { width: calc(70% - 30px); } .c70--t.m10 { width: calc(70% - 20px); } .c70--t.m5 { width: calc(70% - 10px); } .c75--t { float: left; width: 75%; } .c75--t.m15 { width: calc(75% - 30px); } .c75--t.m10 { width: calc(75% - 20px); } .c75--t.m5 { width: calc(75% - 10px); } .c80--t { float: left; width: 80%; } .c80--t.m15 { width: calc(80% - 30px); } .c80--t.m10 { width: calc(80% - 20px); } .c80--t.m5 { width: calc(80% - 10px); } .c85--t { float: left; width: 85%; } .c85--t.m15 { width: calc(85% - 30px); } .c85--t.m10 { width: calc(85% - 20px); } .c85--t.m5 { width: calc(85% - 10px); } .c90--t { float: left; width: 90%; } .c90--t.m15 { width: calc(90% - 30px); } .c90--t.m10 { width: calc(90% - 20px); } .c90--t.m5 { width: calc(90% - 10px); } .c95--t { float: left; width: 95%; } .c95--t.m15 { width: calc(95% - 30px); } .c95--t.m10 { width: calc(95% - 20px); } .c95--t.m5 { width: calc(95% - 10px); } .c100--t { float: left; width: 100%; } .c100--t.m15 { width: calc(100% - 30px); } .c100--t.m10 { width: calc(100% - 20px); } .c100--t.m5 { width: calc(100% - 10px); } } @media all and (max-width: 767px) { /* ts: tablet small */ .c5--ts { float: left; width: 5%; } .c5--ts.m15 { width: calc( 5% - 30px); } .c5--ts.m10 { width: calc( 5% - 20px); } .c5--ts.m5 { width: calc( 5% - 10px); } .c10--ts { float: left; width: 10%; } .c10--ts.m15 { width: calc(10% - 30px); } .c10--ts.m10 { width: calc(10% - 20px); } .c10--ts.m5 { width: calc(10% - 10px); } .c15--ts { float: left; width: 15%; } .c15--ts.m15 { width: calc(15% - 30px); } .c15--ts.m10 { width: calc(15% - 20px); } .c15--ts.m5 { width: calc(15% - 10px); } .c16--ts { float: left; width: 16.667%; } .c16--ts.m15 { width: calc(16.667% - 30px); } .c16--ts.m10 { width: calc(16.667% - 20px); } .c16--ts.m5 { width: calc(16.667% - 10px); } .c20--ts { float: left; width: 20%; } .c20--ts.m15 { width: calc(20% - 30px); } .c20--ts.m10 { width: calc(20% - 20px); } .c20--ts.m5 { width: calc(20% - 10px); } .c25--ts { float: left; width: 25%; } .c25--ts.m15 { width: calc(25% - 30px); } .c25--ts.m10 { width: calc(25% - 20px); } .c25--ts.m5 { width: calc(25% - 10px); } .c30--ts { float: left; width: 30%; } .c30--ts.m15 { width: calc(30% - 30px); } .c30--ts.m10 { width: calc(30% - 20px); } .c30--ts.m5 { width: calc(30% - 10px); } .c33--ts { float: left; width: 33.333%; } .c33--ts.m15 { width: calc(33.333% - 30px); } .c33--ts.m10 { width: calc(33.333% - 20px); } .c33--ts.m5 { width: calc(33.333% - 10px); } .c35--ts { float: left; width: 35%; } .c35--ts.m15 { width: calc(35% - 30px); } .c35--ts.m10 { width: calc(35% - 20px); } .c35--ts.m5 { width: calc(35% - 10px); } .c40--ts { float: left; width: 40%; } .c40--ts.m15 { width: calc(40% - 30px); } .c40--ts.m10 { width: calc(40% - 20px); } .c40--ts.m5 { width: calc(40% - 10px); } .c45--ts { float: left; width: 45%; } .c45--ts.m15 { width: calc(45% - 30px); } .c45--ts.m10 { width: calc(45% - 20px); } .c45--ts.m5 { width: calc(45% - 10px); } .c50--ts { float: left; width: 50%; } .c50--ts.m15 { width: calc(50% - 30px); } .c50--ts.m10 { width: calc(50% - 20px); } .c50--ts.m5 { width: calc(50% - 10px); } .c55--ts { float: left; width: 55%; } .c55--ts.m15 { width: calc(55% - 30px); } .c55--ts.m10 { width: calc(55% - 20px); } .c55--ts.m5 { width: calc(55% - 10px); } .c60--ts { float: left; width: 60%; } .c60--ts.m15 { width: calc(60% - 30px); } .c60--ts.m10 { width: calc(60% - 20px); } .c60--ts.m5 { width: calc(60% - 10px); } .c65--ts { float: left; width: 65%; } .c65--ts.m15 { width: calc(65% - 30px); } .c65--ts.m10 { width: calc(65% - 20px); } .c65--ts.m5 { width: calc(65% - 10px); } .c66--ts { float: left; width: 66.666%; } .c66--ts.m15 { width: calc(66.666% - 30px); } .c66--ts.m10 { width: calc(66.666% - 20px); } .c66--ts.m5 { width: calc(66.666% - 10px); } .c70--ts { float: left; width: 70%; } .c70--ts.m15 { width: calc(70% - 30px); } .c70--ts.m10 { width: calc(70% - 20px); } .c70--ts.m5 { width: calc(70% - 10px); } .c75--ts { float: left; width: 75%; } .c75--ts.m15 { width: calc(75% - 30px); } .c75--ts.m10 { width: calc(75% - 20px); } .c75--ts.m5 { width: calc(75% - 10px); } .c80--ts { float: left; width: 80%; } .c80--ts.m15 { width: calc(80% - 30px); } .c80--ts.m10 { width: calc(80% - 20px); } .c80--ts.m5 { width: calc(80% - 10px); } .c85--ts { float: left; width: 85%; } .c85--ts.m15 { width: calc(85% - 30px); } .c85--ts.m10 { width: calc(85% - 20px); } .c85--ts.m5 { width: calc(85% - 10px); } .c90--ts { float: left; width: 90%; } .c90--ts.m15 { width: calc(90% - 30px); } .c90--ts.m10 { width: calc(90% - 20px); } .c90--ts.m5 { width: calc(90% - 10px); } .c95--ts { float: left; width: 95%; } .c95--ts.m15 { width: calc(95% - 30px); } .c95--ts.m10 { width: calc(95% - 20px); } .c95--ts.m5 { width: calc(95% - 10px); } .c100--ts { float: left; width: 100%; } .c100--ts.m15 { width: calc(100% - 30px); } .c100--ts.m10 { width: calc(100% - 20px); } .c100--ts.m5 { width: calc(100% - 10px); } } @media all and (max-width: 568px) { /* ml: mobile landscape */ .c5--ml { float: left; width: 5%; } .c5--ml.m15 { width: calc( 5% - 30px); } .c5--ml.m10 { width: calc( 5% - 20px); } .c5--ml.m5 { width: calc( 5% - 10px); } .c10--ml { float: left; width: 10%; } .c10--ml.m15 { width: calc(10% - 30px); } .c10--ml.m10 { width: calc(10% - 20px); } .c10--ml.m5 { width: calc(10% - 10px); } .c15--ml { float: left; width: 15%; } .c15--ml.m15 { width: calc(15% - 30px); } .c15--ml.m10 { width: calc(15% - 20px); } .c15--ml.m5 { width: calc(15% - 10px); } .c16--ml { float: left; width: 16.667%; } .c16--ml.m15 { width: calc(16.667% - 30px); } .c16--ml.m10 { width: calc(16.667% - 20px); } .c16--ml.m5 { width: calc(16.667% - 10px); } .c20--ml { float: left; width: 20%; } .c20--ml.m15 { width: calc(20% - 30px); } .c20--ml.m10 { width: calc(20% - 20px); } .c20--ml.m5 { width: calc(20% - 10px); } .c25--ml { float: left; width: 25%; } .c25--ml.m15 { width: calc(25% - 30px); } .c25--ml.m10 { width: calc(25% - 20px); } .c25--ml.m5 { width: calc(25% - 10px); } .c30--ml { float: left; width: 30%; } .c30--ml.m15 { width: calc(30% - 30px); } .c30--ml.m10 { width: calc(30% - 20px); } .c30--ml.m5 { width: calc(30% - 10px); } .c33--ml { float: left; width: 33.333%; } .c33--ml.m15 { width: calc(33.333% - 30px); } .c33--ml.m10 { width: calc(33.333% - 20px); } .c33--ml.m5 { width: calc(33.333% - 10px); } .c35--ml { float: left; width: 35%; } .c35--ml.m15 { width: calc(35% - 30px); } .c35--ml.m10 { width: calc(35% - 20px); } .c35--ml.m5 { width: calc(35% - 10px); } .c40--ml { float: left; width: 40%; } .c40--ml.m15 { width: calc(40% - 30px); } .c40--ml.m10 { width: calc(40% - 20px); } .c40--ml.m5 { width: calc(40% - 10px); } .c45--ml { float: left; width: 45%; } .c45--ml.m15 { width: calc(45% - 30px); } .c45--ml.m10 { width: calc(45% - 20px); } .c45--ml.m5 { width: calc(45% - 10px); } .c50--ml { float: left; width: 50%; } .c50--ml.m15 { width: calc(50% - 30px); } .c50--ml.m10 { width: calc(50% - 20px); } .c50--ml.m5 { width: calc(50% - 10px); } .c55--ml { float: left; width: 55%; } .c55--ml.m15 { width: calc(55% - 30px); } .c55--ml.m10 { width: calc(55% - 20px); } .c55--ml.m5 { width: calc(55% - 10px); } .c60--ml { float: left; width: 60%; } .c60--ml.m15 { width: calc(60% - 30px); } .c60--ml.m10 { width: calc(60% - 20px); } .c60--ml.m5 { width: calc(60% - 10px); } .c65--ml { float: left; width: 65%; } .c65--ml.m15 { width: calc(65% - 30px); } .c65--ml.m10 { width: calc(65% - 20px); } .c65--ml.m5 { width: calc(65% - 10px); } .c66--ml { float: left; width: 66.666%; } .c66--ml.m15 { width: calc(66.666% - 30px); } .c66--ml.m10 { width: calc(66.666% - 20px); } .c66--ml.m5 { width: calc(66.666% - 10px); } .c70--ml { float: left; width: 70%; } .c70--ml.m15 { width: calc(70% - 30px); } .c70--ml.m10 { width: calc(70% - 20px); } .c70--ml.m5 { width: calc(70% - 10px); } .c75--ml { float: left; width: 75%; } .c75--ml.m15 { width: calc(75% - 30px); } .c75--ml.m10 { width: calc(75% - 20px); } .c75--ml.m5 { width: calc(75% - 10px); } .c80--ml { float: left; width: 80%; } .c80--ml.m15 { width: calc(80% - 30px); } .c80--ml.m10 { width: calc(80% - 20px); } .c80--ml.m5 { width: calc(80% - 10px); } .c85--ml { float: left; width: 85%; } .c85--ml.m15 { width: calc(85% - 30px); } .c85--ml.m10 { width: calc(85% - 20px); } .c85--ml.m5 { width: calc(85% - 10px); } .c90--ml { float: left; width: 90%; } .c90--ml.m15 { width: calc(90% - 30px); } .c90--ml.m10 { width: calc(90% - 20px); } .c90--ml.m5 { width: calc(90% - 10px); } .c95--ml { float: left; width: 95%; } .c95--ml.m15 { width: calc(95% - 30px); } .c95--ml.m10 { width: calc(95% - 20px); } .c95--ml.m5 { width: calc(95% - 10px); } .c100--ml { float: left; width: 100%; } .c100--ml.m15 { width: calc(100% - 30px); } .c100--ml.m10 { width: calc(100% - 20px); } .c100--ml.m5 { width: calc(100% - 10px); } } @media all and (max-width: 479px) { /* m: mobile */ .c5--m { float: left; width: 5%; } .c5--m.m15 { width: calc( 5% - 30px); } .c5--m.m10 { width: calc( 5% - 20px); } .c5--m.m5 { width: calc( 5% - 10px); } .c10--m { float: left; width: 10%; } .c10--m.m15 { width: calc(10% - 30px); } .c10--m.m10 { width: calc(10% - 20px); } .c10--m.m5 { width: calc(10% - 10px); } .c15--m { float: left; width: 15%; } .c15--m.m15 { width: calc(15% - 30px); } .c15--m.m10 { width: calc(15% - 20px); } .c15--m.m5 { width: calc(15% - 10px); } .c16--m { float: left; width: 16.667%; } .c16--m.m15 { width: calc(16.667% - 30px); } .c16--m.m10 { width: calc(16.667% - 20px); } .c16--m.m5 { width: calc(16.667% - 10px); } .c20--m { float: left; width: 20%; } .c20--m.m15 { width: calc(20% - 30px); } .c20--m.m10 { width: calc(20% - 20px); } .c20--m.m5 { width: calc(20% - 10px); } .c25--m { float: left; width: 25%; } .c25--m.m15 { width: calc(25% - 30px); } .c25--m.m10 { width: calc(25% - 20px); } .c25--m.m5 { width: calc(25% - 10px); } .c30--m { float: left; width: 30%; } .c30--m.m15 { width: calc(30% - 30px); } .c30--m.m10 { width: calc(30% - 20px); } .c30--m.m5 { width: calc(30% - 10px); } .c33--m { float: left; width: 33.333%; } .c33--m.m15 { width: calc(33.333% - 30px); } .c33--m.m10 { width: calc(33.333% - 20px); } .c33--m.m5 { width: calc(33.333% - 10px); } .c35--m { float: left; width: 35%; } .c35--m.m15 { width: calc(35% - 30px); } .c35--m.m10 { width: calc(35% - 20px); } .c35--m.m5 { width: calc(35% - 10px); } .c40--m { float: left; width: 40%; } .c40--m.m15 { width: calc(40% - 30px); } .c40--m.m10 { width: calc(40% - 20px); } .c40--m.m5 { width: calc(40% - 10px); } .c45--m { float: left; width: 45%; } .c45--m.m15 { width: calc(45% - 30px); } .c45--m.m10 { width: calc(45% - 20px); } .c45--m.m5 { width: calc(45% - 10px); } .c50--m { float: left; width: 50%; } .c50--m.m15 { width: calc(50% - 30px); } .c50--m.m10 { width: calc(50% - 20px); } .c50--m.m5 { width: calc(50% - 10px); } .c55--m { float: left; width: 55%; } .c55--m.m15 { width: calc(55% - 30px); } .c55--m.m10 { width: calc(55% - 20px); } .c55--m.m5 { width: calc(55% - 10px); } .c60--m { float: left; width: 60%; } .c60--m.m15 { width: calc(60% - 30px); } .c60--m.m10 { width: calc(60% - 20px); } .c60--m.m5 { width: calc(60% - 10px); } .c65--m { float: left; width: 65%; } .c65--m.m15 { width: calc(65% - 30px); } .c65--m.m10 { width: calc(65% - 20px); } .c65--m.m5 { width: calc(65% - 10px); } .c66--m { float: left; width: 66.666%; } .c66--m.m15 { width: calc(66.666% - 30px); } .c66--m.m10 { width: calc(66.666% - 20px); } .c66--m.m5 { width: calc(66.666% - 10px); } .c70--m { float: left; width: 70%; } .c70--m.m15 { width: calc(70% - 30px); } .c70--m.m10 { width: calc(70% - 20px); } .c70--m.m5 { width: calc(70% - 10px); } .c75--m { float: left; width: 75%; } .c75--m.m15 { width: calc(75% - 30px); } .c75--m.m10 { width: calc(75% - 20px); } .c75--m.m5 { width: calc(75% - 10px); } .c80--m { float: left; width: 80%; } .c80--m.m15 { width: calc(80% - 30px); } .c80--m.m10 { width: calc(80% - 20px); } .c80--m.m5 { width: calc(80% - 10px); } .c85--m { float: left; width: 85%; } .c85--m.m15 { width: calc(85% - 30px); } .c85--m.m10 { width: calc(85% - 20px); } .c85--m.m5 { width: calc(85% - 10px); } .c90--m { float: left; width: 90%; } .c90--m.m15 { width: calc(90% - 30px); } .c90--m.m10 { width: calc(90% - 20px); } .c90--m.m5 { width: calc(90% - 10px); } .c95--m { float: left; width: 95%; } .c95--m.m15 { width: calc(95% - 30px); } .c95--m.m10 { width: calc(95% - 20px); } .c95--m.m5 { width: calc(95% - 10px); } .c100--m { float: left; width: 100%; } .c100--m.m15 { width: calc(100% - 30px); } .c100--m.m10 { width: calc(100% - 20px); } .c100--m.m5 { width: calc(100% - 10px); } } /* ============================================================================ /* Widths and Heights /* ============================================================================ */ .h100 { height: 100%; } .w5 { width: 5%; } .w6 { width: 6.666%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w33 { width: 33.333%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w66 { width: 66.666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; } @media all and (max-width: 1023px) { .w5--ss { width: 5%; } .w6--ss { width: 6.666%; } .w10--ss { width: 10%; } .w20--ss { width: 20%; } .w25--ss { width: 25%; } .w33--ss { width: 33.333%; } .w50--ss { width: 50%; } .w66--ss { width: 66.666%; } .w75--ss { width: 75%; } .w100--ss { width: 100%; } } @media all and (max-width: 959px) { .w5--t { width: 5%; } .w6--t { width: 6.666%; } .w10--t { width: 10%; } .w20--t { width: 20%; } .w25--t { width: 25%; } .w33--t { width: 33.333%; } .w50--t { width: 50%; } .w66--t { width: 66.666%; } .w75--t { width: 75%; } .w100--t { width: 100%; } } @media all and (max-width: 767px) { .w5--ts { width: 5%; } .w6--ts { width: 6.666%; } .w10--ts { width: 10%; } .w20--ts { width: 20%; } .w25--ts { width: 25%; } .w33--ts { width: 33.333%; } .w50--ts { width: 50%; } .w66--ts{ width: 66.666%; } .w75--ts { width: 75%; } .w100--ts { width: 100%; } } @media all and (max-width: 568px) { .w5--ml { width: 5%; } .w6--ml { width: 6.666%; } .w10--ml { width: 10%; } .w20--ml { width: 20%; } .w25--ml { width: 25%; } .w33--ml { width: 33.333%; } .w50--ml { width: 50%; } .w66--ml { width: 66.666%; } .w75--ml { width: 75%; } .w100--ml { width: 100%; } } @media all and (max-width: 479px) { .w5--m { width: 5%; } .w6--m { width: 6.666%; } .w10--m { width: 10%; } .w20--m { width: 20%; } .w25--m { width: 25%; } .w33--m { width: 33.333%; } .w50--m { width: 50%; } .w66--m { width: 66.666%; } .w75--m { width: 75%; } .w100--m { width: 100%; } } /* ============================================================================ /* Margins /* ============================================================================ */ .-m5 { margin: -5px!important; } .-mt5 { margin-top: -5px!important; } .-mr5 { margin-right: -5px!important; } .-mb5 { margin-bottom: -5px!important; } .-ml5 { margin-left: -5px!important; } .-m10 { margin: -10px!important; } .-mt10 { margin-top: -10px!important; } .-mr10 { margin-right: -10px!important; } .-mb10 { margin-bottom: -10px!important; } .-ml10 { margin-left: -10px!important; } .m1 { margin: 1px!important; } .m2 { margin: 2px!important; } .m3 { margin: 3px!important; } .m5 { margin: 5px!important; } .m7 { margin: 7px!important; } .m10 { margin: 10px!important; } .m15 { margin: 15px!important; } .m20 { margin: 20px!important; } .m25 { margin: 25px!important; } .m30 { margin: 30px!important; } .m35 { margin: 35px!important; } .m50 { margin: 50px!important; } .m75 { margin: 75px!important; } .m100{ margin: 100px!important; } .mt1 { margin-top: 1px!important; } .mr1 { margin-right: 1px!important; } .mb1 { margin-bottom: 1px!important; } .ml1 { margin-left: 1px!important; } /* Specific margins come after shorthands */ .mt2 { margin-top: 2px!important; } .mr2 { margin-right: 2px!important; } .mb2 { margin-bottom: 2px!important; } .ml2 { margin-left: 2px!important; } .mt3 { margin-top: 3px!important; } .mr3 { margin-right: 3px!important; } .mb3 { margin-bottom: 3px!important; } .ml3 { margin-left: 3px!important; } .mt4 { margin-top: 4px!important; } .mr4 { margin-right: 4px!important; } .mb4 { margin-bottom: 4px!important; } .ml4 { margin-left: 4px!important; } .mt5 { margin-top: 5px!important; } .mr5 { margin-right: 5px!important; } .mb5 { margin-bottom: 5px!important; } .ml5 { margin-left: 5px!important; } .mt6 { margin-top: 6px!important; } .mr6 { margin-right: 6px!important; } .mb6 { margin-bottom: 6px!important; } .ml6 { margin-left: 6px!important; } .mt7 { margin-top: 7px!important; } .mr7 { margin-right: 7px!important; } .mb7 { margin-bottom: 7px!important; } .ml7 { margin-left: 7px!important; } .mt10 { margin-top: 10px!important; } .mr10 { margin-right: 10px!important; } .mb10 { margin-bottom: 10px!important; } .ml10 { margin-left: 10px!important; } .mt15 { margin-top: 15px!important; } .mr15 { margin-right: 15px!important; } .mb15 { margin-bottom: 15px!important; } .ml15 { margin-left: 15px!important; } .mt20 { margin-top: 20px!important; } .mr20 { margin-right: 20px!important; } .mb20 { margin-bottom: 20px!important; } .ml20 { margin-left: 20px!important; } .mt25 { margin-top: 25px!important; } .mr25 { margin-right: 25px!important; } .mb25 { margin-bottom: 25px!important; } .ml25 { margin-left: 25px!important; } .mt30 { margin-top: 30px!important; } .mr30 { margin-right: 30px!important; } .mb30 { margin-bottom: 30px!important; } .ml30 { margin-left: 30px!important; } .mt35 { margin-top: 35px!important; } .mr35 { margin-right: 35px!important; } .mb35 { margin-bottom: 35px!important; } .ml35 { margin-left: 35px!important; } .mt40 { margin-top: 40px!important; } .mr40 { margin-right: 40px!important; } .mb40 { margin-bottom: 40px!important; } .ml40 { margin-left: 40px!important; } .mt50 { margin-top: 50px!important; } .mr50 { margin-right: 50px!important; } .mb50 { margin-bottom: 50px!important; } .ml50 { margin-left: 50px!important; } .mt75 { margin-top: 75px!important; } .mr75 { margin-right: 75px!important; } .mb75 { margin-bottom: 75px!important; } .ml75 { margin-left: 75px!important; } .mt100 { margin-top: 100px!important; } .mr100 { margin-right: 100px!important; } .mb100 { margin-bottom: 100px!important; } .ml100 { margin-left: 100px!important; } .mt150 { margin-top: 150px!important; } .mr150 { margin-right: 150px!important; } .mb150 { margin-bottom: 150px!important; } .ml150 { margin-left: 150px!important; } .mt250 { margin-top: 250px!important; } .mr250 { margin-right: 250px!important; } .mb250 { margin-bottom: 250px!important; } .ml250 { margin-left: 250px!important; } .m0 { margin: 0px!important; } .mt0 { margin-top: 0px!important; } .mr0 { margin-right: 0px!important; } .mb0 { margin-bottom: 0px!important; } .ml0 { margin-left: 0px!important; } .ma { margin-left: auto!important; margin-right: auto!important; } @media all and (max-width: 959px) { .m1--t { margin: 1px!important; } .m2--t { margin: 2px!important; } .m3--t { margin: 3px!important; } .m5--t { margin: 5px!important; } .m7--t { margin: 7px!important; } .m10--t { margin: 10px!important; } .m15--t { margin: 15px!important; } .m20--t { margin: 20px!important; } .m25--t { margin: 25px!important; } .m30--t { margin: 30px!important; } .m35--t { margin: 35px!important; } .m50--t { margin: 50px!important; } .m75--t { margin: 75px!important; } .m100--t { margin: 100px!important; } .m250--t { margin: 250px!important; } .mt1--t { margin-top: 1px!important; } .mr1--t { margin-right: 1px!important; } .mb1--t { margin-bottom: 1px!important; } .ml1--t { margin-left: 1px!important; } .mt2--t { margin-top: 2px!important; } .mr2--t { margin-right: 2px!important; } .mb2--t { margin-bottom: 2px!important; } .ml2--t { margin-left: 2px!important; } .mt3--t { margin-top: 3px!important; } .mr3--t { margin-right: 3px!important; } .mb3--t { margin-bottom: 3px!important; } .ml3--t { margin-left: 3px!important; } .mt4--t { margin-top: 4px!important; } .mr4--t { margin-right: 4px!important; } .mb4--t { margin-bottom: 4px!important; } .ml4--t { margin-left: 4px!important; } .mt5--t { margin-top: 5px!important; } .mr5--t { margin-right: 5px!important; } .mb5--t { margin-bottom: 5px!important; } .ml5--t { margin-left: 5px!important; } .mt6--t { margin-top: 6px!important; } .mr6--t { margin-right: 6px!important; } .mb6--t { margin-bottom: 6px!important; } .ml6--t { margin-left: 6px!important; } .mt7--t { margin-top: 7px!important; } .mr7--t { margin-right: 7px!important; } .mb7--t { margin-bottom: 7px!important; } .ml7--t { margin-left: 7px!important; } .mt10--t { margin-top: 10px!important; } .mr10--t { margin-right: 10px!important; } .mb10--t { margin-bottom: 10px!important; } .ml10--t { margin-left: 10px!important; } .mt15--t { margin-top: 15px!important; } .mr15--t { margin-right: 15px!important; } .mb15--t { margin-bottom: 15px!important; } .ml15--t { margin-left: 15px!important; } .mt20--t { margin-top: 20px!important; } .mr20--t { margin-right: 20px!important; } .mb20--t { margin-bottom: 20px!important; } .ml20--t { margin-left: 20px!important; } .mt25--t { margin-top: 25px!important; } .mr25--t { margin-right: 25px!important; } .mb25--t { margin-bottom: 25px!important; } .ml25--t { margin-left: 25px!important; } .mt30--t { margin-top: 30px!important; } .mr30--t { margin-right: 30px!important; } .mb30--t { margin-bottom: 30px!important; } .ml30--t { margin-left: 30px!important; } .mt35--t { margin-top: 35px!important; } .mr35--t { margin-right: 35px!important; } .mb35--t { margin-bottom: 35px!important; } .ml35--t { margin-left: 35px!important; } .mt40--t { margin-top: 40px!important; } .mr40--t { margin-right: 40px!important; } .mb40--t { margin-bottom: 40px!important; } .ml40--t { margin-left: 40px!important; } .mt50--t { margin-top: 50px!important; } .mr50--t { margin-right: 50px!important; } .mb50--t { margin-bottom: 50px!important; } .ml50--t { margin-left: 50px!important; } .mt75--t { margin-top: 75px!important; } .mr75--t { margin-right: 75px!important; } .mb75--t { margin-bottom: 75px!important; } .ml75--t { margin-left: 75px!important; } .mt100--t { margin-top: 100px!important; } .mr100--t { margin-right: 100px!important; } .mb100--t { margin-bottom: 100px!important; } .ml100--t { margin-left: 100px!important; } .mt250--t { margin-top: 250px!important; } .mr250--t { margin-right: 250px!important; } .mb250--t { margin-bottom: 250px!important; } .ml250--t { margin-left: 250px!important; } .m0--t { margin: 0px!important; } .mt0--t { margin-top: 0px!important; } .mr0--t { margin-right: 0px!important; } .mb0--t { margin-bottom: 0px!important; } .ml0--t { margin-left: 0px!important; } .ma--t { margin-left: auto !important; margin-right: auto !important; } } @media all and (max-width: 767px) { .m1--ts { margin: 1px!important; } .m2--ts { margin: 2px!important; } .m3--ts { margin: 3px!important; } .m5--ts { margin: 5px!important; } .m7--ts { margin: 7px!important; } .m10--ts { margin: 10px!important; } .m15--ts { margin: 15px!important; } .m20--ts { margin: 20px!important; } .m25--ts { margin: 25px!important; } .m30--ts { margin: 30px!important; } .m35--ts { margin: 35px!important; } .m50--ts { margin: 50px!important; } .m75--ts { margin: 75px!important; } .m100--ts { margin: 100px!important; } .m250--ts { margin: 250px!important; } .mt1--ts { margin-top: 1px!important; } .mr1--ts { margin-right: 1px!important; } .mb1--ts { margin-bottom: 1px!important; } .ml1--ts { margin-left: 1px!important; } .mt2--ts { margin-top: 2px!important; } .mr2--ts { margin-right: 2px!important; } .mb2--ts { margin-bottom: 2px!important; } .ml2--ts { margin-left: 2px!important; } .mt3--ts { margin-top: 3px!important; } .mr3--ts { margin-right: 3px!important; } .mb3--ts { margin-bottom: 3px!important; } .ml3--ts { margin-left: 3px!important; } .mt4--ts { margin-top: 4px!important; } .mr4--ts { margin-right: 4px!important; } .mb4--ts { margin-bottom: 4px!important; } .ml4--ts { margin-left: 4px!important; } .mt5--ts { margin-top: 5px!important; } .mr5--ts { margin-right: 5px!important; } .mb5--ts { margin-bottom: 5px!important; } .ml5--ts { margin-left: 5px!important; } .mt6--ts { margin-top: 6px!important; } .mr6--ts { margin-right: 6px!important; } .mb6--ts { margin-bottom: 6px!important; } .ml6--ts { margin-left: 6px!important; } .mt7--ts { margin-top: 7px!important; } .mr7--ts { margin-right: 7px!important; } .mb7--ts { margin-bottom: 7px!important; } .ml7--ts { margin-left: 7px!important; } .mt10--ts { margin-top: 10px!important; } .mr10--ts { margin-right: 10px!important; } .mb10--ts { margin-bottom: 10px!important; } .ml10--ts { margin-left: 10px!important; } .mt15--ts { margin-top: 15px!important; } .mr15--ts { margin-right: 15px!important; } .mb15--ts { margin-bottom: 15px!important; } .ml15--ts { margin-left: 15px!important; } .mt20--ts { margin-top: 20px!important; } .mr20--ts { margin-right: 20px!important; } .mb20--ts { margin-bottom: 20px!important; } .ml20--ts { margin-left: 20px!important; } .mt25--ts { margin-top: 25px!important; } .mr25--ts { margin-right: 25px!important; } .mb25--ts { margin-bottom: 25px!important; } .ml25--ts { margin-left: 25px!important; } .mt30--ts { margin-top: 30px!important; } .mr30--ts { margin-right: 30px!important; } .mb30--ts { margin-bottom: 30px!important; } .ml30--ts { margin-left: 30px!important; } .mt35--ts { margin-top: 35px!important; } .mr35--ts { margin-right: 35px!important; } .mb35--ts { margin-bottom: 35px!important; } .ml35--ts { margin-left: 35px!important; } .mt40--ts { margin-top: 40px!important; } .mr40--ts { margin-right: 40px!important; } .mb40--ts { margin-bottom: 40px!important; } .ml40--ts { margin-left: 40px!important; } .mt50--ts { margin-top: 50px!important; } .mr50--ts { margin-right: 50px!important; } .mb50--ts { margin-bottom: 50px!important; } .ml50--ts { margin-left: 50px!important; } .mt75--ts { margin-top: 75px!important; } .mr75--ts { margin-right: 75px!important; } .mb75--ts { margin-bottom: 75px!important; } .ml75--ts { margin-left: 75px!important; } .mt100--ts { margin-top: 100px!important; } .mr100--ts { margin-right: 100px!important; } .mb100--ts { margin-bottom: 100px!important; } .ml100--ts { margin-left: 100px!important; } .mt250--ts { margin-top: 250px!important; } .mr250--ts { margin-right: 250px!important; } .mb250--ts { margin-bottom: 250px!important; } .ml250--ts { margin-left: 250px!important; } .m0--ts { margin: 0px !important; } .mt0--ts { margin-top: 0px !important; } .mr0--ts { margin-right: 0px !important; } .mb0--ts { margin-bottom: 0px !important; } .ml0--ts { margin-left: 0px !important; } .ma--ts { margin-left: auto !important; margin-right: auto !important; } } @media all and (max-width: 576px) { .m1--ml { margin: 1px!important; } .m2--ml { margin: 2px!important; } .m3--ml { margin: 3px!important; } .m5--ml { margin: 5px!important; } .m7--ml { margin: 7px!important; } .m10--ml { margin: 10px!important; } .m15--ml { margin: 15px!important; } .m20--ml { margin: 20px!important; } .m25--ml { margin: 25px!important; } .m30--ml { margin: 30px!important; } .m35--ml { margin: 35px!important; } .m50--ml { margin: 50px!important; } .m75--ml { margin: 75px!important; } .m100--ml { margin: 100px!important; } .m250--ml { margin: 250px!important; } .mt1--ml { margin-top: 1px!important; } .mr1--ml { margin-right: 1px!important; } .mb1--ml { margin-bottom: 1px!important; } .ml1--ml { margin-left: 1px!important; } .mt2--ml { margin-top: 2px!important; } .mr2--ml { margin-right: 2px!important; } .mb2--ml { margin-bottom: 2px!important; } .ml2--ml { margin-left: 2px!important; } .mt3--ml { margin-top: 3px!important; } .mr3--ml { margin-right: 3px!important; } .mb3--ml { margin-bottom: 3px!important; } .ml3--ml { margin-left: 3px!important; } .mt4--ml { margin-top: 4px!important; } .mr4--ml { margin-right: 4px!important; } .mb4--ml { margin-bottom: 4px!important; } .ml4--ml { margin-left: 4px!important; } .mt5--ml { margin-top: 5px!important; } .mr5--ml { margin-right: 5px!important; } .mb5--ml { margin-bottom: 5px!important; } .ml5--ml { margin-left: 5px!important; } .mt6--ml { margin-top: 6px!important; } .mr6--ml { margin-right: 6px!important; } .mb6--ml { margin-bottom: 6px!important; } .ml6--ml { margin-left: 6px!important; } .mt7--ml { margin-top: 7px!important; } .mr7--ml { margin-right: 7px!important; } .mb7--ml { margin-bottom: 7px!important; } .ml7--ml { margin-left: 7px!important; } .mt10--ml { margin-top: 10px!important; } .mr10--ml { margin-right: 10px!important; } .mb10--ml { margin-bottom: 10px!important; } .ml10--ml { margin-left: 10px!important; } .mt15--ml { margin-top: 15px!important; } .mr15--ml { margin-right: 15px!important; } .mb15--ml { margin-bottom: 15px!important; } .ml15--ml { margin-left: 15px!important; } .mt20--ml { margin-top: 20px!important; } .mr20--ml { margin-right: 20px!important; } .mb20--ml { margin-bottom: 20px!important; } .ml20--ml { margin-left: 20px!important; } .mt25--ml { margin-top: 25px!important; } .mr25--ml { margin-right: 25px!important; } .mb25--ml { margin-bottom: 25px!important; } .ml25--ml { margin-left: 25px!important; } .mt30--ml { margin-top: 30px!important; } .mr30--ml { margin-right: 30px!important; } .mb30--ml { margin-bottom: 30px!important; } .ml30--ml { margin-left: 30px!important; } .mt35--ml { margin-top: 35px!important; } .mr35--ml { margin-right: 35px!important; } .mb35--ml { margin-bottom: 35px!important; } .ml35--ml { margin-left: 35px!important; } .mt40--ml { margin-top: 40px!important; } .mr40--ml { margin-right: 40px!important; } .mb40--ml { margin-bottom: 40px!important; } .ml40--ml { margin-left: 40px!important; } .mt50--ml { margin-top: 50px!important; } .mr50--ml { margin-right: 50px!important; } .mb50--ml { margin-bottom: 50px!important; } .ml50--ml { margin-left: 50px!important; } .mt75--ml { margin-top: 75px!important; } .mr75--ml { margin-right: 75px!important; } .mb75--ml { margin-bottom: 75px!important; } .ml75--ml { margin-left: 75px!important; } .mt100--ml { margin-top: 100px!important; } .mr100--ml { margin-right: 100px!important; } .mb100--ml { margin-bottom: 100px!important; } .ml100--ml { margin-left: 100px!important; } .mt250--ml { margin-top: 250px!important; } .mr250--ml { margin-right: 250px!important; } .mb250--ml { margin-bottom: 250px!important; } .ml250--ml { margin-left: 250px!important; } .m0--ml { margin: 0px !important; } .mt0--ml { margin-top: 0px !important; } .mr0--ml { margin-right: 0px !important; } .mb0--ml { margin-bottom: 0px !important; } .ml0--ml { margin-left: 0px !important; } .ma--ml { margin-left: auto !important; margin-right: auto !important; } } @media all and (max-width: 479px) { .m1--m { margin: 1px!important; } .m2--m { margin: 2px!important; } .m3--m { margin: 3px!important; } .m5--m { margin: 5px!important; } .m7--m { margin: 7px!important; } .m10--m { margin: 10px!important; } .m15--m { margin: 15px!important; } .m20--m { margin: 20px!important; } .m25--m { margin: 25px!important; } .m30--m { margin: 30px!important; } .m35--m { margin: 35px!important; } .m50--m { margin: 50px!important; } .m75--m { margin: 75px!important; } .m100--m { margin: 100px!important; } .m250--m { margin: 250px!important; } .mt1--m { margin-top: 1px!important; } .mr1--m { margin-right: 1px!important; } .mb1--m { margin-bottom: 1px!important; } .ml1--m { margin-left: 1px!important; } .mt2--m { margin-top: 2px!important; } .mr2--m { margin-right: 2px!important; } .mb2--m { margin-bottom: 2px!important; } .ml2--m { margin-left: 2px!important; } .mt3--m { margin-top: 3px!important; } .mr3--m { margin-right: 3px!important; } .mb3--m { margin-bottom: 3px!important; } .ml3--m { margin-left: 3px!important; } .mt4--m { margin-top: 4px!important; } .mr4--m { margin-right: 4px!important; } .mb4--m { margin-bottom: 4px!important; } .ml4--m { margin-left: 4px!important; } .mt5--m { margin-top: 5px!important; } .mr5--m { margin-right: 5px!important; } .mb5--m { margin-bottom: 5px!important; } .ml5--m { margin-left: 5px!important; } .mt6--m { margin-top: 6px!important; } .mr6--m { margin-right: 6px!important; } .mb6--m { margin-bottom: 6px!important; } .ml6--m { margin-left: 6px!important; } .mt7--m { margin-top: 7px!important; } .mr7--m { margin-right: 7px!important; } .mb7--m { margin-bottom: 7px!important; } .ml7--m { margin-left: 7px!important; } .mt10--m { margin-top: 10px!important; } .mr10--m { margin-right: 10px!important; } .mb10--m { margin-bottom: 10px!important; } .ml10--m { margin-left: 10px!important; } .mt15--m { margin-top: 15px!important; } .mr15--m { margin-right: 15px!important; } .mb15--m { margin-bottom: 15px!important; } .ml15--m { margin-left: 15px!important; } .mt20--m { margin-top: 20px!important; } .mr20--m { margin-right: 20px!important; } .mb20--m { margin-bottom: 20px!important; } .ml20--m { margin-left: 20px!important; } .mt25--m { margin-top: 25px!important; } .mr25--m { margin-right: 25px!important; } .mb25--m { margin-bottom: 25px!important; } .ml25--m { margin-left: 25px!important; } .mt30--m { margin-top: 30px!important; } .mr30--m { margin-right: 30px!important; } .mb30--m { margin-bottom: 30px!important; } .ml30--m { margin-left: 30px!important; } .mt35--m { margin-top: 35px!important; } .mr35--m { margin-right: 35px!important; } .mb35--m { margin-bottom: 35px!important; } .ml35--m { margin-left: 35px!important; } .mt40--m { margin-top: 40px!important; } .mr40--m { margin-right: 40px!important; } .mb40--m { margin-bottom: 40px!important; } .ml40--m { margin-left: 40px!important; } .mt50--m { margin-top: 50px!important; } .mr50--m { margin-right: 50px!important; } .mb50--m { margin-bottom: 50px!important; } .ml50--m { margin-left: 50px!important; } .mt75--m { margin-top: 75px!important; } .mr75--m { margin-right: 75px!important; } .mb75--m { margin-bottom: 75px!important; } .ml75--m { margin-left: 75px!important; } .mt100--m { margin-top: 100px!important; } .mr100--m { margin-right: 100px!important; } .mb100--m { margin-bottom: 100px!important; } .ml100--m { margin-left: 100px!important; } .mt250--m { margin-top: 250px!important; } .mr250--m { margin-right: 250px!important; } .mb250--m { margin-bottom: 250px!important; } .ml250--m { margin-left: 250px!important; } .m0--m { margin: 0px !important; } .mt0--m { margin-top: 0px !important; } .mr0--m { margin-right: 0px !important; } .mb0--m { margin-bottom: 0px !important; } .ml0--m { margin-left: 0px !important; } .ma--m { margin-left: auto !important; margin-right: auto !important; } } /* ============================================================================ /* Paddings /* ============================================================================ */ .p1 { padding: 1px!important; } .p2 { padding: 2px!important; } .p3 { padding: 3px!important; } .p4 { padding: 4px!important; } .p5 { padding: 5px!important; } .p10 { padding: 10px!important; } .p15 { padding: 15px!important; } .p20 { padding: 20px!important; } .p25 { padding: 25px!important; } .p30 { padding: 30px!important; } .p35 { padding: 35px!important; } .p40 { padding: 40px!important; } .p50 { padding: 50px!important; } .p60 { padding: 60px!important; } .p75 { padding: 75px!important; } .p80 { padding: 80px!important; } .p100 { padding: 100px!important; } .p125 { padding: 125px!important; } .p150 { padding: 150px!important; } .p0 { padding: 0px!important; } .pt1 { padding-top: 1px!important; } .pr1 { padding-right: 1px!important; } .pb1 { padding-bottom: 1px!important; } .pl1 { padding-left: 1px!important; } /* Specific paddings come after shorthands */ .pt2 { padding-top: 2px!important; } .pr2 { padding-right: 2px!important; } .pb2 { padding-bottom: 2px!important; } .pl2 { padding-left: 2px!important; } .pt3 { padding-top: 3px!important; } .pr3 { padding-right: 3px!important; } .pb3 { padding-bottom: 3px!important; } .pl3 { padding-left: 3px!important; } .pt5 { padding-top: 5px!important; } .pr5 { padding-right: 5px!important; } .pb5 { padding-bottom: 5px!important; } .pl5 { padding-left: 3px!important; } .pt10 { padding-top: 10px!important; } .pr10 { padding-right: 10px!important; } .pb10 { padding-bottom: 10px!important; } .pl10 { padding-left: 10px!important; } .pt12 { padding-top: 12px!important; } .pr12 { padding-right: 12px!important; } .pb12 { padding-bottom: 12px!important; } .pl12 { padding-left: 12px!important; } .pt15 { padding-top: 15px!important; } .pr15 { padding-right: 15px!important; } .pb15 { padding-bottom: 15px!important; } .pl15 { padding-left: 15px!important; } .pt20 { padding-top: 20px!important; } .pr20 { padding-right: 20px!important; } .pb20 { padding-bottom: 20px!important; } .pl20 { padding-left: 20px!important; } .pt25 { padding-top: 25px!important; } .pr25 { padding-right: 25px!important; } .pb25 { padding-bottom: 25px!important; } .pl25 { padding-left: 25px!important; } .pt30 { padding-top: 30px!important; } .pr30 { padding-right: 30px!important; } .pb30 { padding-bottom: 30px!important; } .pl30 { padding-left: 30px!important; } .pt35 { padding-top: 35px!important; } .pr35 { padding-right: 35px!important; } .pb35 { padding-bottom: 35px!important; } .pl35 { padding-left: 35px!important; } .pt40 { padding-top: 40px!important; } .pr40 { padding-right: 40px!important; } .pb40 { padding-bottom: 40px!important; } .pl40 { padding-left: 40px!important; } .pt50 { padding-top: 50px!important; } .pr50 { padding-right: 50px!important; } .pb50 { padding-bottom: 50px!important; } .pl50 { padding-left: 50px!important; } .pt60 { padding-top: 60px!important; } .pr60 { padding-right: 60px!important; } .pb60 { padding-bottom: 60px!important; } .pl60 { padding-left: 60px!important; } .pt75 { padding-top: 75px!important; } .pr75 { padding-right: 75px!important; } .pb75 { padding-bottom: 75px!important; } .pl75 { padding-left: 75px!important; } .pt80 { padding-top: 80px!important; } .pr80 { padding-right: 80px!important; } .pb80 { padding-bottom: 80px!important; } .pl80 { padding-left: 80px!important; } .pt100 { padding-top: 100px!important; } .pr100 { padding-right: 100px!important; } .pb100 { padding-bottom: 100px!important; } .pl100 { padding-left: 100px!important; } .pt125 { padding-top: 125px!important; } .pr125 { padding-right: 125px!important; } .pb125 { padding-bottom: 125px!important; } .pl125 { padding-left: 125px!important; } .pt150 { padding-top: 150px!important; } .pr150 { padding-right: 150px!important; } .pb150 { padding-bottom: 150px!important; } .pl150 { padding-left: 150px!important; } .pt0 { padding-top: 0px!important; } .pr0 { padding-right: 0px!important; } .pb0 { padding-bottom: 0px!important; } .pl0 { padding-left: 0px!important; } @media all and (max-width: 959px) { .p1--t { padding: 1px!important; } .p2--t { padding: 2px!important; } .p3--t { padding: 3px!important; } .p5--t { padding: 5px!important; } .p10--t { padding: 10px!important; } .p15--t { padding: 15px!important; } .p20--t { padding: 20px!important; } .p25--t { padding: 25px!important; } .p30--t { padding: 30px!important; } .p35--t { padding: 35px!important; } .p50--t { padding: 50px!important; } .p60--t { padding: 60px!important; } .p75--t { padding: 75px!important; } .p0--t { padding: 0px!important; } .pt1--t { padding-top: 1px!important; } .pr1--t { padding-right: 1px!important; } .pb1--t { padding-bottom: 1px!important; } .pl1--t { padding-left: 1px!important; } /* Specific paddings come after shorthands */ .pt2--t { padding-top: 2px!important; } .pr2--t { padding-right: 2px!important; } .pb2--t { padding-bottom: 2px!important; } .pl2--t { padding-left: 2px!important; } .pt3--t { padding-top: 3px!important; } .pr3--t { padding-right: 3px!important; } .pb3--t { padding-bottom: 3px!important; } .pl3--t { padding-left: 3px!important; } .pt5--t { padding-top: 5px!important; } .pr5--t { padding-right: 5px!important; } .pb5--t { padding-bottom: 5px!important; } .pl5--t { padding-left: 3px!important; } .pt10--t { padding-top: 10px!important; } .pr10--t { padding-right: 10px!important; } .pb10--t { padding-bottom: 10px!important; } .pl10--t { padding-left: 10px!important; } .pt15--t { padding-top: 15px!important; } .pr15--t { padding-right: 15px!important; } .pb15--t { padding-bottom: 15px!important; } .pl15--t { padding-left: 15px!important; } .pt20--t { padding-top: 20px!important; } .pr20--t { padding-right: 20px!important; } .pb20--t { padding-bottom: 20px!important; } .pl20--t { padding-left: 20px!important; } .pt25--t { padding-top: 25px!important; } .pr25--t { padding-right: 25px!important; } .pb25--t { padding-bottom: 25px!important; } .pl25--t { padding-left: 25px!important; } .pt30--t { padding-top: 30px!important; } .pr30--t { padding-right: 30px!important; } .pb30--t { padding-bottom: 30px!important; } .pl30--t { padding-left: 30px!important; } .pt35--t { padding-top: 35px!important; } .pr35--t { padding-right: 35px!important; } .pb35--t { padding-bottom: 35px!important; } .pl35--t { padding-left: 35px!important; } .pt40--t { padding-top: 40px!important; } .pr40--t { padding-right: 40px!important; } .pb40--t { padding-bottom: 40px!important; } .pl40--t { padding-left: 40px!important; } .pt50--t { padding-top: 50px!important; } .pr50--t { padding-right: 50px!important; } .pb50--t { padding-bottom: 50px!important; } .pl50--t { padding-left: 50px!important; } .pt60--t { padding-top: 60px!important; } .pr60--t { padding-right: 60px!important; } .pb60--t { padding-bottom: 60px!important; } .pl60--t { padding-left: 60px!important; } .pt75--t { padding-top: 75px!important; } .pr75--t { padding-right: 75px!important; } .pb75--t { padding-bottom: 75px!important; } .pl75--t { padding-left: 75px!important; } .pt0--t { padding-top: 0px!important; } .pr0--t { padding-right: 0px!important; } .pb0--t { padding-bottom: 0px!important; } .pl0--t { padding-left: 0px!important; } } @media all and (max-width: 767px) { .p1--ts { padding: 1px!important; } .p2--ts { padding: 2px!important; } .p3--ts { padding: 3px!important; } .p5--ts { padding: 5px!important; } .p10--ts { padding: 10px!important; } .p15--ts { padding: 15px!important; } .p20--ts { padding: 20px!important; } .p25--ts { padding: 25px!important; } .p30--ts { padding: 30px!important; } .p35--ts { padding: 35px!important; } .p50--ts { padding: 50px!important; } .p75--ts { padding: 75px!important; } .p0--ts { padding: 0px!important; } .pt1--ts { padding-top: 1px!important; } .pr1--ts { padding-right: 1px!important; } .pb1--ts { padding-bottom: 1px!important; } .pl1--ts { padding-left: 1px!important; } /* Specific paddings come after shorthands */ .pt2--ts { padding-top: 2px!important; } .pr2--ts { padding-right: 2px!important; } .pb2--ts { padding-bottom: 2px!important; } .pl2--ts { padding-left: 2px!important; } .pt3--ts { padding-top: 3px!important; } .pr3--ts { padding-right: 3px!important; } .pb3--ts { padding-bottom: 3px!important; } .pl3--ts { padding-left: 3px!important; } .pt5--ts { padding-top: 5px!important; } .pr5--ts { padding-right: 5px!important; } .pb5--ts { padding-bottom: 5px!important; } .pl5--ts { padding-left: 3px!important; } .pt10--ts { padding-top: 10px!important; } .pr10--ts { padding-right: 10px!important; } .pb10--ts { padding-bottom: 10px!important; } .pl10--ts { padding-left: 10px!important; } .pt15--ts { padding-top: 15px!important; } .pr15--ts { padding-right: 15px!important; } .pb15--ts { padding-bottom: 15px!important; } .pl15--ts { padding-left: 15px!important; } .pt20--ts { padding-top: 20px!important; } .pr20--ts { padding-right: 20px!important; } .pb20--ts { padding-bottom: 20px!important; } .pl20--ts { padding-left: 20px!important; } .pt25--ts { padding-top: 25px!important; } .pr25--ts { padding-right: 25px!important; } .pb25--ts { padding-bottom: 25px!important; } .pl25--ts { padding-left: 25px!important; } .pt30--ts { padding-top: 30px!important; } .pr30--ts { padding-right: 30px!important; } .pb30--ts { padding-bottom: 30px!important; } .pl30--ts { padding-left: 30px!important; } .pt35--ts { padding-top: 35px!important; } .pr35--ts { padding-right: 35px!important; } .pb35--ts { padding-bottom: 35px!important; } .pl35--ts { padding-left: 35px!important; } .pt40--ts { padding-top: 40px!important; } .pr40--ts { padding-right: 40px!important; } .pb40--ts { padding-bottom: 40px!important; } .pl40--ts { padding-left: 40px!important; } .pt50--ts { padding-top: 50px!important; } .pr50--ts { padding-right: 50px!important; } .pb50--ts { padding-bottom: 50px!important; } .pl50--ts { padding-left: 50px!important; } .pt75--ts { padding-top: 75px!important; } .pr75--ts { padding-right: 75px!important; } .pb75--ts { padding-bottom: 75px!important; } .pl75--ts { padding-left: 75px!important; } .pt0--ts { padding-top: 0px!important; } .pr0--ts { padding-right: 0px!important; } .pb0--ts { padding-bottom: 0px!important; } .pl0--ts { padding-left: 0px!important; } } @media all and (max-width: 568px) { .p1--ml { padding: 1px!important; } .p2--ml { padding: 2px!important; } .p3--ml { padding: 3px!important; } .p5--ml { padding: 5px!important; } .p10--ml { padding: 10px!important; } .p15--ml { padding: 15px!important; } .p20--ml { padding: 20px!important; } .p25--ml { padding: 25px!important; } .p30--ml { padding: 30px!important; } .p35--ml { padding: 35px!important; } .p50--ml { padding: 50px!important; } .p75--ml { padding: 75px!important; } .p0--ml { padding: 0px!important; } .pt1--ml { padding-top: 1px!important; } .pr1--ml { padding-right: 1px!important; } .pb1--ml { padding-bottom: 1px!important; } .pl1--ml { padding-left: 1px!important; } /* Specific paddings come after shorthands */ .pt2--ml { padding-top: 2px!important; } .pr2--ml { padding-right: 2px!important; } .pb2--ml { padding-bottom: 2px!important; } .pl2--ml { padding-left: 2px!important; } .pt3--ml { padding-top: 3px!important; } .pr3--ml { padding-right: 3px!important; } .pb3--ml { padding-bottom: 3px!important; } .pl3--ml { padding-left: 3px!important; } .pt5--ml { padding-top: 5px!important; } .pr5--ml { padding-right: 5px!important; } .pb5--ml { padding-bottom: 5px!important; } .pl5--ml { padding-left: 5px!important; } .pt10--ml { padding-top: 10px!important; } .pr10--ml { padding-right: 10px!important; } .pb10--ml { padding-bottom: 10px!important; } .pl10--ml { padding-left: 10px!important; } .pt15--ml { padding-top: 15px!important; } .pr15--ml { padding-right: 15px!important; } .pb15--ml { padding-bottom: 15px!important; } .pl15--ml { padding-left: 15px!important; } .pt20--ml { padding-top: 20px!important; } .pr20--ml { padding-right: 20px!important; } .pb20--ml { padding-bottom: 20px!important; } .pl20--ml { padding-left: 20px!important; } .pt25--ml { padding-top: 25px!important; } .pr25--ml { padding-right: 25px!important; } .pb25--ml { padding-bottom: 25px!important; } .pl25--ml { padding-left: 25px!important; } .pt30--ml { padding-top: 30px!important; } .pr30--ml { padding-right: 30px!important; } .pb30--ml { padding-bottom: 30px!important; } .pl30--ml { padding-left: 30px!important; } .pt35--ml { padding-top: 35px!important; } .pr35--ml { padding-right: 35px!important; } .pb35--ml { padding-bottom: 35px!important; } .pl35--ml { padding-left: 35px!important; } .pt40--ml { padding-top: 40px!important; } .pr40--ml { padding-right: 40px!important; } .pb40--ml { padding-bottom: 40px!important; } .pl40--ml { padding-left: 40px!important; } .pt50--ml { padding-top: 50px!important; } .pr50--ml { padding-right: 50px!important; } .pb50--ml { padding-bottom: 50px!important; } .pl50--ml { padding-left: 50px!important; } .pt75--ml { padding-top: 75px!important; } .pr75--ml { padding-right: 75px!important; } .pb75--ml { padding-bottom: 75px!important; } .pl75--ml { padding-left: 75px!important; } .pt0--ml { padding-top: 0px!important; } .pr0--ml { padding-right: 0px!important; } .pb0--ml { padding-bottom: 0px!important; } .pl0--ml { padding-left: 0px!important; } } @media all and (max-width: 479px) { .p1--m { padding: 1px!important; } .p2--m { padding: 2px!important; } .p3--m { padding: 3px!important; } .p5--m { padding: 5px!important; } .p10--m { padding: 10px!important; } .p15--m { padding: 15px!important; } .p20--m { padding: 20px!important; } .p25--m { padding: 25px!important; } .p30--m { padding: 30px!important; } .p35--m { padding: 35px!important; } .p50--m { padding: 50px!important; } .p75--m { padding: 75px!important; } .p0--m { padding: 0px!important; } .pt1--m { padding-top: 1px!important; } .pr1--m { padding-right: 1px!important; } .pb1--m { padding-bottom: 1px!important; } .pl1--m { padding-left: 1px!important; } /* Specific paddings come after shorthands */ .pt2--m { padding-top: 2px!important; } .pr2--m { padding-right: 2px!important; } .pb2--m { padding-bottom: 2px!important; } .pl2--m { padding-left: 2px!important; } .pt3--m { padding-top: 3px!important; } .pr3--m { padding-right: 3px!important; } .pb3--m { padding-bottom: 3px!important; } .pl3--m { padding-left: 3px!important; } /* Specific paddings come after shorthands */ .pt5--m { padding-top: 5px!important; } .pr5--m { padding-right: 5px!important; } .pb5--m { padding-bottom: 5px!important; } .pl5--m { padding-left: 3px!important; } .pt10--m { padding-top: 10px!important; } .pr10--m { padding-right: 10px!important; } .pb10--m { padding-bottom: 10px!important; } .pl10--m { padding-left: 10px!important; } .pt15--m { padding-top: 15px!important; } .pr15--m { padding-right: 15px!important; } .pb15--m { padding-bottom: 15px!important; } .pl15--m { padding-left: 15px!important; } .pt20--m { padding-top: 20px!important; } .pr20--m { padding-right: 20px!important; } .pb20--m { padding-bottom: 20px!important; } .pl20--m { padding-left: 20px!important; } .pt25--m { padding-top: 25px!important; } .pr25--m { padding-right: 25px!important; } .pb25--m { padding-bottom: 25px!important; } .pl25--m { padding-left: 25px!important; } .pt30--m { padding-top: 30px!important; } .pr30--m { padding-right: 30px!important; } .pb30--m { padding-bottom: 30px!important; } .pl30--m { padding-left: 30px!important; } .pt35--m { padding-top: 35px!important; } .pr35--m { padding-right: 35px!important; } .pb35--m { padding-bottom: 35px!important; } .pl35--m { padding-left: 35px!important; } .pt40--m { padding-top: 40px!important; } .pr40--m { padding-right: 40px!important; } .pb40--m { padding-bottom: 40px!important; } .pl40--m { padding-left: 40px!important; } .pt50--m { padding-top: 50px!important; } .pr50--m { padding-right: 50px!important; } .pb50--m { padding-bottom: 50px!important; } .pl50--m { padding-left: 50px!important; } .pt75--m { padding-top: 75px!important; } .pr75--m { padding-right: 75px!important; } .pb75--m { padding-bottom: 75px!important; } .pl75--m { padding-left: 75px!important; } .pt0--m { padding-top: 0px!important; } .pr0--m { padding-right: 0px!important; } .pb0--m { padding-bottom: 0px!important; } .pl0--m { padding-left: 0px!important; } } /* ============================================================================ /* Container (specify after margins) /* ============================================================================ */ .container { max-width: 1200px; margin-left: auto; margin-right: auto; } .container:after { content: ""; display: table; clear: both; } .container--max-width-600 { max-width: 600px; } /* ============================================================================ /* Validation /* ============================================================================ */ .validation-error-input { border: 1px solid #f04747!important; margin-bottom: 2px; background: #fcf4f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTg5YWJiNy04NTY5LTkwNDYtYjQ5YS04YzY4NWE0ODRlZjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI3QThDQ0REOTMzMTFFNDg0NTI5MzlGODlDMDdERkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI3QThDQ0NEOTMzMTFFNDg0NTI5MzlGODlDMDdERkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjJmNGE4ZjEtYmVkNi1hODQxLTg0NDMtZWExMjhiMTFkNTQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkxODlhYmI3LTg1NjktOTA0Ni1iNDlhLThjNjg1YTQ4NGVmNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvyQbLMAAAH0SURBVHjapFO7TgJBFL2zC7sgyMMgtjYWkGhjTJDGxEJ+wlosKP0Dbay1ofcn5AO0MMbEGChsjI3RKAGyPhZY1nOGwaCFMXGSk707c859zL2jDvLyc20BFaAMFMxeCzgDToHGNDkyZS8CNaC6lnKTeceWdMTSB93hqPTUD0oXPX8Hv3XgGLjjmb2Z+BLvr6bc3Y1s3Mk7EXFtS0LjOQZ7Hg6LScdxLVV+8IMctq+AziSDGsTbxYQjwzAUfxTKAOrAHNpwFVVIFyAHa/uy5z/iu2eZmqtLM9GxGEIPDnpBKJ3hSIM293hGDrnUUEsHFdYcUQqHIu9G3IbwGWkQbeOEZ+SQSw21LKHMCxvBYNo+jFeQu1owLiFuLsOF0EUZjE8NtXRQ4G2HSI01rzc9+W1dL89qrulQwZJ/LmbQYp/TUVvf9nkxqWv+VgLCpG0lc4iawlehlO5A96jFDM4wJEKDrXJhJECiIGtAm3s8I4dcaqilfYoJ89ge9jluKR2F0XJgE5PIPCOHXGqotcxs12/fBro9vOWkcZKBMGPE3HPVuIXkmpFuTCbxGJO1wAnjkGBcdat421ysmZEYufnaF3BPzHv4egsdzjZmPLjx+itw4DDVGByp8WOS+4+hNF7ePXCOsHU4eUzTr5Ebe0wL9f35OX8KMACWoN9NKNcdqwAAAABJRU5ErkJggg==) no-repeat calc(100% - 5px) 6px!important; } select.validation-error-input { background-position-x: calc(100% - 20px)!important; } .validation-error { color: #f04747; } /* ============================================================================ /* FEEDBACK PANELS /* ============================================================================ */ .feedback-panel { border-style: solid; border-width: 1px; padding: 10px; font-weight: bold; border-color: #0486c4; background-color: #d9f0fb; } .feedback-panel--bordered-none { border-width: 0px; } .feedback-panel--bordered-bottom { border-bottom-width: 1px; } .feedback-panel__message:not(:last-child) { margin-bottom: 6px; } .feedback-panel__message { min-height: 16px; padding: 0px 0px 0px 21px; background-repeat: no-repeat; background-position: left 1px; color: #0486c4; width: calc(100% - 30px); } .feedback-panel__message--success { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTg5YWJiNy04NTY5LTkwNDYtYjQ5YS04YzY4NWE0ODRlZjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFDRTM0NTZEOTMzMTFFNEEwRDZFM0IwRDc2OEE0MDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFDRTM0NTVEOTMzMTFFNEEwRDZFM0IwRDc2OEE0MDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YWJiNjk2ZmUtNDc5MS05ZDQ1LThlMTktY2Y3OWU2ODlhMTdkIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OWYzODM4MjMtZDkyZi0xMWU0LWFhNGMtZmVkNjgwODQ2MGI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hWLuuAAAAjpJREFUeNqcU01oE0EUfjOz2fxpu2kLQUlpFK2GQjyIB+OtqE3pXRC9eGpFoeBZEOzFnuOld/EseJDtUTBUFDwIFoNixKIEbExCom2T3fV9k8my1JsTPjK77/vevHnvW5F/RIfXVcYCo8QomHfbjCrDZWxGySKSIM+4y1jOnpk8knISFE/HdGC/16ffrT1qfNzt8uMG4zGjjphyLofitezsxMr0uaydyiTJshUJITSsuKIkJ5zKj9sqJku93T9TzH/HaI0S3Id4csbhmogCn+EFDLMPTLlSUMpJkrREkZN4uI40d17O5MaYOBT5g4D8fkDega+B/Y1jq1RMX9QccKGB1kLDcGehpD7VB4wIz1hzE+fpZm5V7xffnCRwoeGeLKCCEhqGOgN/KBqdPtj3KR04VLnwLOz0mMportawFgkKo25b/Htx6RPdO7seXuN5+X0ovvJyhtoHTb03moIVnem147dJCYuWctep3q7RnbkHYWzenSaVlP+YBm+2MWesp98rNAgGeh8Vl91ZvrfQU8CURt6AFgmqMAmJIWFp6zT5GIVZt17NU1/tkYyJSBKhjQUtErhwWOD5HOSSmLS4dUqLH35YoR3vM6mEJGlLHQMHXONKVxpvb/za6QydpwhGofLrE1TtuKQg5NPxDjFwwDWW3hw5sQZ7wmGJo3E9Z5ykSzZlAxhz81ubGrXmE9asR63cgrdhz59fWkX2uw0B/3O93LBunzqNHn19+6PLnIoR1w9/jf/1Of8VYAAgzvFAeEbCwgAAAABJRU5ErkJggg==); } .feedback-panel__message--error { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTg5YWJiNy04NTY5LTkwNDYtYjQ5YS04YzY4NWE0ODRlZjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI3QThDQ0REOTMzMTFFNDg0NTI5MzlGODlDMDdERkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI3QThDQ0NEOTMzMTFFNDg0NTI5MzlGODlDMDdERkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjJmNGE4ZjEtYmVkNi1hODQxLTg0NDMtZWExMjhiMTFkNTQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjkxODlhYmI3LTg1NjktOTA0Ni1iNDlhLThjNjg1YTQ4NGVmNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvyQbLMAAAH0SURBVHjapFO7TgJBFL2zC7sgyMMgtjYWkGhjTJDGxEJ+wlosKP0Dbay1ofcn5AO0MMbEGChsjI3RKAGyPhZY1nOGwaCFMXGSk707c859zL2jDvLyc20BFaAMFMxeCzgDToHGNDkyZS8CNaC6lnKTeceWdMTSB93hqPTUD0oXPX8Hv3XgGLjjmb2Z+BLvr6bc3Y1s3Mk7EXFtS0LjOQZ7Hg6LScdxLVV+8IMctq+AziSDGsTbxYQjwzAUfxTKAOrAHNpwFVVIFyAHa/uy5z/iu2eZmqtLM9GxGEIPDnpBKJ3hSIM293hGDrnUUEsHFdYcUQqHIu9G3IbwGWkQbeOEZ+SQSw21LKHMCxvBYNo+jFeQu1owLiFuLsOF0EUZjE8NtXRQ4G2HSI01rzc9+W1dL89qrulQwZJ/LmbQYp/TUVvf9nkxqWv+VgLCpG0lc4iawlehlO5A96jFDM4wJEKDrXJhJECiIGtAm3s8I4dcaqilfYoJ89ge9jluKR2F0XJgE5PIPCOHXGqotcxs12/fBro9vOWkcZKBMGPE3HPVuIXkmpFuTCbxGJO1wAnjkGBcdat421ysmZEYufnaF3BPzHv4egsdzjZmPLjx+itw4DDVGByp8WOS+4+hNF7ePXCOsHU4eUzTr5Ebe0wL9f35OX8KMACWoN9NKNcdqwAAAABJRU5ErkJggg==); } .feedback-panel__message--general { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTg5YWJiNy04NTY5LTkwNDYtYjQ5YS04YzY4NWE0ODRlZjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkY0Q0U5MTFEOTMzMTFFNDgyNjk4NjYzM0JDQzJDOUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkY0Q0U5MTBEOTMzMTFFNDgyNjk4NjYzM0JDQzJDOUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmUwOGQzYjAtYmY2NS00YTQ2LWFhMjktYThmMmM1NDg4MmY4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NTE2ZjQyYmItZDkyZi0xMWU0LWFhNGMtZmVkNjgwODQ2MGI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+skBJUAAAAi5JREFUeNqkUzFrU1EU/u59973X2Neq2FaKIEWMkg4FtYsdOokdBJeCS39AHfwJghUHcdaluIlT0cXN4uQgCGpdNBgdQoaqRWhqo2mavHc938lLCXHTwAc393zfued85zyDK3cx8LssWBDMCUr5XVnwSvBcsN5PNn0JpgQ3BMvx1IUkSCZgDx3WQPZ7B2ljC63q24b8XRU8EFQZC3DmUk98Jz557nqhOB+5kXHYMAZ8JtceNiogSMYQTU5HxkVz6c63MQlsCOq9BDcpjiZZsYjSNtDZE+x3z1lHE8FauNHjMIGbkSQp27F5z8vhRFEe7KjIt37B7/1E1qwreOadxoRDLjXUMsECezZBoC/5dlMFxZE2Hi2dUvCsSSRGDrnUUOvoNg2D9welnz1q8O7W/IHTi7MncP72S1R2pS0XiXMRVCNaVlCi256GZRl82sHK1dODo9U7xpQj3HxCJYv//DFBmXM2xqrL4jBWnn35uwK5Y0w5wqWGWo5xWsq5yDnrqMSLH40WnryuYTxxKG/uYunhe1S2PUw0DBMOaaLOdg1p/esaN5FjfJrMXktkL7ujottipvbMdeXLToRhoWuivNN4s8atXLT5bq+2tz7DWKcEE8tLQ6OwhSMKnnmnMeGQm6/0em8TK1xPblgwfAzGhfJqKOMKuyIXd6vIPNrfP6FV23gsmnv9q1znbnM99zc/zJgwpkp6lpKNUcPYc/Pji4Zw7ufi6uDX+E+f8x8BBgBRJOmXDcyrIwAAAABJRU5ErkJggg==); } .feedback-panel__message--general { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTg5YWJiNy04NTY5LTkwNDYtYjQ5YS04YzY4NWE0ODRlZjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkY0Q0U5MTFEOTMzMTFFNDgyNjk4NjYzM0JDQzJDOUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkY0Q0U5MTBEOTMzMTFFNDgyNjk4NjYzM0JDQzJDOUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmUwOGQzYjAtYmY2NS00YTQ2LWFhMjktYThmMmM1NDg4MmY4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NTE2ZjQyYmItZDkyZi0xMWU0LWFhNGMtZmVkNjgwODQ2MGI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+skBJUAAAAi5JREFUeNqkUzFrU1EU/u59973X2Neq2FaKIEWMkg4FtYsdOokdBJeCS39AHfwJghUHcdaluIlT0cXN4uQgCGpdNBgdQoaqRWhqo2mavHc938lLCXHTwAc393zfued85zyDK3cx8LssWBDMCUr5XVnwSvBcsN5PNn0JpgQ3BMvx1IUkSCZgDx3WQPZ7B2ljC63q24b8XRU8EFQZC3DmUk98Jz557nqhOB+5kXHYMAZ8JtceNiogSMYQTU5HxkVz6c63MQlsCOq9BDcpjiZZsYjSNtDZE+x3z1lHE8FauNHjMIGbkSQp27F5z8vhRFEe7KjIt37B7/1E1qwreOadxoRDLjXUMsECezZBoC/5dlMFxZE2Hi2dUvCsSSRGDrnUUOvoNg2D9welnz1q8O7W/IHTi7MncP72S1R2pS0XiXMRVCNaVlCi256GZRl82sHK1dODo9U7xpQj3HxCJYv//DFBmXM2xqrL4jBWnn35uwK5Y0w5wqWGWo5xWsq5yDnrqMSLH40WnryuYTxxKG/uYunhe1S2PUw0DBMOaaLOdg1p/esaN5FjfJrMXktkL7ujottipvbMdeXLToRhoWuivNN4s8atXLT5bq+2tz7DWKcEE8tLQ6OwhSMKnnmnMeGQm6/0em8TK1xPblgwfAzGhfJqKOMKuyIXd6vIPNrfP6FV23gsmnv9q1znbnM99zc/zJgwpkp6lpKNUcPYc/Pji4Zw7ufi6uDX+E+f8x8BBgBRJOmXDcyrIwAAAABJRU5ErkJggg==); } .feedback-panel__close { float: right; cursor: pointer; text-indent: -10000px; width: 20px; height: 20px; border-radius: 4px; background: #0486c4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMRJREFUeNpi/P//PwMlgIkMPWK4DEgAYpBz2vFojgbiC0AcDxcBeQGK//1HgKlAzIgkB8IZQPwcKv8CJo6swPY/KpiCJJeNpPklEFthMwCEXdEM6QLiRiQ+SLMTsh50A0DY7z9u4IWuHpsBMP+igwxsanFFIzuRYlhdEInHC5GEvBAKDSgYaIQGJHIghuIyIBBJ83No1MHkGtCiMRCbAcia0QMMlKja0AzBMCAeiJ8BcQiOmAHhUqgh8TAxxoHIjSgAIMAAq64n8PWvVy8AAAAASUVORK5CYII=) no-repeat center center; } /*============================================================================ /* Simple Style Classes /* ============================================================================ */ .numeric-step { display: inline-block; vertical-align: middle; width: 30px; height: 30px; line-height: 30px; font-size: 20px; font-weight: bold; background-color: #111e27; color: white; border-radius: 50%; text-align: center; } .numeric-step--pill { border-radius: 10px; } .numeric-step--primary { background-color: #e8175d; } /*============================================================================ /* ETrade - Checkout /* ============================================================================ */ .e-panel.e-panel--bordered.e-panel--checkout-selected { border: 1px solid #53df55; background: #d9ffda url(../Images/ETrade/availability-in-stock.png) no-repeat calc(100% - 10px) 10px; position: relative; z-index: 1; } .e-panel.e-panel--checkout-selected .e-panel--filled { background-color: #53df55; } .e-panel.e-panel--checkout-selected .e-panel--bordered-bottom { border-color: #53df55; } .e-panel.e-panel--checkout-selected hr { background-color: #baf2bb; } .e-table__tr--checkout-selected { background-color: #d9ffda; } .e-table__tr--checkout-selected td:first-child { border-left: 1px solid #53df55; } .e-table__tr--checkout-selected td:last-child { border-right: 1px solid #53df55; } .e-table__tr--checkout-selected td { border-top: 1px solid #53df55!important; border-bottom: 1px solid #53df55!important; } .e-table__tr__td--checkout-selected { background: url(../Images/ETrade/availability-in-stock.png) no-repeat calc(100% - 10px) 10px; } .checkout-steps-panel { } .checkout-steps { display: flex; justify-content: space-between; } .checkout-steps.checkout-steps--center { align-items: center; } .checkout-steps__line { height: 2px; background-color: #eeeeee; flex: 1; margin: 0 calc(-25px); } .checkout-steps__step { width: 100px; text-align: center; line-height: 1.1; z-index: 1; } .checkout-steps__step__number, .checkout-steps__step__number:visited, .checkout-steps__step__number:hover { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; background-color: #eeeeee; color: white; border-radius: 999px; width: 64px; height: 64px; font-size: 32px; margin: 0 auto; text-decoration: none; transition: transform .2s; } .checkout-steps__step__number[href]:hover { transform: scale(1.1); } .checkout-steps__line.checkout-steps__line--active, .checkout-steps__step.checkout-steps__step--active .checkout-steps__step__number { background-color: #888888; } .checkout-steps__step.checkout-steps__step--current .checkout-steps__step__number { background-color: black; } .checkout-steps__step__title { margin-top: 5px; } @media all and (max-width: 640px) { .checkout-steps__step { width: 60px; } .checkout-steps__step__number { width: 32px; height: 32px; font-size: 14px; } .checkout-steps__step__title { font-size: 12px; } } .checkout-confirm { padding: 0 10px 0px 5px; } .checkout-confirm__item { display: flex; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e6e6e6; } .checkout-confirm__item__step { /* So that items with no step number visible keep shape */ width: 25px; height: 25px; } .checkout-confirm__item__step > span { display: flex; align-items: center; justify-content: center; background-color: black; color: white; border-radius: 999px; width: 25px; height: 25px; } .checkout-confirm__item__content { flex: 1; padding: 0 20px; } .checkout-confirm__item__content__details { display: flex; } @media all and (max-width: 959px) { .checkout-confirm { padding: 0; } .checkout-confirm__item__content__details { display: block; margin-bottom: 5px; } } .checkout-confirm__item__content__details__title { width: 155px; padding-right: 30px; font-weight: bold; } .checkout-confirm__item__content__details__warning { flex: 1; color: red; } .checkout-confirm__item__content__details__body { flex: 1; line-height: 1; } /* ============================================================================ /* Plugin - Etellect Gallery /* ============================================================================ */ .etellect-gallery { } /* item is invisible, but used for layout - required to make items animate - see masonry faqs */ .etellect-gallery__item { float: left; /*width: PLEASE SPECIFY WIDTH in element class for example (etellect-gallery__item w50 w50--m w100--t) */ padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .etellect-gallery__item a { display: block; position: relative; overflow: hidden; } .etellect-gallery__item__content__hoverstate { position: absolute; margin: 5px; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; background-repeat: no-repeat; background-position: center center; -webkit-transition: background 0.4s ease-in-out; -moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out; -o-transition: background 0.4s ease-in-out; transition: background 0.4s ease-in-out; } .etellect-gallery__item:hover .etellect-gallery__item__content__hoverstate { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABaFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9bEQlHAAAAd3RSTlMAAQMFBgcJCgsMDxAREhQVFhcZHB4fISMlJicoKSosLS8yMzg5Oz5AQkRJTE5PUlRWV11eX2BkZXJ1eX6DhYeMjpCSk5SYmZylqK2vsLGytLq7vcHDxsfMzc7P0dLT1NXY2drc3d7f4eXm5+vv8PLz9fb5+/z9/iDROtgAAAEgSURBVHjatZFHUwJBEEZ7zQnjmFnMERPmhDkRRMSAsroqwQQiKPL9fWurKGdmdT3pO/WbV33oGvojulf8t/cnm+MlP8UODwpoU9+r6wWJ9Yk2Nrh0DOyUmeoMsFFVmCcfcahI1Z7JL3BTH7AsViUIt+g9mXeHoH2IlZOIG3uCbWGRJNhbrJjbOVQ5K3q+k1syW08yAYxySadtpuzBGJdojpnyKQa4eOGUa0UyVcNtHj45OxESzPb8MSzW0jCmRZ9DvEHQfQTlO4+gOb52t4FIs9Sr/XhdVY1/qp0NA8BNi9SL1nKA7js4SwEhHcBdK0l07RqveAq4iF0CiJo6Ke1DI72VxlR3BSBhJyuaNADXZAmLAFmypvECcfqte/vpn/kEAHZCKPKDguYAAAAASUVORK5CYII=); background-color: #000000; background-color: rgba(0, 0, 0, 0.6); } /*@media only screen and (min-width: 1200px) { .etellect-gallery__item { width: 25%; } } @media only screen and (min-width: 480px) and (max-width: 1199px) { .etellect-gallery__item { width: 33%; } } @media only screen and (max-width: 479px) { .etellect-gallery__item { width: 50%; } }*/ .etellect-gallery__item img { width: 100%; height: auto; display: block; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -ms-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } .etellect-gallery__item:hover img { transform: scale(1.2); } /*============================================================================ /* Plugin - Etellect List (Jquery Plugin) /* ============================================================================ */ .etellectlookup__results { display: none; background-color: white; border: 1px solid #c6c6c6; padding: 5px; } .etellectlookup__results__item { color: inherit!important; text-decoration: inherit!important; display: block; cursor: pointer; background-color: #f5f5f5; padding: 5px; clear: both; } .etellectlookup__results__item:after { content: ""; display: table; clear: both; } .etellectlookup__results__item:not(:last-child) { margin-bottom: 5px; } .etellectlookup__results__item.has-focus { background-color: #c5e2ed; } .etellectlookup__results__item.has-hover { background-color: #daeef5; } .etellectlookup__results__item__image { float: left; width: 60px; margin-right: 10px; text-align: center; } .etellectlookup__results__item__content { overflow: auto; } .etellectlookup__results__item__content__highlight { text-decoration: underline; } /*============================================================================ /* Plugin - Etellect Confirm (Jquery Plugin) /* ============================================================================ */ .etellect-confirm-wrapper { position: fixed; top: 0; right: 0px; bottom: 0px; left: 0px; background-color: black; opacity: 0.75; z-index: 10000; } .etellect-confirm { position: fixed; z-index: 999999; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 15px 25px 15px 15px; width: 420px; border-radius: var(--border-radius); } .etellect-confirm__icon { float: left; margin: 0px 20px 0px 10px; /*background-repeat: no-repeat; background-position: center; background-image: url(data:image/png;base64,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); background-size: contain;*/ font-size: 40px; color: var(--primary-color) } .etellect-confirm__message { overflow: auto; } .etellect-confirm .button { padding: 10px 15px; } @media all and (max-width: 568px) { .etellect-confirm { width: 90%; padding-right: 10px; } .etellect-confirm__icon { float: none; text-align: center; margin-bottom: 15px; } .etellect-confirm__message { float: none; overflow: initial; text-align: center; } } /*============================================================================ /* Dashboard Value /* ============================================================================ */ .dashboard-value { display: inline-block; vertical-align: top; width: 300px; background-color: #3b3b3b; /*111e27;*/ color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; min-height: 80px; } .dashboard-workflow { display: inline-block; vertical-align: top; width: 240px; background-color: #3b3b3b; /*111e27;*/ color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; min-height: 76px; } .dashboard-value--primary { background-color: #e8175d; } .dashboard-value--standard .dashboard-value__icon { position: absolute; width: 80px; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.125); } .dashboard-value--standard .dashboard-value__icon__outer { display: table; width: 100%; height: 100%; } .dashboard-value--standard .dashboard-value__icon__outer__inner { display: table-cell; vertical-align: middle; padding: 15px; } .dashboard-value--standard .dashboard-value__icon__outer__inner img { display: inline-block; max-width: 40px; } .dashboard-value--standard .dashboard-value__text { position: relative; width: 175px; top: 0; width: 220px; padding: 15px; line-height: 1; } .dashboard-value--standard.dashboard-value--has-icon .dashboard-value__text { left: 80px; } .dashboard-value--standard .dashboard-value__text__number { font-size: 32px; margin-bottom: 2px; } .dashboard-value--standard .dashboard-value__text__description { font-size: 14px; } .dashboard-value--standard .dashboard-value__text__number2 { font-size: 20px; margin-bottom: 2px; } .dashboard-value--standard .dashboard-value__text__description2 { font-size: 12px; } .dashboard-value--alternate .dashboard-value__icon { position: absolute; width: 36px; height: 36px; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.25); border-radius: 50%; } .dashboard-value--alternate .dashboard-value__icon__outer { display: table; width: 100%; height: 100%; } .dashboard-value--alternate .dashboard-value__icon__outer__inner { display: table-cell; vertical-align: middle; text-align: center; } .dashboard-value--alternate .dashboard-value__icon__outer__inner img { display: inline-block; max-width: 20px; } .dashboard-value--alternate .dashboard-value__text { top: 0; line-height: 1; } .dashboard-value--alternate .dashboard-value__text__number { font-size: 30px; margin-bottom: 2px; padding: 15px; } .dashboard-value--alternate .dashboard-value__text__description { font-size: 14px; position: absolute; bottom: 0px; width: 100%; padding: 5px 15px; background-color: rgba(0, 0, 0, 0.125); } /*============================================================================ /* Tag and Tag Control Related Styles /* ============================================================================ */ .tag, .tag:hover, .tag:visited { font-size: 11px; padding: 4px 7px; color: #ffffff; background: #E8175D; /* border: 1px solid #E8175D; */ white-space: nowrap; overflow: hidden; border-radius: 3px; text-decoration: none; display: inline-block; } .tag.active, a.tag:hover { opacity: 0.75; } .tag.tag--primary { background-color: var(--primary-color); color: var(--primary-color-text); } .tag.tag--secondary { background-color: var(--secondary-color); color: var(--secondary-color-text); } .tag.tag--tertiary { background-color: var(--tertiary-color); color: var(--tertiary-color-text); } .tag.tag--quaternary { background-color: var(--quaternary-color); color: var(--quaternary-color-text); } .tag.no-link { cursor:default; } .tag-container { border: 1px solid #dadada; background-color: #f5f5f5; display: block; /*padding: 10px;*/ } .tag-letter { padding: 5px; color: #e8175d; background: #dadada; border:1px solid #dadada; white-space: nowrap; overflow: hidden; border-radius: 2px 0 0 2px; text-decoration: none; display: inline-block; margin-top: 2px; margin-bottom: 2px; } /*============================================================================ /* High Visibility Notice /* ============================================================================ */ .high-visibility-notice { background-color: black; color: white; padding: 20px; } .high-visibility-notice a, .high-visibility-notice a:visited, .high-visibility-notice a:hover { color: white; } .high-visibility-notice a:hover { opacity: 0.75; } .high-visibility-notice--green { background-color: #2bb230; } .high-visibility-notice--red { background-color: #ba0000; } .high-visibility-notice__title { font-size: 20px; } /* ============================================================================ Speech Bubble Panel ============================================================================ */ .speech-bubble { position: relative; height: calc(100% - 40px); border-radius: 8px; background-color: #e5e5e5; padding: 20px; } .speech-bubble:after { position: absolute; content: " "; border-left: 40px solid transparent; border-top: 40px solid #e5e5e5; bottom: -40px; right: 20px; } /*============================================================================ /*============================================================================ /*============================================================================ /*============================================================================ /* ETELLECT COMMON CONTROLS BELOW THIS POINT /*============================================================================ /*============================================================================ /*============================================================================ /* ============================================================================ */ /*============================================================================ /* Order Grid /* ============================================================================ */ .order-grid { border: 1px solid #c6c6c6; border-collapse: collapse; width: 100%; } .order-grid th { font-weight: bold; background-color: #c6c6c6; } .order-grid th, .order-grid td { text-align: left; padding: 7px; margin: 0px; vertical-align: top; } .order-grid .order-grid-item td { border-bottom: 1px solid #c6c6c6; } .order-grid .order-grid-item-code { font-size: 13px; font-style: italic; } .order-grid .order-grid-total { text-align: right; font-size: 20px; color: #419fdf; } .order-grid .order-grid-summation, .order-grid .order-grid-summation-price, .order-grid .order-grid-heading-price, .order-grid .order-grid-item-price { text-align: right; } /*============================================================================ /* Page Divider With Content /* ============================================================================ */ .ecc__page-divider-with-content { background-repeat: no-repeat; background-size: cover; background-position: center; } .ecc__page-divider-with-content__content { max-width: 80%; margin: 0px auto; padding: 100px 0px; text-align: center; } .ecc__page-divider-with-content__content__title { font-size: 32px; } .ecc__page-divider-with-content__content__body { /* inherit from base font size */ } .ecc__page-divider-with-content__content__link { display: inline-block; background-color: black; margin: 0px auto; margin-top: 50px; } .ecc__page-divider-with-content__content__link a, .ecc__page-divider-with-content__content__link a:visited, .ecc__page-divider-with-content__content__link a:hover { display: block; padding: 10px 20px; text-decoration: none; color: white; } .ecc__page-divider-with-content__content__image { margin-top: 50px; } @media all and (max-width: 959px) { .ecc__page-divider-with-content__content__title { font-size: 22px; } .ecc__page-divider-with-content__content__body { font-size: 16px; } } /*============================================================================ /* Resource Columns /* ============================================================================ */ .ecc_resource-column { padding: 100px 0px; } .ecc_resource-column__content { text-decoration: none; } .ecc_resource-column__content__image { text-align: center; } .ecc_resource-column__content__title { font-size: 22px; padding: 20px; color: #222222; text-align: center; } .ecc_resource-column__content__summary { font-size: 16px; padding: 0px 20px 20px 20px; text-align: center; color: #333333; } .ecc_resource-column__content__link { padding: 20px; text-align: center; } .ecc_resource-column_content_link_span, .ecc_resource-column__content__link a, .ecc_resource-column__content__link a:visited, .ecc_resource-column__content__link a:hover { font-size: 16px; border-radius: 4px; background-color: #0093d5; padding: 8px 15px 5px 15px; color: #fff; text-decoration: none; border-bottom: 2px solid #0076aa; } .ecc_resource-column_content_link_span:hover .ecc_resource-column__content__link a:hover { background-color: #0085c0; border-bottom: 2px solid #006490; } /*============================================================================ /* Dynamic Form Controls /* ============================================================================ */ .button--eformsyesno { } .button--eformsyesno--selected, .button--eformsyesno--selected:hover { color: white; background: black; } .button--eformsyesno--correct, .button--eformsyesno--correct:hover { color: white; background: green; } .button--eformsyesno--incorrect, .button--eformsyesno--incorrect:hover { color: white; background: red; } /*============================================================================ /* Social Media Bar /* ============================================================================ */ .social-bar { position: fixed; left: 0; top: 50%; margin-top: -150px; z-index: 8000; float: left; background-color: black; border-radius: 0px 4px 4px 0px; width: 32px; } /*============================================================================ /* EForm /* ============================================================================ */ .instantreach-form-loading { background-color: red; padding: 50px; text-align: center; background: transparent url('/EtellectCommonControls/EForms/SPA/images/loader.gif') no-repeat center center; /* got bg from icons8.com/preloaders/en/horizontal */ } .instantreach-form__summary-area { border: 3px solid #dcdcdc; background-color: white; padding: 20px; margin-bottom: 20px; } .instantreach-form { border: 1px solid #dcdcdc; margin-bottom: 20px; background-color: white; } .instantreach-form__group-heading { background-color: #f3f1ed; border-bottom: 1px solid #dcdcdc; padding: 10px 20px; font-weight: bold; /*font-size: 0.8rem;*/ } .instantreach-form__question-row { border-bottom: 1px solid #dcdcdc; padding: 20px; } .instantreach-form__question-row__text { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eeeeee; } .instantreach-form__question-row__choices { margin-bottom: 15px; } .instantreach-form__question-row__choices__choice { display: flex; margin-bottom: 10px; } .instantreach-form__question-row__choices__choice__icon { padding-right: 10px; } .instantreach-form__question-row__choices__choice__text { align-self: center; flex-grow: 1; } .answer-response { border: 1px solid #808080; padding: 10px; background-color: #eeeeee; } .answer-response--positive { border-color: green; color: green; } .answer-response--neutral { border-color: blue; color: blue; } .answer-response--negative { border-color: red; color: red; } .answer-result--chosen { } /* ==================================================================================== IconTextImage control ==================================================================================== */ .icontextimage-details { position: relative; } .icontextimage-details-alternate { position: relative; float: right; } .icontextimage-details-icon { position: relative; margin: auto; left: 50%; -webkit-transform: translateX(-50%) } .icontextimage-details-text { position: relative; text-align: center; } .icontextimage-title { font-size: 1.6rem; color: #eb7400; /* amber */ } .icontextimage-subtitle { font-size: 1.2rem; color: #0486c4; } .icontextimage-description { font-size: 1.0rem; } .icontextimage-image { display: block !important; margin: auto; } /*============================================================================ /* Timeline /*============================================================================ */ .timeline { font-family: "Helvetica Neue", helvetica, arial, sans-serif; } .timeline__row:not(:last-child)::before { content: ''; width: 1px; height: 100%; background-color: #e7e7e7; position: absolute; left: 65px; } .timeline__row { position: relative; clear: both; } .timeline__row:not(:last-child) { padding-bottom: 35px; } .timeline__row__date { /* font float this */ position: relative; left: 14px; width: 64px; height: 64px; display: table-cell; text-align: center; vertical-align: middle; margin: 0px auto; background-color: white; font-size: 11px; border: 1px solid #e7e7e7; border-radius: 50%; color: #586166; } .timeline__row__type { float: left; position: absolute; width: 32px; height: 32px; padding: 8px; background-color: #111e27; border-radius: 50%; } .timeline__row__status { float: left; position: relative; left: 50px; width: 32px; height: 32px; padding: 8px; background-color: #e8175d; border-radius: 50%; } .timeline__row__status--green { background-color: #8ec04d; } .timeline__row__body { margin-left: 100px; position: relative; } .timeline__row__body__content { border-bottom: 1px solid #e7e7e7; padding: 7px 100px 10px 0px; } .timeline__row__body__posted { position: absolute; font-size: 12px; bottom: 10px; right: 10px; color: #a1a1a1; } /* ============================================================================ */ /* NEWS and Events */ /* ============================================================================ */ .year-picker-search { background-color: #f47797; border-bottom: 4px solid #d8748d; padding: 7px 7px 3px 7px; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-search.purple { background-color: #e5dbeb; border-bottom: 4px solid #d2c0dc }*/ .year-picker-search a, .year-picker-search a:visited, .year-picker-search a:hover { float: right; background-color: #ed1d51; border: 2px solid white; text-align: center; color: white; width: 25%; line-height: 30px!important; font: 18px 'open_sansbold', arial, verdana; text-decoration: none; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-search.purple a, .year-picker-search.purple a:visited, .year-picker-search.purple a:hover { background-color: #9b26b6; color: white; }*/ .year-picker-search select, .year-picker-search input { overflow:auto; width: 75%; height: 34px; border: none; padding-left:10px; } .year-picker-search input { padding-left: 37px; background: white url(../images/ecms/news-icon-picker-search.png) no-repeat 7px center; } .year-picker-search select:focus, .year-picker-search input:focus { border: none; outline: none; } .year-picker-toggle { display: block; background: #f68ea8 url('../images/ecms/news-icon-picker-closed.png') no-repeat 96% center; border-bottom: 4px solid #de8ba0; padding: 10px 10px 6px 10px; font: 18px 'open_sansbold', arial, verdana; color: white; cursor: pointer; margin-top: 2px; padding: 10px; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-toggle.purple { background: #C0A6CF url('../images/ecms/news-icon-picker-closed.png') no-repeat 96% center; border-bottom: 4px solid #A491AF; }*/ .year-picker-toggle.open { background-color: #ed1d51; background-image: url('../images/ecms/news-icon-picker-open.png'); border-bottom: 4px solid #be1741; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-toggle.purple.open { background-color: #9b26b6; background-image: url('../images/ecms/news-icon-picker-open.png'); border-bottom: 4px solid #80109a; }*/ .year-picker-content { font: 18px 'open_sansbold', arial, verdana; } .year-picker-content-month, .year-picker-content-month:visited, .year-picker-content-month:hover { display: block; padding: 15px 10px; color: #ed1d51; text-decoration: none; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-content-month.purple, .year-picker-content-month.purple:visited, .year-picker-content-month.purple:hover { color:#9b26b6; }*/ .year-picker-content-month.selected /*.year-picker-content-month:hover*/ { background-color: #fef2f5; } .year-picker-content-month div { float: right; width: 50px; height: 30px; border-radius: 5px; border-bottom: 4px solid #be1741; background-color: #ed1d51; margin: -4px 0px 0px 5px; line-height: 30px; color: white; text-align: center; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-content-month.purple div { border-bottom: 4px solid #80109a; background-color:#9b26b6; }*/ .year-picker-content-month img { vertical-align: text-bottom; position: relative; top: -4px; margin-right: 3px; } .year-picker-no-content { padding: 10px; background-color: #fef2f5; } .year-picker-selected-heading { height: 48px; padding: 12px 10px; font-size: 22px; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.year-picker-selected-heading.purple { background-color: #C0A6CF; }*/ .news-picker-toggle { display: block; padding: 10px; background: #f68ea8 url('../images/ecms/news-icon-picker-closed.png') no-repeat 96% center; border-bottom: 4px solid #de8ba0; font: 18px 'open_sansbold', arial, verdana; color: white; cursor: pointer; margin-top: 2px; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.news-picker-toggle.purple { background: #C0A6CF url('../images/ecms/news-icon-picker-closed.png') no-repeat 96% center; border-bottom: 4px solid #A491AF; }*/ .news-picker-toggle.open { background-color: #ed1d51; background-image: url('../images/ecms/news-icon-picker-open.png'); border-bottom: 4px solid #be1741; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.news-picker-toggle.purple.open { background-color: #9b26b6; background-image: url('../images/ecms/news-icon-picker-open.png'); border-bottom: 4px solid #80109a; }*/ .news-picker { } .news-picker-item:not(:last-child) { border-bottom: 4px solid #fbd2dc; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.news-picker-item.purple:not(:last-child) { border-bottom: 4px solid #e5dbeb; }*/ .news-picker-item { padding: 20px 0px; } .news-picker-item:first-child .news-picker-item-image { width: 45%; } .news-picker-item:not(:first-child) .news-picker-item-content .form-button { display: none; } .news-picker-item-image { float: left; width: 25%; margin-right: 20px; } .news-picker-item-content { overflow: auto; } .news-picker-item-content-title, .news-picker-item-content-title:hover, .news-picker-item-content-title:visited { font: 22px 'quicksandbold', times; color: #ed1d51; text-decoration: none; } /* WD: THIS MUST BE PUT ON THE CUSTOM CSS FILE OF YOUR PROJECT!!!! */ /*.news-picker-item-content-title.purple, .news-picker-item-content-title.purple:hover, .news-picker-item-content-title.purple:visited { color: #9b26b6; }*/ .news-picker-item-content-date { display: block; margin-bottom: 10px; } .news-picker-item-content-text { margin-bottom: 20px; } @media all and (max-width: 767px) { .news-picker-item-image, .news-picker-item:first-child .news-picker-item-image { float: right; width: 40%; margin: 0px 0px 20px 20px; } .news-picker-item-content { display: inline } } .news-item { } .news-item-title { } .news-item-content { } .news-item-image { float: right; max-width: 420px; /*width: 45%;*/ margin-left: 20px; } .news-item-associated-document { background-color: #f3f3f3; padding: 20px; border-radius: 5px; margin-top: 20px; } .news-item-associated-document-icon { float: left; width: 48px; margin-right: 20px; } .news-item-associated-document-content { overflow: auto; } .news-item-associated-document-content-title { font: 22px 'quicksandbold', times; color: #ed1d51; margin-bottom: 3px; } @media all and (max-width: 767px) { .news-item-image { float: none; width: 100%; margin-left: 0px; margin-bottom: 10px; } } .news-button-read-more, .news-button-read-more:hover { display: inline-block; border: none; border-bottom: 5px solid #d50032; border-radius: 3px; padding: 7px 20px 5px 20px; font-size: 16px; color: white; text-decoration: none; opacity: 0.85; } .news-row-news { padding-left: 25px; } .news-picker-item:not(:first-child) .news-picker-item-content .news-button-read-more { display: none; } /* ============================================================================ /* Pay Transaction /* ============================================================================ */ .pay-transaction { max-width: 500px; margin: 0px auto; border: 1px solid #cccccc; font-size: inherit; background-color: white; } .pay-transaction__buyer-details { text-align: center; border-bottom: 1px solid #cccccc; padding: 20px; margin-bottom: 20px; background-color: #f8f8f8; } .pay-transaction__transaction-details { text-align: center; padding: 0px 20px 0px 20px; color: #808080; } .pay-transaction__transaction-total { text-align: center; font-size: 1.5em; padding: 0px 20px 20px 20px; } .pay-transaction__transaction-total__amount { font-weight: bold; color: #d1545a; } .pay-transaction__payment-methods { padding: 0px 20px 20px 20px; } .pay-transaction__payment-methods__choice { border: 1px solid #cccccc; background-color: #f8f8f8; padding: 20px; border-collapse: unset; } .pay-transaction__payment-methods__choice:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .pay-transaction__payment-methods__choice:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .pay-transaction__payment-methods__choice:not(:first-child) { border-top: 0px; } .pay-transaction__payment-method__choice__selector { display: block; } .pay-transaction__payment-method__choice__selector__logos { float: right; text-align: right; display: flex; align-items: center; } .pay-transaction__payment-method__choice__selector__logos img { display: block; margin-left: 10px; } @media all and (max-width: 568px) { .pay-transaction__payment-method__choice__selector__logos { width: 50px; } .pay-transaction__payment-method__choice__selector__logos img:not(:last-child) { margin-bottom: 5px; } } .pay-transaction__payment-method__choice__selector__title { font-weight: bold; } .pay-transaction__payment-method__choice__selector__description { color: #8b8b8b; } .pay-transaction__payment-method__choice__interface { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e3e3e3; } .pay-transaction__proceed { padding: 0px 20px 20px 20px; } .pay-transaction__proceed__button, .pay-transaction__proceed__button:visited { display: block; background-color: #4db00c; text-decoration: none; padding: 10px; text-align: center; width: 100%; border-radius: 5px; font-size: 1.5em; color: white!important; } .pay-transaction__proceed__button:hover { background-color: #399000; color: white!important; text-decoration: none; } .pay-transaction__proceed__button[disabled] { pointer-events: none; opacity: 0.3; } .pay-transaction__proceed__button a, .pay-transaction__proceed__button a:visited, .pay-transaction__proceed__button a:hover { background-color: #399000; color: white !important; text-decoration: none; } /* ============================================================================ /* FIT AND FILL IMAGE /* ============================================================================ */ .fit-and-fill-image { position: relative; overflow: hidden; } .fit-and-fill-image__filler { position: absolute; top: 0; bottom: 0; left: 0; right: 0; filter: blur(7px); margin: -14px; background-position: center center; background-size: cover; } .fit-and-fill-image img { display: block; max-width: 100%; max-height: 220px; margin: auto; position: relative; z-index: 1; } @media all and (max-width: 767px) { .fit-and-fill-image img { max-height: 175px; } } /* ============================================================================ /* OpenId Connect Providers /* ============================================================================ */ .openid-provider-button, .openid-provider-button:hover { width: 100%; text-align: center; text-decoration: none; padding: 9px; background-color: white; border: 1px solid #d6d9dc; color: #232629; text-decoration: none; border-radius: 5px; font-family: Arial; font-size: 14px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 8px; } .openid-provider-button:hover { background-color: #f8f9f9; } .openid-provider-button .logo { width: 20px; height: 20px; margin-right: 6px; background-size: contain; } .openid-provider-button.openid-provider-button--google { } .openid-provider-button.openid-provider-button--google .logo { background-image: url('/EtellectCommon/Images/OpenId/google.png'); } .openid-provider-button.openid-provider-button--microsoft { } .openid-provider-button.openid-provider-button--microsoft .logo { background-image: url('/EtellectCommon/Images/OpenId/microsoft.png'); } .openid-provider-button.openid-provider-button--apple { border-color: #0e0e0e; background-color: #0e0e0e; color: #f7f7f7; } .openid-provider-button.openid-provider-button--apple:hover { border-color: #0e0e0e; background-color: #000000; } .openid-provider-button.openid-provider-button--apple .logo { background-image: url('/EtellectCommon/Images/OpenId/apple.png'); } .openid-provider-button.openid-provider-button--facebook { border-color: #385499; background-color: #385499; color: white; } .openid-provider-button.openid-provider-button--facebook:hover { border-color: #334c8a; background-color: #334c8a; } .openid-provider-button.openid-provider-button--facebook .logo { background-image: url('/EtellectCommon/Images/OpenId/facebook.png'); } .openid-provider-button.openid-provider-button--twitter { border-color: #1DA1F2; background-color: #1DA1F2; color: white; } .openid-provider-button.openid-provider-button--twitter:hover { border-color: #1a90da; background-color: #1a90da; } .openid-provider-button.openid-provider-button--twitter .logo { background-image: url('/EtellectCommon/Images/OpenId/twitter.png'); } /* ============================================================================ /* LINK PANEL /* ============================================================================ */ .link-panel, .link-panel:visited, .link-panel:hover, .link-panel:active { display: block; cursor: pointer; border-radius: var(--border-radius); background-color: #f3f3f3; text-decoration: none; color: inherit; overflow: hidden; padding: var(--spacing); } .link-panel:hover { background-color: #f7f7f7; } .link-panel.link-panel--primary, .link-panel.link-panel--primary:visited, .link-panel.link-panel--primary:active { background-color: var(--primary-color); color: var(--primary-color-text); } .link-panel.link-panel--primary:hover { background-color: var(--primary-color-hover); } .link-panel.link-panel--secondary, .link-panel.link-panel--secondary:visited, .link-panel.link-panel--secondary:active { background-color: var(--secondary-color); color: var(--secondary-color-text); } .link-panel.link-panel--secondary:hover { background-color: var(--secondary-color-hover); } .link-panel.link-panel--tertiary, .link-panel.link-panel--tertiary:visited, .link-panel.link-panel--tertiary:active { background-color: var(--tertiary-color); color: var(--tertiary-color-text); } .link-panel.link-panel--tertiary:hover { background-color: var(--tertiary-color-hover); } .link-panel.link-panel--quaternary, .link-panel.link-panel--quaternary:visited, .link-panel.link-panel--quaternary:active { background-color: var(--quaternary-color); color: var(--quaternary-color-text); } .link-panel.link-panel--quaternary:hover { background-color: var(--quaternary-color-hover); } /* ============================================================================ /* POSITIONING /* ============================================================================ */ .top0 { top: 0px; } .top5 { top: 5px; } .top10 { top: 10px; } .top15 { top: 15px; } .top20 { top: 20px; } .top25 { top: 25px; } .top30 { top: 30px; } .top35 { top: 35px; } .top40 { top: 40px; } .top45 { top: 45px; } .top50 { top: 50px; } .bottom0 { bottom: 0px; } .bottom5 { bottom: 5px; } .bottom10 { bottom: 10px; } .bottom15 { bottom: 15px; } .bottom20 { bottom: 20px; } .bottom25 { bottom: 25px; } .bottom30 { bottom: 30px; } .bottom35 { bottom: 35px; } .bottom40 { bottom: 40px; } .bottom45 { bottom: 45px; } .bottom50 { bottom: 50px; } .left0 { left: 0px; } .left5 { left: 5px; } .left10 { left: 10px; } .left15 { left: 15px; } .left20 { left: 20px; } .left25 { left: 25px; } .left30 { left: 30px; } .left35 { left: 35px; } .left40 { left: 40px; } .left45 { left: 45px; } .left50 { left: 50px; } .right0 { right: 0px; } .right5 { right: 5px; } .right10 { right: 10px; } .right15 { right: 15px; } .right20 { right: 20px; } .right25 { right: 25px; } .right30 { right: 30px; } .right35 { right: 35px; } .right40 { right: 40px; } .right45 { right: 45px; } .right50 { right: 50px; }