/* Minification failed. Returning unminified contents. (25348,43): run-time error CSS1030: Expected identifier, found '.' (25348,67): run-time error CSS1031: Expected selector, found ')' (25348,67): run-time error CSS1025: Expected comma or open brace, found ')' (25351,45): run-time error CSS1030: Expected identifier, found '.' (25351,69): run-time error CSS1031: Expected selector, found ')' (25351,69): run-time error CSS1025: Expected comma or open brace, found ')' (25353,47): run-time error CSS1030: Expected identifier, found '.' (25353,71): run-time error CSS1031: Expected selector, found ')' (25353,71): run-time error CSS1025: Expected comma or open brace, found ')' (37064,24): run-time error CSS1030: Expected identifier, found '>' (37064,55): run-time error CSS1031: Expected selector, found ')' (37064,55): run-time error CSS1025: Expected comma or open brace, found ')' (37068,26): run-time error CSS1030: Expected identifier, found '>' (37068,57): run-time error CSS1031: Expected selector, found ')' (37068,57): run-time error CSS1025: Expected comma or open brace, found ')' (37070,24): run-time error CSS1030: Expected identifier, found '>' (37070,54): run-time error CSS1031: Expected selector, found ')' (37070,54): run-time error CSS1025: Expected comma or open brace, found ')' (37074,26): run-time error CSS1030: Expected identifier, found '>' (37074,56): run-time error CSS1031: Expected selector, found ')' (37074,56): run-time error CSS1025: Expected comma or open brace, found ')' */ /*! jQuery UI - v1.12.1 - 2016-09-14 * http://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6 * Copyright jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); /* support: IE8 */ } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .ui-icon { display: inline-block; vertical-align: middle; margin-top: -.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; font-size: 100%; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px .4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { padding: .4em 1em; display: inline-block; position: relative; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Support: IE <= 11 */ overflow: visible; } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2em; box-sizing: border-box; text-indent: -9999px; white-space: nowrap; } /* no icon support for input elements */ input.ui-button.ui-button-icon-only { text-indent: 0; } /* button icon element(s) */ .ui-button-icon-only .ui-icon { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: .4em 1em; } /* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup { vertical-align: middle; display: inline-block; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-controlgroup .ui-controlgroup-label { padding: .4em 1em; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } /* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input { /* Support: IE8 only, Android < 4.4 only */ width: 75%; width: calc( 100% - 2.4em); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: .12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-checkboxradio-disabled { pointer-events: none; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Icons */ .ui-datepicker .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; left: .5em; top: .3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0; } .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: .222em 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 2em; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } .ui-tabs { position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #dddddd; background: #e9e9e9; color: #333333; font-weight: bold; } .ui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px #5e9ed6; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: #ffffff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("images/ui-icons_454545_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("images/ui-icons_444444_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon { background-image: url("images/ui-icons_555555_256x240.png"); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png"); } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("images/ui-icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("images/ui-icons_cc0000_256x240.png"); } .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: .003; filter: Alpha(Opacity=0.3); /* support: IE8 */ } .ui-widget-shadow { -webkit-box-shadow: 0px 0px 5px #666666; box-shadow: 0px 0px 5px #666666; } .ui-widget-overlay { position: fixed; background-color: rgba(0, 0, 0, 0.5) !important; opacity: 1; visibility: visible; animation: slide-out 0.7s both; width: 100%; height: 100%; inset: 0; } .ui-widget-overlay.active { background-color: rgba(0, 0, 0, 0.5) !important; opacity: 1; visibility: visible; animation: slide-in 0.7s both; z-index: 50; width: 100%; height: 100%; inset: 0; z-index: 50; /* &:after { height: 100%; opacity: 1; animation: slide-out 0.7s both; }*/ } .ui-widget-overlay:after { content: ''; position: fixed; bottom: 0; left: -310px; height: 0; width: calc(100% + 310px); background-color: rgba(0, 0, 0, 0.4); z-index: 12; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; } .ui-widget-overlay .push { height: 78px; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar { -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { -webkit-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -moz-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; -o-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { /*background-color: #fff; background-color: rgba(255,255,255,0.9);*/ filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger { height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical { right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical { box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { bottom: 1px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255, 255, 255, 0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0, 0, 0, 0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } /* ---------------------------------------- */ .dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dk-select, .dk-select-multi { position: relative; display: inline-block; vertical-align: middle; line-height: 1.5em; width: 200px; cursor: pointer; } .dk-selected { width: 100%; white-space: nowrap; overflow: hidden; position: relative; background-color: white; border: 1px solid #CCCCCC; border-radius: 0.4em; padding: 0 1.5em 0 0.5em; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .dk-selected:before, .dk-selected:after { content: ''; display: block; position: absolute; right: 0; } .dk-selected:before { top: 50%; border: solid transparent; border-width: 0.25em 0.25em 0; border-top-color: #CCCCCC; margin: -0.125em 0.5em 0 0; } .dk-selected:after { top: 0; height: 100%; border-left: 1px solid #CCCCCC; margin: 0 1.5em 0 0; } .dk-selected-disabled { color: #BBBBBB; } .dk-select .dk-select-options { position: absolute; display: none; left: 0; right: 0; } .dk-select-open-up .dk-select-options { border-radius: 0.4em 0.4em 0 0; margin-bottom: -1px; bottom: 100%; } .dk-select-open-down .dk-select-options { border-radius: 0 0 0.4em 0.4em; margin-top: -1px; top: 100%; } .dk-select-multi .dk-select-options { max-height: 10em; } .dk-select-options { background-color: white; border: 1px solid #CCCCCC; border-radius: 0.4em; list-style: none; margin: 0; max-height: 10.5em; overflow-x: hidden; overflow-y: auto; padding: 0.25em 0; width: auto; z-index: 100; } .dk-option-selected { background-color: #3297fd; color: #fff; } .dk-select-options-highlight .dk-option-selected { background-color: transparent; color: inherit; } .dk-option { padding: 0 0.5em; } .dk-select-options .dk-option-highlight { background-color: #3297fd; color: #fff; } .dk-select-options .dk-option-disabled { color: #BBBBBB; background-color: transparent; } .dk-select-options .dk-option-hidden { display: none; } .dk-optgroup { border: solid #CCCCCC; border-width: 1px 0; padding: 0.25em 0; margin-top: 0.25em; } .dk-optgroup + .dk-option { margin-top: 0.25em; } .dk-optgroup + .dk-optgroup { border-top-width: 0; margin-top: 0; } .dk-optgroup:nth-child(2) { padding-top: 0; border-top: none; margin-top: 0; } .dk-optgroup:last-child { border-bottom-width: 0; margin-bottom: 0; padding-bottom: 0; } .dk-optgroup-disabled { opacity: 0.6; color: #BBBBBB; cursor: not-allowed; } .dk-optgroup-label { padding: 0 0.5em 0.25em; font-weight: bold; width: 100%; } .dk-optgroup-options { list-style: none; padding-left: 0; } .dk-optgroup-options li { padding-left: 1.2em; } .dk-select-open-up .dk-selected { border-top-left-radius: 0; border-top-right-radius: 0; border-color: #3297fd; } .dk-select-open-down .dk-selected { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #3297fd; } .dk-select-open-up .dk-selected:before, .dk-select-open-down .dk-selected:before { border-width: 0 0.25em 0.25em; border-bottom-color: #3297fd; } .dk-select-open-up .dk-selected:after, .dk-select-open-down .dk-selected:after { border-left-color: #3297fd; } .dk-select-open-up .dk-select-options, .dk-select-open-down .dk-select-options, .dk-select-multi:focus .dk-select-options { display: block; border-color: #3297fd; } .dk-select-multi:hover, .dk-select-multi:focus { outline: none; } .dk-selected:hover, .dk-selected:focus { outline: none; border-color: #3297fd; } .dk-selected:hover:before, .dk-selected:focus:before { border-top-color: #3297fd; } .dk-selected:hover:after, .dk-selected:focus:after { border-left-color: #3297fd; } .dk-select-disabled { opacity: 0.6; color: #BBBBBB; cursor: not-allowed; } .dk-select-disabled .dk-selected:hover, .dk-select-disabled .dk-selected:focus { border-color: inherit; } .dk-select-disabled .dk-selected:hover:before, .dk-select-disabled .dk-selected:focus:before { border-top-color: inherit; } .dk-select-disabled .dk-selected:hover:after, .dk-select-disabled .dk-selected:focus:after { border-left-color: inherit; } select[data-dkcacheid] { display: none; } .select .dk-selected { border: none; padding-left: 0; } .select .dk-selected:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-top-color: #000; position: absolute; border-width: 0.35em 0.35em 0; margin: 0; } .select .dk-selected:after { display: none; } .select .dk-selected:hover, .select .dk-selected:focus { border-color: #000; } .select .dk-selected:hover:before, .select .dk-selected:focus:before { border-top-color: #000; } .select .dk-selected:hover:after, .select .dk-selected:focus:after { border-color: #000; } .select .dk-select-options { padding: 0; left: -16px; right: -16px; } .select.dk-select-open-down .dk-select-options { top: 150%; } .select.dk-select-open-up .dk-select-options { bottom: 150%; } .select .dk-option { padding: 15px 10px; } .select .dk-option-selected { color: #494f5a; background-color: #fff; } .select .dk-option-highlight { background-color: #0095c9; color: #fff !important; } .select.dk-select-open-up .dk-select-options, .select.dk-select-open-down .dk-select-options, .select.dk-select-multi:focus .dk-select-options { border-color: #d1d1d1; border-radius: 0; } .select.type-2 .dk-selected { font-size: 18px; font-weight: 700; color: #000; } .introjs-overlay { position: absolute; box-sizing: content-box; z-index: 999999; background-color: #000; opacity: 0; background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-fixParent { z-index: auto !important; opacity: 1.0 !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .introjs-showElement, tr.introjs-showElement > td, tr.introjs-showElement > th { z-index: 9999999 !important; } .introjs-disableInteraction { z-index: 99999999 !important; position: absolute; background-color: white; opacity: 0; filter: alpha(opacity=0); } .introjs-relativePosition, tr.introjs-showElement > td, tr.introjs-showElement > th { position: relative; } .introjs-helperLayer { box-sizing: content-box; position: absolute; z-index: 9999998; background-color: #FFF; background-color: rgba(255, 255, 255, 0.9); border: 1px solid #777; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-tooltipReferenceLayer { box-sizing: content-box; position: absolute; visibility: hidden; z-index: 10000000; background-color: transparent; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .introjs-helperLayer *, .introjs-helperLayer *:before, .introjs-helperLayer *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } .introjs-helperNumberLayer { box-sizing: content-box; position: absolute; visibility: visible; top: -16px; left: -16px; z-index: 9999999999 !important; padding: 2px; font-family: Arial, verdana, tahoma; font-size: 13px; font-weight: bold; color: white; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: #ff3019; /* Old browsers */ background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */ background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */ background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */ width: 20px; height: 20px; line-height: 20px; border: 3px solid white; border-radius: 50%; filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)"; /* IE6-9 */ filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)"; /* IE10 text shadows */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); } .introjs-arrow { border: 5px solid white; content: ''; position: absolute; } .introjs-arrow.top { top: -10px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: white; border-left-color: transparent; } .introjs-arrow.top-right { top: -10px; right: 10px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: white; border-left-color: transparent; } .introjs-arrow.top-middle { top: -10px; left: 50%; margin-left: -5px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: white; border-left-color: transparent; } .introjs-arrow.right { right: -10px; top: 10px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: white; } .introjs-arrow.right-bottom { bottom: 10px; right: -10px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: white; } .introjs-arrow.bottom { bottom: -10px; border-top-color: white; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .introjs-arrow.left { left: -10px; top: 10px; border-top-color: transparent; border-right-color: white; border-bottom-color: transparent; border-left-color: transparent; } .introjs-arrow.left-bottom { left: -10px; bottom: 10px; border-top-color: transparent; border-right-color: white; border-bottom-color: transparent; border-left-color: transparent; } .introjs-tooltip { box-sizing: content-box; position: absolute; visibility: visible; padding: 10px; background-color: white; min-width: 200px; max-width: 300px; border-radius: 3px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); -webkit-transition: opacity 0.1s ease-out; -moz-transition: opacity 0.1s ease-out; -ms-transition: opacity 0.1s ease-out; -o-transition: opacity 0.1s ease-out; transition: opacity 0.1s ease-out; } .introjs-tooltipbuttons { text-align: right; white-space: nowrap; } /* Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ Changed by Afshin Mehrabani */ .introjs-button { box-sizing: content-box; position: relative; overflow: visible; display: inline-block; padding: 0.3em 0.8em; border: 1px solid #d4d4d4; margin: 0; text-decoration: none; text-shadow: 1px 1px 0 #fff; font: 11px/normal sans-serif; color: #333; white-space: nowrap; cursor: pointer; outline: none; background-color: #ececec; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); background-image: -moz-linear-gradient(#f4f4f4, #ececec); background-image: -o-linear-gradient(#f4f4f4, #ececec); background-image: linear-gradient(#f4f4f4, #ececec); -webkit-background-clip: padding; -moz-background-clip: padding; -o-background-clip: padding-box; /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; /* IE hacks */ zoom: 1; *display: inline; margin-top: 10px; } .introjs-button:hover { border-color: #bcbcbc; text-decoration: none; box-shadow: 0px 1px 1px #e3e3e3; } .introjs-button:focus, .introjs-button:active { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4)); background-image: -moz-linear-gradient(#ececec, #f4f4f4); background-image: -o-linear-gradient(#ececec, #f4f4f4); background-image: linear-gradient(#ececec, #f4f4f4); } /* overrides extra padding on button elements in Firefox */ .introjs-button::-moz-focus-inner { padding: 0; border: 0; } .introjs-skipbutton { box-sizing: content-box; margin-right: 5px; color: #7a7a7a; } .introjs-prevbutton { -webkit-border-radius: 0.2em 0 0 0.2em; -moz-border-radius: 0.2em 0 0 0.2em; border-radius: 0.2em 0 0 0.2em; border-right: none; } .introjs-prevbutton.introjs-fullbutton { border: 1px solid #d4d4d4; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; } .introjs-nextbutton { -webkit-border-radius: 0 0.2em 0.2em 0; -moz-border-radius: 0 0.2em 0.2em 0; border-radius: 0 0.2em 0.2em 0; } .introjs-nextbutton.introjs-fullbutton { -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; } .introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { color: #9a9a9a; border-color: #d4d4d4; box-shadow: none; cursor: default; background-color: #f4f4f4; background-image: none; text-decoration: none; } .introjs-hidden { display: none; } .introjs-bullets { text-align: center; } .introjs-bullets ul { box-sizing: content-box; clear: both; margin: 15px auto 0; padding: 0; display: inline-block; } .introjs-bullets ul li { box-sizing: content-box; list-style: none; float: left; margin: 0 2px; } .introjs-bullets ul li a { box-sizing: content-box; display: block; width: 6px; height: 6px; background: #ccc; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-decoration: none; cursor: pointer; } .introjs-bullets ul li a:hover { background: #999; } .introjs-bullets ul li a.active { background: #999; } .introjs-progress { box-sizing: content-box; overflow: hidden; height: 10px; margin: 10px 0 5px 0; border-radius: 4px; background-color: #ecf0f1; } .introjs-progressbar { box-sizing: content-box; float: left; width: 0%; height: 100%; font-size: 10px; line-height: 10px; text-align: center; background-color: #08c; } .introjsFloatingElement { position: absolute; height: 0; width: 0; left: 50%; top: 50%; } .introjs-fixedTooltip { position: fixed; } .introjs-hint { box-sizing: content-box; position: absolute; background: transparent; width: 20px; height: 15px; cursor: pointer; } .introjs-hint:focus { border: 0; outline: 0; } .introjs-hidehint { display: none; } .introjs-fixedhint { position: fixed; } .introjs-hint:hover > .introjs-hint-pulse { border: 5px solid rgba(60, 60, 60, 0.57); } .introjs-hint-pulse { box-sizing: content-box; width: 10px; height: 10px; border: 5px solid rgba(60, 60, 60, 0.27); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: rgba(136, 136, 136, 0.24); z-index: 10; position: absolute; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .introjs-hint-no-anim .introjs-hint-dot { -webkit-animation: none; -moz-animation: none; animation: none; } .introjs-hint-dot { box-sizing: content-box; border: 10px solid rgba(146, 146, 146, 0.36); background: transparent; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; height: 50px; width: 50px; -webkit-animation: introjspulse 3s ease-out; -moz-animation: introjspulse 3s ease-out; animation: introjspulse 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; position: absolute; top: -25px; left: -25px; z-index: 1; opacity: 0; } @-moz-keyframes introjspulse { 0% { -moz-transform: scale(0); opacity: 0.0; } 25% { -moz-transform: scale(0); opacity: 0.1; } 50% { -moz-transform: scale(0.1); opacity: 0.3; } 75% { -moz-transform: scale(0.5); opacity: 0.5; } 100% { -moz-transform: scale(1); opacity: 0.0; } } @-webkit-keyframes introjspulse { 0% { -webkit-transform: scale(0); opacity: 0.0; } 25% { -webkit-transform: scale(0); opacity: 0.1; } 50% { -webkit-transform: scale(0.1); opacity: 0.3; } 75% { -webkit-transform: scale(0.5); opacity: 0.5; } 100% { -webkit-transform: scale(1); opacity: 0.0; } } body .first-one .introjs-arrow.top { top: -10px; right: auto; } body .introjs-arrow.top { top: -10px; right: 20px; } body .introjs-arrow.bottom { right: 30px; } body .introjs-helperLayer { border-radius: 0; background-color: transparent; } body .introjs-helperNumberLayer { border: 0; background: #ffec00; font-size: 16px; color: #000; text-shadow: none; top: -3px; left: -5px; } body .introjs-tooltip { border-radius: 0; min-width: 300px; margin: 20px 0; padding: 20px; padding-bottom: 10px; } body .introjs-tooltiptext { font-family: 'futura', sans-serif; font-size: 18px; color: #000; margin-bottom: 10px; } body .introjs-bullets { margin-bottom: 10px; } body .introjs-bullets ul li a { width: 5px; height: 5px; } body .introjs-bullets ul li a.active { background: #000; } body .introjs-button { font-family: 'futura', sans-serif; width: 60px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; border: 0; border-radius: 0; text-shadow: none; padding: 10px 10px; transition: background 0.3s ease, color 0.3s ease; -ms-transition: background 0.3s ease, color 0.3s ease; -moz-transition: background 0.3s ease, color 0.3s ease; -o-transition: background 0.3s ease, color 0.3s ease; -webkit-transition: background 0.3s ease, color 0.3s ease; border: none; box-shadow: none; } body .introjs-button:active { background: transparent; } body .introjs-button:hover { box-shadow: none; } body .introjs-button:focus { background: transparent; } body .introjs-skipbutton { float: left; font-size: 14px; text-align: left; padding-left: 0; background: transparent; color: #0495c2; border: none; width: auto; font-weight: normal; } body .introjs-prevbutton { margin-right: 10px; } body .introjs-prevbutton, body .introjs-nextbutton { background: #ffec00; color: #000; } body .introjs-prevbutton:hover, body .introjs-nextbutton:hover { background-color: #0495c2; color: #fff; } body .introjs-skipbutton { float: left; font-size: 14px; background: transparent; color: #0495c2; } body .introjs-button.introjs-disabled, body .introjs-button.introjs-disabled:hover { display: none; background: #d1d1d1; color: #000; opacity: 0.7; } body .introjs-tooltipReferenceLayer { z-index: 10000001; } body .introjs-showElement, body tr.introjs-showElement > td, body tr.introjs-showElement > th { background-color: #fff; } body #page-header.introjs-fixParent { z-index: 10000001 !important; } body #page-header.introjs-fixParent:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .menu-btn.introjs-showElement { background-color: #49505a !important; } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin: 0 auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { /*display: none;*/ /*float: left;*/ /*display: inline-block !important; text-align: center;*/ height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block !important; outline: none; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* CUSTOM SLIDER STYLES */ .slider-info { padding: 10px 10px; background: rgba(255, 255, 255, 0.9); position: absolute; bottom: -500px; width: 100%; box-sizing: border-box; display: block; transition: all ease 0.5s; height: 150px; } .slider-info.initialized { visibility: visible !important; bottom: 0; overflow: auto; } .slider-info > div { padding-right: 0px; } .slider-info .slider-info-top { padding-bottom: 15px; } .slider-info .slider-info-bottom { padding-top: 15px; padding-bottom: 0px; border-top: 1px solid #ec1a3a; } .slide-text { width: 60%; margin-left: 10%; margin-top: 10%; } .slide-title span { background: #ec1a3a; padding: 10px; display: inline-block; color: #fff; font-weight: normal; font-size: 22px; margin-left: -10px; } .slide-caption { /*background:rgba(0,0,0, 0.5);*/ /*background:#595959; padding:10px; display:inline-block; color:#fff; font-weight:300; font-size:22px;*/ } .slide-caption span { display: inline; background: #595959; box-shadow: 10px 0 0 #595959, -10px 0 0 #595959; color: #fff; font-weight: 300; font-size: 22px; padding: 5px 0; line-height: 35px; } @charset "UTF-8"; /* Slider */ .slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { /*opacity: .25;*/ } .slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; /*opacity: .75;*/ color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -45px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { background: url("fonts/arrow-left.png") no-repeat; content: ''; width: 38px; height: 71px; display: block; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -45px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { background: url("fonts/arrow-right.png") no-repeat; content: ''; width: 38px; height: 71px; display: block; } [dir='rtl'] .slick-next:before { content: '←'; } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /*#region accounts*/ ._265191032000000136 { background: url(logos/e-privreda.png) white; } /*#endregion accounts*/ /*#region types*/ ._ATM { background: url(logos/ico_dashboard_bankomat.png) white; } ._CASH { } ._EXCHBUY { background: url(logos/ico_dashboard_menjackatransakcija.png) white; } ._EXCHSELL { background: url(logos/ico_dashboard_menjackatransakcija.png) white; } ._FEE { } ._INCOME { } ._INTEREST { } ._INTERNAL { background: url(logos/ico_dashboard_interniprenos.png) white; } ._MOBCASH { } ._OTHER { } ._PMTDOM { } ._POS { } ._STNDORD { } /*#endregion types*/ /*#region PFM categories*/ ._cat26{ background-image: url(logos/categories/icon-food-1.png); } ._cat29{ background-image: url(logos/categories/icon-car-1.png); } ._cat31{ background-image: url(logos/categories/icon-tax-1.png); } ._cat32{ background-image: url(); } ._cat34{ background-image: url(); } ._cat36{ background-image: url(); } ._cat37{ background-image: url(); } /*#endregion PFM categories*/ /*#region company identity numbers*/ ._123456789{ background: url(logos/icon-telenor-2.png) white; } /*#endregion company identity numbers*/ body { font-family: Arial; font-size: 12px; background: #efefef; } ul.s-portal-languageSelector { position: static; top: 5px; right: 24px; } ul.s-portal-languageSelector > li { list-style: none; } ul.s-portal-languageSelector > li.s-portal-language > span { display: none; } ul.s-portal-languageSelector > li.s-portal-language[data-culture="sr-Latn-CS"] { background-position: -48px 0; } ul.s-portal-languageSelector > li.s-portal-language[data-culture="sr-Latn-CS"].active { background-position: 0 0; } ul.s-portal-languageSelector > li.s-portal-language[data-culture="en-US"] { background-position: -72px 0; } ul.s-portal-languageSelector > li.s-portal-language[data-culture="en-US"].active { background-position: -24px 0; } .s-overlay-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .s-overlay { background-color: #F3F6F8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .s-widget .s-overlay, .ui-dialog .s-overlay { background-color: #000; opacity: 0.3; filter: Alpha(Opacity=30); } .s-overlay-message { width: 150px; height: 64px; position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -30px; z-index: 101; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .s-overlay-message > .spinner { background-image: url("images/segment-material-preloader-1.gif"); background-position: center; background-repeat: no-repeat; width: 64px; height: 64px; margin: auto; } .s-widget .s-overlay-message > .spinner, .ui-dialog .s-overlay-message > .spinner { background-image: url("images/segment-material-preloader-1.gif"); } .s-overlay-message > .text { text-align: center; color: white; } .s-overlay-message.notext { width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; } .s-overlay-message.notext > .text { display: none; } .s-overlay-message.notext > .spinner { margin-left: 0; } .s-message { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4); animation: animate-bg 5s linear infinite; position: fixed; width: 100%; padding: 10px; top: -30px; left: 0; height: 30px; z-index: 200; color: #fff; border: 1px solid; } .s-message.info { background-color: #4ea5cd; border-color: #3b8eb5; } .s-message.error { background-color: #de4343; border-color: #c43d3d; } .s-message.warning { background-color: #eaaf51; border-color: #d99a36; } .s-message.success { background-color: #61b832; border-color: #55a12c; } @keyframes animate-bg { from { background-position: 0 0; } to { background-position: -60px 0; } } .toolbar { background-color: #efefef; border: 1px solid #ddd; padding: 2px; margin-top: 2px; margin-bottom: 2px; font-size: 0.9em; } .tableTitle { background-color: #efefef; border: solid 1px #e8e8e8; padding: 5px; font-weight: bold; margin: 1px 0 1px 0; } .tableHeader { background-color: #efefef; border: solid 1px #e8e8e8; color: #888; padding: 2px; margin: 1px 0 1px 0; } /* .ui-widget-overlay { background-color: #000000 !important; opacity: .4 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 100 !important; }*/ svg { fill: currentColor; stroke: currentColor; } .filter-wrapper:hover .filter-icon-svg { color: #fff; } .search-filter-bar .filter-wrapper:hover { background-color: #266eff; color: #fff; } .no-yes-dialog, .success-dialog, .error-dialog, .formsError, .LoginErrorDialog, .messageBoxElement { border-bottom-right-radius: unset !important; border-bottom-left-radius: unset !important; border-top-right-radius: unset !important; border-top-left-radius: unset !important; border-radius: 12px !important; } .no-yes-dialog .ui-widget-header, .success-dialog .ui-widget-header, .error-dialog .ui-widget-header, .formsError .ui-widget-header, .LoginErrorDialog .ui-widget-header, .messageBoxElement .ui-widget-header { border: none; color: #266eff; font-size: 24px; font-family: 'tt-norms-regular', serif; line-height: 1.33333333; background: transparent; } .no-yes-dialog .ui-dialog-titlebar, .success-dialog .ui-dialog-titlebar, .error-dialog .ui-dialog-titlebar, .formsError .ui-dialog-titlebar, .LoginErrorDialog .ui-dialog-titlebar, .messageBoxElement .ui-dialog-titlebar { padding-bottom: 40px !important; } .no-yes-dialog .ui-dialog-titlebar .ui-dialog-title, .success-dialog .ui-dialog-titlebar .ui-dialog-title, .error-dialog .ui-dialog-titlebar .ui-dialog-title, .formsError .ui-dialog-titlebar .ui-dialog-title, .LoginErrorDialog .ui-dialog-titlebar .ui-dialog-title, .messageBoxElement .ui-dialog-titlebar .ui-dialog-title { line-height: 1.1; } .no-yes-dialog .ui-dialog-titlebar .ui-icon, .success-dialog .ui-dialog-titlebar .ui-icon, .error-dialog .ui-dialog-titlebar .ui-icon, .formsError .ui-dialog-titlebar .ui-icon, .LoginErrorDialog .ui-dialog-titlebar .ui-icon, .messageBoxElement .ui-dialog-titlebar .ui-icon { background-image: url(images/icons/close-icon-1.png) !important; background-size: 12px 12px !important; margin-top: -13px !important; margin-left: -7px !important; color: #75868e; background-position: 0px !important; fill: currentColor; stroke: currentColor; } .no-yes-dialog .ui-dialog-titlebar-close, .success-dialog .ui-dialog-titlebar-close, .error-dialog .ui-dialog-titlebar-close, .formsError .ui-dialog-titlebar-close, .LoginErrorDialog .ui-dialog-titlebar-close, .messageBoxElement .ui-dialog-titlebar-close { top: 22%; } .no-yes-dialog .ui-dialog-content, .success-dialog .ui-dialog-content, .error-dialog .ui-dialog-content, .formsError .ui-dialog-content, .LoginErrorDialog .ui-dialog-content, .messageBoxElement .ui-dialog-content { margin-bottom: 0px !important; display: inline-block; background-color: #f0f1f5 !important; width: 100% !important; } .no-yes-dialog .ui-dialog-content:before, .success-dialog .ui-dialog-content:before, .error-dialog .ui-dialog-content:before, .formsError .ui-dialog-content:before, .LoginErrorDialog .ui-dialog-content:before, .messageBoxElement .ui-dialog-content:before { padding: 5px; } .no-yes-dialog .ui-dialog-buttonset button, .success-dialog .ui-dialog-buttonset button, .error-dialog .ui-dialog-buttonset button, .formsError .ui-dialog-buttonset button, .LoginErrorDialog .ui-dialog-buttonset button, .messageBoxElement .ui-dialog-buttonset button { width: 35% !important; } .no-yes-dialog .ui-helper-clearfix:after, .success-dialog .ui-helper-clearfix:after, .error-dialog .ui-helper-clearfix:after, .formsError .ui-helper-clearfix:after, .LoginErrorDialog .ui-helper-clearfix:after, .messageBoxElement .ui-helper-clearfix:after { clear: both; position: absolute; content: ""; width: 84%; height: 10px; left: 50%; bottom: -15px; } .no-yes-dialog .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .success-dialog .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .error-dialog .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .formsError .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .LoginErrorDialog .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .messageBoxElement .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget { background-image: url(images/icons/ic_strelica.png) !important; background-size: 7% !important; background-repeat: no-repeat !important; background-position: 150px 18px !important; text-align: left; } .no-yes-dialog .ui-widget-content, .success-dialog .ui-widget-content, .error-dialog .ui-widget-content, .formsError .ui-widget-content, .LoginErrorDialog .ui-widget-content, .messageBoxElement .ui-widget-content { line-height: 1.3em !important; } .no-yes-dialog .ui-dialog-buttonpane, .success-dialog .ui-dialog-buttonpane, .error-dialog .ui-dialog-buttonpane, .formsError .ui-dialog-buttonpane, .LoginErrorDialog .ui-dialog-buttonpane, .messageBoxElement .ui-dialog-buttonpane { background-color: #f0f1f5; } .ui-button { border: 0px !important; background: none !important; } .ui-button:hover { border: 0px !important; } .highcharts-legend, .highcharts-plot-background, .highcharts-plot-border, .highcharts-background, .highcharts-series-group, .highcharts-3d-frame { fill: none !important; stroke: none !important; } .highcharts-container { height: 310px !important; margin-top: -120px !important; width: 465px !important; } .highcharts-root { width: 400px !important; margin-left: 0px; } /*.Chart { display: block!important; }*/ .highcharts-point { rx: 17 !important; ry: 17 !important; width: 12px !important; } .highcharts-legend { letter-spacing: -.01em !important; line-height: 1.44 !important; font-size: 15px !important; font-family: ibm-regular !important; } .highcharts-legend-item:after { letter-spacing: -.01em !important; line-height: 1.44 !important; font-size: 15px !important; font-family: ibm-regular !important; } .highcharts-legend { display: none; } /* colors */ /*#region fonts*/ @font-face { font-family: "futura"; src: url("fonts/Futura-Roman.eot"); src: url("fonts/Futura-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Roman.woff") format("woff"), url("fonts/Futura-Roman.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "futura"; src: url("fonts/Futura-Dem.eot"); src: url("fonts/Futura-Dem.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Dem.woff") format("woff"), url("fonts/Futura-Dem.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "futura"; src: url("fonts/Futura-Bold.eot"); src: url("fonts/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Bold.woff") format("woff"), url("fonts/Futura-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "futura"; src: url("fonts/Futura-ExtraBold.eot"); src: url("fonts/Futura-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-ExtraBold.woff") format("woff"), url("fonts/Futura-ExtraBold.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-regular"; src: url("fonts/aeonik-regular.woff"); src: url("fonts/aeonik-regular.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-regular.woff") format("woff"), url("fonts/aeonik-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-light"; src: url("fonts/aeonik-light.woff"); src: url("fonts/aeonik-light.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-light.woff") format("woff"), url("fonts/aeonik-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-bold"; src: url("fonts/aeonik-bold.woff"); src: url("fonts/aeonik-bold.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-bold.woff") format("woff"), url("fonts/aeonik-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-medium"; src: url("fonts/aeonik-medium.woff"); src: url("fonts/aeonik-medium.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-medium.woff") format("woff"), url("fonts/aeonik-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-bold"; src: url("fonts/ibmplexsans-bold.woff"); src: url("fonts/ibmplexsans-bold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-bold.woff") format("woff"), url("fonts/ibmplexsans-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-light"; src: url("fonts/ibmplexsans-light.woff"); src: url("fonts/ibmplexsans-light.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-light.woff") format("woff"), url("fonts/ibmplexsans-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-medium"; src: url("fonts/ibmplexsans-medium.woff"); src: url("fonts/ibmplexsans-medium.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-medium.woff") format("woff"), url("fonts/ibmplexsans-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-regular"; src: url("fonts/ibmplexsans-regular.woff"); src: url("fonts/ibmplexsans-regular.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-semibold"; src: url("fonts/ibmplexsans-semibold.woff"); src: url("fonts/ibmplexsans-semibold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-semibold.woff") format("woff"), url("fonts/ibmplexsans-semibold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "tt-norms-regular"; src: url("fonts/TT_Norms_Pro_Serif_Regular.woff"); src: url("fonts/TT_Norms_Pro_Serif_Regular.woff?#iefix") format("embedded-opentype"), url("fonts/TT_Norms_Pro_Serif_Regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } /*#endregion fonts*/ html[dir=rtl] .s-widget.float, html[dir=rtl] .s-widget-zone { float: right; } .s-page-host:not(.login) { padding: 20px 20px 0 20px; box-sizing: border-box; } .s-page-host { width: 98%; margin: 0 auto; padding-left: 95px; } .s-page-host > .s-page-content { margin-top: 5px; margin-bottom: 5px; min-height: 400px; } .s-page-host.container-1 { max-width: 1195px; } .s-page-host.container-3 { max-width: 1661px; } .s-page-host.login { max-width: 100%; } /*#region s-widget*/ .s-widget { border-radius: 0; margin: 0 0 20px 0; } .s-widget .s-overlay { opacity: 0.1; filter: Alpha(Opacity=10); display: block; } .s-widget.float { float: left; } .s-widget-header { border: 0; line-height: 20px; cursor: default; color: #494f5a; border-radius: 0; padding: 0 20px 0 0; display: none; } .s-widget-header.draggable { cursor: move; } .s-widget-header.nodrag { cursor: default; } .s-widget-header.nochrome { display: none; } .s-widget-placeholder { border: 1px dashed #ccc; } .s-widget-loading { display: none; width: 16px; height: 16px; background: url("images/segment-material-preloader-1.gif") no-repeat; } .s-widget-button { cursor: pointer; width: 16px; } .s-widget-title { font-size: 20px; line-height: 46px; color: #494f5a; margin-bottom: 0; font-family: "aeonik-light"; line-height: 0.875; font-size: calc(26px + 6 * (100vw - 320px) / 1600); /*border-left: 6px solid $title-color; padding-left: 50px;*/ } .s-widget-body-header { font-size: 0.9em; font-weight: bold; padding: 6px; border-bottom: 1px solid #ccc; } .s-widget-body { border: 0; min-height: unset; } .s-widget.maximized .s-widget-body { min-height: 100px; } .s-widget-zone { float: left; margin: 0 auto; min-height: 100px; box-sizing: border-box; } .s-widget-drop-placeholder { background-color: #dedede; border: 1px dashed #ccc; margin: 10px 5px 5px 5px; min-height: 20px; } .s-widget-body-error-summary { background-color: #FFE6E6; color: #C41414; border-bottom: 1px solid #C41414; } .s-widget-body-error-summary ul { margin: 0; padding: 5px 5px 5px 30px; font-size: 0.85em; } .s-widget-tooltip { display: none; width: 300px; height: 150px; overflow: auto; font-size: 11px; padding: 10px; border: 2px solid #bbb; background-color: #fff; color: #333; z-index: 1000; } /*#endregion login_header*/ /*#region portal_icons*/ .s-icon { width: 16px; height: 16px; display: block; padding: 0px; } .s-icon-expand { background-position: 0 0; } .s-icon-back { background-position: 0 -16px; } .s-icon-collapse { background-position: -16px 0; } .s-icon-maximize { background-position: -32px 0; } .s-icon-minimize { background-position: -48px 0; } .s-icon-help { background-position: -64px 0; } .s-icon-remove { background-position: -80px 0; } /*#endregion portal_icons*/ /*#region responsive*/ @media only screen and (min-width: 1201px) { .s-widget-zone.lg-right { padding-right: 20px; } } @media only screen and (max-width: 1200px) and (min-width: 721px) { .s-widget-zone.md-100 { width: 100% !important; } .s-widget-zone.md-50 { width: 50% !important; } .s-widget-zone.md-right { padding-right: 20px; } } @media only screen and (max-width: 720px) { .s-widget-zone { width: 100% !important; } } /*#endregion responsive*/ .gridToggle { transition: left 0.3s ease-in-out 0s, right 0.3s ease-in-out 0s; } .page-title-wrapper-forTabs { margin-top: 56px; margin-left: 20px; } /*# sourceMappingURL=portal.css.map */ @charset "UTF-8"; /* colors */ /*#region fonts*/ @font-face { font-family: 'futura'; src: url("fonts/Futura-Roman.eot"); src: url("fonts/Futura-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Roman.woff") format("woff"), url("fonts/Futura-Roman.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'futura'; src: url("fonts/Futura-Dem.eot"); src: url("fonts/Futura-Dem.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Dem.woff") format("woff"), url("fonts/Futura-Dem.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: 'futura'; src: url("fonts/Futura-Bold.eot"); src: url("fonts/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Bold.woff") format("woff"), url("fonts/Futura-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: 'futura'; src: url("fonts/Futura-ExtraBold.eot"); src: url("fonts/Futura-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-ExtraBold.woff") format("woff"), url("fonts/Futura-ExtraBold.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-regular'; src: url("fonts/aeonik-regular.woff"); src: url("fonts/aeonik-regular.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-regular.woff") format("woff"), url("fonts/aeonik-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-light'; src: url("fonts/aeonik-light.woff"); src: url("fonts/aeonik-light.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-light.woff") format("woff"), url("fonts/aeonik-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-bold'; src: url("fonts/aeonik-bold.woff"); src: url("fonts/aeonik-bold.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-bold.woff") format("woff"), url("fonts/aeonik-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-medium'; src: url("fonts/aeonik-medium.woff"); src: url("fonts/aeonik-medium.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-medium.woff") format("woff"), url("fonts/aeonik-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-bold'; src: url("fonts/ibmplexsans-bold.woff"); src: url("fonts/ibmplexsans-bold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-bold.woff") format("woff"), url("fonts/ibmplexsans-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-light'; src: url("fonts/ibmplexsans-light.woff"); src: url("fonts/ibmplexsans-light.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-light.woff") format("woff"), url("fonts/ibmplexsans-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-medium'; src: url("fonts/ibmplexsans-medium.woff"); src: url("fonts/ibmplexsans-medium.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-medium.woff") format("woff"), url("fonts/ibmplexsans-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-regular'; src: url("fonts/ibmplexsans-regular.woff"); src: url("fonts/ibmplexsans-regular.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-semibold'; src: url("fonts/ibmplexsans-semibold.woff"); src: url("fonts/ibmplexsans-semibold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-semibold.woff") format("woff"), url("fonts/ibmplexsans-semibold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'tt-norms-regular'; src: url("fonts/TT_Norms_Pro_Serif_Regular.woff"); src: url("fonts/TT_Norms_Pro_Serif_Regular.woff?#iefix") format("embedded-opentype"), url("fonts/TT_Norms_Pro_Serif_Regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } /*#endregion fonts*/ * { box-sizing: border-box; padding: 0; margin: 0; } /*#region general*/ 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, em, img, ins, kbd, q, s, samp, small, strike, strong, 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; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ::-webkit-scrollbar-thumb { background: #C3CBD0; border-radius: 5px; width: 8px; } ::-webkit-scrollbar-thumb:hover { background: #a6b2ba; } ::-webkit-scrollbar { width: 8px; } body { font-family: "futura", sans-serif; font-size: 14px; font: 100% "futura", sans-serif; background-color: #F0F1F5; margin: 0; padding: 0; height: 100%; overflow-x: hidden; } html { height: 100%; font: inherit; background-color: #f0f1f5; } html::-webkit-scrollbar-thumb { background: #C3CBD0; border-radius: 5px; width: 8px; } html::-webkit-scrollbar-thumb:hover { background: #a6b2ba; } html::-webkit-scrollbar { width: 8px; } .list-bullets { list-style-type: disc; list-style-position: inside; } .letter-spacing-2 { letter-spacing: -.02em; } .line-height-6 { line-height: 1.2; } .text-4 { font-size: 15px; } .font-5 { font-family: "ibm-regular"; } .font-8 { font-family: "ibm-semibold"; } .text-color-3 { color: #194137; } .text-color-11 { color: #666696; } .text-purple-light { color: #666696; } .text-primary, .text-color-17 { color: #266eff; } .text-color-21 { color: #000F28; } .text-color-23 { color: #666696; } h2 { font: 400 24px/1.2 "aeonik-regular"; } .alignleft { float: left; } .aligncenter { margin: 0 auto; } .alignright { float: right; } .languageSelectorContainer { position: absolute; } .s-portal-languageSelector-dd { display: none; } .active { display: block; } .active2 { display: block; } .hidden { display: none !important; } :focus { outline: -webkit-focus-ring-color none 0px !important; outline-color: -webkit-focus-ring-color !important; outline-style: none !important; outline-width: 0px !important; } a { text-decoration: none; } svg { fill: currentColor; stroke: currentColor; } #pageHost { margin: 0 auto; border: none; width: 100%; background: #f0f1f5; height: fit-content; } #pageHost .main-menu .s-portal-menu .slicknav_menu { position: absolute; z-index: 101; width: 80%; } /* general style */ .flex-layout { display: flex; } .space-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-center { align-items: center; } .flex-end { align-items: flex-end; } .flex-start { align-items: flex-start; } .relative { position: relative; } .absolute { position: absolute; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; } .uppercase { text-transform: uppercase; } .contain { position: absolute; max-width: 100%; max-height: 100%; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } .absolute-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-minus { z-index: -1; } .radius-1 { border-radius: 50%; } .overflow { overflow: hidden; } .inline-block { display: inline-block; } .block-layout { display: block; } .underline { text-decoration: underline; } .absolute-full-width { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .full-width { width: 100%; } .background-1 { background-color: #000; } .background-2 { background-color: #fff; } .background-3 { background-color: #194137; } .background-4 { background-color: #00CDA5; } .background-5 { background-color: #CDFAEB; } .background-6 { background-color: #266eff; } .background-7 { background-color: #F3F6F8; } .background-8 { background-color: #F3F6F8; } .background-9 { background-color: #e6e6e6; } .background-10 { background-color: #C3CBD0; } .background-11 { background-color: #75868E; } .background-12 { background-color: #000F28; } .background-13 { background-color: #26343B; } .background-14 { background-color: #00677D; } .text-color-1 { color: #000; } .text-color-2 { color: #fff; } .text-color-3 { color: #194137; } .text-color-4 { color: #00CDA5; } .text-color-5 { color: #CDFAEB; } .text-color-6 { color: #fff; } .text-color-7 { color: #f21844; } .text-color-8 { color: #F3F6F8; } .text-color-9 { color: #e6e6e6; } .text-color-10 { color: #C3CBD0; } .text-color-12 { color: #000F28; } .text-color-13 { color: #26343B; } .text-color-14 { color: #00677D; } /*#endregion general*/ /*#region inputs*/ input:focus { outline: none; } .input-wrap-focus { border: solid 1px #494f5a !important; } textarea { font-family: "aeonik-regular" !important; width: 100%; font-size: 14px !important; letter-spacing: 0.5px; border: none; -webkit-appearance: none; border-radius: 0; padding: 0; padding-left: 3px; background-color: transparent; color: #000; } /* Form fields styling */ input::placeholder { color: #75868E; } .input-wrapper { position: relative; margin-bottom: 16px; } .input-wrapper.has-error .input-1, .input-wrapper.has-error .input-2 { border-color: #f21844; } .input-wrapper.has-error .input-error-msg { display: block; } .input-wrapper.with-icon .input-1 { padding: 21px 40px 7px 24px; } .input-wrapper.with-icon .input-2 { padding: 14px 40px 14px 24px; } .input-wrapper.with-tooltip { padding-right: 60px; } .input-wrapper.margin-0 { margin-bottom: 0; } .input-wrapper { position: relative; margin-bottom: 16px; } .input-wrapper .focusin .label-1 { top: 7px !important; font-size: 12px !important; } .input-wrapper .input-wrapper-inner { position: relative; } .input-wrapper .input-wrapper-inner .with-icon { padding: 21px 40px 7px 24px; } .input-wrapper .input-wrapper-inner .smsCode.input-1 { height: 50px; } .input-wrapper .input-wrapper-inner .smsCode.input-1:focus { border-color: #d7d8db; } .input-wrapper .input-wrapper-inner .input-1 { padding: 18px 33px 7px 24px; border: 1px solid #d7d8db; border-radius: 30px; transition: border-color .2s; font-size: 14px !important; letter-spacing: 0.5px; line-height: 1; width: 100%; font-family: "aeonik-regular"; color: #000F28; } .input-wrapper .input-wrapper-inner .input-1:active ~ .label-1, .input-wrapper .input-wrapper-inner .input-1:focus ~ .label-1 { top: 8px; font-size: 12px; } .input-wrapper .input-wrapper-inner .label-1 { top: 16px; font-size: 14px; } .input-wrapper .input-wrapper-inner .label-1, .input-wrapper .input-wrapper-inner .label-2 { position: absolute; left: 24px; font-family: "aeonik-regular"; line-height: 1.285714; letter-spacing: -.01em; color: #666696; -webkit-transition: top .2s, font-size .2s; transition: top .2s, font-size .2s; pointer-events: none; } .input-wrapper .input-wrapper-inner .clickable { cursor: pointer; } .input-wrapper .input-wrapper-inner .input-icon-wrapper { position: absolute; width: 24px; height: 24px; top: 50%; right: 15px; transform: translateY(-50%); } .input-wrapper .input-wrapper-inner .input-icon-wrapper.clickable { cursor: pointer; } .input-wrapper .input-wrapper-inner .input-icon-wrapper.clickable:hover .input-icon { color: #266eff; } .input-wrapper .input-wrapper-inner .input-icon-wrapper .input-icon { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; color: #c3cbd0; transform: translate(-50%, -50%); transition: color .3s; } .datepicker-date { width: 100%; padding: 21px 40px 7px 22px; font-family: "ibm-regular"; font-size: 14px; line-height: 1; color: #000; } .input-1 { width: 100%; padding: 21px 24px 7px; border: 1px solid #C3CBD0; border-radius: 30px; font-family: "ibm-regular"; font-size: 14px; line-height: 1; color: #000; transition: border-color .2s; } .input-1:focus ~ .label-1 { top: 8px; font-size: 12px; } .input-1:focus { border-color: #194137; } .input-1:-webkit-autofill, .input-1:-webkit-autofill:hover, .input-1:-webkit-autofill:focus, .input-1:-webkit-autofill:active, .input-1:-webkit-autofill::first-line { -webkit-text-fill-color: #000; font-size: 14px; font-family: "ibm-regular"; background-color: #fff; transition: background-color 5000s ease-in-out 0s; } .input-2 { width: 100%; padding: 14px 24px; border: 1px solid #C3CBD0; border-radius: 30px; font-family: "ibm-regular"; font-size: 14px; line-height: 1; color: #000; transition: border-color .2s; } .input-2:focus { border-color: #194137; } .label-1 { position: absolute; top: 16px; left: 24px; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.285714; letter-spacing: -0.01em; color: #666696; transition: top .2s, font-size .2s; pointer-events: none; } .label-2 { position: absolute; top: 5px; left: 24px; font-family: "ibm-regular"; font-size: 12px; line-height: 1.285714; letter-spacing: -0.01em; color: #75868E; transition: top .2s, font-size .2s; pointer-events: none; } .input-icon-wrapper { position: absolute; width: 16px; height: 16px; top: 50%; right: 15px; transform: translateY(-50%); } .input-icon-wrapper.clickable { cursor: pointer; } .input-icon-wrapper.clickable:hover .input-icon { color: #266eff; } .input-icon-wrapper.active .pw-hidden { opacity: 0; visibility: hidden; } .input-icon-wrapper.active .pw-visible { opacity: 1; visibility: visible; } .input-icon-wrapper .pw-visible { opacity: 0; visibility: hidden; } .input-icon { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; color: #C3CBD0; transform: translate(-50%, -50%); transition: color .3s; } .input-error-msg { display: none; /* font-family: $font-ibm-medium;*/ font-size: 10px; line-height: 1.1; text-align: left; padding: 2px 0 0 24px; color: #f21844; } /* User content */ .user-content p, .user-content li { font-family: "aeonik-regular"; font-size: 15px; line-height: 1.2; color: #000F28; } .user-content ul, .user-content ol { padding-left: 20px; margin-bottom: 20px; } .user-content ol { padding-left: 0; list-style-type: none; } .user-content ul { padding-left: 16px; list-style: disc; } .checkbox-1.styledCheckbox { display: inline-block; width: 16px; height: 16px; background-image: url(images/icons/checkbox-1.png); background-repeat: no-repeat; background-position: 0px -16px !important; background-size: 16px; cursor: pointer; position: relative; top: 2px; margin-right: 10px; } .checkbox-1.styledCheckbox.checked { background-position: 0px 0px !important; } .radio-1.styledRadio { display: inline-block; width: 16px; height: 16px; background-image: url(images/icons/checkbox-2.png); background-repeat: no-repeat; background-size: 16px; cursor: pointer; position: relative; top: 1px; margin-right: 10px; } .checkbox-label { font-size: 14px; color: #000; } .checkbox-wrap { padding: 10px 0; } .radio-list li { zoom: 1; margin-bottom: 20px; } .radio-list :after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .radio-list .radio-1 { float: left; } .radio-list .checkbox-label { float: left; line-height: 18px; width: calc(100% - 26px); text-transform: uppercase; } .list-title { font-size: 14px; color: #7b7b7b; } .focusin .custom-autocomplete-dropdown { border: 1px solid #000; } .custom-autocomplete-dropdown { -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.05); display: none; border: 1px solid #d1d1d1; max-height: 386px; overflow: auto; background-color: #fff; } .dropdown-item { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; display: block; padding: 22px; padding-left: 75px; font-size: 16px; cursor: pointer; } .dropdown-item .icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 20px; height: 20px; right: 0px; background-repeat: no-repeat; background-position: 100% center; } .dropdown-item .dropdown-tag { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 20px; width: 35px; height: 35px; line-height: 35px; font-size: 16px; text-align: center; text-transform: uppercase; border: 2px solid #d1d1d1; background-repeat: no-repeat; background-position: center; } .dropdown-item .dropdown-tag.type-2 { background-color: #ed1c24; border-color: #ed1c24; } .dropdown-item .dropdown-tag img { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; display: inline-block; max-width: calc(100% - 4px); max-height: calc(100% - 4px); } .dropdown-item:hover, .dropdown-item.highlight { background-color: #e5f4f9; } .dropdown-item.border { border-bottom: 1px solid #ebeced; } .custom-checkbox-wrapper { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-border-radius: 7.5px; -moz-border-radius: 7.5px; -ms-border-radius: 7.5px; border-radius: 7.5px; display: inline-block; position: relative; width: 30px; height: 15px; background-color: #dadada; cursor: pointer; } .custom-checkbox-wrapper .custom-checkbox-pin { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: -5px; right: auto; width: 20px; height: 20px; background-color: #fff; border: 1px solid #d1d1d1; } .custom-checkbox-wrapper .cc-checkbox { display: none; } .custom-checkbox-wrapper.checked { background-color: #c3b400; } .custom-checkbox-wrapper.checked .custom-checkbox-pin { background-color: #ffec00; border-color: #ffec00; left: 15px; } .custom-checkbox-wrapper.col { position: absolute; left: 0; top: 5px; } .custom-checkbox-wrapper.col-2 { right: -27px; margin-bottom: -2px; } .checkbox-label-2 { display: inline-block; padding: 18px 15px 16px 15px; line-height: 23px; min-height: 24px; font-family: 'futura', sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #494f5a; border: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; } .checkbox-label-2.col-1 { padding: 0 0 0 10px; } .checkbox-label-2.col-2 { padding: 0 0 0 34px; } .combined-inputs .input { display: inline-block; line-height: 23px; min-height: 24px; max-width: 30px; font-family: 'futura', sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #494f5a; border: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; padding: 0; } .combined-inputs .input.type-2 { max-width: 137px; } .combined-inputs .input-size-changer { position: absolute; top: -9999px; display: inline-block; line-height: 23px; margin: 0; min-width: 20px !important; min-height: 24px; font-family: 'futura', sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #494f5a; border: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; padding: 0; } .combined-inputs hr { display: inline-block; width: 16px; margin-left: 5px; margin-right: 5px; border-style: solid; border-color: #dedede; } .custom-form .button-wrap.two-buttons { zoom: 1; } .custom-form .button-wrap.two-buttons:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .custom-form .button-wrap.two-buttons .button { width: 50%; float: left; } .custom-form .button-wrap.two-buttons-2 { height: 70px; } .custom-form .button-wrap.two-buttons-2 .button { width: calc(50% - 10px); float: left; } .custom-form .button-wrap.two-buttons-2 .button:first-child { margin-right: 10px; } .custom-form .button-wrap.two-buttons-2 .button:last-child { margin-left: 10px; } .s-widget { background: #f0f1f5; } .s-widget .custom-form { padding-top: 50px; } .s-widget .widget-links { margin-bottom: 50px; } .s-widget.FXTrading .inner { padding: 0 100px; } .s-widget .inner.type-2 { padding: 0 50px; } .custom-form .group { position: relative; margin-bottom: 50px; } .custom-form .group.margin-2 { position: relative; margin-bottom: 20px; } .custom-form .group.type-2 { position: relative; margin-bottom: 20px; } .custom-form .group .info-icon { right: -65px; } .content-hidden { display: none; padding-top: 5px; } .custom-form.border-top { border-top: 2px solid #efefef; } .widget-btn-wrap.stripe:before { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; height: 100%; width: 1px; background-color: #efefef; visibility: visible; } .input-select-wrap { position: relative; padding-right: 90px; } .input-select-wrap .select-4 { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: calc(100% - 160px); max-width: 165px; } .input-select-wrap .select-3 { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; margin: 0; min-width: auto; } .input-select-wrap .select-3 select { width: auto; font-weight: 700; } .input-select-wrap.type-2 { padding-right: 180px; } .col-fix-size-2 { float: left; width: 400px; } .col-fix-size-1 { float: left; width: 200px; } .group-title { font-size: 18px; color: #0095c9; margin-bottom: 40px; } .group-title.type-2 { font-size: 14px; color: #7b7b7b; } .plan-text { zoom: 1; border-bottom: 1px solid #ebeced; margin-bottom: 30px; } .plan-text:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .plan-text .key { font-size: 16px; margin-bottom: 5px; float: left; } .plan-text .value { text-align: right; font-size: 16px; margin-bottom: 5px; float: right; } .plan-text p.size-2, .plan-text span.size-2 { font-size: 18px; } .plan-text p.bold, .plan-text span.bold { font-weight: 700; } .plan-text.margin-2 { margin-bottom: 45px; } .text-cl-1 { color: #000; } .text-cl-2 { color: #333333; } .text-cl-3 { color: #7b7b7b; } .title-1 { line-height: .95; font-size: 32px; } @media screen and (min-width: 320px) { .title-1 { font-size: -webkit-calc(32px + 48 * ((100vw - 320px)/1600)); font-size: calc(32px + 48 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .title-1 { font-size: 80px; } } .title-2 { line-height: 1.1333333; letter-spacing: -.02em; font-size: 30px; } @media screen and (min-width: 320px) { .title-2 { font-size: -webkit-calc(30px + 30 * ((100vw - 320px)/1600)); font-size: calc(30px + 30 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .title-2 { font-size: 60px; } } .title-3 { line-height: 1.9; font-size: 28px; } @media screen and (min-width: 320px) { .title-3 { font-size: -webkit-calc(28px + 12 * ((100vw - 320px)/1600)); font-size: calc(28px + 12 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .title-3 { font-size: 40px; } } .title-4 { line-height: .875; font-size: 26px; } @media screen and (min-width: 320px) { .title-4 { font-size: -webkit-calc(26px + 6 * ((100vw - 320px)/1600)); font-size: calc(26px + 6 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .title-4 { font-size: 32px !important; } } .title-5 { line-height: .6666666; letter-spacing: -.01em; font-size: 20px; } @media screen and (min-width: 320px) { .title-5 { font-size: -webkit-calc(20px + 4 * ((100vw - 320px)/1600)); font-size: calc(20px + 4 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .title-5 { font-size: 24px !important; } } .font-1 { font-family: "aeonik-regular"; } .font-2 { font-family: "aeonik-medium"; } .font-3 { font-family: "tt-norms-regular"; } .font-4 { font-family: "aeonik-bold"; } .font-6 { font-family: ibm-medium; } .font-7 { font-family: ibm-light; } .font-8 { font-family: ibm-semibold; } .font-9 { font-family: "aeonik-bold"; } .font-10 { font-family: "tt-norms-regular"; } .text-1 { font-size: 20px; } .text-2 { font-size: 18px; } .text-3 { font-size: 16px; } .text-4 { font-size: 15px; } .text-5 { font-size: 14px; } .text-6 { font-size: 13px; } .text-7 { font-size: 12px; } .text-8 { font-size: 24px; } .line-height-1 { line-height: 1; } .line-height-2 { line-height: 1.25; } .line-height-3 { line-height: .88888888; } .line-height-4 { line-height: 1.33333333; } .line-height-5 { line-height: 2.1; } .line-height-6 { line-height: 1.2; } .line-height-7 { line-height: 1.846153; } .line-height-8 { line-height: 1.44; } .line-height-9 { line-height: 1.6; } .letter-spacing-1 { letter-spacing: -.01em; } .letter-spacing-2 { letter-spacing: -.02em; } .margin-5 { margin-bottom: 5px; } .margin-4 { margin-bottom: 4px; } .margin-9 { margin-bottom: 9px; } .margin-10 { margin-bottom: 10px; } .margin-15 { margin-bottom: 15px; } .margin-16 { margin-bottom: 16px; } .margin-20 { margin-bottom: 20px; } .margin-30 { margin-bottom: 30px; } .margin-32 { margin-bottom: 32px; } .margin-40 { margin-bottom: 40px; } .margin-50 { margin-bottom: 50px; } .margin-60 { margin-bottom: 60px; } .margin-70 { margin-bottom: 70px; } .margin-80 { margin-bottom: 80px; } .margin-8 { margin-bottom: 8px; } .dropdown-item.type-2 { padding-left: 55px; } .dropdown-item.type-2 .dropdown-tag { left: 0; } .custom-autocomplete-dropdown .mCustomScrollBox .mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_draggerRail { background-color: transparent; } .custom-autocomplete-dropdown .mCSB_inside > .mCSB_container { margin-right: 0px !important; } .custom-autocomplete-dropdown .mCSB_scrollTools { width: 5px; } .custom-autocomplete-dropdown .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 0; } .creditAccountPart { width: auto; } .creditAccountPart.creditAccount2 { width: 130px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type='number'] { -moz-appearance: textfield; } .input.text-size-2 { font-size: 18px; } .input.bold { font-weight: 700; } .texarea-1 { border: none; -webkit-appearance: none; width: 100%; resize: none; font-family: "aeonik-regular"; font-size: 14px; letter-spacing: 0.5px; color: #000; } .texarea-1:focus { outline: none; } .texarea-1:focus ~ .label-1 { top: 14px; font-size: 12px; } /*#endregion inputs*/ /*#region select*/ .select-wrap { padding-left: 0; padding-right: 0; } .select-1 { border: none; width: 100%; padding: 0 10px; font-family: "futura", sans-serif; font-size: 15px; line-height: 29px; height: 29px; } .select-1:focus { outline: none; } .select-3 { margin-bottom: 15px; display: inline-block; min-width: 130px; } .select-3:before { content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; top: 23px; right: 15px; } .select-3 select { background-color: #fff; font-family: "futura", sans-serif; font-size: 16px; display: block; width: calc(100% - 50px); padding: 14px 35px; line-height: 24px; padding-left: 0px; float: right; direction: rtl; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .select-4 select { background-color: #fff; font-family: "futura", sans-serif; max-width: 100%; font-size: 16px; display: block; padding: 14px 5px; padding-right: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-4:before { content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; top: 21px; right: 15px; } select::-ms-expand { display: none; } /*#endregion select*/ /*#region Objects*/ .z-10 { position: relative; z-index: 10; } .z-20 { position: relative; z-index: 20; } .z-30 { position: relative; z-index: 30; } .z-40 { position: relative; z-index: 40; } .z-50 { position: relative; z-index: 50; } .inner-margin-right-small { margin-right: 30px; } .inner-margin-1 { margin-bottom: 10px; } .inner-margin-2 { margin-bottom: 20px; } .inner-margin-3 { margin-bottom: 30px; } .inner-margin-4 { margin-bottom: 40px; } .inner-margin-5 { margin-bottom: 50px; } .inner-margin-6 { margin-bottom: 60px; } .inner-margin-7 { margin-bottom: 70px; } .inner-margin-medium { margin-bottom: 100px !important; } .inner-padding-1 { padding-top: 10px; } .inner-padding-2 { padding-top: 20px; } .inner-padding-3 { padding-top: 30px; } .inner-padding-4 { padding-top: 40px; } .inner-padding-5 { padding-top: 50px; } .inner-padding-7 { padding-top: 70px; } .inner-padding-medium { padding-top: 100px !important; } .inner-padding-bottom { padding-bottom: 100px; } #icon-container { display: none; } /*#endregion Objects*/ /*#region buttons*/ button { font-family: "futura", sans-serif; } button:focus { outline: none; } button { border: none; padding: 0; outline: 0; background-color: transparent; cursor: pointer; } .buttons-wrapper { display: flex; justify-content: flex-start; cursor: pointer; } .buttons-wrapper button, .buttons-wrapper div { width: 100%; } .buttons-wrapper button:not(:first-child), .buttons-wrapper div:not(:first-child) { margin-left: 16px; } .buttons-wrapper .btn-1 { width: -webkit-fill-available; } .buttons-wrapper .btn-arrow-1 { position: absolute; top: 74%; transform: translateY(-50%); width: 17px; height: 12px; right: 115px; transition: transform .3s,-webkit-transform .3s; } .buttons-wrapper .btn-arrow-1:hover { transform: translate(5px, -50%); } .buttons-wrapper .btn-arrow-2 { position: absolute; top: 83%; transform: translateY(-50%); width: 17px; height: 12px; right: 115px; transition: transform .3s,-webkit-transform .3s; } .btn-1 { position: relative; display: inline-block; min-width: 100px; padding: 17px 20px 16px 20px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1.214285; letter-spacing: -0.02em; border-radius: 30px; text-align: center; transition: color .3s, background-color .3s, transform .3s; white-space: nowrap; } .btn-1:active { transform: scale(0.98); } .btn-1[disabled] { opacity: .7; pointer-events: none; } .btn-1.color-1 { font-size: 15px !important; background-color: #266eff; color: #fff; } .btn-1.color-1:hover { background-color: #0050f2; color: #fff; } .btn-1.color-2 { font-size: 15px !important; background-color: #fff; color: #266eff; } .btn-1.color-2:hover { background-color: #e6e6e6; } .btn-1.with-icon { padding: 17px 47px 16px 20px; text-align: left; } .btn-1.with-icon:hover .btn-arrow { transform: translate(5px, -50%); } .btn-1.with-icon-left { padding: 17px 47px 16px 47px; background-color: #fff; } .btn-1 .btn-arrow { position: absolute; width: 17px; height: 12px; top: 50%; right: 20px; transform: translateY(-50%); transition: transform .3s; } .btn-1.icon-white .btn-arrow { color: #fff; } .btn-1 .btn-icon-left { position: absolute; width: 24px; height: 24px; top: 50%; left: 15px; transform: translateY(-50%); } .btn-1.bigger-btn { min-height: 72px; border-radius: 12px; } .btn-1.bigger-btn span { line-height: 1.5; } .btn-1.bigger-btn .btn-icon-left { stroke: none; } .btn-1.bigger-btn.with-icon-left { padding: 14px 47px 14px 72px; } .btn-1.bigger-btn::after { content: ""; position: absolute; left: 48px; top: 10px; height: 72%; width: 1px; border-right: 1px solid #d7d8db; } .btn-1.bigger-btn.arrow-mobile-contact::after { top: 15px; height: 81%; } .btn-2 { position: relative; display: inline-block; min-width: 100px; padding: 23px 20px 20px 20px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1.214285; letter-spacing: -0.02em; border-radius: 12px; text-align: center; transition: color .3s, background-color .3s, transform .3s; } .btn-2:active { transform: scale(0.98); } .btn-2[disabled] { opacity: .7; pointer-events: none; } .btn-2.color-1 { background-color: #266eff; color: #194137; } .btn-2.color-1:hover { background-color: #194137; color: #266eff; } .btn-2.color-2 { background-color: #F3F6F8; color: #194137; } .btn-2.color-2:hover { background-color: #e6e6e6; } .btn-2.with-icon { padding: 23px 47px 20px 20px; text-align: left; font-family: "aeonik-regular"; color: #000F28; } .btn-2.with-icon:hover .btn-arrow { transform: translate(5px, -50%); } .btn-2.with-icon-left { padding: 23px 68px 20px; background-color: #fff; } .btn-2 .btn-arrow { position: absolute; width: 17px; height: 12px; top: 50%; right: 20px; transform: translateY(-50%); transition: transform .3s; color: #f21844; } .btn-2 .btn-icon-left { position: absolute; width: 20px; height: 20px; top: 50%; left: 16px; transform: translateY(-50%); stroke: none; fill: #666696; color: #666696; } .btn-2::after { content: ""; position: absolute; left: 52px; top: 9px; height: 72%; width: 1px; background-color: #d7d8db; } .button-3 { display: inline-block; font-size: 16px; line-height: 19px; text-transform: uppercase; color: #0095c9 !important; border: 1px solid #d1d1d1; padding: 17px 25px; padding-left: 60px; background-position: 20px center; background-repeat: no-repeat; text-align: center; cursor: pointer; } .button-3:hover { background-color: #fffde5; } .button-3.type-2 { padding-left: 25px; max-width: 345px; width: 100%; } .btn-5 { position: relative; display: inline-block; padding: 7px 16px 6px 16px; font-family: "aeonik-medium"; font-size: 13px; line-height: 1.2307; letter-spacing: -0.02em; text-transform: uppercase; border-radius: 30px; text-align: center; transition: color .3s, background-color .3s; color: #266eff; background-color: #fff; } .btn-5:hover { color: #266eff; background-color: #e9e9e9; } /*#endregion buttons*/ /*#region labels*/ /*#endregion labels*/ /*#region icons*/ .s-icon { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-size: 14px; vertical-align: middle; position: relative; top: -2px; box-sizing: border-box; left: -2px; } .s-icon.s-icon-filter { background-image: url(images/icons/filter-1.png); } .s-icon.s-icon-filter:hover { background-image: url(images/icons/filter-2.png); } .s-icon.s-icon-options { background-image: url(images/icons/options-icon-1.png); background-size: 10%; } .s-icon:hover { border-color: #494f5a; } .icon-archive-1 { background-image: url(images/icons/icon-archive-1.png); background-size: 14px; } .icon-archive-2 { background-image: url(images/icons/icon-archive-2.png); background-size: 20px; } .icon-inbox-1 { background-image: url(images/icons/icon-inbox-1.png); background-size: 22px; } .icon-users-1 { background-image: url(images/icons/icon-users-1.png); background-size: 18px; } .icon-user { background-image: url("images/icons/user.png"); } .icon-lock { background-image: url("images/icons/lock.png"); } .icon-lock-1 { background-image: url("images/icons/icon-lock-1.png"); } .icon-sms-1 { background-image: url("images/icons/icon-sms-1.png"); } .icon-smartphone-1 { background-image: url("images/icons/icon-smartphone-1.png"); } .icon-biometrics { background-image: url("images/icons/ico_biometrija_web.png"); } .power-icon { background-image: url(images/icons/power-icon.png); } .settings-icon { background-image: url(images/icons/settings-icon.png); } /* Icons */ .icon-loans-3 { background-image: url(images/icons/loans_d.png); } .arrow-right-1 { background-image: url(images/icons/arrow-right-1.png); } .arrow-right-2 { background-image: url(images/icons/arrow-right-2.png); } .arrow-bottom-1 { background-image: url(images/icons/arrow-bottom-1.png); } .arrow-bottom-2 { background-image: url(images/icons/arrow-bottom-2.png); } .arrow-top-1 { background-image: url(images/icons/arrow-top-1.png); } .icon-user { background-image: url(images/icons/user-icon.png); background-size: 9px; } .icon-lock { background-image: url(images/icons/lock-icon.png); background-size: 11px; } .icon-tel { background-image: url(images/icons/tel-icon.png); } .facebook-white { background-image: url(images/icons/facebook-white.png); } .facebook-grey { background-image: url(images/icons/facebook-grey.png); } .facebook-dark { background-image: url(images/icons/facebook-dark.png); } .twitter-white { background-image: url(images/icons/twitter-white.png); } .twitter-grey { background-image: url(images/icons/twitter-grey.png); } .twitter-dark { background-image: url(images/icons/twitter-dark.png); } .linkedin-white { background-image: url(images/icons/linkedin-white.png); } .linkedin-grey { background-image: url(images/icons/linkedin-grey.png); } .linkedin-dark { background-image: url(images/icons/linkedin-dark.png); } .question-icon { background-image: url(images/icons/question-icon.png); } .settings-icon { background-image: url(images/icons/settings-icon.png); } .settings-icon-1 { background-image: url(images/icons/settings-icon-1.png); background-size: 22px; } .settings-icon-2 { background-image: url(images/icons/settings-icon-2.png); background-size: 22px; } .power-icon { background-image: url(images/icons/power-icon.png); background-size: 20px; } .power-icon-2 { background-image: url(images/icons/power-icon-2.png); background-size: 20px; } .mail-icon { background-image: url(images/icons/mail-1.png); } .move-icon { background-image: url(images/icons/move-1.png); } .print-icon { background-image: url(images/icons/print-icon.png); background-size: 16px; } .minimize-icon { background-image: url(images/icons/minimize-1.png); } .maximize-icon { background-image: url(images/icons/maximize-1.png); } .filter-icon { background-image: url(images/icons/filter-1.png); background-size: 14px; } .edit-text { position: relative; top: -8px; } .hide-icon { background-image: url(images/icons/ico_hide2.png); background-size: 18px; } .hide-icon:hover { background-image: url(images/icons/ico_hide.png); border-color: #494f5a !important; } p.ceye { display: none; } div.cbalance { display: block; } div.balanceCard { width: 240px; position: relative; left: -25px; } p.eye { display: block; } div.balance { display: none; } .available-balance-col:hover p.eye, .chart-content:hover p.eye { display: none !important; } .available-balance-col:hover div.balance, .chart-content:hover div.balance { display: block !important; } .edit-icon-2 { background-image: url(images/icons/edit-2.png); background-size: 14px; } .edit-icon-3 { background-image: url(images/icons/edit-3.png); background-size: 24px; } .drag-icon { background-image: url(images/icons/drag-icon.png); } .logo-icon { background-image: url(images/icons/logo-icon.png); } .logo-icon-2 { background-image: url(images/icons/logo-icon-2.png); background-size: 21px; } .wallet-icon { background-image: url(images/icons/wallet-1.png); } .bill-icon { background-image: url(images/icons/bill-1.png); } .options-icon { background-image: url(images/icons/options-icon.png); } .ham-icon { background-image: url(images/icons/ham-icon.png); } .left-icon { background-image: url(images/icons/arrow-left-1.png); } .left-icon-2 { background-image: url(images/icons/arrow-left-5.png); } .right-icon { background-image: url(images/icons/arrow-right-3.png); } .right-icon-2 { background-image: url(images/icons/arrow-right-5.png); } .play-icon { background-image: url(images/icons/play-icon.png); } .layers-icon { background-image: url(images/icons/layers-1.png); } .layers-icon-2 { background-image: url(images/icons/layers-2.png); } .close-icon { background-image: url(images/icons/close-icon-1.png); } .icon-accounts-1 { background-image: url(images/icons/accounts_w.png); background-size: 24px; } .icon-accounts-2 { background-image: url(images/icons/accounts_y.png); background-size: 24px; } .icon-accounts-3 { background-image: url(images/icons/accounts_g.png); background-size: 24px; } .icon-accounts-4 { background-image: url(images/icons/accounts_d.png); background-size: 24px; } .icon-arrow-1 { background-image: url(images/icons/icon-arrow-1.png); background-size: 22px; } .icon-arrow-right-1 { background-image: url(images/icons/arrow-blue-r.png); background-size: 6px; } .icon-arrow-left-1 { background-image: url(images/icons/arrow-blue-l.png); background-size: 6px; } .icon-bill-1 { background-image: url(images/icons/icon-bill-1.png); background-size: 30px; } .icon-bill-2 { background-image: url(images/icons/icon-bill-2.png); background-size: 30px; } .icon-bills-1 { background-image: url(images/icons/icon-bills_w.png); background-size: 20px; } .icon-bills-2 { background-image: url(images/icons/icon-bills_y.png); background-size: 20px; } .icon-bills-3 { background-image: url(images/icons/icon-bills_g.png); background-size: 20px; } .icon-bills-4 { background-image: url(images/icons/icon-bills-4.png); background-size: 20px; } .icon-bills-5 { background-image: url(images/icons/icon-bills-5.png); height: 91px; width: 91px; margin: auto auto 30px auto; } .icon-bills-6 { background-image: url(images/icons/icon-bills-6.png); background-size: 34px; } .icon-cards-1 { background-image: url(images/icons/cards_w.png); background-size: 30px; } .icon-cards-2 { background-image: url(images/icons/cards_y.png); background-size: 30px; } .icon-cards-3 { background-image: url(images/icons/cards_d.png); background-size: 30px; } .icon-chart-1 { background-image: url(images/icons/chart-1.png); background-size: 16px; } .icon-chart-1.s-icon:hover { background-image: url(images/icons/chart-2.png); } .icon-chart-2 { background-image: url(images/icons/chart-2.png); background-size: 16px; } .icon-check-1 { background-image: url(images/icons/check-icon-2.png); background-size: 50px; } .icon-clock-1 { background-image: url(images/icons/icon-clock-1.png); background-size: 23px; } .icon-clock-2 { background-image: url(images/icons/icon-clock-2.png); background-size: 23px; } .icon-close-1 { background-image: url(images/icons/close-icon-1.png); background-size: 10px; } .icon-coins-1 { background-image: url(images/icons/icon-coins-1.png); background-size: 22px; } .icon-coins-2 { background-image: url(images/icons/icon-coins-2.png); background-size: 22px; } .icon-coins-3 { background-image: url(images/icons/icon-coins-3.png); background-size: 22px; } .icon-coins-4 { background-image: url(images/icons/icon-coins-4.png); background-size: 33px; } .icon-exchange-1 { background-image: url(images/icons/icon-exchange_w.png); background-size: 25px; } .icon-exchange-2 { background-image: url(images/icons/icon-exchange_y.png); background-size: 25px; } .icon-exchange-3 { background-image: url(images/icons/icon-exchange_d.png); background-size: 25px; } .icon-exchange-office-1 { background-image: url(images/icons/icon-exchange-office_w.png); background-size: 25px; } .icon-exchange-office-2 { background-image: url(images/icons/icon-exchange-office_y.png); background-size: 25px; } .icon-exchange-office-3 { background-image: url(images/icons/icon-exchange-office_d.png); background-size: 25px; } .icon-eye-1 { background-image: url(images/icons/icon-eye_w.png); background-size: 26px; } .icon-eye-2 { background-image: url(images/icons/icon-eye_g.png); background-size: 20px; } .icon-facebook-1 { background-image: url(images/icons/facebook-1.png); background-size: 10px; } .icon-help-1 { background-image: url(images/icons/help-1.png); background-size: 24px; } .icon-help-2 { background-image: url(images/icons/help-2.png); background-size: 24px; } .icon-home-1 { background-image: url(images/icons/home_w.png); background-size: 24px; } .icon-home-2 { background-image: url(images/icons/home_y.png); background-size: 24px; } .icon-info-1 { background-image: url(images/icons/info-icon-1.png); background-size: 2px; } .icon-investment-1 { background-image: url(images/icons/investment-1.png); background-size: 22px; } .icon-investment-2 { background-image: url(images/icons/investment-2.png); background-size: 22px; } .icon-investment-3 { background-image: url(images/icons/investment-3.png); background-size: 22px; } .icon-last-transactions-1 { background-image: url(images/icons/icon-last-trans.png); background-size: 18px; } .icon-list-1 { background-image: url(images/icons/list-1.png); background-size: 20px; } .icon-list-1.s-icon:hover { background-image: url(images/icons/list-2.png); } .icon-list-2 { background-image: url(images/icons/list-2.png); background-size: 20px; } .icon-loans-1 { background-image: url(images/icons/loans_w.png); background-size: 29px; } .icon-loans-2 { background-image: url(images/icons/loans_y.png); background-size: 29px; } .icon-loans-3 { background-image: url(images/icons/loans_d.png); background-size: 29px; } .icon-logo-1 { background-image: url(images/icons/raiff-3.png); background-size: 30px; } .icon-message-1 { background-image: url(images/icons/message-icon-1.png); background-size: 24px; } .icon-message-2 { background-image: url(images/icons/message-icon-2.png); background-size: 24px; } .icon-message-3 { background-image: url(images/icons/message-icon-3.png); background-size: 24px; } .icon-message-4 { background-image: url(images/icons/message-icon-4.png); background-size: 24px; } .icon-options-1 { background-image: url(images/icons/options-icon-1.png); background-size: 3px; } .icon-payments-1 { background-image: url(images/icons/payments_w.png); background-size: 24px; } .icon-payments-2 { background-image: url(images/icons/payments_y.png); background-size: 24px; } .icon-show { background-image: url(images/icons/icon-reload-2.png); background-size: 24px; } .icon-payments-3 { background-image: url(images/icons/payments_g.png); background-size: 24px; } .icon-payments-4 { background-image: url(images/icons/payments_d.png); background-size: 24px; } .icon-pay-card-1 { background-image: url(images/icons/icon-pay-card_w.png); background-size: 25px; } .icon-pay-card-2 { background-image: url(images/icons/icon-pay-card_y.png); background-size: 25px; } .icon-phone-1 { background-image: url(images/icons/tel-icon-2.png); background-size: 25px; } .icon-phone-2 { background-image: url(images/icons/icon-phone-1.png); background-size: 20px; } .icon-pin-1 { background-image: url(images/icons/icon-pin_d.png); background-size: 18px; } .icon-plus-1 { background-image: url(images/icons/plus-1.png); background-size: 19px; } .icon-products-1 { background-image: url(images/icons/icon-products.png); background-size: 20px; } .icon-rba-1 { background-image: url(images/icons/icon-rba.png); background-size: 34px; } .icon-reload-1 { background-image: url(images/icons/icon-reload-1.png); background-size: 15px; } .icon-success-1 { background-image: url(images/icons/icon-success-1.png); background-size: 90px; } .icon-save-1 { background-image: url(images/icons/save-icon-1.png); background-size: 14px; } .icon-savings-1 { background-image: url(images/icons/savings_w.png); background-size: 29px; } .icon-savings-2 { background-image: url(images/icons/savings_y.png); background-size: 29px; } .icon-savings-3 { background-image: url(images/icons/savings_d.png); background-size: 29px; } .icon-secure-1 { background-image: url(images/icons/secure-icon-1.png); background-size: 23px; } .icon-service-1 { background-image: url(images/icons/icon-service-1.png); background-size: 24px; } .icon-templates-1 { background-image: url(images/icons/icon-templates_w.png); background-size: 24px; } .icon-templates-2 { background-image: url(images/icons/icon-templates_y.png); background-size: 24px; } .icon-trash { background-image: url(images/icons/ic_token_brisanje.png); } .icon-mark-as-read { background-image: url(images/icons/ic_mark_read.png); } .icon-user-1 { background-image: url(images/icons/user-1.png); background-size: 24px; } .icon-user-2 { background-image: url(images/icons/user-2.png); background-size: 24px; } .icon-users-1 { background-image: url(images/icons/icon-users-1.png); background-size: 18px; } .icon-users-2 { background-image: url(images/icons/icon-users-2.png); background-size: 18px; } .icon-value-paper-1 { background-image: url(images/icons/value-paper-1.png); background-size: 18px; } .icon-value-paper-2 { background-image: url(images/icons/value-paper-2.png); background-size: 18px; } .icon-value-paper-3 { background-image: url(images/icons/value-paper-3.png); background-size: 18px; } .icon-youtube-1 { background-image: url(images/icons/youtube-1.png); background-size: 24px; } .icon-2 { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; border-radius: 13px; background-position: center center; background-repeat: no-repeat; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .icon-repeat { background-image: url(images/icons/icon-repeat.png); } .icon-refresh-1 { background-image: url(images/icons/icon-refresh.png); background-size: 24px; } .icon-stopwatch-1 { background-image: url(images/icons/icon-stopwatch-1.png); background-size: 23px; } .icon-add-user-1 { background-image: url(images/icons/icon-add-user-1.png); background-size: 21px; } .icon-search-1 { background-image: url(images/icons/icon-search-1.png); background-size: 14px; } .icon-help-3 { background-image: url(images/icons/icon-help-3.png); background-size: 46px; } .icon-calc-1 { background-image: url(images/icons/icon-calc-1.png); background-size: 22px; } .icon-mail-1 { background-image: url(images/icons/icon-mail-1.png); background-size: 16px; } .icon-mail-1:hover { background-image: url(images/icons/icon-mail-2.png); } .icon-help { background-image: url(images/icons/help-1.png); background-size: 24px; background-repeat: no-repeat; } .icon-plus-2 { background-image: url(images/icons/icon-plus-2.png); background-size: 34px; } .icon-calendar-2 { background-image: url(images/icons/icon-calendar-2.png); background-size: 32px; } .icon-hand-1 { background-image: url(images/icons/icon-hand-1.png); background-size: 28px; } .clientGrid tbody tr .tag .tag-icon.icon-repeat { background-size: 17px !important; background-position: center; } .tag-icon.trnType { background-position: center; background-size: 35px; } .tag { border-radius: 50%; border: 2px solid #d9d9d9; color: #000; font-weight: normal; font-size: 16px; width: 35px; height: 35px; line-height: 30px; margin-right: 10px; margin-left: 15px; box-sizing: border-box; text-align: center; display: inline-block; position: relative; float: left; } .tag .tag-icon { width: 31px; height: 31px; position: absolute; top: 0; left: 0; border-radius: 50%; background-repeat: no-repeat !important; display: inline-block; } .tag .tag-icon:not(.trnType) { background-size: cover !important; } .side-modal .tag { float: right; position: absolute; top: 5px; right: 1px; } /*#endregion icons*/ /*#region option*/ .widget-options { float: right; zoom: 1; padding-top: 13px; padding-right: 13px; } .widget-options:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .widget-options li { float: right; margin-left: 10px; } .widget-options li i { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; position: relative; top: -2px; box-sizing: border-box; cursor: pointer; } .widget-options li i:hover { border-color: #494f5a; } .widget-options li i.dark { border-color: #c9caca; background-color: rgba(172, 173, 176, 0.7); } .widget-options li i.dark-2 { border-color: #494f5a; } .widget-options .move { display: none; } .widget-options .move-icon { background-size: 14px; } .widget-options .move-icon:hover { background-image: url(images/icons/move-3.png); } .widget-options .move-icon.dark { background-image: url(images/icons/move-2.png); } .widget-options .move-icon.dark-2 { background-image: url(images/icons/move-3.png); } .widget-options .icon-options-1:hover { background-image: url(images/icons/options-icon-3.png); } .widget-options .options-icon.dark { background-image: url(images/icons/options-icon-2.png); } .widget-options .options-icon.dark:hover { background-color: rgba(73, 79, 90, 0.3); border-color: #494f5a; } .widget-options .options-icon.dark-2 { background-image: url(images/icons/options-icon-3.png); } .widget-options .options-icon.dark-2:hover { background-color: rgba(73, 79, 90, 0.3); } .widget-options .print-icon { background-size: 16px; } .widget-options .print-icon:hover { background-image: url(images/icons/print-icon-2.png); } .widget-options .icon-save-1:hover { background-image: url(images/icons/save-icon-2.png); } .widget-options .minimize-icon { background-size: 10px; } .widget-options .maximize-icon { background-size: 10px; } .widget-options .filter-icon { background-size: 14px; } .widget-options .filter-icon:hover { background-image: url(images/icons/filter-2.png); } .widget-options .icon-list-1:hover, .widget-options li.active .icon-list-1 { background-image: url(images/icons/list-2.png); border-color: #494f5a; } .widget-options .icon-chart-1:hover, .widget-options li.active .icon-chart-1 { background-image: url(images/icons/chart-2.png); border-color: #494f5a; } .widget-options .options-icon { background-size: 3px; } .widget-options .left-icon { background-position: 11px center; background-size: 7px; } .widget-options .right-icon { background-position: 14px center; background-size: 7px; } .widget-options li .left-icon:hover, .widget-options li .right-icon:hover { border-color: #cfd0d2; } .showCardBalance { display: flex; position: relative; top: 47px; left: -11px; } .showCardBalance2 { position: relative; top: 62px; left: -11px; } .btn-0 { padding: 7px 10px !important; } .paddingLeft { padding-left: 10px; } .showCardBalance0 { position: absolute; top: 57px; left: 3px; } .showCardBalance0 a { width: 182px !important; } .showCardBalance0 a:nth-child(2) { position: absolute; top: 37px; margin-top: 10px; } .flex { display: flex; } .btnShowCardBalaceGrid { position: relative !important; float: right !important; width: 161px !important; margin-top: 0px !important; background: url(images/icons/icon-reload-2.png) no-repeat 8px; background-size: 23px; text-align: right; margin-right: -16px; } .btnShowCardBalaceGrid a { width: 170px !important; } .w-options { position: relative; } .w-options .options-down { display: none; position: absolute; top: 30px; right: 0; z-index: 1; background: #fff; -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); } .w-options .options-down ul { padding: 10px 20px; } .w-options .options-down li { float: none; margin: 5px 0; } .w-options .options-down a, .w-options .options-down p { display: block; font-size: 14px; color: #333333; text-transform: uppercase; text-align: right; margin: 5px 0; white-space: nowrap; } /*#endregion option*/ /*#region slidertutorial*/ .widget-tutorial-slider { position: relative; } .widget-tutorial-slider .slider .slick-list { height: 420px !important; } .widget-tutorial-slider .btn-1 { position: absolute; bottom: 0; left: 0; width: 100%; } .widget-tutorial-slider .widget-inner { height: 420px !important; background-color: #7b7b7b; } .widget-tutorial-slider .widget-header { position: relative; z-index: 5; } .widget-tutorial-slider .slider { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .widget-tutorial-slider .slide { height: 375px; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .widget-tutorial-slider .slide > a { display: block; height: 100%; position: relative; z-index: 10; } .widget-tutorial-slider .slide:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .widget-tutorial-slider .slick-dots { display: none !important; } .widget-tutorial-slider .slick-dots button { width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; background: #41454e; padding: 0; text-indent: -9999px; overflow: hidden; border: none; } .widget-tutorial-slider .slick-dots .slick-active button { background: #fff; } .widget-tutorial-slider .slide .inner { position: absolute; bottom: 60px; text-align: left; padding-left: 20px; } .widget-tutorial-slider .slide .inner p { font-size: 18px; color: #fff; margin-bottom: 10px; } .widget-tutorial-slider .slide .inner .title { font-size: 30px; line-height: 36px; font-weight: 700; color: #fff; } .widget-tutorial-slider .play-icon { display: inline-block; width: 70px; height: 70px; background-color: #fff200; background-position: 25px center; background-repeat: no-repeat; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; } .NotificationNoLink { height: 420px !important; } #nav-prev, #nav-next { cursor: pointer; } /*#endregion slidertutorial*/ /*#region custom*/ .filter-dialog-button { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-size: 14px; vertical-align: middle; background-image: url(images/icons/filter-1.png); cursor: pointer; box-sizing: border-box; z-index: 99; } .filter-dialog-button:hover { background-image: url(images/icons/filter-2.png); border-color: #494f5a; } .search-message-button { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-size: 14px; vertical-align: middle; background-image: url(images/icons/icon-search-1.png); cursor: pointer; box-sizing: border-box; z-index: 99; } .search-message-button:hover { background-image: url(images/icons/icon-search-2.png); border-color: #494f5a; } .filter.message-hub.hidden { display: none; } .filter.message-hub.active { display: block; } .input-wrap.message-hub { width: 83%; float: left; margin-right: 20px; position: relative; } .input-wrap.message-hub label { top: -10px; padding: 0 10px; } .input-wrap.message-hub input { padding: 14px 24px 16px; } .btn-1.color-6.messahe-hub { width: 15%; padding: 17px 10px; } .group-inner.message-hub { box-sizing: border-box; } .group-inner.message-hub .btn-1 { justify-content: center; } [class^="col-button"] { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; display: inline-block; color: #0095c9; font-size: 14px; line-height: 38px; text-align: center; text-transform: uppercase; padding-right: 30px; background-image: url(images/icons/arrow-blue-r.png); background-size: 6px; background-repeat: no-repeat; background-position: 100% center; margin: 0; } [class^="col-button"]:hover { opacity: .6; } .button-col .col-button { position: absolute; top: 12px; right: 20px; } .group { width: 100%; } .group.group-two .group-inner { float: left; width: 48%; } .group.group-two .group-inner:first-child { margin-right: 4%; } .group .group-inner { width: 100%; margin-bottom: 25px; } .group .group-inner .input-info input { padding-right: 40px; } .group .group-inner .info-icon { display: inline-block; width: 34px; height: 24px; border: 2px solid #cfd0d2; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-image: url(images/icons/info-icon-1.png); background-size: 2px; position: absolute; right: 5px; top: 12px; } .group .group-inner .info-icon:hover p { opacity: 1; visibility: visible; } .group .group-inner .info-icon p { width: 250px; padding: 15px; background-color: rgba(73, 80, 90, 0.7); position: absolute; right: 15px; bottom: 29px; font-size: 14px; color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; margin-bottom: 20px; } .group .group-inner .info-icon p:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 0px 0 13px; border-color: #49505a transparent transparent transparent; position: absolute; right: 0px; bottom: -12px; opacity: 0.7; } .group .group-inner .step-line { height: 3px; background-color: #d1d1d1; } .group .group-inner .step-line div { height: 100%; background-color: #fff200; } .group .group-inner .step-line .step-line-inner-1 { width: 33%; } .group .group-inner .step-line .step-line-inner-2 { width: 66%; } .group .group-inner .info-box-1 { padding: 20px; border: 1px solid #d1d1d1; margin-top: 150px; } .group .group-inner .info-box-1 .info-box-image { background: url(images/contact-2xx.png); width: 50px; height: 50px; background-size: cover; display: inline-block; } .group .group-inner .info-box-1 h4 { padding-top: 15px; text-transform: none; font: 700 20px/1.2 "futura", sans-serif; font-size: 16px; display: inline-block; position: relative; top: -17px; left: 15px; } .group .group-inner .info-box-1 p { font-size: 16px; color: #7b7b7b; margin-top: 30px; line-height: 24px; } .group .group-inner.error-msg .error-msg_p { color: red; font-size: 15px; margin-top: 25px; } .group .group-inner.error-msg .input-wrap { border-color: red !important; } .group.steps-new p { font-size: 16px; color: #7b7b7b; margin-top: 30px; line-height: 24px; margin-bottom: 20px; } .col-ls-24 { width: 100% !important; } .custom-table * { box-sizing: border-box; } .custom-table .list-item.row-1 { cursor: pointer; } .custom-table .col { float: left; padding: 11px 15px; position: relative; } .custom-table .col.col-ls-24 { width: 100%; } .custom-table .col.col-ls-23 { width: 95.83333333%; } .custom-table .col.col-ls-22 { width: 91.66666667%; } .custom-table .col.col-ls-21 { width: 87.5%; } .custom-table .col.col-ls-20 { width: 83.33333333%; } .custom-table .col.col-ls-19 { width: 79.16666666%; } .custom-table .col.col-ls-18 { width: 75%; } .custom-table .col.col-ls-17 { width: 70.83333266%; } .custom-table .col.col-ls-16 { width: 66.66666667%; } .custom-table .col.col-ls-15 { width: 62.5%; } .custom-table .col.col-ls-14 { width: 58.33333333%; } .custom-table .col.col-ls-13 { width: 54.16666667%; } .custom-table .col.col-ls-12 { width: 50%; } .custom-table .col.col-ls-11 { width: 45.83333333%; } .custom-table .col.col-ls-10 { width: 41.66666667%; } .custom-table .col.col-ls-9 { width: 37.5%; } .custom-table .col.col-ls-8 { width: 33.33333333%; } .custom-table .col.col-ls-7 { width: 29.16666667%; } .custom-table .col.col-ls-6 { width: 25%; } .custom-table .col.col-ls-5 { width: 20.83333333%; } .custom-table .col.col-ls-4 { width: 16.66666667%; } .custom-table .col.col-ls-3 { width: 12.5%; } .custom-table .col.col-ls-2 { width: 8.333333333%; } .custom-table .col.col-ls-1 { width: 4.166666667%; } .custom-table .list-item { padding: 5px 0; border-bottom: 2px solid #efefef; } .custom-table .list-item .big { font-size: 20px; } .custom-table .list-item.selected, .custom-table .list-item:hover { background: #fffde5; } .custom-table .list-item:after { content: ""; display: table; clear: both; } .custom-table .list-item .account-col { padding-right: 50px; padding-left: 70px; } .custom-table .list-item .account-col .account-icon { position: absolute; top: 50%; left: 20px; margin-top: -15px; display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; } .custom-table .list-item .account-col .edit-icon, .custom-table .list-item .account-col .hide-icon { display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: 14px; position: absolute; top: 50%; right: 10px; margin-top: -14px; overflow: visible; width: 36px; height: 26px; border: 2px solid #cfd0d2; border-radius: 13px; cursor: pointer; } .custom-table .list-item .overdraft-amount-col { padding-top: 10px; } .custom-table .list-item .button-col { padding-right: 160px; } .custom-table .list-item .button-col .btn-1 { width: 130px; position: absolute; top: 50%; margin-top: -18px; right: 15px; } .custom-table .list-item .button-col .btn-1.up-btn { margin-top: -40px; } .custom-table .list-item .btn-1 { display: inline-block; width: auto; min-width: 82px; padding: 9px 10px; } .custom-table .list-item .col-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 0; } .custom-table .list-item .text-1 { font-size: 14px; line-height: 38px; } .custom-table .list-item .text-top-2 { font-size: 14px; line-height: 15px; } .custom-table .list-item .text-3 { font-size: 18px; line-height: 38px; } .custom-table .list-item .text-cl-1 { color: #333333; } .custom-table .list-item .text-cl-3 { color: #7b7b7b; } .custom-table .list-item .left { text-align: left !important; } .custom-table .list-item .right { text-align: right; } .custom-table .has-button { padding-right: 160px; } .custom-table .has-button .btn-1 { width: 130px; position: absolute; top: 50%; margin-top: -18px; right: 15px; } .custom-table .text-bottom-2 { line-height: 21px; } .show-more { padding: 21px 0 20px 0; text-transform: uppercase; cursor: pointer; } .show-more.type-2 { display: inline-block; width: auto; color: #0095c9; } .show-more .arrow-bottom-1 { background: url(images/icons/arrow-blue-d.png) center center no-repeat; background-size: 10px; display: inline-block; float: left; width: 20px; height: 20px; margin-right: 10px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .show-more .arrow-bottom-1.rotated { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .show-more span { font-size: 14px; } .halign { position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .acc-nav .nav-arr { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #f4f4f4; background-position: center center; background-size: 7px; background-repeat: no-repeat; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); position: absolute; top: 50%; margin-top: -40px; } .acc-nav #arr-prev { background-image: url(images/icons/arrow-b-left.png); left: 50%; margin-left: -400px; z-index: 100; } .acc-nav #arr-next { background-image: url(images/icons/arrow-b-right.png); right: 50%; margin-right: -400px; z-index: 100; } .uk-width-1-2, .uk-width-2-4, .uk-width-5-10 { width: 50%; } .uk-width-3-6 { width: 100% !important; } .uk-width-2-3, .uk-width-4-6 { width: 66.666%; } .uk-width-1-3, .uk-width-2-6 { width: 33.333%; } .uk-width-1-6 { width: 16.6%; display: inline-block; } .uk-width-5-6 { width: 82.8%; display: inline-block; box-sizing: border-box; } .line { background-color: #ebeced; height: 1px; border: none; } .ui-slider-horizontal { height: 3px !important; border: none !important; background: #dbdbdb !important; } .ui-slider-handle { background: #0095c9 !important; border-radius: 50% !important; } .ui-slider-handle:after { content: ""; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; position: absolute; z-index: 1; width: calc(100% + 10px); height: calc(100% + 10px); background-color: rgba(0, 149, 201, 0.3); } .ui-slider-range { background: #0095c9 !important; } .wh-button { transition: all 0.3s ease; display: inline-block; width: 60px; height: 100%; background-color: #ffec00; background-position: calc(50% + 3px) center; background-repeat: no-repeat; } .wh-button.wh-button-top-right { height: 50px; position: absolute; right: 0; top: 0; cursor: pointer; z-index: 99; } .wh-button.icon-message-1 { background-position: center; } .wh-button:hover { background-color: #0095c9; } .widget-header .wh-button { position: absolute; top: 0; right: 0; } .custom-options a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 20px; display: inline-block; text-align: center; min-width: 115px; font-size: 16px; padding: 10px 35px; background-color: #dadada; color: #000; margin-right: 15px; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; } .custom-options a.active { background-color: #fff200; } .dropdown-wrap { position: relative; font-size: 16px; color: #000; padding: 20px 0; padding-right: calc(50% + 20px); line-height: 22px; } .dropdown-wrap .input-wrap { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; width: calc(50% - 10px); padding: 16px 15px 13px 15px; } .info-card { position: relative; border: 1px solid #d1d1d1; padding: 20px; padding-top: 35px; } .info-card i { position: absolute; display: inline-block; left: 15px; top: 15px; width: 55px; height: 55px; background-repeat: no-repeat; background-position: center; } .info-card .title { font-size: 16px; font-weight: 700; color: #000; margin-left: 65px; } .info-card .text { font-size: 16px; color: #7b7b7b; } .empty-section { padding: 100px 0; text-align: center; } .empty-section .title { font-size: 20px; color: #000; font-weight: 500; margin-bottom: 5px; } .empty-section .text { font-size: 16px; color: #7b7b7b; margin-bottom: 20px; } .empty-section .empty-section-image { background-repeat: no-repeat !important; width: 91px; height: 91px; margin: auto auto 30px auto; } .empty-section .empty-section-image.empty-section-accounts { background: url(images/icons/icon-account-1.png); } .empty-section .empty-section-image.empty-section-cards { background: url(images/icons/icon-cards-1.png); } .empty-section .empty-section-image.empty-section-loans { background: url(images/icons/icon-loans-1.png); } .header-border-bottom .s-widget-header { border-bottom: 2px solid #efefef; } .close-button-2 { display: inline-block; width: 30px; height: 30px; background-image: url(images/icons/close.png); background-size: 20px; background-repeat: no-repeat; background-position: center; float: right; cursor: pointer; } .checkbox-bar { padding-top: 25px; padding-bottom: 25px; } .checkbox-bar.border { border-bottom: 1px solid #ebeced; } .checkbox-bar .custom-check-label { position: relative; font-size: 16px; display: inline-block; padding-right: 50px; margin-right: 100px; } .checkbox-bar .custom-check-label .custom-checkbox-wrapper { top: 50%; transform: translateY(-50%); position: absolute; right: 0; } .checkbox-bar .custom-check-label .custom-checkbox-wrapper.checked { background-color: #c3b400; } .hideSlickArrows .slide-control { display: none !important; } .modal-text { font-size: 16px; line-height: 22px; color: #000; } .custom-dropdown { position: relative; padding: 14px 15px 12px 15px; border: 1px solid #d1d1d1; cursor: pointer; } .custom-dropdown.open { border-bottom-color: transparent; } .custom-dropdown.open-up { border-bottom-color: #d1d1d1; border-top-color: transparent; } .custom-dropdown.open-up .menu { border-top-color: #d1d1d1; border-bottom-color: transparent; top: auto; bottom: 100%; } .custom-dropdown .menu { display: none; position: absolute; left: -1px; top: 100%; width: calc(100% + 2px); border: 1px solid #d1d1d1; border-top-color: transparent; background-color: #fff; max-height: 385px; overflow: auto; z-index: 1001; } .custom-dropdown .menu .category-item { position: relative; display: block; font-size: 18px; font-weight: 500; padding: 10px 15px; } .custom-dropdown .menu .category-item.active, .custom-dropdown .menu .category-item:hover { background-color: #f2f2f2; } .custom-dropdown .menu .category-item:after { position: absolute; content: ""; top: 15px; right: 15px; width: 15px; height: 15px; background-image: url(images/icons/icon-plus-1.png); background-repeat: no-repeat; background-position: center; background-size: 14px; } .custom-dropdown .menu .category-item.active:after { background-image: url(images/icons/icon-minus-1.png); } .custom-dropdown .menu .category-item.active .btn-add { display: block; } .custom-dropdown .menu .category-item .btn-add { display: none; padding: 10px 0; font-weight: 400; text-transform: uppercase; font-size: 14px; color: #0095c9; } .custom-dropdown .menu .category-item .add-input { display: none; position: absolute; left: 10px; bottom: 10px; width: calc(100% - 80px); padding-right: 64px; } .custom-dropdown .menu .category-item .add-input input { display: block; width: 100%; font-size: 16px; font-weight: 400; background-color: #fff; border: 1px solid #d1d1d1; padding: 5px; } .custom-dropdown .menu .category-item .add-input .cancel { position: absolute; top: 0; right: 32px; width: 32px; height: 100%; background-color: #d1d1d1; background-image: url(images/icons/close.png); background-size: 8px; background-repeat: no-repeat; background-position: center; } .custom-dropdown .menu .category-item .add-input .confirm { position: absolute; top: 0; right: 0px; width: 32px; height: 100%; background-color: #fff200; background-image: url(images/icons/icon-check-1.png); background-size: 10px; background-repeat: no-repeat; background-position: center; } .custom-dropdown .menu .category-item.adding .btn-add { opacity: 0; visibility: hidden; } .custom-dropdown .menu .category-item.adding .add-input { display: block; } .custom-dropdown .menu .sub-menu { display: none; } .custom-dropdown .menu .sub-menu li { position: relative; padding: 10px 0; padding-right: 30px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .custom-dropdown .menu .sub-menu li:hover { color: #0095c9; } .custom-dropdown .menu .sub-menu li .remove, .custom-dropdown .menu .sub-menu li .edit, .custom-dropdown .menu .sub-menu li .save, .custom-dropdown .menu .sub-menu li .cancel { position: absolute; top: 0px; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 14px; } .custom-dropdown .menu .sub-menu li .remove, .custom-dropdown .menu .sub-menu li .cancel { right: -5px; background-image: url(images/icons/icon-remove-1.png); } .custom-dropdown .menu .sub-menu li .cancel { display: none; } .custom-dropdown .menu .sub-menu li .edit { right: 15px; background-image: url(images/icons/edit-4.png); } .custom-dropdown .menu .sub-menu li .save { display: none; right: 15px; background-image: url(images/icons/checked-green.png); } .custom-dropdown .label { font-size: 16px; color: #7b7b7b; background: #fff; position: absolute; bottom: calc(100% - 8px); left: 5px; padding: 0 10px; letter-spacing: .2px; margin: 0; } .custom-dropdown .main-title { position: relative; line-height: 23px; min-height: 24px; font-size: 16px; letter-spacing: 0.5px; color: #000; margin: 0; } .custom-dropdown .main-title:after { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; content: ""; right: 0; width: 12px; height: 12px; background-image: url(images/icons/icon-carrot-1.png); background-repeat: no-repeat; background-position: center; background-size: 11px; } .custom-dropdown .add-input { display: none; position: absolute; left: 10px; bottom: 10px; width: calc(100% - 20px); padding-right: 64px; } .remove-button { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; background-position: center; background-repeat: no-repeat; position: absolute; top: 12px; right: 0; } .custom-radio-1 .radio { cursor: pointer; position: relative; display: block; font-size: 16px; padding: 25px 20px; padding-left: 40px; text-overflow: ellipsis; overflow: hidden; } .custom-radio-1 .radio.has-input { padding-right: 130px; } .custom-radio-1 .radio.has-input .input-wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; max-width: 120px; } .custom-radio-1 .radio.has-input-2 { padding-right: 230px; } .custom-radio-1 .radio.has-input-2 .input-wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; max-width: 220px; } .custom-radio-1 .radio > i { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0px; display: inline-block; width: 25px; height: 25px; background-image: url(images/icons/radio-off.png); background-size: 20px; background-position: center; background-repeat: no-repeat; } .custom-radio-1 .radio.checked > i { background-image: url(images/icons/radio-on.png); } .link-1 { -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; display: inline-block; font-size: 16px; color: #0095c9; text-decoration: underline; text-transform: uppercase; cursor: pointer; } .info-list { font-size: 16px; color: #000; } .info-list .icon { width: 60px; height: 60px; margin-left: auto; margin-right: auto; margin-bottom: 10px; border: 2px solid #d9d9d9; border-radius: 50%; background-position: 50%; background-repeat: no-repeat; } .info-list li { margin-bottom: 25px; } .fastPaymentButton { float: right; min-width: 70px; background: #fff200; font-size: 14px; line-height: 30px; font-weight: 700; color: #000; text-align: center; text-transform: uppercase; padding: 0 25px; right: 20px; opacity: 0; border: none; cursor: pointer; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .fastPaymentButton:hover { color: #fff; background: #0095c9; } .fastPaymentButton.edit, .fastPaymentButton.delete { display: none; } /*#endregion custom*/ /*#region StickyHeader*/ .sticky-header-wrap { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sticky-header-wrap .main-peace { cursor: pointer; max-width: 455px; position: relative; padding: 19px; padding-left: 90px; border-right: 1px solid #ecda00; box-sizing: border-box; } .sticky-header-wrap .main-peace:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; position: absolute; width: 0; height: 0; right: 30px; border-style: solid; border-width: 6px 5.5px 0 5.5px; border-color: #000000 transparent transparent transparent; } .sticky-header-wrap .main-peace .icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 50px; height: 50px; left: 30px; background-repeat: no-repeat; background-position: center; } .sticky-header-wrap .main-peace .main-title { color: #000; font-size: 18px; letter-spacing: -1px; margin: 0; } .sticky-header-wrap .main-peace .main-acc-number { color: #000; font-size: 14px; letter-spacing: -1px; margin: 0; } .sticky-header-wrap .main-peace:after { content: ""; position: absolute; top: 0; right: -2px; width: 1px; height: 100%; background-color: #fff578; } .sticky-header-wrap .sticky-dropdown { position: absolute; display: none; top: 100%; left: 70px; width: 385px; overflow-y: auto; max-height: calc(100vh - 80px); } .sticky-header-wrap .sticky-dropdown .sticky-dd-item { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; padding: 10px 20px; display: block; background-color: #494f5a; border-bottom: 1px solid #666b75; color: #fff; font-size: 18px; line-height: 20px; letter-spacing: -1px; margin: 0; } .sticky-header-wrap .sticky-dropdown .sticky-dd-item:hover { background-color: #606876; cursor: pointer; } .sticky-header-wrap .sticky-dropdown .sticky-dd-item span.sp-2 { color: #fff; font-size: 14px; letter-spacing: -1px; margin: 0; } .sticky-header-wrap .button-5 { display: inline-block; font-size: 16px; text-transform: uppercase; color: #000; padding-right: 20px; background-repeat: no-repeat; background-position: right center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 20px; cursor: pointer; } .sticky-header-wrap .arrow-top-2 { background-image: url(images/icons/arrow-top-2.png); background-size: 10px; } /*#endregion StickyHeader*/ /*#region datepicker*/ .hasDatepicker { width: 100%; } .ui-datepicker-trigger { cursor: pointer; width: 20px; height: 20px; margin-left: -40px; margin-top: 18px; } #ui-datepicker-div { width: 300px; position: absolute; left: 0; top: 110%; z-index: 9999999 !important; background: #ffffff !important; border: none !important; border-radius: 12px; -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); padding: 15px; box-sizing: border-box; } .ui-datepicker .ui-widget-header { border: none; background-color: transparent; height: 40px; } .ui-datepicker .ui-widget-header .ui-datepicker-prev, .ui-datepicker .ui-widget-header .ui-datepicker-next { top: 4px; width: 40px; height: 40px; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 50%; background-color: rgba(102, 102, 102, 0.08); justify-content: center; align-items: center; } .ui-datepicker .ui-widget-header .ui-datepicker-prev:hover, .ui-datepicker .ui-widget-header .ui-datepicker-next:hover { border: 0; background-color: rgba(102, 102, 102, 0.25); } .ui-datepicker .ui-widget-header .ui-datepicker-prev { top: 4px; left: 0; } .ui-datepicker .ui-widget-header .ui-datepicker-prev span { background: url(images/icons/new-arrow-right.svg) center center no-repeat; transform: rotate(180deg); background-size: 10px; border: none; } .ui-datepicker .ui-widget-header .ui-datepicker-next { top: 4px; right: 0; } .ui-datepicker .ui-widget-header .ui-datepicker-next span { background: url(images/icons/new-arrow-right.svg) center center no-repeat; background-size: 10px; border: none; } .ui-datepicker .ui-widget-header .ui-datepicker-title { font-size: 16px; font-weight: 500; color: #505050; margin-top: 9px; margin-bottom: 10px; min-width: 28px !important; } .ui-datepicker .ui-widget-header .ui-datepicker-title .ui-datepicker-month { border: none; background-color: transparent; font-size: 15px; font-family: Lato-Semibold, sans-serif; color: #1c1f32; outline: none; cursor: pointer; width: 55%; min-width: 28px !important; } .ui-datepicker .ui-widget-header .ui-datepicker-title .ui-datepicker-year { border: none; background-color: transparent; font-size: 15px; font-family: Lato-Semibold, sans-serif; color: #1c1f32; outline: none; cursor: pointer; width: 40%; min-width: 28px !important; } .ui-datepicker .ui-datepicker-calendar { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker .ui-datepicker-calendar th { padding: .7em .3em; text-align: center; border: 0; background: none; font-size: 15px; } .ui-datepicker .ui-datepicker-calendar th span { font-family: "aeonik-bold"; color: #000F28; font-weight: 500; } .ui-datepicker .ui-datepicker-calendar td { padding: 1px 2px; } .ui-datepicker .ui-datepicker-calendar td a { background: none; color: #000F28; font-size: 15px; font-weight: 500; text-align: center; border: 0; box-sizing: border-box; width: 33px; height: 33px; line-height: 33px; border-radius: 50%; padding: 0; font-family: "aeonik-regular"; } .ui-datepicker .ui-datepicker-calendar td a:hover, .ui-datepicker .ui-datepicker-calendar td a.ui-state-active { border-color: #266eff; background: #266eff; color: #fff; } .ui-datepicker .ui-datepicker-calendar td span { padding: 0.4em; text-align: center; } .ui-datepicker .ui-datepicker-calendar .ui-datepicker-other-month { opacity: 0; } .ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable span { border: none; background: transparent; font-size: 14px; font-weight: normal; } .ui-datepicker .ui-datepicker-trigger { cursor: pointer; } /*#endregion datepicker*/ /*#region dialogs*/ .ui-dialog.information { width: 430px !important; text-align: center !important; font-size: 16px !important; } .ui-dialog.information .ui-dialog-content:before { display: none !important; } .no-back-arrow { padding-top: 50px !important; } .ui-dialog { overflow: hidden; /*Hiding scrollbar*/ } .ui-dialog.right-dialog { /*margin-right: -16px !important;*/ /*Hiding scrollbar*/ /*overflow-y: scroll !important;*/ /*Hiding scrollbar*/ /*overflow-x: hidden !important;*/ /*Hiding scrollbar*/ /*position: fixed !important; top: 0 !important; right: 0px !important; height: 100% !important; left: auto !important; z-index: 1000; width: auto !important; overflow-y: auto !important; box-sizing: border-box;*/ visibility: hidden; } .ui-dialog.right-dialog .ui-dialog-titlebar { border: none; color: black; font-family: "futura", sans-serif; font-size: 17px; padding-left: 0px; background-repeat: no-repeat; background-position: 0px 5px; background-size: 20px; background-image: none; background-color: transparent; cursor: default !important; padding: 0px 0px 0px 0px; } .ui-dialog.right-dialog .ui-dialog-titlebar .ui-dialog-title { font-size: 20px; font-weight: 700; } .ui-dialog.right-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { background: none; border: none; right: 10px; top: 10px; } .ui-dialog.right-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon-closethick { background: url(images/icons/close.png); background-size: 20px; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; } .ui-dialog.right-dialog .ui-dialog-content { padding: 0; overflow: overlay; } .ui-dialog.right-dialog.details-dialog { z-index: 1002 !important; } .ui-dialog.right-dialog.filter-dialog { width: 500px !important; } .ui-dialog.right-dialog.filter-dialog .ui-dialog-titlebar { background-image: url(images/icons/filter-3.png); background-size: 24px; padding-left: 40px; } .ui-dialog.right-dialog.filter-dialog .select-1 { padding: 0; } .ui-dialog.right-dialog.short-dialog { width: 440px !important; } .ui-dialog.creditor-temlate-dialog { width: 440px !important; } .ui-dialog.undue-liabilities-dialog, .ui-dialog.reserved-dialog { /* width: 800px !important;*/ box-sizing: border-box; } .ui-dialog.undue-liabilities-dialog .ui-dialog-titlebar, .ui-dialog.reserved-dialog .ui-dialog-titlebar { background: none !important; padding-left: 40px; } .ui-dialog.undue-liabilities-dialog .tag, .ui-dialog.reserved-dialog .tag { margin-left: 0px; } .ui-dialog.short-dialog { width: 440px !important; box-sizing: border-box; } .ui-dialog.short-dialog .ui-dialog-titlebar { background: none !important; } .ui-dialog.cheques-dialog .ui-dialog-titlebar { padding-left: 40px; } .ui-dialog .side-modal.type-2.transaction-detail { overflow: visible; } .ui-dialog.no-yes-dialog, .ui-dialog.info-dialog, .ui-dialog.information { padding: 0px; padding-bottom: 0px !important; font-family: "futura", sans-serif; font-size: 14px; } .ui-dialog.no-yes-dialog .ui-dialog-title, .ui-dialog.info-dialog .ui-dialog-title, .ui-dialog.information .ui-dialog-title { padding: 27px 27px 27px 20px; width: 100%; border-bottom: 1px solid #d7d8db; font-family: "tt-norms-regular"; font-size: 24px; color: #266eff; line-height: 1.2; } .ui-dialog.no-yes-dialog .ui-helper-clearfix:after, .ui-dialog.no-yes-dialog .ui-helper-clearfix:before, .ui-dialog.info-dialog .ui-helper-clearfix:after, .ui-dialog.information .ui-helper-clearfix:after, .ui-dialog.info-dialog .ui-helper-clearfix:before, .ui-dialog.information .ui-helper-clearfix:before { display: none !important; } .ui-dialog.no-yes-dialog .ui-widget-content, .ui-dialog.info-dialog .ui-widget-content, .ui-dialog.information .ui-widget-content { padding: 32px; border: none; } .ui-dialog.no-yes-dialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.info-dialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.information .ui-widget-content .ui-dialog-buttonset { padding-top: 20px; float: none !important; } .ui-dialog.no-yes-dialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.info-dialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.information .ui-widget-content .ui-dialog-buttonset button { position: relative; display: inline-block; min-width: 100px; padding: 17px 20px 16px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1.214285; letter-spacing: -.02em; border-radius: 30px; text-align: center; transition: color .3s,background-color .3s,-webkit-transform .3s; transition: color .3s,background-color .3s,transform .3s; transition: color .3s,background-color .3s,transform .3s,-webkit-transform .3s; background-color: #266eff !important; color: #fff !important; } .ui-dialog.no-yes-dialog .ui-widget-content .ui-dialog-buttonset button:hover, .ui-dialog.info-dialog .ui-widget-content .ui-dialog-buttonset button:hover, .ui-dialog.information .ui-widget-content .ui-dialog-buttonset button:hover { background-color: #0050f2 !important; color: #fff !important; } .ui-dialog.no-yes-dialog .ui-widget-content.ui-dialog-content, .ui-dialog.info-dialog .ui-widget-content.ui-dialog-content, .ui-dialog.information .ui-widget-content.ui-dialog-content { margin-bottom: 30px; } .ui-dialog.no-yes-dialog .ui-widget-content.ui-dialog-content:before, .ui-dialog.info-dialog .ui-widget-content.ui-dialog-content:before, .ui-dialog.information .ui-widget-content.ui-dialog-content:before { position: relative; top: -4px; left: -5px; display: block; /*padding-bottom: 30px; background-size: 100% calc(100% - 30px)*/ width: 20px; height: 20px; margin: auto; content: ""; background-repeat: no-repeat; float: left; } .ui-dialog.no-yes-dialog .ui-dialog-buttonpane, .ui-dialog.info-dialog .ui-dialog-buttonpane, .ui-dialog.information .ui-dialog-buttonpane { padding: 0px 32px 32px; } .ui-dialog.no-yes-dialog .ui-dialog-buttonpane:before, .ui-dialog.info-dialog .ui-dialog-buttonpane:before, .ui-dialog.information .ui-dialog-buttonpane:before { display: none; } .ui-dialog.no-yes-dialog .ui-dialog-buttonpane .ui-dialog-buttonset, .ui-dialog.info-dialog .ui-dialog-buttonpane .ui-dialog-buttonset, .ui-dialog.information .ui-dialog-buttonpane .ui-dialog-buttonset { padding-top: 0px !important; } .ui-dialog.no-yes-dialog { padding: 10px 30px 15px 30px; width: 400px !important; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-titlebar { display: none; border: none; background: transparent; color: #494f5a; text-align: center; font-weight: normal; font-size: 20px; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-titlebar .ui-dialog-title { float: none; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-titlebar button { display: none; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-buttonset button { width: 48%; margin: 1%; text-align: left; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-buttonset button:nth-child(1) { background-color: #fff !important; color: #266eff !important; background-image: url(images/icons/ic_strelica_blue.png) !important; background-repeat: no-repeat; background-size: 12px; background-position: calc(100% - 15px) center; } .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-buttonset button:nth-child(1):hover { background-color: #e6e6e6 !important; } .ui-dialog.no-yes-dialog .ui-dialog-content { margin-bottom: 0 !important; font-size: 16px; color: #000 !important; line-height: 24px; } .ui-dialog.no-yes-dialog .ui-dialog-content:before { height: 0; display: inline !important; } .ui-dialog.info-dialog .ui-widget-content, .ui-dialog.information .ui-widget-content { font-size: 15px; color: #000F28 !important; line-height: 24px; } .ui-dialog.info-dialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.information .ui-widget-content .ui-dialog-buttonset button { width: 100%; } .ui-dialog.error-dialog, .ui-dialog.success-dialog { font-size: 16px !important; color: #000 !important; padding-bottom: 20px; z-index: 1002 !important; max-width: 500px; } .ui-dialog.error-dialog .ui-dialog-content:before { background-image: url(images/icons/error-icon.svg) !important; background-size: 100%; width: 50px !important; height: 50px !important; } .ui-dialog.success-dialog .ui-dialog-content:before { background-image: url(images/icons/success-icon.svg) !important; width: 50px !important; height: 50px !important; } .ui-dialog .btn-1.color-2.back-to-first { background-color: #fff; } .ui-dialog .btn-1.color-2.back-to-first:hover { background: #e6e6e6 !important; } .ui-dialog .btn-1, .ui-dialog .input-1, .ui-dialog .select-1, .ui-dialog .label-1 { font-size: 14px; } .ui-dialog:focus { outline: none; } .ui-dialog .input-1:focus::-ms-clear { display: none; } .ui-dialog .productEditNameDialog { padding: 20px; } .ui-dialog .productEditNameDialog .message { margin-bottom: 30px; font-family: "futura", sans-serif; font-size: 15px; } .ui-dialog.side-modal { display: block; position: absolute; background-color: #fff; top: 50px; right: 0; width: 440px; height: 100%; overflow: auto; overflow-x: hidden; z-index: 1001; } .modal-primaoc .modal-title, .modal-primaoc .input-wrap { margin-bottom: 30px; } .side-modal-wrapper { z-index: 1000; display: block; position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .side-modal { display: block; position: absolute; background-color: #fff; top: 0; right: 0; width: 440px; height: 100%; overflow: auto; overflow-x: hidden; } .side-modal .btn-1 { margin-top: 70px; } .side-modal .button-wrap { box-sizing: border-box; } .side-modal .button-wrap .button { box-sizing: border-box; width: calc(50% - 13px); margin-right: 20px; } .side-modal .button-wrap .button:last-child { margin-right: 0; } .side-modal.messagess-filter .btn-1 { margin-top: 0; } .side-modal.messagess-filter .part-modal-inner { padding-bottom: 24px; margin-bottom: 30px; } .side-modal.messagess-filter .part-modal-inner:last-child { margin-bottom: 0; } .side-modal.messagess-filter .part-modal-inner::after { content: ""; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .side-modal.messagess-filter .selector-toggle-indicator { width: 32% !important; } .modal-inner-content { position: relative; padding-top: 50px; font-family: "futura", sans-serif; } .message-hub-dialog .modal-inner-content .button-wrap .button { width: calc(50% - 12px); margin-right: 20px; } .message-hub-dialog .modal-inner-content .button-wrap .button:last-child { margin-right: 0px; } .message-hub-dialog .modal-inner-content .button-wrap.type-2 { left: calc(50%); width: calc(100% - 80px); } .message-hub-dialog .modal-inner-content .button-wrap.type-2 .button { width: 100%; } .message-hub-dialog .modal-inner-content.type-2 { padding: 20px 60px 0px 32px; padding-top: 35px; padding-bottom: 0; } .message-hub-dialog .modal-inner-content.type-2 .modal-title.modal-title-2 { padding-right: 30px !important; line-height: 1.125 !important; margin-bottom: 24px; } .message-hub-dialog .modal-inner-content.type-2 .modal-close-button { top: 40px; } .modal-close-button { position: absolute; width: 30px; height: 30px; top: 50px; right: 40px; background-image: url(images/icons/close.png); background-size: 20px; background-repeat: no-repeat; } .modal-title-1 { font-size: 20px; font-weight: 700; padding-right: 50px; } .modal-title-2 { font-size: 30px; font-weight: 700; padding-right: 40px; line-height: 35px; } .modal-title-2 small { font-size: 16px; color: #7b7b7b; font-weight: normal; } .modal-title-2 span { font-size: 16px; color: #0095c9; text-transform: uppercase; font-weight: 400; } .modal-title-3 { font-size: 16px; font-weight: 700; padding-right: 40px; line-height: 25px; } .modal-title-3 small { font-size: 16px; color: #7b7b7b; font-weight: normal; } .modal-title-3 span { font-size: 16px; color: #0095c9; text-transform: uppercase; font-weight: 400; } .modal-title.type-2 { margin-left: 50px; } .modal-title.icon { padding-left: 40px; background-repeat: no-repeat; background-position: left center; } .popup-content .popup-text { font-size: 16px; color: #000; } .before-print-dialog .ui-dialog-titlebar { display: none; } .before-print-dialog .btnPrint { padding: 15px 30px; } .before-print-dialog.ui-dialog { padding: 20px 20px 20px 40px !important; } .change-name-hint { width: 36px !important; height: 26px !important; top: 50% !important; right: 15px !important; } .ruleForm .btn-1 { margin-top: 0; } .ruleForm .has-button { position: relative; padding-right: 60px; } .ruleForm .has-button .remove-button { cursor: pointer; } .ruleForm .categoryName { padding-right: 20px; text-overflow: ellipsis; white-space: nowrap; width: 90%; overflow: hidden; } .ruleForm .button-3.type-2 { box-sizing: border-box; } .ruleForm .custom-dropdown-container { width: 48.2%; } .buy-hov-modal .col-ls-12:nth-child(odd) { width: calc(50% - 12px); } .buy-hov-modal .col-ls-12:nth-child(even) { width: calc(50% + 8px); } .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled span, .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled label, .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled input { color: #adadad; } .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled .input-wrap-focus { border-color: #c1b3b3 !important; } .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled .input-wrap { pointer-events: none; } .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled i { background-image: url(images/icons/radio-disabled.png); background-size: 22px; } .buy-hov-modal .col-ls-12 .custom-radio-1 .radio.disabled.checked i { background-image: url(images/icons/radio-on-disabled.png); } .buy-hov-modal .col-ls-12.hovTypeContainer { width: 100%; } .buy-hov-modal .col-ls-12.hovTypeContainer .custom-radio-1 .radio { display: inline-block; width: 49%; box-sizing: border-box; overflow: visible; } .buy-hov-modal .col-ls-12.hovTypeContainer:not(.withdrawOrderType) .radio.disabled .input-wrap, .buy-hov-modal .col-ls-12.hovTypeContainer:not(.withdrawOrderType) .radio.iceberg:not(.checked) .input-wrap { display: none; } .buy-hov-modal .col-ls-12.hovTypeContainer.withdrawOrderType .radio.disabled:not(.checked) .input-wrap { display: none; } .buy-hov-modal .hideValidationMessage .validationMessage { display: none; } /*#endregion dialogs*/ /*#region right-dialog details*/ /*.row.custom-grid.type-2.inner-margin-5, .row.custom-grid.type-2.inner-margin-6 { overflow: auto; }*/ .ui-dialog.details-dialog, .ui-dialog.details-dialog .ui-dialog-content { padding: 0; max-height: 100vh !important; } .side-modal { width: 100% !important; } .custom-grid.type-2 .col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; } .custom-grid.type-2 .col:nth-child(even) { padding-left: 30px; } .col-ls-12 { width: 49.5%; } .transaction.type-2 { padding: 0; padding-bottom: 2px; padding-top: 12px; min-height: 49px; } .transaction.type-2:first-child { border-top: none; } .transaction.type-2 span { font-size: 16px; color: #000; vertical-align: middle; } .transaction.type-2 span:nth-child(1) { color: #7b7b7b; line-height: 25px; } .transaction.type-3 { padding: 0; padding-bottom: 2px; padding-top: 12px; min-height: 49px; } .transaction.type-3 span { font-size: 16px; color: #000; vertical-align: middle; } .transaction.type-3 span:nth-child(1) { color: #7b7b7b; line-height: 25px; } .cf:before, .cf:after, .container:before, .container:after, .widget:before, .widget:after, form ol > li:before, form ol > li:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .cf:after, .clear, .container:after, .widget:after, form ol > li:after { clear: both; } .inner-margin-2 { margin-bottom: 20px; } .widget-links.type-2 .link { padding: 20px 0px; } .widget-links.type-2 .icon { right: 0px; } .transaction { position: relative; padding: 10px 25px 10px 70px; border-bottom: 2px solid #efefef; } .transaction .title { font-size: 16px; float: left; margin: 0; min-height: 46px; } .ui-widget-overlay { position: fixed; background-color: rgba(0, 0, 0, 0.5) !important; opacity: 1; visibility: visible; animation: slide-out 0.7s both; width: 100%; height: 100%; inset: 0; } .ui-widget-overlay.active { background-color: rgba(0, 0, 0, 0.5) !important; opacity: 1; visibility: visible; animation: slide-in 0.7s both; z-index: 50; width: 100%; height: 100%; inset: 0; z-index: 50; /* &:after { height: 100%; opacity: 1; animation: slide-out 0.7s both; }*/ } .ui-widget-overlay:after { content: ''; position: fixed; bottom: 0; left: -310px; height: 0; width: calc(100% + 310px); background-color: rgba(0, 0, 0, 0.4); z-index: 12; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; } .ui-widget-overlay .push { height: 78px; } @keyframes slide-in { 0% { transform: translateY(1000px); } 100% { transform: translateY(0); } } @keyframes slide-out { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } .right-dialog { margin-top: 24px; margin-right: 24px; position: fixed !important; right: 0px !important; z-index: 1000 !important; width: auto !important; overflow-y: auto !important; box-sizing: border-box; overflow: hidden !important; border-radius: 12px !important; padding-top: 0; max-width: 500px; margin: auto; animation: slide-inDialog 0.6s both; visibility: visible !important; display: -webkit-box; } .right-dialog.visible { z-index: 1001 !important; justify-content: center; height: 100%; inset: 0; display: -webkit-box; visibility: visible !important; height: max-content !important; width: 500px !important; max-height: max-content; top: 0px !important; animation: slide-outDialog 0.7s both; } @keyframes slide-outDialog { 0% { transform: translateY(-20px); } 100% { transform: translateY(20); } } @keyframes slide-inDialog { 0% { transform: translateY(20px); } 100% { transform: translateY(-20); } } .ui-dialog:not(.right-dialog) { visibility: hidden; opacity: 0; transition: 0.4s all ease; position: fixed; transform: translateY(-70%); } .ui-dialog:not(.right-dialog).visible { visibility: visible; opacity: 1; transform: translateY(-50%); } /*#endregion dialog-transitions*/ /*#region validation*/ .validationMessage { color: #266eff; float: left; position: relative; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; padding: 2px 0 0 24px; font-family: "aeonik-medium"; } .amountGroup .validationMessage { margin-top: 20px; } .validationMessageBorder { border-color: red !important; } /*#endregion validation*/ /*#region tooltip*/ /* Tooltip */ .tooltip-wrapper { position: absolute; width: 22px; height: 16px; top: 18px; right: 20px; padding-right: 6px; } .tooltip-wrapper:hover .tooltip-hover-info { opacity: 1; visibility: visible; transform: translate(0, -50%); } .tooltip-wrapper:hover .tooltip-icon-wrapper { color: #C3CBD0; } .tooltip-wrapper .tooltip-icon-wrapper { position: absolute; width: 24px; height: 24px; top: -5px; left: 0; color: #666696; cursor: pointer; transition: color .3s; } .tooltip-wrapper .tooltip-hover-info { position: absolute; top: 50%; left: calc(100% + 12px); width: 160px; padding: 6px 8px; background-color: #266eff; border-radius: 6px; transform: translate(-10px, -50%); transition: transform .3s, opacity .3s, visibility .3s; opacity: 0; visibility: hidden; color: #fff; } .tooltip-wrapper .tooltip-hover-info::before { position: absolute; content: ''; width: 0; height: 0; top: 50%; left: -8px; transform: translateY(-50%); border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #266eff transparent transparent; } .tooltip-wrapper .tooltip-hover-info::after { position: absolute; content: ''; width: 0; height: 0; top: 50%; left: -6px; transform: translateY(-50%); border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #266eff transparent transparent; } /*#endregion tooltip*/ /*#region widget tabs*/ .widget-tabs { zoom: 1; position: relative; border-bottom: 1px solid #c3c3c3; margin-bottom: 20px; } .widget-tabs.inner-margin-4 { margin-bottom: 40px !important; } .widget-tabs:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .widget-tabs li { float: left; position: relative; padding: 0 7px 8px 7px; margin-right: 15px; box-sizing: border-box; } .widget-tabs li.active:after, .widget-tabs li:hover:after { height: 2px; } .widget-tabs li.active a, .widget-tabs li:hover a { color: #333333; } .widget-tabs li:after { content: ''; width: 100%; height: 0; background: #333333; position: absolute; bottom: -1px; left: 0; -webkit-transition: height 0.25s ease; -moz-transition: height 0.25s ease; -ms-transition: height 0.25s ease; -o-transition: height 0.25s ease; transition: height 0.25s ease; } .widget-tabs li a { font-size: 16px; color: #9b9b9c; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; } .widget-tabs .tab-icon { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; background-repeat: no-repeat; background-position: center; box-sizing: border-box; } .widget-tabs .tab-icon:hover { border-color: #000; } .widget-tabs .tab-icon.icon-chart-1:hover, .widget-tabs .active .tab-icon.icon-chart-1 { background-image: url(images/icons/chart-3.png); } .widget-tabs .tab-icon.icon-reload-1:hover, .widget-tabs .active .tab-icon.icon-reload-1 { background-image: url(images/icons/icon-reload-2.png); } .widget-tabs .button-wrap { position: relative; top: 50%; -webkit-transition: translateY(-50%); -moz-transition: translateY(-50%); -ms-transition: translateY(-50%); -o-transition: translateY(-50%); transition: translateY(-50%); top: calc(50% + 5px); right: 20px; position: absolute; display: inline-block; } .widget-tabs .button-wrap li { padding: 0; margin-left: 5px; } .widget-tabs .button-wrap li:after { display: none; } .widget-tabs li.active .tab-icon { border-color: #000; } .widget-tabs.type-2 li { display: inline-block; float: none; width: auto; padding: 10px 35px; } .widget-tabs.type-2 li a { font-size: 16px; cursor: pointer; } .widget-tabs.type-2 .button-wrap li { padding: 0; } .widget-tabs.has-buttons { padding-top: 10px; } .tab { display: none; } .tab.init-select { display: block; } /*#endregion widget tabs*/ /*#region Message Hub*/ .MessageHubNotificationList.dashboardView .widget-tabs { margin-bottom: 0; cursor: pointer; } .MessageHubNotificationList.dashboardView .widget-tabs li { width: 50%; margin-right: 0; text-align: center; } .emptyTableStyle { min-height: 50px; text-align: center; padding-top: 30px; } /*.read-messages-list div:nth-child(2) { display:none; }*/ .read-messages-list a { color: blue !important; } .read-messages-list b, .read-messages-list strong { font-weight: bold; } .read-messages-list em, .read-messages-list i { font-style: italic; } .s-widget.MessageHubNotificationList { position: relative; } .attach-icon { /*margin-left: 10px; margin-top: 6px; background-image: url(images/icons/ic_attach.svg); background-position: left; background-repeat: no-repeat;*/ border: 0 !important; } .attach-icon .attach-icon-svg { position: relative; top: 4px; left: -10px; width: 20px; height: 20px; fill: #266eff; color: #266eff; } .attach-icon:hover { background-color: transparent !important; border: 0; } .message-hub-dialog { padding: 0 !important; border-left: 0; } .message-hub-dialog .modal-inner-content { padding-top: 0; } .message-hub-dialog .modal-inner-content .part-modal-inner .input-wrap.subject.focusin .input-1.subject { padding-top: 20px !important; } .message-hub-dialog .modal-inner-content .part-modal-inner .input-wrap.subject.focusin .label-1 { top: 7px; font-size: 12px; } .message-hub-dialog .modal-inner-content .part-modal-inner .input-wrap.subject.focusout .label-1 { top: 17px; font-size: 14px; } .message-hub-dialog .ui-dialog-titlebar { display: none; } .message-hub-dialog .input-wrap { position: relative; margin-bottom: 15px; } .message-hub-dialog .input-wrap input { border: 1px solid #d7d8db; border-radius: 30px; width: 380px; color: #000F28; font-family: "aeonik-regular" !important; font-size: 14px !important; } @media only screen and (max-width: 1400px) { .message-hub-dialog .input-wrap input { width: 83%; } } .message-hub-dialog .input-wrap textarea { border: 1px solid #C3CBD0; border-radius: 30px; padding: 40px 23px; font-family: "ibm-regular"; } .message-hub-dialog .input-wrap .file-input-wrap.attachment { position: absolute; right: 0; top: 5px; } .message-hub-dialog .side-modal.ui-dialog-content { max-height: 100vh !important; } .message-hub-dialog .side-modal.ui-dialog-content .read-messages-list .modal-inner-content.type-2 .modal-title { line-height: 1.125; } .message-hub-dialog .side-modal.ui-dialog-content .read-messages-list .modal-inner-content.type-2 .modal-title small { font-size: 12px; font-family: "aeonik-regular"; color: #666696; } .message-controls { position: absolute; width: 100%; padding-left: 16px; display: block !important; top: 109px; } .message-controls.Active { display: block !important; } .message-controls .custom-checkbox-2 { position: relative; cursor: default; width: 20px; height: 20px; top: 50px; left: 2px; z-index: 1; } .message-controls .custom-checkbox-2 .check { top: 10px; left: 0; } .message-controls .msg-button { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; cursor: pointer; display: inline-block; position: absolute; right: 0; top: -25px; display: none; } .message-controls .msg-button:last-child { right: 50px; } .message-controls .msg-button span i { position: absolute; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; } .message-controls .msg-button:hover { background-color: #266eff; color: #fff; } .message-controls .msg-button:hover .filter-icon-svg { color: #fff !important; } .message-controls .msg-button .checkbox { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 15px; } .custom-checkbox-2 { position: relative; cursor: default; width: 20px; height: 20px; left: 16px; top: 8px; } .custom-checkbox-2 .check { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; cursor: pointer; position: absolute; display: inline-block; background-color: #fff; border: 2px solid #666696; border-radius: 4px; width: 20px; height: 20px; box-sizing: border-box; } .custom-checkbox-2 .check svg { opacity: 0; position: relative; top: 8px; left: -2px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; cursor: pointer; position: absolute; display: inline-block; background-color: #fff; border-radius: 4px; width: 20px; height: 20px; box-sizing: border-box; } .custom-checkbox-2 .cc-checkbox { display: none; } .custom-checkbox-2.checked .check { background-image: url(images/icons/check-icon-new.png); background-position: center; background-repeat: no-repeat; background-size: 15px; background-color: #266eff; border-color: #266eff; } .message { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; padding: 10px 70px 10px 115px; border-bottom: 2px solid #efefef; cursor: pointer; } .message .title { font-size: 16px; float: left; margin: 0; color: #000; line-height: 20px; } .message .title span { font-size: 14px; } .message span { color: #7b7b7b; font-size: 14px; } .message .tag { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: center; position: absolute; left: 50px; border: 2px solid #d9d9d9; color: #000; font-weight: normal; font-size: 16px; display: block; width: 35px; height: 35px; line-height: 31px; } .message .archive-button { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; display: inline-block; position: absolute; right: 25px; width: 36px; height: 26px; border: 2px solid #cfd0d2; background-position: 10px 6px; background-repeat: no-repeat; opacity: 0; visibility: hidden; } .message .checkbox { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 10px; } .message:hover { background-color: #fffde5; } .message:hover .archive-button { opacity: 1; visibility: visible; } .message.unread .title { font-weight: 700; color: #0095c9; } .message.unread .title span { font-weight: 400; } .archive-section .message { padding: 10px 70px 10px 65px; } .archive-section .message .tag { left: 0; } .reply-card { padding: 15px 40px; padding-left: 34px; border-bottom: 1px solid #ebeced; border-left: 6px solid #0095c9; font-family: "futura", sans-serif; font-size: 10px; } .reply-card.border-top { border-top: 1px solid #ebeced; } .input-wrap .file-input-wrap { float: right; } .file-input-wrap { background-color: #fff; border-radius: 50%; } .file-input-wrap .text-area-ico { width: 20px; height: 19px; margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: #266eff; color: #266eff; } .file-input-wrap .attachment-button { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: block; width: 40px; height: 40px; background-color: transparent; border-radius: 100%; cursor: pointer; position: relative; } .file-input-wrap .attachment-button:hover { background-color: transparent; } .file-input-wrap .file-input { display: none; } .attachment-card { display: flex; align-items: center; min-height: 50px; position: relative; padding: 8px 55px 8px 24px; border-radius: 25px; background: linear-gradient(#fff 0%, #F3F6F8 100%); border: 1px solid #C3CBD0; } .attachment-card:before { display: none; } .attachment-card p { font-family: "ibm-light"; font-size: 15px; color: #000; border: 0; padding-left: 24px; } .attachment-card span { font-size: 15px; color: #000F28; text-transform: unset; font-family: "aeonik-regular"; } .attachment-card .close { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; cursor: pointer; position: absolute; right: 20px; width: 20px; height: 20px; background-image: url(images/icons/close.png); background-position: center; background-repeat: no-repeat; background-size: 11px; } .attachment-card:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; content: ""; width: 50px; height: 50px; left: 10px; background-image: url(images/icons/icon-attachment-2.png); background-position: center; background-size: 26px; background-repeat: no-repeat; } .widget-messages .cnt { padding: 0; padding-top: 10px; } .widget-messages .empty-section.type-3 { padding-bottom: 0; } .widget-messages widget-inner { position: relative; padding-bottom: 48px; } .widget-messages .widget-btn-wrap { width: 100%; position: relative; bottom: 0; left: 0; border-top: 1px solid #efefef; } .widget-messages .widget-btn-wrap.stripe:before { position: absolute; } .widget-messages .btn-1 { width: 50%; float: left; } .widget-messages .messages-list { max-height: 207px; overflow: auto; } .widget-messages .messages-list li { position: relative; border-bottom: 1px solid #ebeced; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .widget-messages .messages-list li:hover { background: #fffde5; } .widget-messages .messages-list .message-row { display: block; padding: 13px 70px 13px 60px; } .widget-messages .msg-icon { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; background-image: url(images/icons/message-icon-2.png); background-size: 12px; position: absolute; top: 50%; left: 20px; margin-top: -10px; } .widget-messages .msg-icon.read { background-image: url(images/icons/message-icon-7.png); background-size: 12px; } .widget-messages .msg-from { font-size: 14px; color: #7b7b7b; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; } .widget-messages .msg-title { font-size: 16px; color: #333333; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; } .widget-messages .time { font-size: 14px; color: #a2a2a2; position: absolute; top: 50%; right: 15px; margin-top: -9px; margin-bottom: 0; } .mCSB_inside > .mCSB_container { margin-right: 0px !important; } .widget-btn-wrap.stripe:before { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; height: 100%; width: 1px; background-color: #efefef; visibility: visible; } /*#end region message Hub*/ /*#region Payments*/ .signTokenValue { float: right; background: #d1d1d1; padding: 0 5px; } .PaymentOrderV3 { margin: auto; } .PaymentOrderV3 hr { position: relative; top: 5px; } .PaymentOverviewV2 .s-widget-body { overflow: visible; } .PaymentOverviewV2 .clientGrid td:nth-child(2) { width: 50px; } .countdown-widget { zoom: 1; position: relative; background-color: #0095c9; } .countdown-widget:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .countdown-widget .container { position: relative; float: left; width: 50%; /*min-height: 65px;*/ padding: 10px 0; } .countdown-widget:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: calc(50% + 20px); content: ""; position: absolute; width: 1px; height: 40px; background-color: #8addf4; } .value-title { font-size: 18px; line-height: 30px; color: #82d9f1; text-align: center; margin: 0; } .value-title span { font-size: 22px; color: #fff; } .value-title span.timer { color: #ffec00; } .value-title span.timer.inited { animation: countdown 1s infinite reverse; } .value-title .icon { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -ms-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; margin-right: 10px; } @keyframes countdown { from { opacity: .2; } to { opacity: 1; } } .widget-payment { max-width: 1170px; margin-left: auto; margin-right: auto; } .widget-payment .page-container { padding: 10px 50px 10px 0px; max-width: 825px; margin: 0 auto; } .widget-payment .custom-form { padding-top: 50px; padding-bottom: 50px; } .widget-payment .widget-links { margin-bottom: 50px; } .widget-payment .inner { padding: 0 70px; } .widget-payment .inner.type-2 { padding: 0 50px; } .widget-links .link { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; display: block; font-size: 18px; color: #000; border-bottom: 1px solid #efefef; padding: 20px 50px; } .widget-links .link:hover { background-color: #efefef; cursor: pointer; } .widget-links .icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 20px; height: 20px; right: 50px; background-repeat: no-repeat; background-position: 100% center; } .payment-slider { position: relative; padding: 35px 0; } .payment-slider.first-slider-sell, .payment-slider.debit { z-index: 12; } .payment-slider .slick-list { overflow: visible; } .payment-slider .icon-accounts-4 { display: inline-block; float: left; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; } .payment-slider .slider-container { position: relative; z-index: 10; padding: 0 80px; } .payment-slider .slide { display: flex; } .payment-slider .slide-left { float: left; width: 50%; text-align: left; } .payment-slider .slide-right { text-align: right; float: right; width: 50%; } .payment-slider .slide-control { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; position: absolute; display: inline-block; width: 40px; height: 100%; background-color: #fffcd9; background-repeat: no-repeat; background-position: center; } .payment-slider .slide-control:hover { border-color: #bfbfbf; } .payment-slider .slide-prev { cursor: pointer; } .payment-slider .slide-next { right: 0px; cursor: pointer; } .payment-slider .slick-dots { zoom: 1; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: -35px; } .payment-slider .slick-dots:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .payment-slider .slick-dots li { display: inline-block; } .payment-slider .slick-dots li.slick-active button { background-color: #000; } .payment-slider .slick-dots button { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border-radius: 50%; color: transparent; background-color: #cacaca; font-size: 2px; width: 6px; height: 6px; padding: 0; margin: 0 5px; border: none; } .payment-slider .slick-slide { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; -webkit-transform: translateY(-40%); -moz-transform: translateY(-40%); -ms-transform: translateY(-40%); -o-transform: translateY(-40%); transform: translateY(-40%); opacity: 0 !important; } .payment-slider .slick-active { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; transition-delay: .5s; opacity: 1 !important; } .payment-slider .label { color: #7b7b7b; font-size: 16px; margin-bottom: 10px; } .payment-slider .title { position: relative; color: #000; font-size: 24px; font-weight: bold; margin-bottom: 16px; line-height: 30px; } .payment-slider .title small { font-size: 80%; } .payment-slider .title .icon { position: absolute; left: 0; width: 40px; height: 100%; background-repeat: no-repeat; background-position: 5px 2px; } .payment-slider .acc-number { color: #000; font-size: 16px; margin-right: 49px; } .payment-slider .type-2 .slider-container { padding: 0 100px; } .FXTrading .payment-slider .slide-right .title { padding-left: 0px; } .PaymentOrderV3 .payment-slider .title.tag-title, .FXTrading .payment-slider .title.tag-title { max-width: 350px; min-width: 290px; white-space: nowrap; float: left; } title.tag-title { max-width: 350px; overflow: hidden; white-space: nowrap; } .slick-arrow.slick-hidden { display: none !important; } .progress-bar-wrap { width: 100%; } .progress-bar-value { display: none; } .progress-display { position: relative; width: 100%; background-color: #e6e6e6; height: 2px; } .progress-display .progress { position: absolute; top: 0; left: 0; height: 100%; background-color: #0095c9; width: 0; transition: all 0.5s ease; } .progress-display .progress.color-2 { background-color: #9ccc66; } .progress-display .progress.inited { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .custom-form .group { position: relative; margin-bottom: 40px; } .custom-form .group.margin-2 { position: relative; margin-bottom: 20px; } .custom-form .group.margin-3 { position: relative; margin-bottom: 60px; } .custom-form .group.margin-4 { position: relative; margin-bottom: 30px; } .custom-form .group.type-2 { position: relative; margin-bottom: 20px; } .custom-form .group.empty { min-height: 60px; } .custom-form .group .info-icon { right: -65px; } .custom-form .group .info-icon.type-2 { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; top: 10px; right: -65px; } .custom-form.border-top { border-top: 2px solid #efefef; } .custom-form .checkbox-group { display: flex; align-items: center; } .custom-form .checkbox-group .info-icon { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; position: relative; top: auto; right: auto; margin: 0 30px; } .custom-form .checkbox-group .info-icon.col { position: absolute; top: 0px; right: 5px; } .custom-form .checkbox-group .info-icon.col-2 { margin-left: 8px; margin-bottom: -8px; margin-right: 34px; left: -4px; } .custom-form .checkbox-group .checkbox-label-2 { margin-bottom: 0; } .left-col { width: 49%; float: left; } .right-col { width: 49%; float: left; padding-left: 20px; } .group .info-icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-image: url(images/icons/info-icon-1.png); background-size: 2px; position: absolute; right: 5px; box-sizing: border-box; } .group .info-icon span { display: inline-block; width: 22px; height: 22px; cursor: pointer; background-color: #d0d0d1; background-size: 6px; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } .group .info-icon span:hover { background-color: #fff200; } .group .info-icon p { width: 250px; padding: 15px; background-color: rgba(73, 80, 90, 0.7); position: absolute; right: 15px; bottom: 29px; font-size: 14px; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .group .info-icon p:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 0px 0 13px; border-color: #49505a transparent transparent transparent; position: absolute; right: 0px; bottom: -12px; opacity: 0.7; } .group .info-icon:hover p { opacity: 1; visibility: visible; } .info-wrap i { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; position: relative; } .info-wrap .edit-icon:hover { border-color: #494f5a; background-image: url(images/icons/edit-4.png); } .info-wrap .icon-eye-2:hover { border-color: #494f5a; background-image: url(images/icons/icon-eye_d.png); } .group-inner .info-wrap { position: absolute; top: 7px; right: -50px; } .group-inner .info-wrap span { width: 250px; padding: 15px; } .group-inner .info-wrap.amount-info { top: 13px; right: -150px; } .payment-main { margin-bottom: 30px; } .payment-main .tag { float: left; width: 45px; height: 40px; background: #dfdfdf; border-left-width: 5px; border-left-style: solid; font-size: 18px; font-weight: 700; color: #fff; text-align: center; line-height: 40px; margin-right: 11px; } .input-wrap.wrap-icon { float: right; width: calc(100% - 56px); } .tag-2 { display: inline-block; width: 44px; height: 40px; border-left: 4px solid #fff; background-position: center center; background-repeat: no-repeat; font-size: 14px; font-weight: 700; line-height: 40px; color: #fff; text-transform: uppercase; text-align: center; } .tag-2.color-1 { background-color: #c5e1a5; border-color: #9ccc66; } .tag-2.color-2 { background-color: #ff9e19; border-color: #dc7f00; } .tag-2.color-3 { background-color: #ce93d8; border-color: #c364d3; } .tag-2.color-4 { background-color: #90caf9; border-color: #5ab0f6; } .tag-2.color-5 { background-color: #ffe082; border-color: #edbc27; } .tag-2.color-6 { background-color: #d1d1d1; border-color: #7b7b7b; } .tag-2.color-7 { background-color: #ebeced; border-color: #fe000c; } .beneficiary-wrap { zoom: 1; margin-bottom: 5px; } .beneficiary-wrap:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .select-tag { float: left; display: none; } .select-tag.active { display: inline-block; } .beneficiary-slat { margin-bottom: 50px; } .beneficiary-content, .details-content { display: none; } .payment-options { margin-bottom: 20px; } .payment-options .trigger { position: relative; text-align: center; } .payment-options .trigger:before { content: ''; width: 100%; height: 1px; background: #d1d1d1; position: absolute; top: 50%; left: 0; text-align: center; } .payment-options .trigger a { display: inline-block; background: #fff; font-size: 14px; color: #000; text-transform: uppercase; padding: 0 40px 0 22px; white-space: nowrap; position: relative; } .payment-options .trigger a:after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top-color: #000; top: 7px; right: 17px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: 50% 20%; } .payment-options .trigger .hide-text { display: none; } .payment-options .trigger.active .show-text { display: none; } .payment-options .trigger.active .hide-text { display: inline-block; } .payment-options .trigger.active a:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .payment-options .hidden-content { display: block; text-align: center; } .payment-options .hidden-content ul { padding: 30px 0; } .payment-options .hidden-content li { display: inline-block; text-align: center; max-width: 160px; width: 100%; margin: 0 7px 10px 5px; } .payment-options .hidden-content li a { display: block; font-size: 14px; border: 1px solid #d1d1d1; color: #000; text-transform: uppercase; line-height: 1.5; padding: 20px 30px 20px 30px; background-color: transparent; } .payment-options .hidden-content li a span { display: block; } .payment-options .hidden-content li .icon { display: inline-block; height: 64px; width: 64px; background: red; background-size: 64px 64px; } .payment-options .hidden-content li .icon-raiff { background: url(images/icons/raiff.png) 50% 50% no-repeat; background-size: 46px; } .payment-options .hidden-content li .icon-transfer { background: url(images/icons/transfer.png) 50% 50% no-repeat; background-size: 46px; } .payment-options .hidden-content li .icon-globle { background: url(images/icons/globe.png) 50% 50% no-repeat; background-size: 46px; } .payment-options .hidden-content li a:hover, .payment-options .hidden-content li.active a { background-color: #0095c9; color: #fff; } .payment-options .hidden-content li.active .icon-raiff, .payment-options .hidden-content li a:hover .icon-raiff { background-image: url(images/icons/raiff-2.png); } .payment-options .hidden-content li.active .icon-transfer, .payment-options .hidden-content li a:hover .icon-transfer { background-image: url(images/icons/transfer-2.png); } .payment-options .hidden-content li.active .icon-globle, .payment-options .hidden-content li a:hover .icon-globle { background-image: url(images/icons/globe-2.png); } .payment-bottom .date-group { width: 180px; margin-right: 50px; } .payment-bottom .group-two { zoom: 1; padding-top: 10px; } .payment-bottom .group-two:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .payment-bottom .group-two .group-inner { float: left; width: auto; } .payment-account { border-bottom: 1px solid #ebeced; zoom: 1; padding-bottom: 4px; margin-bottom: 60px; } .payment-account:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .payment-account i { cursor: pointer; } .payment-account .tag-2 { float: left; margin-top: 2px; } .payment-account .inner { float: left; width: calc(100% - 56px); } .payment-account .col-left { float: left; padding-left: 10px; } .payment-account .col-right { float: right; padding-top: 6px; } .payment-account .acc-name { font-size: 16px; color: #7b7b7b; margin-bottom: 0; } .payment-account .acc-nr { font-size: 16px; line-height: 25px; color: #000; margin-bottom: 0; } .payment-account .col-right p { font-size: 24px; color: #000; margin-bottom: 0; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .payment-account .col-right p span { font-size: 16px; } .payment-account .col-right .active { opacity: 1; } .PaymentOrderV3 .custom-grid.type-2 { margin-left: -30px; } .PaymentOrderV3 .custom-grid.type-2 .col { padding-left: 30px; float: left; } .PaymentOrderV3 .custom-form .checkbox-group { display: flex; align-items: center; } .PaymentOrderV3 .check-wrap-1 { position: relative; } .PaymentOrderV3 .check-wrap-1.col { width: 47%; float: left; padding-right: 15px; } .value-changer { position: relative; padding-right: 25px; cursor: pointer; } .value-changer:before { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; top: calc(50% + 0px); right: 7px; } .value-changer .value-menu { z-index: 50; position: absolute; top: 100%; right: 10px; -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); padding: 2px 10px; background-color: #fff; max-height: 105px; overflow: auto; box-sizing: border-box; } .value-changer .value-menu li { padding: 2px 5px; font-size: 14px; } .value-changer .value-menu li:hover { color: #ffe082; } .widget-info-title { font-size: 20px; text-align: center; padding: 10px 20px; padding-top: 130px; margin-bottom: 30px; background-position: center 30px; background-repeat: no-repeat; } .payment-amount-currency { position: absolute; right: 35px; top: 20px; font-weight: 700; } .PaymentLimits .uk-grid { display: block; } .PaymentLimits .uk-grid > * { float: unset; } .PaymentLimits .payment-limits { padding: 70px 100px 50px 100px; box-sizing: border-box; } .PaymentLimits .payment-limits .payment-limit-container { display: flex; } .PaymentLimits .payment-limits .uk-width-3-6, .PaymentLimits .payment-limits .uk-width-2-6, .PaymentLimits .payment-limits .uk-width-1-6 { display: inline-block; padding-left: 25px; box-sizing: border-box; } .PaymentLimits .payment-limits .uk-width-3-6 { width: 50%; padding-left: 0; } .PaymentLimits .payment-limits .uk-width-2-6 { width: 30%; } .PaymentLimits .payment-limits .uk-width-1-6 { width: 18%; } .PaymentLimits .payment-limits .custom-form .group { margin-bottom: 20px; } .PaymentLimits .payment-limits .drag-bar { min-height: 60px; background-repeat: no-repeat; background-position: 0 center; background-size: 22px; } .PaymentLimits .payment-limits .drag-bar .plSlider { width: calc(100% - 70px); display: inline-block; position: relative; top: 20px; left: 60px; } .PaymentLimits .payment-limits input[disabled] { color: gray; } .PaymentLimits .payment-limits .limitInputError { border-color: red; } .PaymentLimits .payment-limits .limitInputError span { color: red; } .PaymentLimits .payment-limits .select-1 { padding: 0; } .PaymentOrderV3 .s-widget-body { overflow-x: hidden; } .PaymentOrderV3.s-widget { max-width: 1170px; margin-left: auto; margin-right: auto; } .PaymentOrderV3 .col-fix-size-1 { width: 100%; padding-top: 15px; margin-bottom: 18px; } .PaymentOrderV3 .col-fix-size-2 { padding-top: 15px; margin-bottom: 18px; } .PaymentOrderV3 .col-fix-size-3 { right: -15px; top: 14px; } .PaymentOrderV3 .col-fix-size-4 { float: right !important; padding-left: 0px !important; } .PaymentOrderV3 .col-fix-size-5 { right: -45px; } .PaymentOrderV3 .col-fix-size-6 { display: inline-block; padding-top: 12px; margin-bottom: 18px; margin-right: -3px; } .PaymentOrderV3 .col-fix-size-7 { bottom: -8px; } .PaymentOrderV3 .info-icon.col-fix-size-8 { right: 20px; margin-right: 3px; } .PaymentOrderV3 .uk-width-1-6 { width: 25%; } .PaymentOrderV3 .uk-width-5-6 { width: 75%; padding-left: 15px; } .PaymentTransferV2 { /* .s-widget-body { overflow-x: hidden; }*/ } .PaymentTransferV2 .noAccounts { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } .MonthlyBills.dashboardMonthlyBills .clientGrid td { cursor: default !important; height: 67px; } .MonthlyBills.dashboardMonthlyBills tr:hover button { opacity: 1; } .MonthlyBills .s-widget-body { position: relative; overflow: visible; } .MonthlyBills .s-widget-body .empty-section.border { border-top: solid 2px #efefef; } .MonthlyBills .wh-button-top-right { transform: translateY(-100%); } .MonthlyBills .monthly-bills-list li { padding: 40px 95px 10px 95px; border-bottom: 2px solid #efefef; } .MonthlyBills.hiddenHeader { background-image: none; max-width: 980px; margin: auto; margin-bottom: 50px; } .MonthlyBills.hiddenHeader .s-widget-header { display: none; } .MonthlyBills .empty-section .btn-1 { min-width: 250px; } .MonthlyBills .empty-section .text { line-height: 24px; } .MonthlyBills .widget-tabs li { margin-right: 0; padding: 10px 45px; } .MonthlyBills .clientGrid thead { display: none; } .MonthlyBills .clientGrid .gridButton { color: #0095c9; text-transform: uppercase; } .MonthlyBills .clientGrid .title { text-align: left; } .MonthlyBills .tab0 .clientGrid td:nth-child(4) { width: 100px; } .MonthlyBills .tab1 .clientGrid td:nth-child(3), .MonthlyBills .tab1 .clientGrid td:nth-child(4) { width: 100px; } .MonthlyBills .payment-slider .icon-accounts-4 { display: block; height: 50px; margin-right: 20px; } .MonthlyBillsOverview .clientGrid .title { text-align: left; } .MonthlyBillsOverview .clientGrid tbody td:nth-child(4) { display: none; } .monthlyBillsHelp::before { height: 0 !important; padding-bottom: 0 !important; } .monthlyBillDialog .largeTagLetter { font-size: 50px; position: absolute; top: 15px; z-index: -1; left: 50%; transform: translateX(-50%); } .monthlyBillDialog .subtitle { font-size: 16px; margin-bottom: 30px; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col { border-bottom: 1px solid #ebeced; cursor: pointer; padding-top: 10px; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col:hover { background-color: #e5f4f9; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col:nth-child(even) { width: 46%; float: right; padding-left: 0; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col .transaction .tag { margin-left: 0; background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col .transaction span:nth-child(2) { color: #7b7b7b; line-height: 25px; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col .transaction .icon-arrow-right-1 { width: 20px; height: 20px; float: right; background-repeat: no-repeat; position: relative; top: 15px; } .monthlyBillDialog .account-picture-wrap { text-align: center; margin-top: 60px; margin-bottom: 80px; } .monthlyBillDialog .account-picture-wrap .image-wrap { position: relative; width: 90px; height: 90px; margin-left: auto; margin-right: auto; border: 2px solid #d9d9d9; border-radius: 50%; background-size: 50px 50px; background-repeat: no-repeat; background-position: center center; } .monthlyBillDialog .account-picture-wrap .title { font-size: 24px; } .monthlyBillDialog .account-picture-wrap .address { font-size: 16px; color: #7b7b7b; } .monthlyBillDialog .two-buttons-wrap .btn-1 { width: calc(50% - 12px); } .monthlyBillDialog .two-buttons-wrap .btn-1:first-child { margin-right: 20px; } .monthlyBillDialog .contractNumberImage { height: 230px; background-repeat: no-repeat; background-size: cover; } /*#endregion Payments*/ .FXTrading .noAccounts { text-align: center; height: 102px; line-height: 102px; } /*#region P2P*/ .P2PPaymentTransfer { max-width: 980px; margin-left: auto; margin-right: auto; } .P2PPaymentTransfer .s-widget-body { overflow-x: hidden; min-height: 780px; } .P2PPaymentTransfer .select-1.type-2 { font-size: 18px; font-weight: 700; } .P2PPaymentTransfer .select-1.type-2 .dk-option { font-weight: normal; font-size: 16px; } .P2PPaymentTransfer .p2pConfirmation { padding: 50px; } .P2PPaymentTransfer .p2pConfirmation img { max-width: 100%; } .P2PPaymentTransfer .p2pConfirmation p a { color: #0095c9; text-decoration: underline; cursor: pointer; } .P2PPaymentTransfer .validationMessage { margin-top: 18px; } /*#endregion P2P*/ /*#region PaymentOverview*/ /*.PaymentOverviewV2,*/ .FXTradingOverview .clientGrid thead, .P2PPaymentOverview .clientGrid thead, .MonthlyBillsOverview .clientGrid thead { display: none; } .FXTradingOverview .s-widget-body[style="position: relative;"] .filter-dialog-button, .P2PPaymentOverview .s-widget-body[style="position: relative;"] .filter-dialog-button, .MonthlyBillsOverview .s-widget-body[style="position: relative;"] .filter-dialog-button { visibility: hidden; } .P2PPaymentOverview .status_1 { color: #0095c9; } .P2PPaymentOverview .status_2, .P2PPaymentOverview .status_3 { color: gray; } .P2PPaymentOverview .status_4 { color: #4fc44f; } .PaymentOverviewV2 .status_20, .PaymentOverviewV2 .status_25 { color: #4fc44f; } .PaymentOverviewV2 .status_22, .PaymentOverviewV2 .status_31, .PaymentOverviewV2 .status_32 { color: red; } .PaymentOverviewV2 .status_30, .PaymentOverviewV2 .status_24 { color: gray; } .PaymentOverviewV2 .status_2, .PaymentOverviewV2 .status_6, .PaymentOverviewV2 .status_9, .PaymentOverviewV2 .status_10, .PaymentOverviewV2 .status_36, .PaymentOverviewV2 .status_44, .PaymentOverviewV2 .status_45, .PaymentOverviewV2 .status_51, .PaymentOverviewV2 .status_56, .PaymentOverviewV2 .status_18 { color: #0095c9; } /*#endregion PaymentOverview*/ /*#region Inflows*/ .InflowsOverview .s-widget-body { min-height: 117px; } .InflowsOverview .gridFilterArea { display: none; } .InflowsOverview .widget-tabs li { padding: 15px 40px; cursor: pointer; box-sizing: border-box; margin-right: 0; } .InflowsOverview .clientGrid .value { display: inline-block; } .InflowsOverview .clientGrid a { margin-right: 20px; } .InflowsOverview .clientGrid thead { display: none; } /*#endregion Inflows*/ /*#region Accounts*/ .AccountTurnoverV3 { position: relative; background-position: 25px 18px; visibility: hidden; } .AccountTurnoverV3 #divPrint, .AccountTurnoverV3 .tableHeader, .AccountTurnoverV3 .clientGrid thead, .AccountTurnoverV3 #AccountTurnoverContent .currency { display: none; } .AccountTurnoverV3 .widget-options.print { margin-right: 55px; margin-top: 3px; } .AccountTurnoverV3 .s-widget-body[style="position: relative;"] .widget-options.print { visibility: hidden; } .select-3-detail { position: absolute; right: 0; bottom: 0; min-width: 90px; margin-bottom: 0; } .select-3-detail select { width: 100%; padding: 0px 35px; padding-left: 0; background-color: #fff; font-family: "futura", sans-serif; font-size: 16px; display: block; line-height: 24px; float: right; direction: rtl; outline: none; -webkit-appearance: none; -moz-appearance: none; border: none; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .select-3-detail:before { content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; top: 8px; right: 15px; } .filter-dialog .ui-dialog-content.ui-widget-content { height: calc(100% - 30px) !important; } .detail-icon-arrow-right-1 { background: url(images/icons/arrow-blue-r.png) no-repeat, transparent; background-size: 6px; position: static; display: inline-block; width: 20px; height: 20px; background-position: center center; cursor: pointer; margin-left: 10px; } .account-detail-link { cursor: pointer; } .account-detail-link span { color: #0095c9 !important; } .account-detail-link:hover { opacity: 0.7; } /*AccountLastChanges*/ .AccountLastChanges { background-position: 25px 18px; position: relative; } .AccountLastChanges .s-widget-body { position: relative; overflow: visible; min-height: 369px; } .AccountLastChanges .s-widget-body .empty-section { padding: 90px 0; } .AccountLastChanges .s-widget-body .topBorder { border-top: 1px solid #ebeced !important; } .AccountLastChanges .s-widget-body-error-summary { position: absolute; width: 100%; } #gvAccountLastChanges { min-height: 321px; } #gvAccountLastChanges thead { display: none; } #gvAccountLastChanges .clientGrid td:nth-child(2) { width: 70px; } #gvAccountLastChanges .clientGrid tbody tr:first-child { border-top: none; } .last-transactions-section { max-height: 422px; } .transaction { position: relative; padding: 10px 25px 10px 20px; } #gvAccountLastChanges .tag { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; /*top: 0;*/ -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: center; position: absolute; left: 30px; border: 2px solid #d9d9d9; color: #000; font-weight: normal; font-size: 16px; display: block; width: 35px; height: 35px; line-height: 35px; padding-top: 0; margin-top: 0px; box-sizing: border-box; background-repeat: no-repeat; background-position: 50%; background-size: 100%; } #gvAccountLastChanges .tag.type-2 { border-color: #ed1c24; background-color: #ed1c24; } #gvAccountLastChanges .tag { -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); position: absolute; /*top: 50%;*/ left: 20px; display: inline-block; max-width: 100%; max-height: 100%; } /*End AccountLastChanges*/ .ActiveNoticesOverviewV4 .s-widget-body { min-height: 420px; overflow: visible; } /*#endregion Accounts*/ /*#region Cards*/ .CardTurnoverAndSpendings { position: relative; background-position: 25px 18px; visibility: hidden; } .CardTurnoverAndSpendings .clientGrid thead, .CardTurnoverAndSpendings .tableTitle.currency, .CardTurnoverAndSpendings .tableFilter, .CardTurnoverAndSpendings .tableHeader { display: none; } .CardTurnoverAndSpendings .clientGrid tbody tr:first-child { border-top: none; } .card-detail.custom-grid.type-2 .col:nth-child(odd) { padding-left: 30px; } .card-detail.custom-grid.type-2 .col:nth-child(even) { padding-left: 0px; } .card-icon { width: 40px !important; } .CardStatementsCalendar .s-widget-body-header { border-bottom: none; } .CardStatementsCalendar thead tr { height: 37px; } .card-payment.PaymentOrderV3 { visibility: hidden; } .card-payment .s-widget-header { background-repeat: no-repeat; } .card-payment .s-widget-body-header { display: none !important; } .card-payment-step2 { margin-left: 15px; margin-right: 15px; } .btn-1.card-commision { width: 49%; } .progress-bar-wrap.progress-bar-card { display: block; } .payment-option-from { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; font: inherit; vertical-align: baseline; width: 100%; height: 100%; } .loan-payment .select-3, .card-payment-form .select-3 { width: auto; font-weight: 700; font-family: "futura", sans-serif; font-size: 16px; display: block; padding: 14px 35px; padding-left: 0px; } .loan-payment .select-3:before, .card-payment-form .select-3:before { content: none; } .card-payment-form { padding-top: 70px; } .card-payment-form .widget-button { margin-top: 100px; border-top: 2px solid #efefef; } .card-payment-form .payment-option-from::after { content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; } .card-detail img { max-width: 300px; width: 100%; } /*#endregion Cards*/ /*#region Loans*/ .widget-loan-repayment { min-height: 660px; } .LoanRepayments { visibility: visible; background-position: 25px 18px; } .loan-payment .title.tag-title { padding-left: 40px !important; } .loan-payment .icon-accounts-4 { position: absolute; left: 0; width: 40px; height: 100%; background-repeat: no-repeat; background-position: 5px 2px; } .loan-slider-container { position: relative; z-index: 10; padding: 0 160px; } /*#endregion Loans*/ /*#region NoticesSlider*/ .NoticesSlider { position: fixed; left: 194px; top: 52px; z-index: 1; border-radius: 12px !important; background-color: transparent; width: 50%; } .NoticesSlider .s-widget-body { padding: 0; } .NoticesSlider .info-icon-wrapper { position: relative; width: 50px; /*padding-top: 8%;*/ } .NoticesSlider .info-icon-wrapper::after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; right: 0; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .NoticesSlider .info-bell-icon { width: 15px; height: 16px; fill: #266eff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .NoticesSlider .slider-wrapper { display: flex !important; flex-wrap: wrap; align-items: center; width: 100%; padding: 12px 24px 12px 0; background-color: rgba(25, 65, 55, 0.7); border-radius: 12px; transform: translateY(-200%); transition: transform ease-in-out .5s, opacity ease-in-out .3s, visibility ease-in-out .3s; } .NoticesSlider .slider-wrapper.active { transform: translateY(0); } .NoticesSlider .slider-wrapper .slider-wrapper_middle { width: 70%; margin-right: auto !important; margin-left: 16px !important; } .NoticesSlider .slider-wrapper .slider-wrapper_middle h2 { font-weight: bolder; } .NoticesSlider .slider-wrapper .slider-wrapper_middle .inner p { text-align: left; margin-right: 5px; } .NoticesSlider .slider-wrapper .navigation-wrap { display: flex; /*.nav-prev, .nav-next { margin-right: 8px; }*/ } .NoticesSlider .slider-wrapper .navigation-wrap #nav-prev { margin-right: 8px; } .NoticesSlider .slider-wrapper .navigation-wrap #nav-next { margin-right: 17px; } .NoticesSlider .slider-wrapper .navigation-wrap .nav-icons { position: relative; width: 40px; height: 40px; border: 1px solid #266eff; border-radius: 50%; cursor: pointer; } .NoticesSlider .slider-wrapper .navigation-wrap .nav-icons svg { position: absolute; width: 12px; height: 12px; fill: #266eff; stroke: none; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .NoticesSlider .slider-wrapper .close-info-btn { position: relative; font-size: 15px; font-family: "ibm-semibold"; color: #266eff; text-transform: uppercase; letter-spacing: -.02em; line-height: 2.766; padding-left: 17px; } .NoticesSlider .slider-wrapper .close-info-btn:after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; left: 0; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .NoticesSliderV2 { position: fixed; left: 194px; top: 52px; z-index: 1; border-radius: 12px !important; width: 50%; } .NoticesSliderV2 .s-widget-body { padding: 0; } .NoticesSliderV2 .info-icon-wrapper { position: absolute; height: calc(100% - 20px); width: 50px; } .NoticesSliderV2 .info-icon-wrapper::after { content: ""; position: absolute; width: 2px; height: 100%; top: 0; right: 0; border-right: 1px solid #7da8ff; } .NoticesSliderV2 .info-bell-icon { width: 24px; height: 24px; fill: #fff; color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .NoticesSliderV2 .slider-wrapper { display: flex !important; flex-wrap: wrap; align-items: center; width: 100%; padding: 10px 24px 10px 0; background-color: #1b4dca; border-radius: 12px; transform: translateY(-200%); transition: transform ease-in-out .5s, opacity ease-in-out .3s, visibility ease-in-out .3s; } .NoticesSliderV2 .slider-wrapper.active { transform: translateY(0); } .NoticesSliderV2 .slider-wrapper .slider-wrapper_middle { width: 65%; margin-right: auto !important; margin-left: 70px !important; } .NoticesSliderV2 .slider-wrapper .slider-wrapper_middle h2 { font-weight: bolder; } .NoticesSliderV2 .slider-wrapper .slider-wrapper_middle .inner p { text-align: left; margin-right: 5px; } .NoticesSliderV2 .slider-wrapper .navigation-wrap { display: flex; } .NoticesSliderV2 .slider-wrapper .navigation-wrap #nav-prev { margin-right: 8px; } .NoticesSliderV2 .slider-wrapper .navigation-wrap #nav-next { margin-right: 17px; } .NoticesSliderV2 .slider-wrapper .navigation-wrap .nav-icons { position: relative; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; } .NoticesSliderV2 .slider-wrapper .navigation-wrap .nav-icons svg { position: absolute; width: 20px; height: 20px; fill: #fff; color: #fff; stroke: none; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .NoticesSliderV2 .slider-wrapper .close-info-btn { position: relative; font-size: 15px; font-family: "ibm-semibold"; color: #fff; text-transform: uppercase; letter-spacing: -.02em; line-height: 2.766; padding-left: 17px; } .NoticesSliderV2 .slider-wrapper .close-info-btn:after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; left: 0; border-left: 1px solid #fff; } .NoticesSliderV2 .show_arrow .hidden { display: none; } .NoticesSliderV2 .hidden { display: none; } /*#endregion NoticesSlider*/ /*#region CurrencyExchange*/ .exchangeRate { max-width: 1100px; } .exchangeRate .margin-56 { margin-top: 56px !important; /*margin-top: 19%;*/ } .exchangeRate .curencyExchangeFilter { /*.ui-datepicker-trigger { display: none; }*/ } .exchangeRate .curencyExchangeFilter .currency-form { padding-bottom: 0px; } .exchangeRate .curencyExchangeFilter .currency-form:before { display: none; } .exchangeRate .curencyExchangeFilter .input-wrapper-inner { border-radius: 30px; background: linear-gradient(#fff 0%, #F3F6F8 100%); border: 1px solid #C3CBD0; } .exchangeRate .curencyExchangeFilter .calendarFilter { height: 23px; padding: 21px 0 7px 22px; width: 100%; max-width: 198px; position: relative; border-radius: 30px; cursor: pointer; border: none; background: linear-gradient(#fff 0%, #F3F6F8 100%); transition: border-color .2s, border-radius .2s; font-size: 14px; background: transparent; } .exchangeRate .curencyExchangeFilter .input-wrapper { width: calc(50% - 346px); margin: 0 0px 0 0; font-size: 12px; width: 254px; /*&:after { content: ""; width: 20px; height: 20px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; }*/ } .exchangeRate .curencyExchangeFilter .input-wrapper .ui-datepicker-trigger { position: absolute; top: 0; right: 15px; cursor: pointer; width: 20px; height: 20px; margin-left: -40px; margin-top: 18px; } .exchangeRate .gvCurrencyExchange .clientGrid thead tr { padding: 0px 0px 0px 10px; } .exchangeRate .gvCurrencyExchange .clientGrid tbody tr { padding: 0px 10px 0px 0px; height: 45px; } .exchangeRate .currency-form .btn-1 { height: 19px; margin-left: 50px; } .exchangeRate { padding: 0px !important; } .CurrencyExchangeV2 { max-width: 1195px; margin: 0 auto !important; background-color: transparent; padding: 0 10px 0 13px; /**************************************/ /**********************************************/ } .CurrencyExchangeV2 .noticeSection { margin-bottom: 20px; } .CurrencyExchangeV2 .s-widget-body { position: inherit !important; } .CurrencyExchangeV2 .dk-select.select-1 { position: relative; } .CurrencyExchangeV2 .dk-selected { padding: 11px 12px 11px 18px; white-space: nowrap; overflow: hidden; background-color: white; border-radius: 25px; height: 18px; -o-text-overflow: ellipsis; text-overflow: ellipsis; position: relative; z-index: 2; transform: translate(0px, 0px); } .CurrencyExchangeV2 .dk-selected:before { content: ''; top: 50%; display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top-color: #000000; position: absolute; border-width: 0.35em 0.35em 0; margin: 0; border: solid transparent; right: 0; background-image: url(images/icons/arrow-down.png); background-size: contain; background-repeat: no-repeat; width: 20px; height: 20px; } .CurrencyExchangeV2 .dk-select-options.active { display: block !important; } .CurrencyExchangeV2 .input-wrapper .input-wrapper-inner .input-1:active, .CurrencyExchangeV2 .input-wrapper .input-wrapper-inner .input-1:focus { border-color: #c3cbd0; } .CurrencyExchangeV2 .input-wrapper .selection-wrapper-inner .select-1 { border-color: #c3cbd0; appearance: none; } .CurrencyExchangeV2 .margin-56 { margin-top: 19%; } .CurrencyExchangeV2 .currency-table-wrapper { position: relative; } .CurrencyExchangeV2 .currency-table-wrapper::after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background: transparent; border-top: 1px solid #d7d8db; } .CurrencyExchangeV2 select.typesList { text-transform: uppercase !important; } .CurrencyExchangeV2 .clientGrid { background-color: transparent; } .CurrencyExchangeV2 .clientGrid .tablesaw-cell-label { display: none; } .CurrencyExchangeV2 .clientGrid tbody tr td { cursor: default !important; font-family: "aeonik-regular"; letter-spacing: -.01em; font-size: 15px; color: #000F28; } .CurrencyExchangeV2 .clientGrid tbody tr td span div div.currency-flag:before { background-size: cover; width: 20px; height: 20px; margin: auto; content: ""; background-repeat: no-repeat; display: inline-block; border-radius: 50%; position: relative; top: -12px; left: 10px; } .CurrencyExchangeV2 .datepicker .ui-datepicker-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0; min-height: 40px; padding: 0 47px; } .CurrencyExchangeV2 .datepicker .ui-datepicker-title select { width: 52%; border: none; background-color: transparent; font-size: 15px; font-family: "ibm-semibold"; color: #75868E; outline: none; cursor: pointer; appearance: none; background: url("../AIKRetail/images/icons/arrow-up-down.svg") center right no-repeat; background-size: 7px; } .CurrencyExchangeV2 .datepicker .ui-datepicker-title select option { color: #194137; } .CurrencyExchangeV2 .datepicker .ui-datepicker-title select:nth-child(2) { width: 37%; } .CurrencyExchangeV2 .datepicker .ui-datepicker-inline { width: 100%; background-color: transparent; border: none; } .CurrencyExchangeV2 .datepicker .dk-option { text-align: left; font-size: 15px; transition: color .5s; } .CurrencyExchangeV2 .datepicker .dk-option:hover { color: #fff; } .CurrencyExchangeV2 .datepicker .ui-datepicker-header { background-color: transparent; border: none; } .CurrencyExchangeV2 .datepicker .ui-datepicker-header:before { display: none; } .CurrencyExchangeV2 .datepicker .ui-datepicker-header:after { display: none; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev, .CurrencyExchangeV2 .datepicker .ui-datepicker-next { top: 4px; width: 38px; height: 38px; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 12px; border: 1px solid #D5E0EC; justify-content: center; align-items: center; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev:after, .CurrencyExchangeV2 .datepicker .ui-datepicker-next:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 0; height: 0; border-style: solid; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev.ui-state-hover, .CurrencyExchangeV2 .datepicker .ui-datepicker-next.ui-state-hover { border: 1px solid #C3CBD0; background-color: transparent; color: transparent; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev { left: 0; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev:after { background: url(../img/icons/arrow-left.svg) center center no-repeat; width: 12px; height: 12px; } .CurrencyExchangeV2 .datepicker .ui-datepicker-prev.ui-state-hover { left: 0; } .CurrencyExchangeV2 .datepicker .ui-datepicker-next { right: 0; } .CurrencyExchangeV2 .datepicker .ui-datepicker-next:after { background: url(../img/icons/arrow-right.svg) center center no-repeat; width: 12px; height: 12px; } .CurrencyExchangeV2 .datepicker .ui-datepicker-next.ui-state-hover { right: 0; } .CurrencyExchangeV2 .datepicker .ui-datepicker th { padding-bottom: 20px; } .CurrencyExchangeV2 .datepicker .ui-datepicker th span { font-size: 15px; font-weight: normal; font-family: "ibm-semibold"; color: #000; } .CurrencyExchangeV2 .datepicker .ui-datepicker td { font-size: 15px; background-color: transparent; } .CurrencyExchangeV2 .datepicker .ui-datepicker td .ui-state-default { position: relative; text-align: center; font-family: "ibm-regular"; color: #000; border: none; background-color: transparent; font-weight: 400; border-radius: 50%; transition: background-color .5s, color .5s; min-height: 36px; min-width: 36px; padding: 0; z-index: 1; } .CurrencyExchangeV2 .datepicker .ui-datepicker td .ui-state-default.ui-state-active { font-family: "ibm-semibold"; color: #000; } .CurrencyExchangeV2 .datepicker .ui-datepicker td .ui-state-default.ui-state-active:after { opacity: 1; transition: opacity .5s; } .CurrencyExchangeV2 .datepicker .ui-datepicker td .ui-state-default:after { content: ""; display: block; z-index: -1; position: absolute; top: -10px; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #266eff; opacity: 0; } .CurrencyExchangeV2 .currency-form { position: relative; padding-bottom: 24px; margin-bottom: 23px; } .CurrencyExchangeV2 .currency-form::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .CurrencyExchangeV2 .currency-filter-inner { width: 100%; flex-wrap: wrap; justify-content: space-between; } .CurrencyExchangeV2 .currency-filter-inner .input-wrapper { width: calc(50% - 346px); margin: 0; font-size: 12px; } .CurrencyExchangeV2 .select-1 { width: 100%; padding: 17px 32px 7px 24px; max-width: 100%; height: 50px; position: relative; width: 100%; border-radius: 30px; cursor: pointer; border: 1px solid #C3CBD0; background: linear-gradient(#fff 0%, #F3F6F8 100%); transition: border-color .2s, border-radius .2s; font-size: 14px; } .CurrencyExchangeV2 .select-1 ~ .label-1 { top: 5px !important; font-size: 12px; } .CurrencyExchangeV2 .select-1:focus-visible { border: 1px solid #194137; } .CurrencyExchangeV2 .select-1::after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url("images/icons/arrow-up-down.svg") 95% no-repeat; background-size: 20px; } .CurrencyExchangeV2 .select-1.dk-select-open-down, .CurrencyExchangeV2 .select-1.dk-select-open-up { border-radius: 25px 25px 0 0; } .CurrencyExchangeV2 .select-1.dk-select-open-down .dk-select-options, .CurrencyExchangeV2 .select-1.dk-select-open-up .dk-select-options { opacity: 1; visibility: visible; } .CurrencyExchangeV2 .select-1.empty-selected .dk-option:first-child { display: none; } .CurrencyExchangeV2 .select-1 .dk-selected { width: 100%; max-width: 100%; height: 22px; position: relative; width: 100%; font-family: "ibm-regular"; font-size: 14px; line-height: 1.4; color: #000; cursor: pointer; appearance: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .CurrencyExchangeV2 .select-1.active { border-radius: 25px 25px 0 0 !important; } .CurrencyExchangeV2 .select-1 .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; background-color: white; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; padding-top: 10px; width: auto; z-index: 20; font-family: "tt-norms-regular"; border-radius: 0 0 25px 25px !important; border-top: 2px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); } .CurrencyExchangeV2 .select-1 .dk-option { padding: 15px 16px; cursor: pointer; font-family: "ibm-regular"; font-size: 15px; color: #000; text-align: left; background: transparent; border-top: 1px solid transparent; transition: background .3s; } .CurrencyExchangeV2 .select-1 .dk-option:hover { background-color: #f3f6f8; } .CurrencyExchangeV2 .selection-wrapper-inner.with-icon-left .select-1 { padding-left: 0; } .CurrencyExchangeV2 .selection-wrapper-inner.with-icon-left .select-1 .dk-selected { overflow: initial; } .CurrencyExchangeV2 .selection-wrapper-inner.with-icon-left .select-1 .dk-selected.select-1-currency-icon::before { top: 3px; } .CurrencyExchangeV2 .selection-wrapper-inner.with-icon-left .select-1 .dk-selected.select-1-currency-icon::after { top: 3px; } .CurrencyExchangeV2 .selection-wrapper-inner.with-icon-left .dk-select.option-selected ~ .label-1 { left: 67px; } .CurrencyExchangeV2 .select-scroll .dk-select-options { height: 250px; overflow: hidden; overflow-y: visible; } .CurrencyExchangeV2 .selection-wrapper-inner { border-radius: 30px; } .CurrencyExchangeV2 .selection-wrapper-inner .label-2 { z-index: 1; } .CurrencyExchangeV2 .selection-wrapper-inner::after { content: ""; width: 7px; height: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url("../AIKRetail/images/icons/arrow-up-down.svg") 95% no-repeat; background-size: 7px; } .CurrencyExchangeV2 .currency-filter-box { width: calc(50% - 346px); margin: 0 16px 0 0; position: relative; } .CurrencyExchangeV2 .currency-filter-box .dk-selected { height: 40px; padding: 9px 35px 12px 16px; } .CurrencyExchangeV2 .currency-filter-box .select-1 .dk-select-options { height: 286px; padding-top: 40px; } .CurrencyExchangeV2 .currency-filter-box .select-scroll .optiscroll-content { top: 56px !important; } .CurrencyExchangeV2 .currency-filter-box .select-1 .dk-option { padding: 10px 16px; } .CurrencyExchangeV2 .currency-filter-box .input-1 { height: 40px; } .CurrencyExchangeV2 .currency-filter-box .input-1:focus { border-color: #00CDA5; } .CurrencyExchangeV2 .input-datepicker-wrapper { width: 100%; min-width: 300px; max-width: 335px; position: absolute; padding: 15px; top: 135%; left: 50%; transform: translateX(-50%); border-radius: 16px; border-top: none; opacity: 0; visibility: hidden; box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.16); background-color: #fff; transition: opacity .5s, visibility .5s; z-index: 50; } .CurrencyExchangeV2 .input-datepicker-wrapper::after { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; } .CurrencyExchangeV2 .currency-form { position: relative; padding-bottom: 24px; margin-bottom: 32px; } .CurrencyExchangeV2 .currency-form .btn-1 { min-width: 120px; } .CurrencyExchangeV2 .currency-form::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #d7d8db; background: transparent; } .CurrencyExchangeV2 .currency-filter-arrow-up-n-down { position: absolute; width: 8px; height: 12px; right: 22px; stroke: none; fill: #75868E; } .CurrencyExchangeV2 .currency-filter { height: 50px; border: 1px solid #C3CBD0; border-radius: 30px; background: linear-gradient(#fff 0%, #F3F6F8 100%); cursor: pointer; } .CurrencyExchangeV2 .currency-filter .page-text { padding-right: 32px; margin-bottom: 0; } .exchangeRate { margin-bottom: 60px !important; } /*#endregion CurrencyExchange*/ /*#region FXTrading*/ .FXTrading { margin-bottom: 0; } .FXTrading .s-widget-body { overflow: visible; } .FXTrading .widget-tabs { margin-bottom: 0; } .FXTrading .widget-tabs .button-wrap .active { border-color: #000; } .FXTrading .widget-tabs .button-wrap .active:nth-child(1) a { background-image: url(images/icons/chart-3.png); } .FXTrading .widget-tabs .button-wrap .active:nth-child(2) a { background-image: url(images/icons/icon-reload-2.png); } .FXTrading .part-modal-inner { padding-bottom: 0px; margin-bottom: 0px; } .FXTrading .part-modal-inner:after { display: none; } .FXTradingCalculator * { box-sizing: border-box; } .FXTradingCalculator .s-overlay-message { box-sizing: content-box; } .FXTradingCalculator .s-widget-body { position: relative; } .FXTradingCalculator .currency { width: 50%; float: left; padding: 40px 20px; } .FXTradingCalculator .currency.currency-left { padding-left: 40px; } .FXTradingCalculator .currency.currency-right { padding-right: 40px; } .FXTradingCalculator .currency .select-3 { position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .FXTradingCalculator .currency .flag { width: 50px; height: 50px; display: inline-block; background-size: cover; border-radius: 50%; } .FXTradingCalculator .currency .flag.RSD { background-image: url(images/icons/icon-rsd-table.png); } .FXTradingCalculator .currency .flag.EUR { background-image: url(images/icons/eu.png); } .FXTradingCalculator .eq { position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 100px; position: absolute; font-size: 24px; color: #cacaca; line-height: 35px; margin-bottom: 0; } .FXTradingCalculator .btn-1 { border-top: 1px solid #efefef; } .FXTradingCurrencyHistory { display: none; margin-bottom: 0; } .FXTradingCurrencyHistory .tableFilter { border-bottom: none; } .FXTradingCurrencyHistory .col-fix-size-1 { width: 310px; float: none; } /*#endregion FXTrading*/ /*#region CreditorTemplateManaging*/ .CreditorTemplateManaging { position: relative; } .CreditorTemplateManaging .s-widget-button-filter { display: table-cell !important; } .CreditorTemplateManaging.icon-users-2 .s-widget-button-filter { position: relative; left: -60px; } .CreditorTemplateManaging.icon-users-2 .s-widget-button-filter .s-icon-filter { background-image: url(images/icons/icon-search-1.png); } .CreditorTemplateManaging.icon-users-2 .s-widget-button-filter .s-icon-filter:hover { background-image: url(images/icons/icon-search-2.png); } .CreditorTemplateManaging .clientGrid thead { display: none; } .CreditorTemplateManaging .clientGrid .tablesaw-cell-label { display: none; } .CreditorTemplateManaging .clientGrid td:nth-child(2) { width: 40px; } .CreditorTemplateManaging .clientGrid tr:hover button { opacity: 1; } .CreditorTemplateManaging .name { display: inline-block; overflow: hidden; text-overflow: ellipsis; height: 35px; white-space: nowrap; float: left; width: calc(100% - 200px); } .CreditorTemplateManaging.editTemplateView { background-image: none; background-color: transparent; } .CreditorTemplateManaging.editTemplateView .s-widget-header { display: none; } .CreditorTemplateManaging.editTemplateView .s-widget-body { overflow: visible; } .CreditorTemplateManaging hr { position: relative; top: 5px; } .CreditorTemplateManaging .combined-inputs .input.type-2 { max-width: 129px; } .CreditorTemplateManaging.dashboard-widget .s-widget-body { min-height: 252px; } .CreditorTemplateManaging.dashboard-widget .wh-button { display: none; } .CreditorTemplateManaging.dashboard-widget .clientGridPager { display: none !important; } .CreditorTemplateManaging.dashboard-widget .newTemplateButtonContainer { position: relative; top: -1px; } .CreditorTemplateManaging.dashboard-widget .topBorder { border-top: 1px solid #ebeced !important; } .CreditorTemplateManaging:not(.dashboard-widget) .s-widget-body { position: relative; overflow: visible; } .CreditorTemplateManaging:not(.dashboard-widget) .wh-button-top-right { transform: translateY(-100%); } .CreditorTemplateManaging:not(.dashboard-widget) .name { width: calc(100% - 250px); } .CreditorTemplateManaging:not(.dashboard-widget) .newTemplate { display: none; } .CreditorTemplateManaging:not(.dashboard-widget) .gridFilterArea span { left: 62px; } /*#endregion CreditorTemplateManaging*/ /*#region Products*/ .Products { position: relative; background-position: 25px 19px; } .Products .s-widget-body { overflow: visible; } .Products .change-tab { position: absolute; right: 10px; top: 8px; padding: 5px; } .Products .change-tab .widget-options { padding-top: 2px; padding-right: 0; } .Products .change-tab .widget-options li { cursor: pointer; } .Products .change-tab .widget-options li .t-modal { z-index: 1; } .Products .chart-tab { text-align: center; padding: 12px 20px 0 20px; border-bottom: 5px solid #ffec00; border-top: 2px solid transparent; position: relative; box-sizing: border-box; max-height: 360px; overflow: visible; } .Products .chart-tab .chart-slider { width: 600px; margin: 0 auto; } .Products .chart-tab .chart-slider .slick-list { z-index: 20; } .Products .chart-tab .chart-content { /*width: 280px;*/ position: absolute; left: 48%; top: 167px; /*margin-left: -140px;*/ margin-left: -76px; text-align: center; } .Products .chart-tab .chart-content.row-2 { top: 164px; left: 47% !important; } .Products .chart-tab .chart-content .btn-1 { width: 180px; line-height: 26px; padding: 7px 20px; } .Products .chart-tab .chart-content .btn-1 i { width: 30px; height: 25px; display: inline-block; background-repeat: no-repeat; background-position: center center; float: left; position: relative; top: -2px; margin-right: 10px; } .Products .chart-tab .chart-content .title { font-size: 16px; color: #7b7b7b; margin-bottom: 16px; } .Products .chart-tab .chart-content .title.row-2 { margin-bottom: 0px; } .Products .chart-tab .chart-content .chart-val div { display: inline; } .Products .chart-tab .chart-content .chart-val .val { display: inline-block; font-size: 30px; color: #000; margin-bottom: 20px; cursor: pointer; } .Products .chart-tab .chart-content .chart-val .val.row-2 { margin-bottom: 5px; font-size: 20px; } .Products .chart-tab .chart-content .chart-val .val.defaultCursor { cursor: default; } .Products .chart-tab .chart-content .chart-val .small { font-size: 24px; } .Products .chart-tab .chart-content .chart-val .small.row-2 { font-size: 16px; margin-bottom: 5px; } .Products .chart-tab .account-name { display: inline-block; font-size: 18px; color: #000; margin-bottom: 8px; position: relative; z-index: 1; } .Products .chart-tab .acc-icon { display: inline-block; float: left; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; margin-right: 10px; background-size: contain; } .Products .chart-tab .icon-2 { float: right; margin-left: 10px; cursor: pointer; } .Products .chart-tab .slick-slide .slide-inner { opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .Products .chart-tab .slick-slide.slick-active .slide-inner { opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .Products .chart-tab .chart-wrap { width: 100%; position: relative; top: -50px; } .Products .chart-tab .chart-wrap .gauge-chart { width: 600px !important; height: 370px !important; margin: 0 auto; } .Products .chart-tab .slick-dots { width: 100%; position: absolute; bottom: 9px; height: 19px; } .Products .chart-tab .slick-dots li { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #cacaca; cursor: pointer; margin: 4px; } .Products .chart-tab .slick-dots li button { padding: 0; text-indent: -9999px; overflow: hidden; display: inline-block; border: none; } .Products .chart-tab .slick-dots li.slick-active { background: #000; } .Products .currencySelect { padding-right: 15px; position: relative; } .Products .currencySelect:after { transform: translateY(-50%); content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; top: 11px; right: 0; } .Products .currencySelect .selected-currency { cursor: pointer; } .Products .value-menu { position: absolute; right: 160px; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); padding: 2px 10px; background-color: #fff; z-index: 1; max-height: 105px; overflow: auto; box-sizing: border-box; } .Products .value-menu li { transition: all 0.2s ease; font-size: 14px; border: none !important; padding: 2px 5px; color: #000; cursor: pointer; } .Products .value-menu li:hover { color: #ffe082; } .Products .chart-content .value-menu { right: 10px; top: 20px; } .Products .chart-content .currencySelect:after { top: 17px; } .Products .list-item.row-1 { cursor: default; } .Products .list-item.row-1.selected, .Products .list-item.row-1:hover { background: transparent; } .Products .list-item.row-1 .float50 { /*width: 45%;*/ float: right; } .Products .pointer { cursor: pointer; } /*#endregion Products*/ /*#region flags*/ .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .currency-flag { background-size: cover; width: 20px; height: 20px; margin: auto; content: ""; background-repeat: no-repeat; display: inline-block; border-radius: 50%; position: relative; top: -4px; left: 15px; } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .EUR { background-image: url(images/icons/ic_exchange_eur.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .USD { background-image: url(images/icons/ic_exchange_usd.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .CHF { background-image: url(images/icons/ic_exchange_chf.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .GBP { background-image: url(images/icons/ic_excgange_gbp.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .AUD { background-image: url(images/icons/australia.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .RUB { background-image: url(images/icons/russia.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .SEK { background-image: url(images/icons/sweden.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .CAD { background-image: url(images/icons/canada.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .DKK { background-image: url(images/icons/denmark.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .JPY { background-image: url(images/icons/japan.png); } .CurrencyExchangeV2 .gvCurrencyExchange .currency-icon .NOK { background-image: url(images/icons/norway.png); } /*.FXTradingCalculator .EUR, .CurrencyExchangeV2 { .currency-icon { .currency-flag.EUR:before { color: red; background-image: url(images/icons/ic_exchange_eur.png); } } }*/ /*.FXTradingCalculator .USD, .CurrencyExchangeV2 .currency-flag.USD:before { background-image: url(images/icons/ic_exchange_usd.png); } .FXTradingCalculator .CHF, .CurrencyExchangeV2 .currency-flag.CHF:before { background-image: url(images/icons/ic_exchange_chf.png); } .FXTradingCalculator .GBP, .CurrencyExchangeV2 .currency-flag.GBP:before { background-image: url(images/icons/ic_excgange_gbp.png); } .FXTradingCalculator .AUD, .CurrencyExchangeV2 .currency-flag.AUD:before { background-image: url(images/icons/australia.png); } .FXTradingCalculator .RUB, .CurrencyExchangeV2 .currency-flag.RUB:before { background-image: url(images/icons/russia.png); } .FXTradingCalculator .SEK, .CurrencyExchangeV2 .currency-flag.SEK:before { background-image: url(images/icons/sweden.png); } .FXTradingCalculator.CAD, .CurrencyExchangeV2.currency-flag.CAD:before { background-image: url(images/icons/canada.png); } .FXTradingCalculator.DKK, .CurrencyExchangeV2.currency-flag.DKK:before { background-image: url(images/icons/denmark.png); } .FXTradingCalculator.JPY, .CurrencyExchangeV2.currency-flag.JPY:before { background-image: url(images/icons/japan.png); } .FXTradingCalculator.NOK, .CurrencyExchangeV2.currency-flag.NOK:before { background-image: url(images/icons/norway.png); }*/ /*#endregion flags*/ /*#region tabs*/ .k-tabstrip { background: white; } .k-tabstrip .k-content { margin: 0 !important; } .k-tabstrip .k-content.k-state-active { background-color: #f0f1f5 !important; } .k-tabstrip .k-tabstrip-items { margin-left: 0px !important; background-color: #f0f1f5 !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 60%; height: 1px; top: 255px; left: 20%; margin-top: 20px; background: #d7d8db; } .k-tabstrip .k-tabstrip-items .k-loading { border-top: none; } .k-tabstrip .k-tabstrip-items .k-item { display: inline-block; min-height: 40px; padding: 10px 5px 11px; text-align: center; transition: border-color .3s; margin-left: 8px; margin-bottom: 20px; flex-shrink: 0; background: transparent; border-style: none; border-width: inherit; } .k-tabstrip .k-tabstrip-items .k-item .k-link { color: #666696; font-family: "aeonik-regular"; font-size: 15px; line-height: 1; padding: 10px 20px; letter-spacing: -.02em; text-align: center; border: 2px solid transparent; -webkit-transition: font-family .3s, color .3s; transition: font-family .3s, color .3s; } .k-tabstrip .k-tabstrip-items .k-item .k-link:hover { text-decoration: none; cursor: pointer; color: #333; } .k-tabstrip .k-tabstrip-items .k-item.k-state-active { border-color: #266eff; } .k-tabstrip .k-tabstrip-items .k-item.k-state-active .k-link { color: #266eff; font-family: "aeonik-bold"; border-radius: 20px; border: 2px solid; } .k-tabstrip .k-tabstrip-items .k-item:hover { border-color: #266eff; } .k-tabstrip .k-tabstrip-items .k-item:hover .k-link { color: #266eff; font-family: "aeonik-bold"; border-radius: 20px; border: 2px solid; } .k-tabstrip:focus { outline: none; } .k-tabstrip .s-widget-header { background-size: 18px; background-repeat: no-repeat; background-position: 23px 23px; } .s-widget-zone-content.k-widget.k-header { background: #f0f1f5; border: none; } .s-widget-zone-content.k-widget.k-header ul li.k-state-active { border-color: unset; border-style: #194137; } .s-widget-zone-content.k-widget.k-header .k-state-active { border-color: unset; border-style: none; } .inline-tabs .k-tabstrip .k-tabstrip-items .k-item { width: auto; padding: 10px 35px; font-size: 16px; } .fast-payment-zone .s-widget-header.zone-header { position: relative; background-image: url(images/icons/payments_d.png); background-size: 24px; background-position: 18px 14px; } .fast-payment-zone .s-widget-header.zone-header .zone-filter { position: absolute; right: 20px; top: 15px; width: 36px; height: 26px; background-image: url(images/icons/filter-1.png); background-repeat: no-repeat; border: 2px solid #cfd0d2; border-radius: 13px; background-size: 14px; box-sizing: border-box; background-position: center; cursor: pointer; } .fast-payment-zone .s-widget-header.zone-header .zone-filter:hover { border-color: #494f5a; background-image: url(images/icons/filter-2.png); } .fast-payment-zone .filterArea { display: none; } .fast-payment-zone .filterArea input { padding: 13px 15px 4px 15px; line-height: 23px; font-family: "futura", sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #494f5a; border-radius: 0; box-sizing: border-box; width: 92%; display: block; margin: 0 auto 10px auto; border: solid 1px #d1d1d1; } .fast-payment-zone .filterArea span { font-size: 16px; color: #7b7b7b; background: #fff; position: relative; top: 10px; left: 30px; padding: 0 10px; } .fast-payment-zone .k-link { font-size: 16px; } .fast-payment-zone .k-tabstrip-items { padding-top: 10px; } .fast-payment-zone .CreditorTemplateManaging .mode-stack { display: none; } .fast-payment-zone .CreditorTemplateManaging .gvTemplateList tr { height: 67px; } .exchange-zone .s-widget-header { background-image: url(images/icons/icon-exchange-office_d.png); background-size: 25px; background-position: 20px 15px; } .exchange-zone .s-widget-body { min-height: 252px; } .exchange-zone .k-link { font-size: 16px; } .exchange-zone .k-tabstrip-items { padding-top: 10px; } .payment-overview-zone { position: relative; } .payment-overview-zone .s-widget-header { background-image: url(images/icons/icon-last-trans.png); background-position: 20px 17px; } .payment-overview-zone .k-tabstrip .k-tabstrip-items .k-item:not(.k-state-active) { border-bottom: none; } .k-tabstrip .k-tabstrip-items { white-space: nowrap; overflow-x: auto; } .statements-zone { visibility: hidden; position: relative; } .statements-zone .s-widget-header { background-image: url(images/icons/cards_d.png); background-size: 30px; background-position: 20px 13px; } .statements-zone .filter-dialog-button { right: 30px; } .PersonalDataV2.s-widget { background-color: transparent !important; margin-bottom: 0px; padding-top: 10px; box-sizing: border-box; } .PersonalDataV2 .s-widget-body { min-height: 30px; } .mobilePhoneField { min-height: 45px; } .mobilePrefix-contentData { float: left; color: #7b7b7b; } .newMobileNumber-contentData { float: left; max-width: 250px; line-height: 24px !important; border: none; } .profile-zone .attachment-card { max-width: 345px; padding-left: 50px; } .profile-zone .attachment-card:before { top: 50%; width: 40px; height: 40px; left: 5px; } .profile-zone { max-width: 980px; margin-left: auto; margin-right: auto; float: none; } .profile-zone .profile-zone-header { padding: 70px 100px 0 100px; } .profile-zone .k-tabstrip .k-tabstrip-items { border-bottom: 2px solid #efefef; padding-left: 100px; margin-top: 90px; } .profile-zone .k-tabstrip .k-tabstrip-items .k-item { padding: 15px 40px; } .profile-zone .k-tabstrip .k-tabstrip-items .k-item:not(.k-state-active) { border-bottom: none; } .profile-zone .s-widget-body { min-height: 410px; } .profile-zone .contact-data { padding: 70px 100px 60px 100px; } .profile-zone .user-profile-wrap { position: relative; padding-left: 145px; } .profile-zone .user-profile-wrap a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: inline-block; font-size: 16px; color: #000; border-bottom: 1px solid #000; margin-bottom: 20px; } .profile-zone .user-profile-wrap a:hover { color: #0095c9; border-color: #0095c9; } .profile-zone .user-profile-wrap .user-profile-tag { border-radius: 50%; width: 115px; height: 115px; background-color: #0095c9; color: #fff; font-size: 43px; text-transform: uppercase; text-align: center; line-height: 115px; vertical-align: middle; position: absolute; left: 0; } .profile-zone .user-profile-wrap .user-profile-tag.transparent { background-color: transparent !important; } .profile-zone .user-profile-wrap .user-profile-tag img { border-radius: 100%; width: 115px; height: 115px; margin: 0 auto; display: block; } .profile-zone .user-profile-wrap .user-profile-title { font-size: 30px; color: #000; margin-bottom: 5px; } .profile-zone .user-profile-wrap .user-profile-info { font-size: 14px; color: #000; line-height: 16px; margin-bottom: 0; position: relative; top: 10px; } .profile-zone .user-profile-wrap .user-profile-info span { position: relative; font-size: 12px; color: #7b7b7b; margin: 0 10px; } .profile-zone .user-profile-wrap .user-profile-info span:nth-child(2) { margin-left: 0; } .profile-zone .user-profile-wrap .user-profile-info > span:not(.noLine):after { top: 50%; transform: translateY(-50%); right: -13px; position: absolute; content: ""; width: 2px; height: 10px; background-color: #0095c9; } .profile-zone .tabs-dropdown { display: none; } .profile-zone .change-password-dialog { padding: 70px 100px 50px 100px; box-sizing: border-box; } .profile-zone .change-password-dialog .uk-width-3-6 { display: inline-block; padding-left: 35px; width: 49%; box-sizing: border-box; } .profile-zone .change-password-dialog .custom-form { margin-left: -35px; padding-top: 0; } .exchange-office-zone .s-widget { max-width: 980px; margin-left: auto; margin-right: auto; } /*#endregion tabs*/ /*#region mCustomScrollbar*/ .s-widget .mCSB_inside > .mCSB_container { margin-right: 5px; } .s-widget .mCSB_scrollTools .mCSB_draggerRail { background-color: rgba(0, 0, 0, 0.1); } .s-widget .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #333; } /*#endregion mCustomScrollbar*/ /*#region Chart*/ /*.exchange-office-zone {*/ .Chart { display: none; } .Chart #chartTypes { display: none; } .Chart .chartView { padding: 0 50px 40px 50px; box-sizing: border-box; } .Chart .noData { margin: auto auto 30px 50px; } .currencyChart .highcharts-xaxis-labels span { width: 44px !important; } /*}*/ /*#endregion Chart*/ /*#region Securities*/ .ticker-zone { width: calc(100% + 40px) !important; margin-top: -20px; margin-left: -20px; } .ticker-zone .SecuritiesTicker .s-widget-body { min-height: 48px; padding: 15px 0; } .SecuritiesAccountBalance .clientGrid thead th, .SecuritiesOrderConfirmationPreview .clientGrid thead th, .SecuritiesOrderPreview .clientGrid thead th, .SecuritiesAccountTurnover .clientGrid thead th { text-transform: none !important; font-size: 14px !important; text-align: left; vertical-align: middle; padding-top: 0 !important; padding-bottom: 0 !important; color: #7b7b7b !important; line-height: 16px !important; font-family: "futura", sans-serif !important; font-weight: 500 !important; } .SecuritiesAccountBalance .clientGrid td, .SecuritiesOrderConfirmationPreview .clientGrid td, .SecuritiesOrderPreview .clientGrid td, .SecuritiesAccountTurnover .clientGrid td { line-height: normal; } .SecuritiesAccountBalance .clientGrid th:nth-child(2), .SecuritiesAccountBalance .clientGrid td:nth-child(2), .SecuritiesOrderConfirmationPreview .clientGrid th:nth-child(2), .SecuritiesOrderConfirmationPreview .clientGrid td:nth-child(2), .SecuritiesOrderPreview .clientGrid th:nth-child(2), .SecuritiesOrderPreview .clientGrid td:nth-child(2), .SecuritiesAccountTurnover .clientGrid th:nth-child(2), .SecuritiesAccountTurnover .clientGrid td:nth-child(2) { padding-left: 20px; max-width: 200px !important; } .SecuritiesAccountTurnover .clientGrid thead th.align-right, .SecuritiesAccountTurnover .clientGrid td.align-right { text-align: right !important; padding-right: 15px; } .SecuritiesAccountBalance { position: relative; display: none; } .SecuritiesAccountBalance .clientGrid tbody .sell-button { border: none; background: transparent; color: #0095c9; text-transform: uppercase; font-size: 16px; margin-right: 10px; cursor: pointer; float: right; } .SecuritiesAccountBalance .clientGrid th:nth-child(9), .SecuritiesAccountBalance .clientGrid td:nth-child(9) { max-width: 80px !important; } .SecuritiesAccountTurnover { position: relative; display: none; } .SecuritiesAccountTurnover .s-widget-body[style="position: relative;"] .widget-options.print { visibility: hidden; } .SecuritiesAccountTurnover .s-widget-body { padding-top: 15px; } .SecuritiesAccountTurnover .clientGrid td { padding: 11px 10px 11px 5px; } .SecuritiesOrderConfirmationPreview .clientGrid th:last-child, .SecuritiesOrderConfirmationPreview .clientGrid td:last-child { text-align: right; padding-right: 20px; } .SecuritiesOrderConfirmationPreview .tableFilter { border: none; } .SecuritiesOrderPreview .s-widget-button-filter { display: table-cell !important; } .SecuritiesOrderPreview .clientGrid { position: relative; } .SecuritiesOrderPreview .blueBorder:after, .SecuritiesOrderPreview .redBorder:after, .SecuritiesOrderPreview .greenBorder:after { position: absolute; content: ""; left: 0; width: 6px; height: 67px; } .SecuritiesOrderPreview .blueBorder:after { background-color: #0095c9; } .SecuritiesOrderPreview .redBorder:after { background-color: #e23939; } .SecuritiesOrderPreview .greenBorder:after { background-color: #9ccc66; } .SecuritiesOrderPreview .withdraw-button { text-transform: uppercase; color: #0095c9; } /*#endregion Securities*/ /*#region Tokens*/ .TokenList .token { position: relative; padding: 20px 160px; padding-right: 100px; border-bottom: 2px solid #efefef; } .TokenList .token i { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 45px; height: 45px; left: 85px; background-position: center; background-repeat: no-repeat; } .TokenList .token .title { font-size: 18px; color: #000; letter-spacing: -.5px; margin-bottom: 10px; } .TokenList .token .text { font-size: 14px; color: #7b7b7b; margin: 0; } .TokenList .token .button-wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; display: inline-block; right: 100px; } .TokenList .token .button { margin-left: 20px; min-width: 125px; } .TokenList .inner-padding-5 { padding: 50px 100px 50px 100px; } /*#endregion Tokens*/ /*#region PersonalSettings*/ .PersonalSettingsV3 .inner, .PersonalSettingsV4 .inner { padding-left: 100px; padding-right: 100px; } /*#endregion PersonalSettings*/ /*#region PFM*/ .Accounts .checkbox { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 20px; } .Accounts .custom-checkbox-2 { cursor: default; width: 30px; height: 30px; } .Accounts .custom-checkbox-2 .cc-checkbox { display: none; } .Accounts .custom-checkbox-2 .check { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; cursor: pointer; position: absolute; display: inline-block; background-color: #fff; border: 2px solid #d9d9d9; width: 18px; height: 18px; } .Accounts .custom-checkbox-2.checked .check { background-image: url(images/icons/check-icon.png); background-position: center; background-repeat: no-repeat; background-size: 15px; background-color: #0095c9; border-color: #0095c9; } .FinanceRules { position: relative; } .FinanceRules .s-widget-body { position: relative; overflow: visible; } .FinanceRules .s-widget-body-error-summary { position: absolute; width: 100%; } .FinanceRules .wh-button { transform: translateY(-100%); } .FinanceRules .clientGrid thead { display: none; } .FinanceRules .clientGrid tbody td:nth-child(2) { padding-left: 20px; } .FinanceRules .clientGrid tbody td:nth-child(4) { padding-right: 20px; } .FinanceRules .clientGrid tbody td:nth-child(3), .FinanceRules .clientGrid tbody td:nth-child(4) { width: 100px; } .FinanceRules .clientGrid tbody td:nth-child(3) div, .FinanceRules .clientGrid tbody td:nth-child(4) div { cursor: pointer; color: #0095c9; } .Reminders #calendar .fc-header { margin-top: 10px; } .Reminders #calendar .fc-header .fc-header-title h2 { width: 160px; position: relative; top: 10px; } .Reminders #calendar .fc-content .fc-widget-header { padding: 5px; font-size: 14px; font-weight: 500; color: #7b7b7b; border-top: none; border-right: none; border-left: none; border-bottom: 2px solid #efefef; font-family: "futura", sans-serif; } .Reminders #calendar .fc-content .fc-widget-content { border-top: none; border-left: none; border-bottom: 2px solid #efefef; border-right: 2px solid #efefef; } .Reminders #calendar .fc-content .fc-widget-content > div { min-height: 80px !important; padding: 10px; } .Reminders #calendar .fc-content .fc-widget-content:hover { background-color: #fffde5; cursor: pointer; } .Reminders #calendar .fc-content .fc-widget-content:hover .fc-day-number { color: #0095c9; } .Reminders #calendar .fc-content .fc-widget-content.fc-state-highlight { background-color: transparent; border: 2px solid #0095c9; } .Reminders #calendar .fc-content .fc-widget-content.fc-state-highlight .fc-day-number { color: #0095c9; } .Reminders #calendar .fc-content .fc-event { font-size: 16px; color: #0095c9 !important; border-left: 5px solid #0095c9; border-top: none; border-right: none; border-bottom: none; letter-spacing: .5px; padding: 0 7px; margin: 0; background-color: transparent; cursor: pointer; } .Reminders #calendar .fc-content .fc-event .fc-event-inner { border: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Reminders #calendar .fc-content .fc-event .fc-event-skin { background-color: transparent; color: #0095c9; } .Reminders #calendar .fc-button { background: white; width: 40px; height: 40px; border: none; background-size: 6px; background-repeat: no-repeat; background-position: center center; } .Reminders #calendar .fc-button.fc-button-prev { background-image: url(images/icons/arrow-blue-l.png); } .Reminders #calendar .fc-button.fc-button-next { background-image: url(images/icons/arrow-blue-r.png); } .Reminders #calendar .fc-button .fc-button-inner { background: transparent; width: 100%; height: 100%; border: solid 1px #d1d1d1; } .Reminders #calendar .fc-button .fc-button-inner .fc-button-content { width: 100%; height: 100%; padding: 0; visibility: hidden; } .Reminders #calendar .fc-button .fc-button-inner .fc-button-effect { display: none; } .Reminders #calendar .fc-grid .fc-day-number { color: #7b7b7b; } .calendar-reminder .widget-tabs label { cursor: pointer; font-size: 16px; text-transform: uppercase; color: #333; } .calendar-reminder .widget-tabs li { padding-left: 0; padding-right: 0; width: 49%; margin-right: 0; text-align: center; } .calendar-reminder .widget-tabs li:not(.active) label { color: #9b9b9c; } .calendar-reminder .widget-tabs li:hover label { color: #333; } .calendar-reminder .select-1 { padding-left: 0; } .calendar-reminder .tab { display: inherit; } .BudgetList .s-widget-body { min-height: 153px; overflow: visible; position: relative; } .BudgetList .noBudgets { text-align: center; padding: 20px 0 40px 0; } .BudgetList .addBudgets { transform: translateY(-100%); } .BudgetList button.previous, .BudgetList button.next { background: white; width: 40px; height: 40px; border: none; background-size: 6px; background-repeat: no-repeat; background-position: center center; border: 1px solid #d1d1d1; } .BudgetList button.previous:hover, .BudgetList button.next:hover { border-color: #000; } .BudgetList button.previous { background-image: url(images/icons/arrow-blue-l.png); } .BudgetList button.next { background-image: url(images/icons/arrow-blue-r.png); } .BudgetList .clientGrid thead td { text-transform: none; font-size: 14px; } .BudgetList .clientGrid td:nth-child(1) { padding-left: 20px; } .BudgetList .clientGrid td:nth-child(1), .BudgetList .clientGrid td:nth-child(2) { text-align: left; } .BudgetList .clientGrid td:nth-child(3), .BudgetList .clientGrid td:nth-child(4), .BudgetList .clientGrid td:nth-child(5) { text-align: right; } .BudgetList .ui-progressbar { border: none !important; background: #efefef; height: 12px; margin: auto; } .BudgetList .ui-progressbar .ui-progressbar-value { border: none; margin: 0; } .BudgetList .custom-table .table-row:not(.table-head) { border-top: 2px solid #ebeced; display: block; position: relative; width: 100%; overflow: hidden; } .BudgetList .custom-table .table-row .text-1 { font-size: 14px; line-height: 38px; } .BudgetList .custom-table .table-row .text-3 { line-height: 38px; font-size: 18px; } .BudgetList .custom-table .table-row .text-3 small { font-size: 14px; } .BudgetList .custom-table .table-row .text-5 { font-size: 16px; line-height: 38px; overflow: hidden; } .BudgetList .custom-table .table-row .tag-col { padding-left: 65px; } .BudgetList .custom-table .table-row .col { display: inline-block; } .BudgetList .custom-table .table-row .col.col-ls-3 { width: 11.2%; } .BudgetList .custom-table .table-row .col .col-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 0; } .BudgetList .custom-table .table-row .left { text-align: left; } .BudgetList .custom-table .table-row .right { text-align: right; } .BudgetList .custom-table .table-row .tag { margin: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; position: absolute; left: 15px; border: 2px solid #d9d9d9; color: #000; font-weight: normal; font-size: 16px; display: block; width: 35px; height: 35px; line-height: 32px; } .BudgetList .custom-table .table-row .progress-bar-2 { margin: 14px 0; } .BudgetList .custom-table .table-row .category-icon { background-repeat: no-repeat; background-position: center center; } .BudgetList .custom-table .table-row .transaction-btn { transition: all 0.3s ease; display: inline-block; font-size: 16px; text-transform: uppercase; color: #0095c9; line-height: 40px; cursor: pointer; float: right; } .BudgetList .custom-table .no-padd-bot .col { padding-bottom: 0; } .BudgetList .custom-table .table-head { height: 50px; } .PfmTurnoverChart { font-family: 'futura', sans-serif !important; background: white; } .PfmTurnoverChart .ui-button-text { text-align: right; } .PfmTurnoverChart .Chart { display: block; } .PfmTurnoverChart .Chart .s-widget-header { height: 50px !important; border-left: 0px !important; width: 93%; } .PfmTurnoverChart #chartMenu { position: relative !important; text-transform: uppercase; left: 43% !important; top: 230px !important; } .PfmTurnoverChart .filterRegion { padding-top: 20px; padding-left: 40px; } .PfmTurnoverChart .dk-select-options { position: absolute; z-index: 9999; } .PfmTurnoverChart .s-widget-header.icon-coins-3 { margin: 0 0 20px 0 !important; padding-right: 15px !important; background-repeat: no-repeat; background-position: 18px 13px; border-bottom: 2px solid #efefef; } .PfmTurnoverChart .s-widget-body { overflow: visible; } .PfmTurnoverChart .widget-options.print { position: absolute; right: 12px; top: 390px; } .PfmTurnoverChart .FinanceTurnover .clientGrid thead td, .PfmTurnoverChart .FinanceTurnover .clientGrid thead th { color: #7b7b7b; line-height: 38px; font-size: 14px; font-weight: normal; text-transform: none !important; margin-bottom: 0 !important; text-align: left; } .PfmTurnoverChart .FinanceTurnover .clientGrid th:nth-child(2), .PfmTurnoverChart .FinanceTurnover .clientGrid th:nth-child(5) { pointer-events: none; padding-left: 15px; } .PfmTurnoverChart .FinanceTurnover .clientGrid th:nth-child(2) .sort-indicator, .PfmTurnoverChart .FinanceTurnover .clientGrid th:nth-child(5) .sort-indicator { display: none; } .PfmTurnoverChart .FinanceTurnover .sort-indicator { display: inline-block; background-position: 0 0; margin-left: 5px; } .PfmTurnoverChart .FinanceTurnover .ui-icon-triangle-2-n-s { background-image: url(images/icons/icon-sorter-both.png); background-size: 12px 16px; } .PfmTurnoverChart .FinanceTurnover .ui-icon-triangle-1-n { background-image: url(images/icons/icon-sorter-up.png); background-size: 12px 7px; background-position: center; } .PfmTurnoverChart .FinanceTurnover .ui-icon-triangle-1-s { background-image: url(images/icons/icon-sorter-down.png); background-size: 12px 7px; background-position: center; } .PfmTurnoverChart .FinanceTurnover .tablesaw thead tr:first-child th { padding-bottom: 0px !important; } .PfmTurnoverChart .FinanceTurnover .clientGrid tbody button { background: none; border: none !important; display: inline-block; font-size: 16px; font-weight: 400; text-transform: uppercase; color: #0095c9; float: right; } .PfmTurnoverChart .FinanceTurnover .clientGrid td:nth-child(2) { width: 50%; } .PfmTurnoverChart .FinanceTurnover .clientGrid td:nth-child(3) { width: 25%; } .PfmTurnoverChart .FinanceTurnover .clientGrid td:nth-child(4), .PfmTurnoverChart .FinanceTurnover .clientGrid td:nth-child(5) { width: 12.49%; } .PfmTurnoverChart .FinanceTurnover .tag { margin-left: 12px; } .PfmTurnoverChart .icon-mail-1 { display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; position: relative; top: -2px; box-sizing: border-box; float: right; margin-top: 15px; } .splitDialog { font-family: 'futura', sans-serif !important; } .splitDialog .ui-widget-content { border: none !important; } .splitDialog .catGrid .options { margin-left: -14px !important; border-top: none !important; } .splitDialog .title { color: #7b7b7b; line-height: 25px; } .splitDialog .group-title { font-size: 20px; color: #0095c9; } .splitDialog .ui-dialog-buttonset { width: 100%; } .splitDialog .ui-dialog-buttonset button { width: calc(50% - 12px); display: inline-block; border: none; font-family: 'futura', sans-serif; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; } .splitDialog .ui-dialog-buttonset .ui-button-text { padding-top: 15px; padding-bottom: 15px; } .splitDialog .ui-dialog-buttonset button:first-child, .splitDialog .ui-dialog-buttonset button:nth-child(3) { background: none; background-color: #d1d1d1; color: #000; } .splitDialog .ui-dialog-buttonset button:first-child:hover, .splitDialog .ui-dialog-buttonset button:nth-child(3):hover { background-color: #b8b8b8; } .splitDialog .ui-dialog-buttonset button:nth-child(2) { background: none; background-color: #ffec00; color: #000; } .splitDialog .ui-dialog-buttonset button:nth-child(2):hover { background-color: #0095c9; color: #fff; } .splitDialog .button-3.type-2 { padding-left: 25px; max-width: 345px; width: 100%; } .splitDialog .button-3 { display: inline-block; font-size: 16px; line-height: 19px; text-transform: uppercase; color: #0095c9 !important; border: 1px solid #d1d1d1; padding: 17px 25px; padding-left: 60px; background-position: 20px center; background-repeat: no-repeat; text-align: center; } .splitDialog .inner-margin-7 { margin-bottom: 70px; } .splitDialog .button-3:hover { background-color: #fffde5; } .splitDialog .subcategory-row { position: relative; padding: 10px 0; } .splitDialog .subcategory-row .input-wrap { max-width: 145px; } .splitDialog .input-wrap.type-2 { padding: 14px 15px 12px 15px; } .splitDialog .drag-bar.type-2 { min-height: 60px; background-repeat: no-repeat; background-position: 0px center; position: absolute; left: 165px; width: calc(100% - 470px); top: 50%; } .splitDialog .slider { width: calc(100%); border: none; border-radius: 0; background-color: #dbdbdb; height: 3px; } .splitDialog .custom-dropdown { position: absolute; right: 55px; width: 198px; min-height: 29px; height: auto; top: 13%; background-image: url(images/icons/icon-carrot-1.png); background-repeat: no-repeat; background-position: right 15px center; background-size: 11px; } .splitDialog .custom-dropdown span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 15px; } .splitDialog .custom-dropdown .ele > span { font-size: 18px; font-weight: 500; color: #333; } .splitDialog .remove-button { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; display: inline-block; width: 36px; height: 26px; border: 2px solid #cfd0d2; background-position: center; background-repeat: no-repeat; top: 21px; cursor: pointer; } .splitDialog .catGrid { font-size: 16px; background: #fff; position: absolute; left: 5px; padding: 0px; padding-left: 10px; letter-spacing: .2px; margin: 0; margin-right: 27px; } .splitDialog .catGrid span { vertical-align: middle; } .splitDialog .ele .mainCat, .splitDialog .ele .mainCatSelect { padding-right: 28px !important; } .splitDialog .catGrid > span { white-space: normal !important; padding-left: 0px; padding-bottom: 0px; } #gvFinanceTurnover .catGrid { position: relative; display: inline-block; } #gvFinanceTurnover .catGrid .options { width: 100% !important; border-top: none !important; } .splitDialog .mainCat, .PfmTurnoverChart .mainCat { background-image: url(images/icons/icon-plus-1.png); background-repeat: no-repeat; background-position: right 15px center; } .splitDialog .mainCatSelected, .PfmTurnoverChart .mainCatSelected { position: relative; } .splitDialog .mainCat:hover, .PfmTurnoverChart .mainCat:hover { background-color: #f2f2f2 !important; } .splitDialog .catGrid .subMenu, .PfmTurnoverChart .catGrid .subMenu { width: 100% !important; border: none !important; background-color: #f2f2f2 !important; border-radius: 0 0 !important; background-image: none !important; padding: 0 !important; z-index: 9999 !important; position: relative !important; top: 0px !important; left: 0px !important; font-weight: normal !important; margin-top: 0px !important; } .splitDialog .catGrid .subMenu span:hover, .PfmTurnoverChart .catGrid .subMenu span:hover { color: #0095c9; background-color: #f2f2f2 !important; } .splitDialog .ele .mainCatSelect, .PfmTurnoverChart .ele .mainCatSelect { background-color: #f2f2f2 !important; background-image: url(images/icons/icon-minus-1.png); background-repeat: no-repeat; background-position: right 15px center; } .splitDialog .ele .subCat:hover, .PfmTurnoverChart .ele .subCat:hover { background-color: #f2f2f2 !important; } .splitDialog .catGrid .options, .PfmTurnoverChart .catGrid .options { border-top-color: transparent; background-color: #fff; background-image: none !important; border: 1.5px solid #d1d1d1 !important; border-top-color: transparent !important; max-height: 385px; overflow-y: scroll; overflow-x: hidden; font-weight: 500; border-radius: 0px !important; margin-left: -16px !important; } /*#endregion PFM*/ /*#region Funds*/ .FutureFundsTurnover, .InvestmentFundsTurnover { position: relative; background-position: 25px 18px; visibility: hidden; } .FutureFundsTurnover thead, .InvestmentFundsTurnover thead { display: none; } .FutureFundsTurnover tbody tr td:nth-child(3), .InvestmentFundsTurnover tbody tr td:nth-child(3) { padding-right: 20px; } .inv-funds { width: 60% !important; } .InvestmentUnitHistory { visibility: hidden; margin-bottom: 0px !important; } .InvestmentUnitHistory .col-fix-size-1 { float: left; width: 310px; } .InvestmentUnitHistory .filterRegion { padding-top: 30px; } .InvestmentUnitHistory .btnExecuteFilter { width: 140px !important; padding: 15px 10px; display: inline-block; border: none; font-family: 'futura', sans-serif; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; margin-right: 0; } .InvestmentUnitHistory #chartMenu { display: none !important; } .InvestmentUnitHistory .tableFilter { border-bottom: none; } .gvFutureFundsTurnoverPreview tr { cursor: pointer; } .FutureFundsContracts { visibility: hidden; } /*#endregion Funds*/ /*#region support*/ .support-dialog { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; overflow-x: hidden; } .support-dialog .ui-dialog-titlebar { display: none; } .support-dialog .ui-dialog-content { padding: 0; overflow-x: hidden !important; } .support-dialog .close { font-family: "futura", sans-serif; color: #000; line-height: 25px; position: absolute; right: 90px; text-align: center; top: 40px; width: 24px; text-transform: uppercase; font-weight: bold; font-size: 14px; } .support-dialog .close:after { content: ""; background: url(images/icons/close.png); background-repeat: no-repeat; background-size: 20px; padding: 3px 20px; margin-left: 10px; } .support-dialog .close:focus { outline: none; } .support-dialog .support-head { width: 100%; text-align: center; transition: all ease 0.3s; padding-top: 27px; box-sizing: border-box; } .support-dialog .support-head h1 { float: none; font-weight: bold; font-size: 25px; padding-top: 10px; box-sizing: border-box; color: #000; margin-bottom: 20px; } .support-dialog .container-scroll { overflow-y: scroll; width: 100%; padding: 0 7%; margin: 0 auto; height: 90vh; box-sizing: border-box; } .support-dialog .container-scroll .support-cards { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; margin-top: 42px; margin-bottom: 50px; } .support-dialog .container-scroll .support-cards p { flex-grow: 1; font-size: 15px; line-height: 24px; color: #7b7b7b; padding: 30px 0; box-sizing: border-box; font-family: "futura", sans-serif; letter-spacing: 1px; margin-bottom: 10px; } .support-dialog .container-scroll .support-cards h3 { margin-left: 50px; color: #000; text-transform: none; font-weight: bold; margin-bottom: 10px; font-size: 17px; font-family: "futura", sans-serif; } .support-dialog .container-scroll .support-cards .support-cards_card { border: 1px solid #d1d1d1; width: 32.6%; float: left; margin-left: 1%; flex-direction: column; display: flex; padding: 30px 20px 25px 20px; box-sizing: border-box; } .support-dialog .container-scroll .support-cards .support-cards_card .group-inner { margin-bottom: 0; } .support-dialog .container-scroll .support-cards .support-cards_card .support-cards_card_title div { height: 30px; width: 30px; float: left; background-repeat: no-repeat !important; background-size: 30px auto !important; } .support-dialog .container-scroll .support-cards .support-cards_card .support-cards_card_title div.tel-icon { background: url(images/icons/tel-icon-3.png); } .support-dialog .container-scroll .support-cards .support-cards_card .support-cards_card_title div.message-icon { background: url(images/icons/message-icon-1.png); } .support-dialog .container-scroll .support-cards .support-cards_card .support-cards_card_title div.chat-icon { background: url(images/icons/chat-icon.png); } .support-dialog .container-scroll .support-cards .support-cards_card:first-child { margin-left: 0%; } .support-dialog .container-scroll .support-questions { text-align: center; } .support-dialog .container-scroll .support-questions h1 { color: #000; font-weight: bold; font-size: 25px; margin-bottom: 10px; font-family: "futura", sans-serif; } .support-dialog .container-scroll .support-questions .account-list-2 { border-top: 1px solid #e6e6e6; background: #e6e6e6; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box { border-left: none; padding: 20px 20px 0px 20px; transition: all ease 0.3s; background: #fff; border-bottom: 1px solid #e6e6e6; min-height: 33px; opacity: 0.4; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box.active, .support-dialog .container-scroll .support-questions .account-list-2 .account-box:hover { opacity: 1; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box:hover .acc-name { padding-left: 20px; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 { padding: 0 0; border-bottom: 0; cursor: pointer; position: relative; height: 24px; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .question-title { width: 90%; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .question-title .acc-name { text-align: left; font-family: "futura", sans-serif; transition: all ease 0.5s; font-size: 20px; line-height: 24px; color: #000; margin-bottom: 0; text-overflow: ellipsis; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .col { float: left; height: auto; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .more-details { width: 10%; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .more-details p { font-size: 11px; color: #0095c9; text-transform: uppercase; font-family: inherit; overflow: visible; text-overflow: ellipsis; white-space: nowrap; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .account-slat-1 .more-details p:after { content: ""; background-image: url(images/icons/arrow-bottom-7.png); background-repeat: no-repeat; background-size: 10px; height: 7px; width: 10px; display: inline-block; margin-left: 15px; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .hidden-content { font-size: 13px; text-align: left; line-height: 15px; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .hidden-content .inner { text-align: left; padding: 20px; } .support-dialog .container-scroll .support-questions .account-list-2 .account-box .hidden-content .inner p { margin-bottom: 20px; line-height: 20px; font-size: 15px; font-family: "futura", sans-serif; } .main-wrapper { margin-top: 56px; } .login-main { position: relative; padding-left: 95px; margin-top: 0; overflow: hidden; } /*#endregion support*/ /*#region responsive*/ @media only screen and (max-width: 1300px) { .menu-open #content_wrap, .menu-hover #content_wrap { width: calc(100% - 0px) !important; /* transform: translateX(240px) !important; -ms-transform: translateX(240px) !important; -moz-transform: translateX(240px) !important; -o-transform: translateX(240px) !important; -webkit-transform: translateX(240px) !important;*/ } } @media only screen and (max-width: 1200px) { .btn-1.color-6.messahe-hub { width: 35%; } .gvStatementList .clientGrid tbody span.icon-right-wrapper { right: -20px; } .input-wrap.message-hub { width: 60%; } .ActiveNoticesOverviewV4 .s-widget-body { min-height: 342px; } .ActiveNoticesOverviewV4 .s-widget-body .widget-tutorial-slider .widget-inner { height: 342px !important; } .ActiveNoticesOverviewV4 .s-widget-body .widget-tutorial-slider .widget-inner .slider .slick-list { height: 342px !important; } .ActiveNoticesOverviewV4 .s-widget-body .widget-tutorial-slider .widget-inner .slider .slick-list .slide { height: 293px; } } @media only screen and (min-width: 980px) { .PaymentTransferV2 .slick-track { height: 87px !important; } .PfmTurnoverChart .s-widget.DateRange { width: 248px !important; } .PfmTurnoverChart .s-widget.Chart { width: calc(100% - 248px); } } @media only screen and (max-width: 980px) { .info-button-wrap .info-button { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; top: auto; right: auto; left: 0; bottom: 5px; } .Products .acc-nav .nav-arr { width: 50px; height: 50px; margin-top: -25px; } .Products .acc-nav #arr-prev { margin-left: -290px; } .Products .acc-nav #arr-next { margin-right: -290px; } .Products .list-tab .custom-table .account-col { width: 100%; } .Products .list-tab .custom-table .acc-number-col { width: 40%; } .Products .list-tab .custom-table .button-col { width: 60%; } .Products .list-tab .account-icon { left: 10px; } .CardBalancePreviewV2 .custom-table .account-col, .AccountBalancePreviewV3 .custom-table .account-col, .LoanBalancePreviewV2 .custom-table .account-col, .SecuritiesBalancePreview .custom-table .account-col { width: 100%; } .CardBalancePreviewV2 .custom-table .acc-number-col, .AccountBalancePreviewV3 .custom-table .acc-number-col, .LoanBalancePreviewV2 .custom-table .acc-number-col, .SecuritiesBalancePreview .custom-table .acc-number-col { width: 40%; } .CardBalancePreviewV2 .custom-table .button-col, .AccountBalancePreviewV3 .custom-table .button-col, .LoanBalancePreviewV2 .custom-table .button-col, .SecuritiesBalancePreview .custom-table .button-col { width: 60%; } .CardBalancePreviewV2 .account-icon, .AccountBalancePreviewV3 .account-icon, .LoanBalancePreviewV2 .account-icon, .SecuritiesBalancePreview .account-icon { left: 10px; display: none; } .SecuritiesBalancePreview .custom-table .col-ss-12 { width: 100%; text-align: center; } .SecuritiesBalancePreview .custom-table .col-mm-12 { width: 100%; } .SecuritiesBalancePreview .custom-table .col-mm-8 { width: 66%; } .SecuritiesBalancePreview .custom-table .col-mm-7 { width: 58%; } .SecuritiesBalancePreview .custom-table .col-mm-5 { width: 41%; } .SecuritiesBalancePreview .custom-table .col-mm-4 { width: 33%; } .SecuritiesBalancePreview .custom-table .col-mm-3 { width: 25%; } .TokenList .token { box-sizing: border-box; overflow: hidden; } .TokenList .token i { transform: none; top: 20px; } .TokenList .token .button-wrap { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: relative; right: auto; top: auto; float: right; margin-top: 20px; } .PersonalSettingsV3 .checkbox-bar .custom-check-label { text-align: center; width: 32%; margin-right: 0; padding-right: 0; padding-bottom: 50px; } .PersonalSettingsV3 .checkbox-bar .custom-check-label .custom-checkbox-wrapper { left: 50%; transform: translateX(-50%); } .Accounts .list-tab .custom-table .account-col { width: 100%; padding-left: 50px; } .Accounts .list-tab .custom-table .checkbox { left: 10px; } .Accounts .list-tab .acc-number-col { width: 100%; } .Accounts .list-tab .button-col { display: none; } .support-dialog .support-cards_card { width: 100% !important; } .support-dialog .support-cards_card:nth-child(2) { width: 49% !important; margin-left: 0% !important; margin-top: 2%; } .support-dialog .support-cards_card:nth-child(3) { width: 49% !important; margin-left: 2% !important; margin-top: 2%; } .support-dialog .support-questions .col { float: none !important; } .support-dialog .support-questions .acc-name { font-size: 15px !important; line-height: 20px !important; margin-bottom: 10px !important; } .support-dialog .support-questions .account-box { min-height: 63px !important; } .support-dialog .support-questions .account-box .inner { margin-top: 20px; } .profile-zone .k-tabstrip .k-tabstrip-items .k-item { padding: 10px 20px; } .profile-zone .k-tabstrip .k-tabstrip-items .k-link { font-size: 14px; } .profile-zone .user-profile-wrap { padding-left: 0; padding-top: 115px; text-align: center; } .profile-zone .user-profile-wrap .user-profile-tag { transform: translateX(-50%); position: absolute; top: 0; left: 50%; width: 85px; height: 85px; font-size: 30px; line-height: 85px; } .profile-zone .user-profile-wrap .user-profile-title { overflow: hidden; text-overflow: ellipsis; } .payment-overview-zone .k-tabstrip .k-link { font-size: 14px; } .payment-slider .slide { display: block; } .payment-slider .slide-left, .payment-slider .slide-right { float: none; width: 100%; text-align: center; margin-bottom: 30px; } .payment-slider .slider-container { padding: 0; width: 94%; max-width: 300px; margin: auto; } .payment-slider.type-2 .slider-container { padding: 0 20px; } .plan-text .key, .plan-text .value { float: none; } .plan-text .key { margin-bottom: 10px; } .PfmTurnoverChart .DateRange { width: 100% !important; } .PfmTurnoverChart .DateRange .filterRegion { width: calc(94% - 40px) !important; } .PfmTurnoverChart .s-widget.Chart { width: 100% !important; } .PfmTurnoverChart #gvFinanceTurnover .clientGrid th:nth-child(3) { display: none; } .PfmTurnoverChart #gvFinanceTurnover .clientGrid td:nth-child(3) { display: none; } } @media only screen and (max-width: 900px) { .PaymentLimits .payment-limits .payment-limit-container { display: block; } .PaymentLimits .payment-limits .uk-width-3-6, .PaymentLimits .payment-limits .uk-width-2-6, .PaymentLimits .payment-limits .uk-width-1-6 { width: 100%; } .PaymentLimits .payment-limits .uk-width-2-6, .PaymentLimits .payment-limits .uk-width-1-6 { padding-left: 0; } .PaymentLimits .payment-limits .uk-width-1-6 { position: relative; top: -20px; } } @media only screen and (min-width: 801px) { .ui-dialog.right-dialog.details-dialog { /* width: 800px !important;*/ } .ui-dialog.right-dialog.creditor-temlate-dialog, .ui-dialog.right-dialog.short-dialog { width: 440px !important; } .InvestmentFunds .button-col { width: 41% !important; } .InvestmentFunds .account-col { width: 59% !important; } } @media only screen and (max-width: 800px) and (min-width: 601px) { .ui-dialog.right-dialog.undue-liabilities-dialog, .ui-dialog.right-dialog.reserved-dialog, .ui-dialog.right-dialog.details-dialog { width: 100% !important; } .InvestmentFunds .button-col { width: 41% !important; } .InvestmentFunds .account-col { width: 59% !important; } } @media only screen and (max-width: 600px) { .btnShowCardBalaceGrid { width: 100% !important; /*right: 0px !important;*/ } .ui-dialog.right-dialog.undue-liabilities-dialog, .ui-dialog.right-dialog.reserved-dialog, .ui-dialog.right-dialog.details-dialog { width: 100% !important; } .ui-dialog.right-dialog.undue-liabilities-dialog .col, .ui-dialog.right-dialog.reserved-dialog .col, .ui-dialog.right-dialog.details-dialog .col { padding-left: 0px !important; width: 100%; } .undue-liabilities-dialog .ui-dialog-buttonset button, .reserved-dialog .ui-dialog-buttonset button, .short-dialog .ui-dialog-buttonset button, .filter-dialog .ui-dialog-buttonset button { left: 20px; } .AccountLastChanges td:nth-child(4) { width: 30%; white-space: nowrap !important; } .AccountLastChanges td:nth-child(3) .title { max-width: 100% !important; } .profile-zone .attachment-card { max-width: 195px; padding-left: 50px; } } @media only screen and (max-width: 1270px) and (min-width: 951px) { .PaymentOrderV3 .custom-form .inner .btnOrderExecute { width: 85%; } } @media only screen and (max-width: 1270px) { .PaymentOrderV3 .custom-form .inner { width: 100%; } .PaymentOrderV3 .custom-form .inner .left-col { width: 43%; } .PaymentOrderV3 .custom-form .inner .right-col { width: 42%; } .PaymentOrderV3 .custom-form .inner .checkbox-group { display: block; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2.col-fix-size-6 { margin-top: -47px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .check-wrap-1.col { width: 100%; margin-bottom: 40px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .check-wrap-1.col.col-fix-size-5 { right: 0px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .info-icon.col { right: -8px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .info-icon.col-2 { float: right; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .col.col-ls-8.col-mm-12 { width: 100%; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .col.col-ls-8.col-mm-12.col-fix-size-4 { margin-bottom: 20px; } } @media only screen and (max-width: 1400px) { .CurrencyExchangeV2 .currency-filter-inner .input-wrapper { width: 20%; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box { width: 20%; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper { left: 0; transform: translateX(0); } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper::after { left: 37px; transform: translateX(0); } } @media only screen and (max-width: 1200px) { .CurrencyExchangeV2 .currency-table-wrapper, .exchangeRate .currency-table-wrapper { overflow-x: auto; } .CurrencyExchangeV2 .currency-form .btn-1, .exchangeRate .currency-form .btn-1 { margin-bottom: 16px; } .CurrencyExchangeV2 .currency-filter-inner .input-wrapper, .exchangeRate .currency-filter-inner .input-wrapper { width: 23%; margin-bottom: 16px; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box, .exchangeRate .currency-filter-inner .currency-filter-box { width: 23%; margin-bottom: 16px; } .exchangeRate { padding: 0px 0px 0px 70px !important; } } @media only screen and (max-width: 1000px) { .CurrencyExchangeV2 .currency-filter-inner .input-wrapper { width: 31%; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box { width: 31%; } } @media only screen and (max-width: 900px) { .gvStatementList { overflow-x: auto; } .gvStatementList .clientGrid { min-width: 900px; } } @media only screen and (max-width: 800px) { .CurrencyExchangeV2 .currency-filter-inner .input-wrapper, .exchangeRate .currency-filter-inner .input-wrapper { width: 30%; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box, .exchangeRate .currency-filter-inner .currency-filter-box { width: 30%; } .exchangeRate { padding: 0px !important; } } @media only screen and (max-width: 950px) { .PaymentOrderV3 .custom-form .inner { width: 81% !important; } .PaymentOrderV3 .custom-form .inner .left-col { width: 100% !important; } .PaymentOrderV3 .custom-form .inner .right-col { width: 100% !important; padding-left: 0px; } .PaymentOrderV3 .custom-form .inner .checkbox-group { display: block; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2.col-fix-size-6 { margin-top: -47px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .check-wrap-1.col { width: 100%; margin-bottom: 40px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .check-wrap-1.col.col-fix-size-5 { right: 0px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .info-icon.col-fix-size-8 { right: 19px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .col.col-ls-8.col-mm-12 { width: 100%; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .col.col-ls-8.col-mm-12.col-fix-size-4 { margin-bottom: 20px; } } @media only screen and (max-width: 720px) { .PaymentOrderV3 .custom-form .inner .uk-width-1-6 .input-wrap.type-2 { width: 87%; } .PaymentOrderV3 .custom-form .inner .uk-width-5-6 { padding-left: 25px; } .PaymentOrderV3 .custom-form .inner .custom-grid.type-2 .col.col-ls-8.col-mm-12 .input-wrap.type-2 { width: 87%; } .exchangeRate { padding: 0px 5px 0px 0px !important; } } @media only screen and (max-width: 441px) { .PaymentOrderV3 .custom-form .inner .input-wrap-payment { width: 100%; } .PaymentOrderV3 .custom-form .inner .uk-width-5-6 { padding-left: 25px; } } @media only screen and (max-width: 440px) { .ui-dialog.right-dialog.creditor-temlate-dialog, .ui-dialog.right-dialog.short-dialog, .ui-dialog.right-dialog.filter-dialog { width: 100% !important; } } @media only screen and (max-width: 755px) { .widget-tabs.type-2 { display: flex; } .widget-tabs.type-2 li { float: left; width: 25%; line-height: 12px; padding: 10px 5px; } .widget-tabs.type-2 li a { font-size: 14px; } .widget-tabs.type-4 { display: flex; } .widget-tabs.type-4 li a { font-size: 14px; } .widget-tabs .button-wrap li { width: auto; } .user-profile-wrap .btn-1.color-6 { width: 100%; float: left; margin-left: auto; margin-top: 20px; } .user-profile-wrap img { transform: translateX(-50%); position: absolute; top: 0; left: 50%; width: 85px; height: 85px; } } @media only screen and (min-width: 721px) { .chart-tab .slick-slide { height: 330px; } .splitDialog .catGrid .options { width: 227.7px !important; } .splitDialog .catGrid .options, .PfmTurnoverChart .catGrid .options { top: 40px !important; left: 9px !important; } } @media only screen and (max-width: 720px) { .s-page-host:not(.login) { padding: 10px 10px 0 10px; } .s-page-host:not(.login) .s-widget { margin-bottom: 10px; } .sticky-header-wrap { width: calc(100% - 70px); margin-left: 100px; } .sticky-header-wrap .main-peace { max-width: none; width: calc(100% - 190px); padding: 5px 20px; padding-left: 60px; } .sticky-header-wrap .main-peace .icon { left: 0px; } .sticky-header-wrap .sticky-dropdown { left: 40px; width: calc(100% - 200px); } .sticky-header-wrap .button-5 { font-size: 14px; right: 50px; } .CreditorTemplateManaging .clientGrid .tag { margin-right: 0; margin-left: 10px; } .CreditorTemplateManaging.dashboard-widget button { opacity: 1; } .CreditorTemplateManaging.dashboard-widget th:last-child, .CreditorTemplateManaging.dashboard-widget td:last-child { width: 120px; } .CreditorTemplateManaging:not(.dashboard-widget) .clientGrid .name { width: calc(100% - 120px); } .CreditorTemplateManaging:not(.dashboard-widget) .custom-form { padding-left: 20px !important; padding-right: 20px !important; } .CreditorTemplateManaging:not(.dashboard-widget) .custom-form .uk-width-5-6 { padding-left: 25px !important; } .CurrencyExchangeV2 { /* th:nth-child(5), td:nth-child(5) { display: none !important; }*/ } .CurrencyExchangeV2 .inner.type-2 { padding: 0 20px; } .CurrencyExchangeV2.dashboard-currency-exchange .clientGrid tr th:nth-child(4), .CurrencyExchangeV2.dashboard-currency-exchange .clientGrid tr td:nth-child(4) { display: none !important; } .Products .chart-tab .account-name { top: -20px; } .Products .chart-tab .chart-slider { width: 100%; } .Products .chart-tab .chart-wrap .gauge-chart { width: 360px !important; height: 260px !important; } .Products .chart-tab .chart-wrap .chart-content { top: 140px; } .Products .chart-tab .chart-wrap .chart-content .val { font-size: 20px; } .Products .chart-tab .chart-wrap .chart-content .small { font-size: 14px; } .Products .chart-tab .chart-wrap .chart-content .currencySelect:after { top: 10px; } .Products .chart-tab .chart-wrap .chart-content .value-menu { right: 0; } .Products .chart-tab .slick-slide { height: 310px; } .Products .chart-tab .slide-inner { position: relative; top: 20px; } .Products .chart-tab .slick-dots { width: 100%; position: absolute; bottom: 9px; border: none; } .Products .chart-tab .acc-nav #arr-prev { margin-left: -250px; } .Products .chart-tab .acc-nav #arr-next { margin-right: -250px; } .profile-zone .profile-zone-header { padding-right: 20px; padding-left: 20px; } .profile-zone .contact-data { padding-right: 20px; padding-left: 20px; } .profile-zone .k-tabstrip .k-tabstrip-items { padding-left: 20px; } .profile-zone .k-tabstrip .k-tabstrip-items .k-item { padding-left: 20px; padding-right: 20px; } .profile-zone .change-password-dialog { padding-left: 20px; padding-right: 20px; } .profile-zone .change-password-dialog .uk-width-3-6 { width: 100%; } .profile-zone .change-password-dialog .info-icon { display: none; } .Chart .chartView { padding: 0 20px; } .exchange-office-zone .s-widget { margin-bottom: 0 !important; } .FXTrading .inner { padding-left: 20px !important; padding-right: 20px !important; } .FXTradingCurrencyHistory { margin-bottom: 0 !important; } .FXTradingCurrencyHistory .inner.type-2 { padding: 0 20px; } .PaymentLimits .payment-limits { padding-left: 20px; padding-right: 20px; } .PaymentLimits .info-icon { display: none; } .PersonalSettingsV3 .inner { padding-left: 20px; padding-right: 20px; } .TokenList .token { padding: 20px 20px 20px 70px; } .TokenList .token i { left: 15px; } .TokenList .inner-padding-5 { padding-left: 20px; padding-right: 20px; } .support-dialog .support-cards_card:nth-child(2), .support-dialog .support-cards_card:nth-child(3) { width: 100% !important; margin-left: 0% !important; } .buy-hov-modal .custom-grid.type-2 .col.timeConstraintContainer:nth-child(even) { padding-left: 0; } .buy-hov-modal .hovTypeContainer .custom-radio-1 .radio { width: 100% !important; } .SecuritiesBalancePreview .custom-table .col-ss-6 { width: 50%; } .SecuritiesBalancePreview .custom-table .account-col.type-2 p, .SecuritiesBalancePreview .custom-table .ss-center p { text-align: center !important; } .Reminders #calendar { /*thead { display: none; } td { display: block !important; width: calc(100vw - 20px); }*/ } .PaymentTransferV2 .payment-slider { padding-top: 50px; } .PaymentTransferV2 .custom-form .inner { padding-left: 20px; padding-right: 20px; } .P2PPaymentTransfer .p2pConfirmation, .P2PPaymentTransfer .custom-form .inner { padding-left: 20px; padding-right: 20px; } .P2PPaymentTransfer .payment-slider { padding-top: 56px; } .InflowsOverview .widget-tabs { display: flex; text-align: center; font-size: 14px; } .col-fix-size-1, .col-fix-size-2 { max-width: 100%; width: 100% !important; } .col-ss-12 { width: 100% !important; } .col-ss-4 { width: 33.33333333% !important; } .col-ss-hidden { display: none !important; } .custom-table .col-text.text-5 { font-size: 12px !important; } /*Payments*/ .widget-payment .page-container { padding: 10px 2% 0 2%; } .widget.widget-payment { padding-bottom: 20px; } .group-inner .info-wrap { display: none; } .form-actions { position: static; width: 100%; } .form-actions .btn-1 { width: 100%; margin-bottom: 10px; } .account-slat-1 .col-4 .btn-1 { min-width: 70px; } .dps .account-list .drag-padding-ls { padding-right: 20px; } .payment-options .hidden-content ul { zoom: 1; } .payment-options .hidden-content ul:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .payment-options .hidden-content li { float: left; width: 31.33%; max-width: 100%; margin-right: 0; margin-left: 0; } .payment-options .hidden-content li a { min-height: 160px; padding: 10px; } .payment-options .hidden-content li:not(:last-child) { margin-right: 3%; } .payment-account .col-left { width: 100%; } .payment-account .col-right { width: 100%; } .payment-account .col-right p { opacity: 1; text-align: right; } .widget-payment .inner { padding-left: 20px; padding-right: 20px; } .widget-payment .inner.type-2 { padding-left: 20px; padding-right: 20px; } .custom-form .group { width: 100%; } .custom-form .group .info-icon { display: none; } .custom-form div[class^="uk-width"] { width: 100%; } .message-controls .msg-button { position: absolute; padding: 15px 7px; font-size: 14px; min-height: 40px; box-sizing: border-box; } .message-controls .msg-button span { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } .message-controls .msg-button span i { display: none; } .message-controls .checkbox { left: 2px; } .message .archive-button { opacity: 1; visibility: visible; right: 35px; width: 32px; height: 24px; } .message .title { font-size: 14px; line-height: 16px; } .message .title span { font-size: 13px; } .splitDialog .subcategory-row { position: static; margin-bottom: 0px; padding-bottom: 0px; } .splitDialog .input-wrap, .splitDialog .remove-button, .splitDialog .drag-bar { position: relative !important; display: inline-block !important; } .splitDialog .drag-bar { width: calc(100% - 221px) !important; left: 20px !important; top: 50px !important; } .splitDialog .remove-button { float: right; top: -121px; } .splitDialog .options, .splitDialog .custom-dropdown { display: block; position: relative !important; margin-top: 20px; margin-left: 53px; width: 95% !important; } .splitDialog .catGrid { width: 80%; } .splitDialog .options { top: -5px !important; left: 0px !important; width: 125% !important; } .col-ss-12 { width: 100%; } .col-ss-11 { width: 91.66666667%; } .col-ss-10 { width: 83.33333333%; } .col-ss-9 { width: 75%; } .col-ss-8 { width: 66.66666667%; } .col-ss-7 { width: 58.33333333%; } .col-ss-6 { width: 50%; } .col-ss-5 { width: 41.66666667%; } .col-ss-4 { width: 33.33333333%; } .col-ss-3 { width: 25%; } .col-ss-2 { width: 16.66666667%; } .col-ss-1 { width: 8.33333333%; } .col-ss-hidden { display: none !important; } .ss-left { text-align: left !important; } .ss-center { text-align: center !important; } } @media only screen and (max-width: 600px) { /*dialog*/ .ui-dialog.no-yes-dialog { width: 100vw !important; height: auto; top: 0; left: 0; display: block; box-sizing: border-box; overflow: hidden; } .sticky-header-wrap { margin-left: 60px; } .sticky-header-wrap .main-peace { max-width: none; width: 100%; padding-left: 0; border: none; background: #fff200; } .sticky-header-wrap .main-peace .icon { display: none; } .sticky-header-wrap .sticky-dropdown { left: -20px; width: calc(100% - 10px); } .sticky-header-wrap .button-5 { display: none; } .monthlyBillDialog .blueHover.custom-grid.type-2 .col:nth-child(even) { width: 100%; float: none; } .Products .chart-tab .acc-nav .nav-arr { width: 30px; height: 30px; margin-top: -15px; } .Products .chart-tab .acc-nav #arr-prev { margin-left: 0; left: 10px; } .Products .chart-tab .acc-nav #arr-next { margin-right: 0; right: 10px; } .Products .list-tab .custom-table .col { padding: 4px 15px; } .Products .list-tab .custom-table .acc-number-col { width: 100%; padding-left: 30px; padding-right: 30px; } .Products .list-tab .custom-table .button-col { width: 100%; } .Products .list-tab .custom-table .button-col .btn-1 { width: 100%; position: static; top: 0; margin-top: 15px; margin-bottom: 10px; } .Products .list-tab .custom-table p { text-align: center !important; } .Products .value-menu { right: 10px; } .InvestmentFunds .account-col { width: 100% !important; } .InvestmentFunds .custom-table .list-item .left, .InvestmentFunds .custom-table .list-item .p, .CardBalancePreviewV2 .custom-table .list-item .left, .CardBalancePreviewV2 .custom-table .list-item .p, .AccountBalancePreviewV3 .custom-table .list-item .left, .AccountBalancePreviewV3 .custom-table .list-item .p, .LoanBalancePreviewV2 .custom-table .list-item .left, .LoanBalancePreviewV2 .custom-table .list-item .p, .SecuritiesBalancePreview .custom-table .list-item .left, .SecuritiesBalancePreview .custom-table .list-item .p { text-align: center !important; } .InvestmentFunds .custom-table .button-col .col-button, .CardBalancePreviewV2 .custom-table .button-col .col-button, .AccountBalancePreviewV3 .custom-table .button-col .col-button, .LoanBalancePreviewV2 .custom-table .button-col .col-button, .SecuritiesBalancePreview .custom-table .button-col .col-button { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; width: 100%; max-width: 100px; margin: auto; display: block; position: static; top: 0; margin-top: 15px; } .InvestmentFunds .custom-table .col, .CardBalancePreviewV2 .custom-table .col, .AccountBalancePreviewV3 .custom-table .col, .LoanBalancePreviewV2 .custom-table .col, .SecuritiesBalancePreview .custom-table .col { padding: 4px 15px; } .InvestmentFunds .custom-table .acc-number-col, .CardBalancePreviewV2 .custom-table .acc-number-col, .AccountBalancePreviewV3 .custom-table .acc-number-col, .LoanBalancePreviewV2 .custom-table .acc-number-col, .SecuritiesBalancePreview .custom-table .acc-number-col { width: 100%; padding-left: 30px; padding-right: 30px; } .InvestmentFunds .custom-table .button-col, .CardBalancePreviewV2 .custom-table .button-col, .AccountBalancePreviewV3 .custom-table .button-col, .LoanBalancePreviewV2 .custom-table .button-col, .SecuritiesBalancePreview .custom-table .button-col { width: 100%; } .InvestmentFunds .custom-table .button-col .btn-1, .CardBalancePreviewV2 .custom-table .button-col .btn-1, .AccountBalancePreviewV3 .custom-table .button-col .btn-1, .LoanBalancePreviewV2 .custom-table .button-col .btn-1, .SecuritiesBalancePreview .custom-table .button-col .btn-1 { width: 100%; position: static; top: 0; margin-top: 15px; margin-bottom: 10px; } .InvestmentFunds .custom-table p, .CardBalancePreviewV2 .custom-table p, .AccountBalancePreviewV3 .custom-table p, .LoanBalancePreviewV2 .custom-table p, .SecuritiesBalancePreview .custom-table p { text-align: center !important; } .InvestmentFunds .account-icon, .CardBalancePreviewV2 .account-icon, .AccountBalancePreviewV3 .account-icon, .LoanBalancePreviewV2 .account-icon, .SecuritiesBalancePreview .account-icon { left: 10px; } .SecuritiesBalancePreview .custom-table .has-button .btn-1 { display: block; position: static; margin: 10px 0; width: 100%; } .SecuritiesBalancePreview .custom-table .col-xs-6 { width: 50%; } .SecuritiesBalancePreview .custom-table .col-xs-12 { width: 100%; } .SecuritiesBalancePreview .custom-table .right { text-align: right !important; } .SecuritiesBalancePreview .custom-table .xs-left { text-align: left !important; } .SecuritiesBalancePreview .custom-table .xs-center p { text-align: center !important; } .CardStatements .clientGrid { /* td:nth-child(3), th:nth-child(3) { display: none; }*/ } .CardStatements .clientGrid td:nth-child(5) { width: 60px !important; } .CardStatements .clientGrid td { font-size: 12px; } .CardStatements .clientGrid td .text { display: none; } .CurrencyExchangeV2 .currency-filter-inner .input-wrapper, .exchangeRate .currency-filter-inner .input-wrapper { width: 100%; margin-right: 0; } .CurrencyExchangeV2 .currency-filter-inner .btn-1, .exchangeRate .currency-filter-inner .btn-1 { margin-left: 0px; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box, .exchangeRate .currency-filter-inner .currency-filter-box { width: 100%; margin-right: 0; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper, .exchangeRate .currency-filter-inner .currency-filter-box .input-datepicker-wrapper { left: 50%; transform: translateX(-50%); } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper::after, .exchangeRate .currency-filter-inner .currency-filter-box .input-datepicker-wrapper::after { left: 50%; transform: translateX(-50%); } .exchangeRate { padding: 0px !important; } .exchangeRate .currency-filter-inner { width: 96%; } .Accounts .list-tab .custom-table .col { padding: 4px 15px; } .Accounts .list-tab .custom-table .account-col p, .Accounts .list-tab .custom-table .acc-num { text-align: center !important; } .Accounts .list-tab .custom-table .acc-title { padding-left: 20px; } .FXTradingCurrencyHistory .date-container { display: block !important; } .profile-zone .k-tabstrip-items { visibility: hidden; height: 0; margin: 0 !important; } .profile-zone .tabs-dropdown { display: inherit !important; padding: 30px 20px 0 20px; border-bottom: 2px solid #efefef; } .profile-zone .tabs-dropdown .dd-title { display: block; position: relative; font-size: 30px; cursor: pointer; margin-bottom: 20px; } .profile-zone .tabs-dropdown .dd-title:before { top: 50%; transform: translateY(-50%); content: ''; width: 0; height: 0; border: 0; background: none; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000000 transparent transparent transparent; position: absolute; right: 15px; } .profile-zone .tabs-dropdown .widget-tabs { border: none; margin-bottom: 0; } .profile-zone .tabs-dropdown .widget-tabs li { display: block; width: 100%; text-align: left; padding: 10px 20px; box-sizing: border-box; } .profile-zone .tabs-dropdown .widget-tabs li:hover:after { height: 0; } .profile-zone .tabs-dropdown .widget-tabs li a { font-size: 20px; } .profile-zone .tabs-dropdown .widget-tabs li a:hover { cursor: pointer; } .payment-overview-zone .k-tabstrip .k-tabstrip-items .k-item { display: block; text-align: left; border-bottom: none; } .payment-overview-zone .k-tabstrip .k-tabstrip-items .k-item .k-link { font-size: 20px; } .payment-slider { /*padding-top: 100px;*/ } .payment-slider .slide-control { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; top: 20px; width: 50px; height: 50px; display: none !important; } .payment-slider .slide-prev, .payment-slider .slide-next { visibility: hidden; } .payment-slider .slide-prev { left: auto; right: 100px; } .payment-slider .slide-next { right: 30px; } .payment-slider .tag-title { font-size: 22px; line-height: 35px; padding-left: 0; } .widget-payment .inner.type-2 { padding: 0 20px; } .widget-links .link { font-size: 16px; padding: 20px 20px; } .widget-links .icon { right: 20px; } .clientGrid thead th, .clientGrid thead td { font-size: 12px !important; } .custom-table .col { padding-top: 6px; padding-bottom: 6px; } } @media only screen and (max-width: 500px) { .ui-dialog.info-dialog.error-dialog, .ui-dialog.error-dialog.information, .ui-dialog.info-dialog.success-dialog, .ui-dialog.success-dialog.information { width: auto !important; } } @media only screen and (max-width: 480px) { .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper { left: 52%; } .CurrencyExchangeV2 .currency-filter-inner .currency-filter-box .input-datepicker-wrapper::after { left: 52%; } } @media only screen and (max-width: 450px) { .btn-1.color-6.messahe-hub { width: 100%; margin-top: 15px; } .input-wrap.message-hub { width: 100%; margin-top: 15px; } .bills-list .expand-trigger { left: auto; right: 0; } .bills-list .checkbox-1 { left: 0; } .bills-list .col-tag { padding-left: 26px; } .bills-list .col-buttons .text-3 { padding-left: 10px; font-size: 18px; } .bills-list .row-1:before { left: auto; right: 0; } .bills-list .logo-icon-2 { width: 20px; height: 20px; top: 12px; right: 16px; background-size: 16px; } .custom-options a { font-size: 14px; } .message .title { font-size: 12px; line-height: 14px; } .message.attachment { padding-right: 70px; background-size: 12px; background-position: calc(100% - 5px) 5px; } .Products .chart-tab .chart-wrap .gauge-chart { width: 250px !important; height: 180px !important; } .Products .chart-tab .chart-wrap .chart-content { top: 115px; } .Products .chart-tab .slick-slide { height: 290px; } .Products .chart-tab .icon-2 { margin-left: 5px; } .Products .chart-tab .acc-icon { margin-right: 5px; } .CurrencyExchangeV2:not(.dashboard-currency-exchange) .currency-form .currency-filter-inner .input-wrapper .input-wrapper-inner .calendarFilter { height: 23px; } .TokenList .token .button-wrap { display: block; width: 100%; } .TokenList .token .button-wrap .button { width: calc(50% - 10px); font-size: 12px; margin-left: 10px; min-width: auto; } .TokenList .token .button-wrap .button:first-child { margin-left: 0; } .CreditorTemplateManaging button.edit, .CreditorTemplateManaging button.delete { font-size: 14px; } .UserInfo .s-widget-body .heading { font-size: 14px; } .FXTradingCalculator .currency.currency-left { padding-left: 20px; } .FXTradingCalculator .currency.currency-right { padding-right: 20px; } .FinanceRules .clientGrid tbody td:nth-child(2) { line-height: 20px; } .FinanceRules .clientGrid tbody td:nth-child(3), .FinanceRules .clientGrid tbody td:nth-child(4) { font-size: 14px; width: 70px; } .clientGrid tbody tr td { font-size: 14px; } .clientGrid tbody tr td .title { font-size: 14px; } .clientGrid tbody tr td .value { font-size: 14px; } .ui-dialog.right-dialog { margin-right: 0 !important; } .s-widget-title { font-size: 16px; } .s-widget { background-position-x: 17px !important; } .s-widget-header { padding-left: 40px !important; } .fast-payment-zone .s-widget-header.zone-header { background-position-x: 10px; } .exchange-zone .s-widget-header { background-position-x: 10px; } .payment-overview-zone .s-widget-header { background-position-x: 11px; } .statements-zone .s-widget-header { background-position-x: 7px; } .CardBalancePreviewV2 { background-position-x: 12px !important; } .input-select-wrap.type-2 { padding-right: 0; } .input-select-wrap.type-2 .select-4 { position: relative; left: 50%; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); position: relative; } .BudgetList .custom-table .text-1, .BudgetList .custom-table .text-2, .BudgetList .custom-table .text-3, .BudgetList .custom-table small { font-size: 12px !important; } .BudgetList .custom-table .transaction-btn { font-size: 14px !important; } .buy-hov-modal .custom-radio-1 .radio.has-input-2 { padding-right: 20px; } .buy-hov-modal .custom-radio-1 .radio.has-input-2 .input-wrap { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: relative; top: auto; right: auto; max-width: none; margin-top: 20px; } .buy-hov-modal .modal-inner-content { padding: 30px 30px 0 30px; } } /*#endregion responsive*/ .payment-slider.type-2 .slick-track, .payment-slider.type-2 .slick-track .slick-slide { width: 100% !important; } .tempName { font-family: "futura", sans-serif; font-size: 16px; letter-spacing: 0.5px; color: #494f5a; border-radius: 0; box-sizing: border-box; width: 95%; display: block; border: none; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; overflow: visible; max-height: 200px; overflow-y: auto; overflow-x: hidden; z-index: 1000 !important; } /*test*/ .app-version { display: none; position: absolute; right: 10px; bottom: 5px; color: #666; font-style: italic; font-size: 0.9em; } .predodobreni-krediti { /* Calendar style */ /* Data processing */ /* ================================================== =Media Queries ===================================================== */ } .predodobreni-krediti * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .predodobreni-krediti span.alpaca-field { display: block; vertical-align: middle; } .predodobreni-krediti .widget { padding-bottom: 1px; } .predodobreni-krediti html .ui-autocomplete { font-family: "futura", sans-serif; font-size: 16px; background-color: #fff; } .predodobreni-krediti html .ui-state-focus, .predodobreni-krediti html .ui-widget-content .ui-state-focus { background-color: #fffee6; border: 0; font-weight: 400; color: #000; font-size: 16px; } .predodobreni-krediti .row-grid { zoom: 1; margin-left: -18px; } .predodobreni-krediti .row-grid:after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .predodobreni-krediti .row-grid > * { padding-left: 18px; box-sizing: border-box; } .predodobreni-krediti .col { float: left; min-height: 1px; } .predodobreni-krediti .col-ls-12 { width: 100%; } .predodobreni-krediti .col-ls-11 { width: calc((100% / 12) * 11); } .predodobreni-krediti .col-ls-10 { width: calc((100% / 12) * 10); } .predodobreni-krediti .col-ls-9 { width: calc((100% / 12) * 9); } .predodobreni-krediti .col-ls-8 { width: calc((100% / 12) * 8); } .predodobreni-krediti .col-ls-7 { width: calc((100% / 12) * 7); } .predodobreni-krediti .col-ls-6 { width: calc(100% / 2); } .predodobreni-krediti .col-ls-5 { width: calc((100% / 12) * 5); } .predodobreni-krediti .col-ls-4 { width: calc((100% / 12) * 4); } .predodobreni-krediti .col-ls-3 { width: calc((100% / 12) * 3); } .predodobreni-krediti .col-ls-2 { width: calc((100% / 12) * 2); } .predodobreni-krediti .col-ls-1 { width: calc(100% / 12); } .predodobreni-krediti a { font-size: inherit; color: inherit; } .predodobreni-krediti input:focus, .predodobreni-krediti button:focus, .predodobreni-krediti textarea:focus { outline: none; } .predodobreni-krediti .icon-shoppingcart { background-image: url(images/krediti/icon-shoppingcart.png); background-size: 40px; } .predodobreni-krediti .icon-mobile { background-image: url(images/krediti/icon-mobile.png); background-size: 24px; } .predodobreni-krediti .icon-money { background-image: url(images/krediti/icon-money.png); background-size: 40px; } .predodobreni-krediti .icon-vault { background-image: url(images/krediti/icon-vault.png); background-size: 44px; } .predodobreni-krediti .icon-cards { background-image: url(images/krediti/icon-cards.png); background-size: 44px; } .predodobreni-krediti .icon-moneybag { background-image: url(images/krediti/icon-moneybag.png); background-size: 84px; } .predodobreni-krediti .icon-document { background-image: url(images/krediti/icon-document.png); background-size: 80px; } .predodobreni-krediti .icon-camera { background-image: url(images/krediti/icon-camera.png); background-size: 65px; } .predodobreni-krediti .icon-phone-1 { background-image: url(images/krediti/icon-phone-1.png); background-size: 18px; } .predodobreni-krediti .icon-bubble-1 { background-image: url(images/krediti/icon-bubble-1.png); background-size: 18px; } .predodobreni-krediti .icon-facebook-1 { background-image: url(images/krediti/icon-facebook-1.png); background-size: 10px; } .predodobreni-krediti .icon-facebook-1:hover { background-image: url(images/krediti/icon-facebook-2.png); } .predodobreni-krediti .icon-save { background-image: url(images/krediti/icon-save.png); background-size: 24px; } .predodobreni-krediti .icon-youtube-1 { background-image: url(images/krediti/icon-youtube-1.png); background-size: 20px; } .predodobreni-krediti .icon-youtube-1:hover { background-image: url(images/krediti/icon-youtube-2.png); } .predodobreni-krediti .icon-twitter-1 { background-image: url(images/krediti/icon-twitter-1.png); background-size: 21px; } .predodobreni-krediti .icon-twitter-1:hover { background-image: url(images/krediti/icon-twitter-2.png); } .predodobreni-krediti .icon-download { background-image: url(images/krediti/download.png); background-size: 21px; } .predodobreni-krediti .icon-man { background-image: url(images/krediti/icon-man.png); background-size: 16px; } .predodobreni-krediti .icon-clock { background-image: url(images/krediti/icon-clock.png); background-size: 20px; } .predodobreni-krediti .icon-card { background-image: url(images/krediti/icon-card.png); background-size: 20px; } .predodobreni-krediti .icon-mega { background-image: url(images/krediti/icon-mega.png); background-size: 81px; } .predodobreni-krediti .icon-chat { background-image: url(images/krediti/icon-chat.png); background-size: 75px; } .predodobreni-krediti .icon-calendar { background-image: url(images/krediti/icon-calendar.png); background-size: 90px; } .predodobreni-krediti .icon-puzzle { background-image: url(images/krediti/icon-puzzle.png); background-size: 90px; } .predodobreni-krediti .container-1 { width: calc(100% - 40px); max-width: 1170px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .container-2 { width: calc(100% - 40px); max-width: 770px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .container-3 { max-width: 595px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .container-4 { max-width: 380px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .container-5 { max-width: 1080px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; } .predodobreni-krediti .container-6 { position: relative; padding: 1px 60px; } .predodobreni-krediti .inner-margin-0 { margin-bottom: 0; } .predodobreni-krediti .inner-margin-1 { margin-bottom: 10px; } .predodobreni-krediti .inner-margin-2 { margin-bottom: 20px; } .predodobreni-krediti .inner-margin-3 { margin-bottom: 30px; } .predodobreni-krediti .inner-margin-4 { margin-bottom: 30px; } .predodobreni-krediti .inner-margin-5 { margin-bottom: 10px; } .predodobreni-krediti .inner-margin-6 { margin-bottom: 60px; } .predodobreni-krediti .inner-margin-7 { margin-bottom: 70px; } .predodobreni-krediti .inner-margin-8 { margin-bottom: 80px; } .predodobreni-krediti .inner-margin-9 { margin-bottom: 90px; } .predodobreni-krediti .inner-margin-10 { margin-bottom: 100px; } .predodobreni-krediti .top-padding-1 { padding-top: 20px; } .predodobreni-krediti .top-padding-2 { padding-top: 40px; } .predodobreni-krediti .top-padding-3 { padding-top: 60px; } .predodobreni-krediti .top-padding-4 { padding-top: 80px; } .predodobreni-krediti .top-padding-5 { padding-top: 100px; } .predodobreni-krediti #main { overflow: hidden; } .predodobreni-krediti .info-card.top-padding-6 { padding-top: 106px; } .predodobreni-krediti .info-card.fix { background-position: 50% 17%; background-size: 60px; border: none; min-height: 214px; position: relative; } .predodobreni-krediti .info-card.fix:after { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 74%; background: #dbdbdb; } .predodobreni-krediti .infos-row .col:last-child .info-card:after { display: none; } .predodobreni-krediti .icon-camera.fix { background-size: 48px; } .predodobreni-krediti .inner-margin-1.fix { margin-bottom: 7px; } .predodobreni-krediti .intro-section.fix { -webkit-box-shadow: 0px 0px 62px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 62px -9px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 62px -9px rgba(0, 0, 0, 0.25); position: relative; } .predodobreni-krediti .section.fix-2 { padding-bottom: 146px; } .predodobreni-krediti .button-1.fix span { font-weight: 100; vertical-align: top; } .predodobreni-krediti .value-slider-section.fix { padding-top: 68px; } .predodobreni-krediti .benefit-section { padding-top: 110px; padding-bottom: 100px; } .predodobreni-krediti .benefit-section .info-card.fix { background-size: 124px; padding-top: 180px; background-position: 50% 5%; } .predodobreni-krediti .benefit-section .info-card.fix:after { display: none; } .predodobreni-krediti .benefit-section .info-card.fix.benefit-ico-2 { background-position: 50% 12%; } .predodobreni-krediti .benefit-section .col-ls-4 { padding: 0 4.4%; } .predodobreni-krediti .benefit-section .title-border-1:after { left: calc(50% - 50px); } .predodobreni-krediti .benefit-section .title-3 { font-size: 18px; } .predodobreni-krediti .benefit-section .row-grid { max-width: 1200px; margin: auto; } .predodobreni-krediti .benefit-ico-1 { background-image: url(images/krediti/benefit-ico-1.png); background-size: 124px; } .predodobreni-krediti .benefit-ico-2 { background-image: url(images/krediti/benefit-ico-2.png); background-size: 124px; } .predodobreni-krediti .benefit-ico-3 { background-image: url(images/krediti/benefit-ico-3.png); background-size: 124px; } .predodobreni-krediti .section-2.padding-fix { padding-bottom: 80px; padding-top: 0; } .predodobreni-krediti .section-2.padding-fix-2 { padding-bottom: 60px; padding-top: 30px; } .predodobreni-krediti .container-2.fix-center { text-align: center; } .predodobreni-krediti .strong-fix strong { color: #000; background: #fff133; } .predodobreni-krediti .yellow-bg strong { background: #ffec00; padding: 0 5px; } .predodobreni-krediti .store-wrap { border: 3px solid #f2f4f5; padding: 40px; } .predodobreni-krediti .store-wrap .store-btn { float: left; width: 50%; } .predodobreni-krediti .store-wrap img { display: block; max-width: 100%; max-height: 60px; } .predodobreni-krediti .store-wrap .google-play img { margin-left: auto; margin-right: 8px; } .predodobreni-krediti .store-wrap .apple-store img { margin-right: auto; margin-left: 8px; } .predodobreni-krediti .section-2.padding-fix-3 { padding-bottom: 0; } .predodobreni-krediti .save-btn-2 { color: #0095c9; text-decoration: underline; } .predodobreni-krediti span { display: inline-block; vertical-align: middle; } .predodobreni-krediti .full { width: 100%; } .predodobreni-krediti .ib { display: inline-block; } .predodobreni-krediti .block { display: block; } .predodobreni-krediti .semi-bold { font-weight: 500; } .predodobreni-krediti .bold { font-weight: 700; } .predodobreni-krediti .icon-text { padding-left: 125px; background-repeat: no-repeat; background-position: 0 50%; max-width: 480px; } .predodobreni-krediti .text-changer { transition: opacity .5s ease; opacity: 1; } .predodobreni-krediti .text-changer.animating { opacity: 0; } .predodobreni-krediti .title-1 { float: none; border: none; font-size: 48px; font-weight: 700; line-height: 60px; text-shadow: -2px 2px 0px rgba(0, 0, 0, 0.4); } .predodobreni-krediti .title-2 { color: inherit; border: none; float: none; font-size: 30px; font-weight: 700; padding: 0; } .predodobreni-krediti .title-3 { font-size: 20px; font-weight: 700; } .predodobreni-krediti .title-4 { font-size: 20px; } .predodobreni-krediti .title-5 { font-size: 44px; font-weight: 700; } .predodobreni-krediti .text-1 { font-size: 16px; line-height: 24px; } .predodobreni-krediti .text-1 a { color: #0095c9; text-decoration: underline; } .predodobreni-krediti .text-2 { font-size: 18px; font-weight: 500; } .predodobreni-krediti .text-2 a { color: #0095c9; text-decoration: underline; } .predodobreni-krediti .text-3 { font-size: 14px; font-weight: 500; line-height: 1.7; text-transform: uppercase; } .predodobreni-krediti .text-3 a { display: inline-block; vertical-align: text-bottom; line-height: 9px; color: #0095c9; border-bottom: 2px solid #0095c9; } .predodobreni-krediti .text-3 .checkbox:not(.checkbox-2) { vertical-align: top; margin-right: 20px; margin-top: -2px; margin-bottom: 15px; } .predodobreni-krediti .checkbox-wrap { position: relative; padding-left: 50px; } .predodobreni-krediti .checkbox-wrap .checkbox { position: absolute; top: 18px; left: 0; } .predodobreni-krediti .link-1 { font-size: 16px; } .predodobreni-krediti .padding-1 { padding: 0 60px; } .predodobreni-krediti .cl-2 { color: #7b7b7b; } .predodobreni-krediti .cl-3 { color: #fff; } .predodobreni-krediti .cl-4 { color: #0095c9; } .predodobreni-krediti .cl-5 { color: #888; } .predodobreni-krediti .bg-cl-1 { background-color: #f2f4f5; } .predodobreni-krediti .checkbox-1 { transition: background-color .4s ease; position: relative; display: inline-block; width: 32px; height: 15px; border-radius: 16px; background-color: #dadada; cursor: pointer; vertical-align: middle; } .predodobreni-krediti .checkbox-1.checked { background-color: #c3b400; } .predodobreni-krediti .checkbox-1.checked mark { background-color: #ffec00; transform: translate3d(calc(100% - 7px), 0, 0); } .predodobreni-krediti .checkbox-1 mark { transition: transform .4s ease, background-color .4s ease; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); border-radius: 50%; position: absolute; left: -2px; top: -3px; display: inline-block; content: ""; width: 22px; height: 22px; background-color: #fff; } .predodobreni-krediti .checkbox-1 .cc-checkbox { display: none; } .predodobreni-krediti .checkbox-2 { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; display: inline-block; vertical-align: top; font-size: 14px; } .predodobreni-krediti .checkbox-2.checked mark { background: url(images/krediti/icon-check-1.png) no-repeat center; background-size: 18px; } .predodobreni-krediti .checkbox-2 mark { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; display: block; cursor: pointer; vertical-align: text-top; content: ""; width: 18px; height: 18px; border: 1px solid #d1d1d1; background-color: #fff; margin-right: 10px; } .predodobreni-krediti .checkbox-2 .cc-checkbox { display: none; } .predodobreni-krediti .checkbox-2.right-dir { zoom: 1; } .predodobreni-krediti .checkbox-2.right-dir:after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .predodobreni-krediti .checkbox-2.right-dir mark { float: right; margin: 0; margin-left: 10px; } .predodobreni-krediti .panel { padding: 30px 18px; } .predodobreni-krediti .panel-bg { padding: 22px 10px; background: url(images/krediti/pattern.png) 0 0; } .predodobreni-krediti .save-box { position: absolute; top: 28px; right: 0; margin-right: 0; } .predodobreni-krediti .save-box .save-btn { position: relative; display: inline-block; height: 53px; border: 1px solid #d1d1d1; transition: border-color .4s ease; background: transparent; font-size: 14px; line-height: 50px; font-weight: bold; color: #000; text-transform: uppercase; padding: 0 20px; margin: 0; } .predodobreni-krediti .save-box .save-btn:hover { border-color: #000; } .predodobreni-krediti .save-box .save-btn i { display: inline-block; width: 24px; height: 53px; background-position: center center; background-repeat: no-repeat; background-size: 100%; float: left; margin-right: 20px; } .predodobreni-krediti .save-box .tooltip { width: 280px; animation: nav-anim2 3s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0, 1, 1, 1); } .predodobreni-krediti .save-box .tooltip:after { right: 68px; } .predodobreni-krediti .tooltip { background: #ffec00; position: absolute; top: calc(100% + 14px); right: 0; padding: 25px 25px 10px; z-index: 20; } .predodobreni-krediti .tooltip p { font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 10px; } .predodobreni-krediti .tooltip button { background: transparent; padding: 5px 0; color: #000; text-transform: uppercase; margin: 0; } .predodobreni-krediti .tooltip button:first-child { float: left; } .predodobreni-krediti .tooltip button:last-child { float: right; } .predodobreni-krediti .tooltip:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 9px 11px 9px; border-color: transparent transparent #ffee00 transparent; position: absolute; bottom: 100%; } .predodobreni-krediti .jumbo-panel { position: relative; height: 440px; overflow: hidden; } .predodobreni-krediti .jumbo-panel .img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; top: 50%; transform: translate3d(0, -50%, 0); width: 100%; height: auto; } .predodobreni-krediti .jumbo-panel .title { text-align: center; transform: translate3d(0, -50%, 0); position: absolute; width: calc(100% - 40px); left: 20px; top: 50%; } .predodobreni-krediti .info-card { text-align: center; padding: 10px 30px; padding-top: 160px; min-height: 260px; background-repeat: no-repeat; background-position: 50% 20%; border: none; box-sizing: border-box; } .predodobreni-krediti .info-card .has-info { width: calc(100% + 50px); } .predodobreni-krediti .section { padding: 60px 0; padding-top: 75px; } .predodobreni-krediti .section-2 { padding: 50px 0; } .predodobreni-krediti .section-2.no-bottom-padding { padding-bottom: 0; } .predodobreni-krediti .value-slider-section { background-color: #f2f4f5; } .predodobreni-krediti .value-slider-wrap { border-bottom: 1px solid #fff; } .predodobreni-krediti .value-slider-wrap .title { float: left; } .predodobreni-krediti .value-slider-wrap input { text-align: right; float: right; max-width: 215px; } .predodobreni-krediti .value-slider-wrap .slider { width: 100%; float: left; } .predodobreni-krediti .value-slider-wrap .min-txt { float: left; } .predodobreni-krediti .value-slider-wrap .max-txt { float: right; } .predodobreni-krediti .value-wrap .input { text-align: right; float: right; max-width: 215px; } .predodobreni-krediti .hidden { display: none; } .predodobreni-krediti .button-wrap { zoom: 1; margin-left: -12px; padding: 0; } .predodobreni-krediti .button-wrap:after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .predodobreni-krediti .button-wrap .button { float: left; margin-left: 12px; min-width: auto; width: calc(50% - 12px); } .predodobreni-krediti .button-1 { transition: box-shadow .3s ease, background-color .3s ease; box-shadow: 0px 30px 25px -10px rgba(181, 183, 184, 0.3); text-align: center; text-transform: uppercase; display: block; font-size: 14px; font-weight: 700; padding: 15.5px 10px; background-color: #ffec00; width: 100%; border: none; } .predodobreni-krediti .button-1:hover { box-shadow: 0px 25px 25px -15px rgba(181, 183, 184, 0.75); background-color: #fff133; cursor: pointer; } .predodobreni-krediti .button-1.color-2 { background-color: #f1f2f4; } .predodobreni-krediti .button-1.color-2:hover { box-shadow: 0px 25px 25px -15px rgba(181, 183, 184, 0.75); background-color: #e2e4e9; cursor: pointer; } .predodobreni-krediti .input-1 { font-family: "futura", sans-serif; display: block; font-size: 20px !important; font-weight: 700; appearance: none; outline: none; border: 1px solid #d1d1d1; padding: 12px 15px 10px; background-color: white; } .predodobreni-krediti .input-1.error { border-color: #e53935; } .predodobreni-krediti .input-1[disabled] { background-color: #f2f4f5; } .predodobreni-krediti .input-4 { font-family: "futura", sans-serif; display: block; font-size: 18px; font-weight: 500; appearance: none; outline: none; border: 1px solid #d1d1d1; padding: 15px 15px 8px; } .predodobreni-krediti .input-4.error { border-color: #e53935; } .predodobreni-krediti .input-date { background: url(images/krediti/icon-date.png) 100% 0 no-repeat; background-size: 18px; padding-right: 30px; cursor: pointer; } .predodobreni-krediti .ui-slider.ui-widget-content { border: none; border-radius: 0; background-color: #dbdbdb; height: 3px; } .predodobreni-krediti .ui-slider.ui-widget-content .ui-state-default { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; z-index: 1; cursor: pointer; width: 14px; height: 14px; background-color: #0095c9; outline: none; } .predodobreni-krediti .ui-slider.ui-widget-content .ui-state-default:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 1; width: calc(100% + 8px); height: calc(100% + 8px); background-color: rgba(0, 149, 201, 0.3); } .predodobreni-krediti .ui-slider .ui-widget-header { border-radius: 0; background-color: #0095c9; } .predodobreni-krediti .datepicker-dd-wrap { position: relative; display: inline-block; width: 45%; } .predodobreni-krediti .datepicker-dd-wrap:after { content: ""; position: absolute; right: 15px; top: calc(50% - 6px); width: 12px; height: 12px; background: center no-repeat url(images/krediti/arrow-bottom.png); background-size: 12px; } .predodobreni-krediti body .ui-datepicker select.ui-datepicker-month, .predodobreni-krediti body .ui-datepicker select.ui-datepicker-year { cursor: pointer; padding-left: 10px; font-size: 18px !important; width: 100% !important; border: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; outline: none; max-width: 82px; -moz-appearance: none; } .predodobreni-krediti body #ui-datepicker-div { width: 280px; border-radius: 2px; background: #fff; -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); padding: 10px; } .predodobreni-krediti body .ui-widget-header { border: none; background: #fff; } .predodobreni-krediti body table thead th { font-family: 'futura', sans-serif; background: none; font-size: 16px; color: #505050; } .predodobreni-krediti body .ui-datepicker th { font-weight: 500; } .predodobreni-krediti body .ui-datepicker td { padding: 1px 2px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-title { font-size: 16px; font-weight: 500; color: #505050; margin-top: 9px; margin-bottom: 10px; } .predodobreni-krediti body .ui-widget-content .ui-state-default, .predodobreni-krediti body .ui-widget-header .ui-state-default { background: none; color: #505050; font-size: 14px; font-weight: 500; padding-top: 8px; padding-bottom: 8px; border: 0; } .predodobreni-krediti body .ui-datepicker td span, .predodobreni-krediti body .ui-datepicker td a { padding: .4em; text-align: center; } .predodobreni-krediti body .ui-widget-content .ui-state-active, .predodobreni-krediti body .ui-widget-header .ui-state-active, .predodobreni-krediti body .ui-widget-content .ui-state-hover, .predodobreni-krediti body .ui-widget-header .ui-state-hover, .predodobreni-krediti body .ui-widget-content .ui-state-highlight, .predodobreni-krediti body .ui-widget-header .ui-state-highlight { border-color: #ffec00; background: #ffec00; color: #505050; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; border-radius: 18px; } .predodobreni-krediti body table tr:nth-child(even) td, .predodobreni-krediti body table tr:nth-child(even) th { background: none; } .predodobreni-krediti body .ui-icon { width: 20px; height: 20px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev, .predodobreni-krediti body .ui-datepicker .ui-datepicker-next { top: 4px; width: 38px px; height: 38px; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 12px; border: 1px solid #D5E0EC; justify-content: center; align-items: center; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev { top: 4px; left: 0; margin-left: 5px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-next { top: 4px; right: 0; margin-right: 7px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev.ui-state-hover, .predodobreni-krediti body .ui-datepicker .ui-datepicker-next.ui-state-hover { background: none; border: 1px solid #d1d1d1; top: 4px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev.ui-state-hover { left: 0px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-next.ui-state-hover { right: 0px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev span, .predodobreni-krediti body .ui-datepicker .ui-datepicker-next span { margin-left: -10px; margin-top: -9px; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev span, .predodobreni-krediti body .ui-datepicker .ui-datepicker-prev.ui-state-hover span { background: url(images/krediti/arrow-b-left.png) center center no-repeat; background-size: 7px; border: none; } .predodobreni-krediti body .ui-datepicker .ui-datepicker-next span, .predodobreni-krediti body .ui-datepicker .ui-datepicker-next.ui-state-hover span { background: url(images/krediti/arrow-b-right.png) center center no-repeat; background-size: 7px; border: none; } .predodobreni-krediti .input-info { position: relative; } .predodobreni-krediti .input-info .input-wrap { padding-right: 50px; } .predodobreni-krediti .input-info .info-icon { transform: translate3d(0, -50%, 0); position: absolute; top: calc(50%); right: 10px; } .predodobreni-krediti .has-info { position: relative; padding-right: 50px; } .predodobreni-krediti .has-info .info-icon, .predodobreni-krediti .has-info .pen-icon { transform: translate3d(0, -50%, 0); position: absolute; top: calc(50% - 2px); right: 0; } .predodobreni-krediti .pen-icon { cursor: pointer; display: inline-block; position: relative; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-image: url(images/krediti/pen-icon.png); } .predodobreni-krediti .info-icon { cursor: pointer; display: inline-block; position: relative; width: 36px; height: 26px; border: 2px solid #cfd0d2; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; background-position: center center; background-repeat: no-repeat; background-image: url(images/krediti/info-icon-1.png); background-size: 2px; } .predodobreni-krediti .info-icon p { text-align: center; width: 250px; padding: 15px; background-color: rgba(73, 80, 90, 0.7); position: absolute; right: 15px; bottom: 29px; font-size: 14px; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .predodobreni-krediti .info-icon p:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 0px 0 13px; border-color: #49505a transparent transparent transparent; position: absolute; right: 0px; bottom: -12px; opacity: 0.7; } .predodobreni-krediti .info-icon:hover p { opacity: 1; visibility: visible; } .predodobreni-krediti .title-border-1 { position: relative; } .predodobreni-krediti .title-border-1:after { content: ''; position: absolute; left: calc(50% - 40px); bottom: -22px; width: 80px; height: 8px; background-color: #fff200; } .predodobreni-krediti .plain-text { border-bottom: 1px solid #e6e6e6; padding-bottom: 10px; } .predodobreni-krediti .plain-text .semi-bold { position: relative; top: 4px; } .predodobreni-krediti .plain-text .info-icon { top: calc(50% - 5px); } .predodobreni-krediti .list-1 { list-style: disc; list-style-position: outside; } .predodobreni-krediti .list-1 li { margin-left: 20px; padding-left: 10px; margin-bottom: 20px; } .predodobreni-krediti .information-section .col:first-child { background-color: #fff; } .predodobreni-krediti .information-section .col:last-child { background-color: #0095c9; background-position: 10% 30%; padding: 60px 105px 20px 190px; } .predodobreni-krediti .information-section .row { display: flex; } .predodobreni-krediti .information-section .col { position: relative; padding: 60px 140px 20px 9.5%; min-height: 395px; display: flex; align-items: center; } .predodobreni-krediti .information-section .title-1 { text-shadow: none; max-width: 330px; line-height: 56px; } .predodobreni-krediti .information-section .title-border-1:after { left: 0; } .predodobreni-krediti .information-section .list-1 span { vertical-align: top; } .predodobreni-krediti .information-section .man-1 { position: absolute; left: -210px; max-width: 100%; bottom: 0; z-index: 2; } .predodobreni-krediti .teste-slider { width: 100%; } .predodobreni-krediti .teste-slider .slick-dots { position: absolute; bottom: -80px; left: -5px; } .predodobreni-krediti .teste-slider .slick-dots li { position: relative; display: inline-block; width: 8px; margin: 0 5px; padding: 0; cursor: pointer; } .predodobreni-krediti .teste-slider .slick-dots button { border-radius: 50%; padding: 0; font-size: 0; line-height: 0; display: block; width: 6px; height: 6px; margin: auto; cursor: pointer; color: transparent; border: 0; outline: none; background-color: #cacaca; } .predodobreni-krediti .teste-slider .slick-dots .slick-active button { background-color: #0095c9; } .predodobreni-krediti .teste-slider .slide { opacity: 1 !important; } .predodobreni-krediti .teste-slider .inner { transition: opacity .5s ease; opacity: 0; } .predodobreni-krediti .teste-slider .slick-active .inner { transition-delay: .5s; opacity: 1; } .predodobreni-krediti .tag-wrap { position: relative; padding-right: 110px; } .predodobreni-krediti .tag-wrap .tag { position: absolute; top: calc(50% - 24px); right: 30px; } .predodobreni-krediti .tag { display: block; width: 48px; height: 48px; background-color: #ffec00; background-position: 50%; background-repeat: no-repeat; } .predodobreni-krediti .contact-section { padding: 27px 0; background-color: #34393c; } .predodobreni-krediti .contact-section .page-logo { margin-top: 15px; display: block; width: 191px; height: 50px; background: url(images/krediti/page-logo-2.png) 50% no-repeat; background-size: cover; } .predodobreni-krediti .contact-section .col:not(:first-child) { border-left: 1px solid #7b7b7b; } .predodobreni-krediti .contact-section .tag-wrap { padding-top: 5px; padding-bottom: 5px; } .predodobreni-krediti .social-section { background-color: #4f5054; padding: 11px 0; } .predodobreni-krediti .social-section .text-1 { position: relative; top: 6px; } .predodobreni-krediti .socials-wrap { zoom: 1; } .predodobreni-krediti .socials-wrap:after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .predodobreni-krediti .socials-wrap li { float: left; } .predodobreni-krediti .socials-wrap a { transition: background-image .3s ease; display: block; height: 30px; width: 75px; background-repeat: no-repeat; background-position: 50%; backface-visibility: hidden; } .predodobreni-krediti .steps-wrap { position: relative; background-color: #34393c; background-image: url(images/krediti/pattern-2.png); } .predodobreni-krediti .steps-wrap .container-1 { position: relative; z-index: 1; min-height: 100px; max-width: none; } .predodobreni-krediti .steps-wrap .steps { position: absolute; top: 60px; left: 90px; width: calc(100% - 180px); } .predodobreni-krediti .steps-wrap div.center { position: relative; top: 135px; } .predodobreni-krediti .steps-wrap.type-2 { position: relative; background-image: url(images/krediti/pattern-2.png); } .predodobreni-krediti .steps-wrap.type-2:before { z-index: 0; content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-image: url(images/krediti/sample-2.jpg); background-size: cover; background-position: top center; } .predodobreni-krediti .steps-wrap.type-2:after { z-index: 0; content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-image: url(images/krediti/pattern.png); opacity: 0.2; } .predodobreni-krediti .steps-wrap.type-2 .container-1 { position: relative; min-height: 390px; max-width: none; } .predodobreni-krediti .steps { position: relative; width: 100%; margin: 0; } .predodobreni-krediti .steps:before { display: none; } .predodobreni-krediti .steps .progress { background-color: #999999; } .predodobreni-krediti .steps .progress span { transition: width .3s ease-out; display: block; height: 3px; background-color: #fff100; } .predodobreni-krediti .steps .mobile-title { display: none; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: absolute; top: -37px; margin: 0; } .predodobreni-krediti .steps .point { position: absolute; z-index: 10; transform: translate3d(-50%, 0, 0); top: calc(50% - 10px); width: 18px; height: 18px; border-radius: 50%; background-color: #34393c; border: 1px solid #999999; } .predodobreni-krediti .steps .point:after { content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 50%; height: 50%; background-color: #999999; } .predodobreni-krediti .steps .point.active { border-color: #fff100; } .predodobreni-krediti .steps .point.active:after { background-color: transparent; background-image: url(images/krediti/small-check.png); background-size: 10px; background-position: 50%; background-repeat: no-repeat; } .predodobreni-krediti .steps .point.last-active { border-color: #fff100; } .predodobreni-krediti .steps .point.last-active p { color: #fff; } .predodobreni-krediti .steps .point.last-active:after { background-color: transparent; background-image: url(images/krediti/small-check.png); background-size: 10px; background-position: 50%; background-repeat: no-repeat; } .predodobreni-krediti .steps .point.current { border-color: #fff100; } .predodobreni-krediti .steps .point.current:after { background-color: #fff100; } .predodobreni-krediti .steps .point.current p { color: #fff; } .predodobreni-krediti .steps .point p { position: absolute; transform: translate3d(-50%, 0, 0); top: -30px; left: calc(50% + .2px); color: #999999; margin: 0; width: max-content; text-transform: none; letter-spacing: initial; text-align: inherit; white-space: nowrap; } .predodobreni-krediti .label-1 { font-size: 16px; } .predodobreni-krediti .back-button-1 { transition: border-color .4s ease; position: relative; display: inline-block; width: 48px; height: 48px; border: 1px solid #d1d1d1; background: url(images/krediti/return-icon.png) 50% no-repeat; background-size: 24px; } .predodobreni-krediti .back-button-1:hover { border-color: #000; cursor: pointer; } .predodobreni-krediti .has-back { position: relative; } .predodobreni-krediti .has-back .back-button { position: absolute; z-index: 100; left: 0; top: 0; } .predodobreni-krediti .input-2 { font-family: "futura", sans-serif; display: block; font-size: 18px; font-weight: 500; border: none; background-color: transparent; outline: none; line-height: 18px; padding: 0; text-align: inherit; } .predodobreni-krediti .input-3 { font-family: "futura", sans-serif; display: block; font-size: 16px; border: none; background-color: transparent; outline: none; } .predodobreni-krediti .select-1 { cursor: pointer; width: 100%; font-family: "futura", sans-serif; display: block; font-size: 18px; font-weight: 500; border: none; background-color: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; background: url(images/krediti/arrow-bottom.png) 100% 5px no-repeat; background-size: 12px; } .predodobreni-krediti .input-wrap { transition: border-color .4s ease; position: relative; border: 1px solid #d1d1d1; padding: 16px 18px 7px 18px; } .predodobreni-krediti .input-wrap .label { position: absolute; width: max-content; padding: 0 16px; background-color: #fff; left: 3px; top: -12px; } .predodobreni-krediti .input-wrap .input { width: 100%; } .predodobreni-krediti .input-wrap .input.input-3 { margin-bottom: 3px; } .predodobreni-krediti .input-wrap .err-txt { display: none; position: absolute; left: 0; bottom: -25px; color: #e53935; font-size: 14px; margin: 0; white-space: nowrap; } .predodobreni-krediti .input-wrap:focus-within { border-color: #000; } .predodobreni-krediti .input-wrap.error { border-color: #e53935; } .predodobreni-krediti .input-wrap.error .err-txt { display: block; } .predodobreni-krediti .error-helper-1 { display: none; background-color: #e53935; padding: 20px 20px; padding-bottom: 18px; } .predodobreni-krediti .popup-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); z-index: 1000; } .predodobreni-krediti .popup-wrap .display-wrap { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; padding: 40px 0; overflow: auto; } .predodobreni-krediti .popup { transition: transform .5s ease-out, opacity .5s ease-out; opacity: 0; transform: translate3d(0, -5%, 0); background-color: #fff; } .predodobreni-krediti .popup .inner { padding: 0px; } .predodobreni-krediti .popup .inner.type-2 { padding: 32px 40px 1px; } .predodobreni-krediti .popup.open { opacity: 1; transform: translate3d(0, 0%, 0); } .predodobreni-krediti .custom-radio-1 { display: inline-block; } .predodobreni-krediti .custom-radio-1 .radio { cursor: pointer; position: relative; display: block; font-size: 16px; padding: 22px 20px; padding-left: 40px; text-overflow: ellipsis; overflow: hidden; } .predodobreni-krediti .custom-radio-1 .radio > i { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0px; display: inline-block; width: 25px; height: 25px; background-image: url(images/krediti/radio-off.png); background-size: 20px; background-position: center; background-repeat: no-repeat; } .predodobreni-krediti .custom-radio-1 .radio.checked > i { background-image: url(images/krediti/radio-on.png); } .predodobreni-krediti .custom-radio-1.type-2 .radio > i { transform: none; top: 20px; } .predodobreni-krediti .loader-wrap { text-align: center; } .predodobreni-krediti .loader-wrap .loader { display: inline-block; background: #f2f4f5; padding: 2px; position: relative; overflow: hidden; } .predodobreni-krediti .loader-wrap .loader-progress { width: 0; height: calc(100% - 4px); position: absolute; top: 2px; left: 2px; background: #fff200; animation: loading 40s infinite; } .predodobreni-krediti .loader-wrap .loader-progress.type-2 { animation: loading 20s infinite; } .predodobreni-krediti .loader-wrap ul { position: relative; z-index: 1; } .predodobreni-krediti .loader-wrap li { float: left; width: 14px; height: 31px; border: 3px solid #fff; border-right: 0; } .predodobreni-krediti .loader-wrap li:last-child { width: 17px; border-right: 3px solid #fff; } .predodobreni-krediti .map-wrapper { position: relative; overflow: hidden; } .predodobreni-krediti #map-canvas { position: relative; width: 100%; height: 580px; overflow: hidden; } .predodobreni-krediti .infobox-wrapper { display: none; background: #fff; } .predodobreni-krediti .infobox { background-color: transparent; border: none; width: 380px; padding: 5px 5px 20px; } .predodobreni-krediti .infobox .inner { background: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); padding: 15px 22px; position: relative; } .predodobreni-krediti .infobox .inner:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #fff transparent transparent transparent; position: absolute; top: 100%; left: 50%; margin-left: -10px; } .predodobreni-krediti .infobox .loc-title { font-family: futura, sans-serif; font-size: 16px; line-height: 20px; font-weight: 700; color: #000; margin-bottom: 20px; } .predodobreni-krediti .infobox li { position: relative; font-family: futura, sans-serif; font-size: 16px; line-height: 30px; color: #000; padding-left: 35px; margin-bottom: 10px; } .predodobreni-krediti .infobox i { display: inline-block; width: 25px; height: 30px; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; } .predodobreni-krediti .gm-style img { position: relative; z-index: 10; width: 15px; height: 15px; } .predodobreni-krediti .infoBox img { right: 15px; top: 5px; } .predodobreni-krediti .map-search { position: absolute; top: 25px; right: 25px; border-radius: 3px; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); overflow: hidden; } .predodobreni-krediti .map-search .search-1 { width: 290px; border: 0; font-family: futura, sans-serif; font-size: 16px; line-height: 24px; color: #000; padding: 10px 20px; } .predodobreni-krediti .map-search:after { content: ''; width: 60px; height: 100%; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 26%, white 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 26%, white 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 26%, white 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ position: absolute; top: 0; right: 0; } .predodobreni-krediti .map-search button { width: 50px; height: 100%; position: absolute; top: 0; right: 0; background: url(images/krediti/search-icon-2.png) center center no-repeat; background-size: 16px; border: 0; padding: 0; margin: 0; z-index: 1; opacity: 0.5; transition: opacity 0.3s ease; } .predodobreni-krediti .map-search button:hover { opacity: 1; } .predodobreni-krediti .list-block { border: 1px solid #0095c9; padding: 30px 40px; } .predodobreni-krediti .list-block li { font-size: 16px; line-height: 24px; font-weight: 500; color: #0095c9; margin-bottom: 20px; padding-left: 35px; position: relative; } .predodobreni-krediti .list-block li:after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #0095c9; position: absolute; top: 8px; left: 0; } .predodobreni-krediti .img-full img { width: 100%; height: auto; } .predodobreni-krediti .offer-slider-wrap { max-width: 1300px; width: 94%; overflow: hidden; position: relative; margin: 0 auto; } .predodobreni-krediti .offer-slider-wrap .overlay { width: 350px; height: 100%; position: absolute; top: 0; z-index: 10; pointer-events: none; } .predodobreni-krediti .offer-slider-wrap .overlay-left { left: 0; background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ } .predodobreni-krediti .offer-slider-wrap .overlay-right { right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .predodobreni-krediti .offer-slider { width: 750px; margin: 0 auto; } .predodobreni-krediti .offer-slider .slide { outline: none; } .predodobreni-krediti .offer-slider .slick-list { overflow: visible; } .predodobreni-krediti .offer-slider .slick-arrow { width: 56px; height: 56px; background-color: #fff200; background-position: center center; background-repeat: no-repeat; background-size: 24px; text-indent: -9999px; overflow: hidden; padding: 0; position: absolute; top: 50%; opacity: 1; visibility: visible; margin-top: -28px; z-index: 20; transition: all 0.5s ease; } .predodobreni-krediti .offer-slider .slick-prev { left: 50%; margin-left: -390px; background-image: url(images/krediti/return-icon.png); } .predodobreni-krediti .offer-slider .slick-next { right: 50%; margin-right: -390px; background-image: url(images/krediti/right-icon.png); } .predodobreni-krediti .offer-slider.first .slick-prev { opacity: 0; visibility: hidden; } .predodobreni-krediti .offer-slider.last .slick-next { opacity: 0; visibility: hidden; } .predodobreni-krediti .offer-block { width: 100%; max-width: 588px; padding: 42px 42px 30px; border: 1px solid #d1d1d1; margin: 0 auto; } .predodobreni-krediti .block-list li { position: relative; padding-left: 30px; margin-bottom: 15px; position: relative; zoom: 1; } .predodobreni-krediti .block-list li:after { display: block; visibility: hidden; height: 0; clear: both; content: ""; } .predodobreni-krediti .block-list li:before { content: ''; width: 6px; height: 6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; top: 10px; left: 0; background: #0095c9; } .predodobreni-krediti .block-list li > span { float: left; } .predodobreni-krediti .block-list li .info-icon { display: inline-block; float: left; margin-left: 10px; } .predodobreni-krediti .block-list li .info-icon span { transform: translate3d(0, -50%, 0); position: absolute; top: calc(50%); right: 10px; } .predodobreni-krediti .slider-content-wrap { position: relative; } .predodobreni-krediti .slider-content-wrap .slider-content { transition: opacity .5s ease, visibility .5s ease; position: absolute; width: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; } .predodobreni-krediti .slider-content-wrap .slider-content.current { position: relative; } .predodobreni-krediti .slider-content-wrap .slider-content.active { visibility: visible; opacity: 1; } .predodobreni-krediti .docs-list { overflow: hidden; } .predodobreni-krediti .docs-list li { width: 49%; float: left; } .predodobreni-krediti .docs-list li:nth-child(odd) { margin-right: 2%; } .predodobreni-krediti .download-btn { display: block; background-color: #ebebeb; padding: 10px 85px 10px 25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border-bottom: 2px solid #d9d9d9; position: relative; transition: background 0.3s ease; } .predodobreni-krediti .download-btn i { width: 70px; height: 100%; position: absolute; top: 0; right: 0; border-left: 1px solid #d9d9d9; background-position: center center; background-repeat: no-repeat; } .predodobreni-krediti .download-btn:hover { background-color: #ffec00; } .predodobreni-krediti .dropzone { font-family: "futura", sans-serif; font-size: 16px; font-weight: 700; } .predodobreni-krediti .dropzone .dz-preview { position: relative; margin-top: 70px; } .predodobreni-krediti .dropzone .dz-remove { position: absolute; right: 0; top: 0; text-transform: uppercase; color: #0095c9; font-weight: 500; font-size: 18px; } .predodobreni-krediti .dropzone .dz-default { background: url(images/krediti/border-image.png) no-repeat 50%; background-size: contain; text-align: center; min-height: 215px; padding: 20px; display: flex; align-items: center; } .predodobreni-krediti .dropzone .dz-default span { display: block; width: 100%; } .predodobreni-krediti .dropzone .dz-details { margin-bottom: 10px; } .predodobreni-krediti .dropzone .dz-filename { padding-right: 75px; word-break: break-all; } .predodobreni-krediti .dropzone .dz-success-mark { position: relative; } .predodobreni-krediti .dropzone .dz-success-mark svg { width: 20px; height: 20px; } .predodobreni-krediti .dropzone .dz-success-mark svg path { stroke: #9dcc68; stroke-opacity: 1; fill: #9dcc68; } .predodobreni-krediti .dropzone .dz-success-mark:after { content: 'Upload završen'; display: block; position: absolute; top: 0; left: 30px; font-weight: 400; color: #666666; } .predodobreni-krediti .dropzone .dz-progress { background-color: #f2f2f2; margin-bottom: 10px; } .predodobreni-krediti .dropzone .dz-progress span { display: block; height: 7px; background-color: #ffec00; } .predodobreni-krediti .dropzone .dz-size, .predodobreni-krediti .dropzone .dz-error-message, .predodobreni-krediti .dropzone .dz-error-mark, .predodobreni-krediti .dropzone .dz-image { display: none; } .predodobreni-krediti .ie .page-header .page-title { margin-top: 35px; } .predodobreni-krediti .ie .checkbox-1.checked mark { transform: translate3d(14px, 0, 0); } .predodobreni-krediti .ie .steps .point p { white-space: nowrap; } .predodobreni-krediti .ie select::-ms-expand { display: none; } .predodobreni-krediti .detalji-ponude .container-5 > .text-1 { max-width: 700px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .detalji-ponude .container-5 > #PreapprovedDescription .text-1 { max-width: 700px; margin-left: auto; margin-right: auto; } .predodobreni-krediti .detalji-ponude .promo-section { background-image: url(images/krediti/polygon-1.png); background-size: cover; background-position: 50%; background-repeat: no-repeat; min-height: 900px; } .predodobreni-krediti .detalji-ponude .promo-section .infos-row { max-width: 900px; margin: auto; } .predodobreni-krediti .detalji-ponude .promo-section .title-2 { position: relative; top: 40px; margin-bottom: 150px; } .predodobreni-krediti .isplata-kredita .container { background: #fff; } .predodobreni-krediti .center { text-align: center !important; } .predodobreni-krediti strong { font-weight: bold; } .predodobreni-krediti .ui-dialog.no-yes-dialog.ui-widget-content .ui-dialog-titlebar { height: 0; } .predodobreni-krediti .ui-dialog .ui-dialog-titlebar { padding: 0; } .predodobreni-krediti #PreapprovedDetails + .infos-row .container-2 { padding-top: 45px; } .predodobreni-krediti #PreapprovedLoanAmount .alpaca-controlfield-label div { font-size: 12px; line-height: 20px; color: #7b7b7b; margin-bottom: 20px; } .predodobreni-krediti #PreapprovedLoanPeriod .alpaca-controlfield-label div { font-size: 12px; line-height: 20px; color: #7b7b7b; margin-bottom: 20px; margin-left: -10%; margin-right: -10%; } .predodobreni-krediti #PreapprovedLoanInstallment .alpaca-controlfield-container.alpaca-controlfield-text.alpaca-controlfield-number { margin-top: 50px; } .predodobreni-krediti #PreapprovedLoanInstallment .alpaca-controlfield-container.alpaca-controlfield-text.alpaca-controlfield-number p:not(.disabled-field-info) { font-family: "futura", sans-serif; display: block; font-size: 20px !important; font-weight: 700; outline: none; padding: 12px 15px 10px; background: #d1d1d1; } .predodobreni-krediti .offer-not-available-form { margin-top: 90px; } .predodobreni-krediti .offer-not-available-form .text-1 { font-size: 16px; line-height: 24px; } .predodobreni-krediti .offer-not-available-form .inner-margin-50 { margin-bottom: 50px !important; } .predodobreni-krediti .offer-not-available-form .center { text-align: center !important; } .predodobreni-krediti #LoanDetailsInterestRate, .predodobreni-krediti #LoanDetailsTotalExpense, .predodobreni-krediti #LoanDetailsTotalExpenseInterest, .predodobreni-krediti #LoanInsurance { position: relative; width: calc(100% - 60px); } .predodobreni-krediti #LoanDetailsInterestRate .text-2.has-info, .predodobreni-krediti #LoanDetailsTotalExpense .text-2.has-info, .predodobreni-krediti #LoanDetailsTotalExpenseInterest .text-2.has-info, .predodobreni-krediti #LoanInsurance .text-2.has-info { position: absolute; top: 20px; right: -50px; } .predodobreni-krediti #LoanInsurance .checkbox-wrap { border-bottom: 1px solid #e6e6e6; padding-bottom: 10px; } .predodobreni-krediti #LoanInsurance .alpaca-controlfield-helper { position: absolute; top: 0; right: -47px; } #LoanESignatureSMS input { text-transform: uppercase; } @keyframes nav-anim { 0% { transform: translate3d(0, 0px, 0); } 50% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0px, 0); } } @keyframes nav-anim2 { 0% { transform: translate3d(0, 0px, 0); } 7% { transform: translate3d(0, -5px, 0); } 14% { transform: translate3d(0, 0px, 0); } 21% { transform: translate3d(0, -5px, 0); } 28% { transform: translate3d(0, 0px, 0); } } @keyframes loading { 0% { width: 0; } 10% { width: 10%; } 20% { width: 20%; } 30% { width: 30%; } 40% { width: 40%; } 50% { width: 50%; } 60% { width: 60%; } 70% { width: 70%; } 80% { width: 80%; } 90% { width: 90%; } 100% { width: 98%; } } @media only screen and (min-width: 1920px) { .predodobreni-krediti .information-section .col:first-child { padding-left: 20%; } } @media only screen and (max-width: 1200px) { .predodobreni-krediti .information-section .row { display: block; } .predodobreni-krediti .information-section .row .col { width: 100%; } .predodobreni-krediti .information-section .row .title-border-1:after { left: 50%; transform: translateX(-50%); } .predodobreni-krediti .information-section .title-1 { max-width: 100%; text-align: center; margin-bottom: 10px; } .predodobreni-krediti .information-section .col { min-height: 270px; } .predodobreni-krediti .section.fix-2 { padding-bottom: 0; } .predodobreni-krediti .steps .point { display: flex; align-items: center; } .predodobreni-krediti .steps .point p { position: relative; font-size: 14px; width: auto; text-align: center; top: -35px; } } @media only screen and (max-width: 980px) { .predodobreni-krediti .title-1 { font-size: 38px; line-height: 40px; } .predodobreni-krediti .information-section .col { padding: 30px 85px 20px 25px; } .predodobreni-krediti .offer-slider-wrap { width: 100%; } .predodobreni-krediti .offer-slider-wrap .overlay { display: none; } .predodobreni-krediti .offer-slider { width: 100%; } .predodobreni-krediti .offer-slider .slick-list { overflow: hidden; padding: 0 !important; } .predodobreni-krediti .docs-list { overflow: hidden; } .predodobreni-krediti .docs-list li { width: 100%; margin-bottom: 30px; } .predodobreni-krediti .docs-list li:nth-child(odd) { margin-right: 0; } .predodobreni-krediti .docs-list.inner-margin-5 { margin-bottom: 0; } .predodobreni-krediti .jumbo-panel { height: 46vw; } .predodobreni-krediti .steps .point p { font-size: 14px; } } @media only screen and (max-width: 780px) { .predodobreni-krediti .col-ms-12 { width: 100%; } .predodobreni-krediti .col-ms-11 { width: calc((100% / 12) * 11); } .predodobreni-krediti .col-ms-10 { width: calc((100% / 12) * 10); } .predodobreni-krediti .col-ms-9 { width: calc((100% / 12) * 9); } .predodobreni-krediti .col-ms-8 { width: calc((100% / 12) * 8); } .predodobreni-krediti .col-ms-7 { width: calc((100% / 12) * 7); } .predodobreni-krediti .col-ms-6 { width: calc(100% / 2); } .predodobreni-krediti .col-ms-5 { width: calc((100% / 12) * 5); } .predodobreni-krediti .col-ms-4 { width: calc((100% / 12) * 4); } .predodobreni-krediti .col-ms-3 { width: calc((100% / 12) * 3); } .predodobreni-krediti .col-ms-2 { width: calc((100% / 12) * 2); } .predodobreni-krediti .col-ms-1 { width: calc(100% / 12); } .predodobreni-krediti .section-2 { padding: 30px 0px; padding-bottom: 20px; } .predodobreni-krediti .title-1 { font-size: 32px; line-height: 34px; } .predodobreni-krediti .title-2 { font-size: 24px; } .predodobreni-krediti .title-3 { font-size: 18px; } .predodobreni-krediti .text-1 { font-size: 14px; line-height: 20px; } .predodobreni-krediti .text-2 { font-size: 16px; } .predodobreni-krediti .input-1 { font-size: 18px; padding: 9px 15px 8px; } .predodobreni-krediti .input-2 { font-size: 16px; } .predodobreni-krediti .label { font-size: 14px; } .predodobreni-krediti .page-header .page-title { position: relative; top: 7px; font-size: 24px; text-align: left; padding-left: 60px; } .predodobreni-krediti .page-header .page-logo { background-image: url(images/icons/page-logo-3.png); background-size: 47.5px; width: 48px; } .predodobreni-krediti .information-section .row { display: block; } .predodobreni-krediti .information-section .col { padding: 30px 85px 20px 25px; } .predodobreni-krediti .has-info.inner-margin-5 { margin-bottom: 35px; } .predodobreni-krediti .input-wrap .err-txt { font-size: 12px; bottom: -20px; } .predodobreni-krediti .title-5 { font-size: 24px; } .predodobreni-krediti .offer-slider { padding: 0 20px; margin-bottom: 40px; } .predodobreni-krediti .offer-slider .slide { padding: 0 10px; } .predodobreni-krediti .offer-slider .slick-arrow { width: 25px; background-size: 10px; } .predodobreni-krediti .offer-slider .slick-prev { left: 0px; margin-left: 0; } .predodobreni-krediti .offer-slider .slick-next { right: 0px; margin-right: 0; } .predodobreni-krediti .offer-block { padding: 22px 22px 20px; } .predodobreni-krediti .steps .point p { display: none; } .predodobreni-krediti .steps .mobile-title { display: block; width: 100%; } .alpaca-form #LoanOfferPreview .instalment-amount-ppi { margin-left: calc(50% - 121px) !important; } } @media only screen and (max-width: 680px) { .predodobreni-krediti { /* Identification number */ /*--------18.06.2018. korekcije----------*/ } .predodobreni-krediti .col-ss-12 { width: 100%; } .predodobreni-krediti .col-ss-11 { width: calc((100% / 12) * 11); } .predodobreni-krediti .col-ss-10 { width: calc((100% / 12) * 10); } .predodobreni-krediti .col-ss-9 { width: calc((100% / 12) * 9); } .predodobreni-krediti .col-ss-8 { width: calc((100% / 12) * 8); } .predodobreni-krediti .col-ss-7 { width: calc((100% / 12) * 7); } .predodobreni-krediti .col-ss-6 { width: calc(100% / 2); } .predodobreni-krediti .col-ss-5 { width: calc((100% / 12) * 5); } .predodobreni-krediti .col-ss-4 { width: calc((100% / 12) * 4); } .predodobreni-krediti .col-ss-3 { width: calc((100% / 12) * 3); } .predodobreni-krediti .col-ss-2 { width: calc((100% / 12) * 2); } .predodobreni-krediti .col-ss-1 { width: calc(100% / 12); } .predodobreni-krediti .back-button-1 { width: 35px; height: 35px; background-size: 12px; } .predodobreni-krediti .steps-wrap .steps { position: absolute; top: 60px; left: 0px; width: calc(100%); } .predodobreni-krediti .container-1.has-back .title-2.title-border-1 { padding: 0 40px; } .predodobreni-krediti .jumbo-panel .img { height: 60vw; object-fit: cover; } .predodobreni-krediti .icon-stopwatch { background-size: 56.5px; } .predodobreni-krediti .icon-document { background-size: 60px; } .predodobreni-krediti .icon-camera { background-size: 49px; } .predodobreni-krediti .info-card { text-align: center; padding: 10px 20px; padding-top: 110px; min-height: 190px; background-position: 50% 12%; } .predodobreni-krediti .info-card has-info { width: 100%; } .predodobreni-krediti .plain-text { padding-bottom: 5px; } .predodobreni-krediti .plain-text .text-1.alignright { width: 100%; text-align: right; margin-top: 5px; } .predodobreni-krediti .contact-section .col { margin-bottom: 30px; } .predodobreni-krediti .contact-section .col:not(:first-child) { border: 0; } .predodobreni-krediti .contact-section .tag-wrap { padding-right: 80px; } .predodobreni-krediti .contact-section .tag-wrap .tag { right: 0; } .predodobreni-krediti .title-2 { padding: 0px; } .predodobreni-krediti .link-1 { font-size: 14px; } .predodobreni-krediti .icon-text { margin: auto; } .predodobreni-krediti .icon-text.inner-margin-0 { margin-bottom: 40px; } .predodobreni-krediti .save-box .save-btn span { display: none; } .predodobreni-krediti .save-box .save-btn i { margin-right: 0; } .predodobreni-krediti .save-box .tooltip:after { right: 24px; } .predodobreni-krediti .popup .inner { padding: 15px 20px 1px; } .predodobreni-krediti .popup .inner.type-2 { padding: 32px 20px 1px; } .predodobreni-krediti .popup.open { opacity: 1; transform: translate3d(0, 0%, 0); } .predodobreni-krediti .popup .popup-img { max-width: 61.5px; } .predodobreni-krediti .info-card.fix:after { display: none; } .predodobreni-krediti .information-section .man-1 { display: none; } .predodobreni-krediti .information-section .col { min-height: 230px; } .predodobreni-krediti .information-section .col:last-child { padding: 60px 20px 20px 20px; } .predodobreni-krediti .detalji-ponude .promo-section { padding-bottom: 30px; } .predodobreni-krediti .detalji-ponude .promo-section .title-2 { margin-bottom: 210px; } .predodobreni-krediti .container-6 { padding: 1px 15px; } .predodobreni-krediti .steps .mobile-title { width: 100%; } } @media only screen and (max-width: 480px) { .predodobreni-krediti { /* Identification number */ /*------18.06.2018.--------*/ } .predodobreni-krediti .page-header .page-title { font-size: 16px; text-align: center; top: 2px; padding-right: 50px; } .predodobreni-krediti .page-header .menu-wrap { border: 0; top: 29px; } .predodobreni-krediti .page-header .container-1 { min-height: 80px; } .predodobreni-krediti .page-header .page-logo { top: 17px; } .predodobreni-krediti .page-header .menu-wrap { top: 16px; } .predodobreni-krediti .title-1 { font-size: 22px; line-height: 24px; } .predodobreni-krediti .button-1 { padding: 16.5px 10px; font-size: 16px; } .predodobreni-krediti .jumbo-panel.inner-margin-6 { margin-bottom: 30px; } .predodobreni-krediti .jumbo-panel .img { height: 60vw; object-fit: cover; } .predodobreni-krediti .jumbo-panel .title { width: calc(100% - 20px); left: 10px; } .predodobreni-krediti .section { padding: 30px 0; padding-top: 45px; } .predodobreni-krediti .intro-section.inner-margin-5 { margin-bottom: 20px; } .predodobreni-krediti .information-section .col { padding: 30px 25px 20px 25px; min-height: 200px; } .predodobreni-krediti .teste-slider .slick-dots { bottom: -20px; } .predodobreni-krediti .contact-section .page-logo { margin: auto; margin-top: 15px; } .predodobreni-krediti .social-section .text-1 { float: none; text-align: center; } .predodobreni-krediti .social-section .socials-wrap { float: none; max-width: max-content; margin: auto; margin-top: 20px; } .predodobreni-krediti .value-slider-wrap .title { float: none; text-align: center; } .predodobreni-krediti .value-slider-wrap .input { float: none; max-width: none; width: 100%; margin: auto; text-align: center; } .predodobreni-krediti .value-slider-wrap .input.inner-margin-3 { margin-bottom: 50px; } .predodobreni-krediti .value-wrap .title { float: none; text-align: center; } .predodobreni-krediti .value-wrap .input { float: none; max-width: none; width: 100%; margin: auto; text-align: center; } .predodobreni-krediti .padding-1 { padding: 0; } .predodobreni-krediti .col-ls-6 { width: 100%; } .predodobreni-krediti .save-box .save-btn { width: 30px; height: 30px; top: 0px; right: 0; margin-right: 0; padding: 0; } .predodobreni-krediti .save-box .save-btn i { width: 30px; height: 30px; margin-right: 0; background-size: 50%; background-position: 7px 7px; } .predodobreni-krediti .button-wrap .button { width: calc(100% - 12px); margin-bottom: 10px !important; } .predodobreni-krediti .map-search { width: 94%; right: 3%; } .predodobreni-krediti .map-search .search-1 { width: 100%; } .predodobreni-krediti .infobox .inner { width: 260px; margin-left: 55px; } .predodobreni-krediti .infoBox img { right: 70px; } .predodobreni-krediti .list-block { padding: 30px 20px; } .predodobreni-krediti .list-block li { padding-left: 20px; } .predodobreni-krediti .information-section .col { min-height: 160px; } .predodobreni-krediti .benefit-section { padding-top: 60px; padding-bottom: 50px; } .predodobreni-krediti .input-wrap .label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } /* ================================================== =High def devices ===================================================== */ /*RetailOffers*/ /* Custom tables ----------------------------------------------------------------------------------------------- */ .custom-table .table-row.flex .col { display: flex; align-items: center; } .custom-table .table-row.flex .col-text { width: 100%; white-space: normal; } .custom-table.horizontal-scroll { overflow: auto; } .custom-table.horizontal-scroll .table-row.border-bottom { border-bottom: none; } .custom-table.horizontal-scroll .table-row.border-bottom .col { border-bottom: 2px solid #ebeced; } .custom-table.horizontal-scroll .col-ls-2 { min-width: 103px; } .custom-table.horizontal-scroll .col-ls-3 { min-width: 155px; } .custom-table.horizontal-scroll .col-ls-4 { min-width: 207px; } .custom-table.horizontal-scroll .col-ls-5 { min-width: 175px; } .custom-table .table-row { zoom: 1; position: relative; display: block; } .custom-table .table-row:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .custom-table .table-row.flex { display: flex; min-height: 60px; } .custom-table .table-row.button-row { padding-right: 85px; } .custom-table .table-head.flex { min-height: auto; } .custom-table .button-row .row-btn { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 20px; line-height: 20px; } .custom-table .flag:before { position: absolute; content: ""; top: 0; left: 0; width: 6px; height: calc(100% - 2px); } .custom-table .flag.cl-1:before { background-color: #e23939; } .custom-table .flag.cl-2:before { background-color: #0095c9; } .custom-table .flag.cl-3:before { background-color: #9ccc66; } .custom-table .hoverable-row:hover { background-color: #fffde5; cursor: pointer; } .custom-table .table-row.clickable { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; } .custom-table .table-row.clickable:hover { background-color: #fffde5; } .custom-table .table-row.row-2 { zoom: 1; } .custom-table .table-row.row-2:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .custom-table .table-row.border { border-bottom: 1px solid #efefef; } .custom-table .table-row.border:first-child { border-top: 1px solid #efefef; } .custom-table .table-row.row-1 { border-bottom: 1px solid #ebeced; } .custom-table .table-row.border-bottom { border-bottom: 2px solid #ebeced; } .custom-table .no-padd-bot .col { padding-bottom: 0; } .custom-table .hidden-elems { display: none; } .custom-table .col-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 0; } .custom-table .progress-bar-2 { margin: 14px 0; } .custom-table .col { padding: 11px 15px; position: relative; } .custom-table .has-button { padding-right: 160px; } .custom-table .has-button .btn-1 { width: 130px; position: absolute; top: 50%; margin-top: -18px; right: 15px; } .custom-table .tag-col { padding-left: 65px; background-repeat: no-repeat; background-position: 15px center; } .custom-table .account-col { padding-left: 70px; } .custom-table .row-1 .col.no-border:before { display: none; } .custom-table .row-1 .col:before { content: ''; width: 1px; height: 18px; background: #ebeced; position: absolute; left: 0; top: 50%; margin-top: -9px; } .custom-table .row-1 .col:first-child:before { display: none; } .custom-table .pos-left { float: left; } .custom-table .col .center { text-align: center; } .custom-table .text-cl-1 { color: #333333; } .custom-table .text-cl-2 { color: #000; } .custom-table .text-cl-3 { color: #7b7b7b; } .custom-table .text-1 { font-size: 14px; line-height: 38px; } .custom-table .text-1 a { color: #0095c9; text-transform: uppercase; text-decoration: underline; } .custom-table .text-2 { font-size: 12px; line-height: 38px; } .custom-table .text-3 { font-size: 18px; line-height: 38px; } .custom-table .text-3 small { font-size: 14px; } .custom-table .text-3 span { text-transform: uppercase; } .custom-table .text-4 { font-size: 14px; line-height: 19px; height: 38px; overflow: hidden; } .custom-table .text-5 { font-size: 16px; line-height: 38px; overflow: hidden; } .custom-table .text-6 { font-size: 14px; line-height: 16px; font-weight: 500; overflow: visible; } .custom-table .text-7 { font-size: 16px; line-height: 18px; overflow: hidden; } .custom-table .img-cell img { width: 52px; height: auto; } .custom-table .text-top-1 { font-size: 16px; line-height: 24px; } .custom-table .text-top-1 small { font-size: 14px; } .custom-table .text-top-2 { font-size: 14px; line-height: 15px; } .custom-table .text-bottom-1 { font-size: 14px; line-height: 14px; } .custom-table .text-bottom-2 { font-size: 20px; line-height: 22px; } .custom-table .text-bottom-2 small { font-size: 16px; } .custom-table .text-bottom-3 { font-size: 16px; line-height: 24px; } .custom-table .status-cell { position: relative; padding-left: 38px; } .custom-table .status-cell p { line-height: 1; position: relative; top: 55%; transform: translateY(-50%); } .custom-table .status-cell .active-icon { position: absolute; left: 15px; top: 50%; margin-top: -6px; } .custom-table .active-icon { display: inline-block; width: 14px; height: 14px; margin-right: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; position: relative; top: 2px; } .custom-table .active-icon.active { background: #9ccc66; } .custom-table .active-icon.inactive { background: #ef5350; } .custom-table .active-icon.expired { background: #49505a; } .custom-table .btn-1 { display: inline-block; width: auto; min-width: 82px; padding: 9px 10px; } .custom-table .btn-right { float: right; } .custom-table .transaction-icon { display: inline-block; float: right; margin-left: 5px; width: 10px; height: 38px; background-size: 10px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 11px; right: 10px; } .custom-table .transaction-col { padding-right: 28px; } .custom-table .transaction-img { float: left; width: 36px; height: auto; margin-right: 15px; } .custom-table .flag-box { display: inline-block; width: 20px; height: 20px; float: left; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; overflow: hidden; margin-right: 10px; } .custom-table .flag-box img { width: 100%; height: auto; margin-right: 10px; } .custom-table .icon-2 { margin-top: 4px; } .custom-table .icon-2:hover { border-color: #494f5a; } .custom-table .edit-icon:hover { background-image: url(images/icons/edit-4.png); } .custom-table .icon-close-1:hover { background-image: url(images/icons/close-icon-4.png); } .custom-table .row-hover { background: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .custom-table .row-hover:hover { background: #f2fafc; border-color: #000; } .custom-table .detail-btn { font-size: 16px; line-height: 38px; color: #0095c9; text-decoration: underline; text-transform: uppercase; } .custom-table .detail-btn.push-right { float: right; } .custom-table .account-icon { display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; } .custom-table .tag { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; position: absolute; left: 15px; border: 2px solid #d9d9d9; color: #000; font-weight: normal; font-size: 16px; display: block; width: 35px; height: 35px; line-height: 32px; } .custom-table .tag.type-2 { border-color: #ed1c24; background-color: #ed1c24; } .custom-table .tag img { -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; display: inline-block; max-width: 100%; max-height: 100%; } .custom-table.table-2 .flag-box { width: 35px; height: 35px; } .custom-table.table-2 .table-row { padding: 0 35px; } .small-table .table-head { padding-top: 8px; border-bottom: 1px solid #e6e6e6; } .small-table .table-head col-text { line-height: 20px; } .small-table .table-row.row-1.no-border { border: 0; } .small-table .col { padding: 9px 10px 10px 10px; } .small-table .col-text { line-height: 35px; } .small-table .flag-box { width: 35px; height: 35px; } .show-more { display: block; width: 100%; font-size: 14px; color: #333333; text-transform: uppercase; padding: 15px; } .show-more span { display: inline-block; text-decoration: underline; } .show-more .less { display: none; } .show-more .arrow-bottom-1 { display: inline-block; float: left; width: 20px; height: 20px; background-position: 0 0; background-repeat: no-repeat; background-size: 10px; position: relative; top: -2px; margin-right: 10px; transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); background: #ffec00 url(images/icons/arrow-bottom-6.png) center center no-repeat; background-size: 10px; } .show-more.active .more { display: none; } .show-more.active .less { display: inline-block; } .show-more.active .arrow-bottom-1 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .show-more.type-2 { display: inline-block; width: auto; color: #0095c9; } .show-more.type-2 span { text-decoration: none; } .show-more.type-2 .arrow-bottom-1 { background: url(images/icons/arrow-blue-d.png) center center no-repeat; background-size: 10px; } .RetailOffers .s-widget-body { overflow: visible; } .zoneWithOffers { min-height: 0px; } .formApproval .alpaca-controlfield-container.alpaca-controlfield-text input { font-family: "futura", sans-serif; width: 100%; font-size: 16px !important; letter-spacing: 0.5px; line-height: 29px; min-height: 24px; border: none; -webkit-appearance: none; border-radius: 0; padding: 0; padding-left: 3px; background-color: transparent; color: #000; } .formApproval .alpaca-controlfield-container.alpaca-controlfield-text { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; -o-box-sizing: border-box !important; box-sizing: border-box !important; width: auto; padding: 14px 15px 12px 15px; min-height: 40px; position: relative; border: 1px solid #d1d1d1; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; transition: border 0.3s ease; } .formApproval .form-container { font-size: 20px; padding-top: 30px; margin-bottom: 30px; float: left; width: 100%; } .formApproval .s-widget-header.ui-corner-tl.ui-corner-tr { display: none; } .formApproval .alpaca-form-fields-container { padding: 0 100px; } .formApproval .alpaca-form-buttons-container { padding: 0 100px; padding-bottom: 25px; } .formApproval .alpaca-form-button.alpaca-form-button-submit { display: inline-block; width: 100%; border: none; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; padding: 15px 10px; margin-right: 0; cursor: pointer; box-sizing: border-box; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; box-sizing: border-box; background-color: #ffec00; color: #000; } .formApproval .alpaca-controlfield-label { color: #7b7b7b; background: white; position: absolute; left: 20px; padding: 0 10px; font-size: 16px !important; bottom: calc(100% - 20px); z-index: 1000; } .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="IdCardStreet"] { width: 70%; float: left; } .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="IdCardStreetNumber"] { width: 30%; float: left; } .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="new-fd394"] { display: inline-block; width: 100%; } .formApproval .alpaca-controlfield-radio-item.radio { padding: 15px 30px; } .formApproval .alpaca-controlfield { padding: 10px; position: relative; } .formApproval .alpaca-fieldset-legend.legend-expanded { font-size: 25px; text-transform: uppercase; line-height: 40px; text-align: center; padding-top: 25px; padding-bottom: 25px; pointer-events: none; } .formApproval .error-helper-1.center { color: red; } .formApproval .alpaca-controlfield-message-text { color: red; } @media only screen and (max-width: 600px) { .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="IdCardStreet"] { width: 100%; } .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="IdCardStreetNumber"] { width: 100%; } .formApproval .alpaca-fieldset-items-container .alpaca-fieldset-item-container[data-alpaca-item-container-item-key="new-fd394"] { padding-bottom: 25px; } } #page-header .header-icons .tooltip { position: relative; } #page-header .header-icons .tooltip .t-modal { display: block; padding: 5px; background-color: rgba(73, 80, 90, 0.7); position: absolute; bottom: 100%; margin-bottom: 12px; font-size: 14px; line-height: 18px; font-weight: 500; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: 0s; -moz-transition: 0s; -ms-transition: 0s; -o-transition: 0s; transition: 0s; border-radius: 0px; } #page-header .header-icons .tooltip .t-modal.padding { padding: 15px; } #page-header .header-icons .tooltip .t-modal.size-1 { max-width: 300px; white-space: nowrap; } #page-header .header-icons .tooltip .t-modal.t-right { right: 50%; } #page-header .header-icons .tooltip .t-modal.t-right:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 0px 0 13px; border-color: #49505a transparent transparent transparent; position: absolute; right: 0px; bottom: -12px; opacity: 0.7; } #page-header .header-icons .tooltip:hover .t-modal { opacity: 1; visibility: visible; width: auto; top: -89%; } .blueBackground { background-image: url(images/icons/blueFilter1.png) !important; border: 2px solid #0095c9; } .s-page-host .page-title-wrapper-forTabs h2 { color: #266eff; } .s-page-host.login .s-widget-zone { float: right; width: 500px; min-height: unset; background-color: #f0f1f5; } .s-page-host.login .s-widget-zone#zone_112842 { min-height: 100vh; } #loginTypeSelector { display: none; } .LoginRetail { width: 100%; } .LoginRetail .s-widget-body { position: inherit !important; } .LoginRetail .login-form .validationMessage { padding: 2px 0 0 24px; line-height: 1.1; margin: 0; } .LoginRetail .with-icon { display: block; } .LoginRetail .buttons-wrapper .btn-arrow-1 { position: absolute; top: 53%; transform: translateY(-50%); width: 17px; height: 12px; right: 20px; transition: transform .3s,-webkit-transform .3s; } .LoginRetail .buttons-wrapper .btn-arrow-2 { position: absolute; top: 53%; transform: translateY(-50%); width: 17px; height: 12px; right: 20px; transition: transform .3s,-webkit-transform .3s; } .LoginRetail .buttons-wrapper:hover .btn-arrow-1, .LoginRetail .buttons-wrapper:hover .btn-arrow-2 { transform: translate(5px, -50%); } .LoginRetail .input-1:-webkit-autofill, .LoginRetail .input-1:-webkit-autofill:hover, .LoginRetail .input-1:-webkit-autofill:focus, .LoginRetail .input-1:-webkit-autofill:active, .LoginRetail .input-1:-webkit-autofill::first-line { background-color: unset; } .LoginRetail .login-form-col { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: auto; min-height: calc(100vh - 104px); margin: 0 0 0 auto; background-color: #F0F1F5; } .LoginRetail .login-form-col .inner { width: 316px; padding-top: 36px; padding-bottom: 50px; margin: 0 auto; } .LoginRetail .login-form-col .inner .forgot-pass-wrapper { display: block; text-align: center; } .LoginRetail .login-form-col .inner .forgot-pass-wrapper a { color: inherit; font-family: ibm-regular; font-size: 14px; } .LoginRetail .login-form-col .inner .forgot-pass-wrapper p { display: inline-block; } .LoginRetail .login-form-col .social-icons-wrapper { position: relative; display: flex; justify-content: center; width: 300px; padding-top: 48px; padding-bottom: 34px; margin: 0 auto; } .LoginRetail .login-form-col .social-icons-wrapper:after { content: ""; width: 98%; height: 1px; position: absolute; top: 0; right: 0; border-top: 1px solid #d7d8db; } .LoginRetail .login-form-col .social-icons-wrapper .social-icons { width: 40px; height: 40px; position: relative; background-color: #f3f6f8; border-radius: 50%; margin-right: 24px; transition: background-color .3s ease-in-out; } .LoginRetail .login-form-col .social-icons-wrapper .social-icons:hover { background-color: #dadddf; } .LoginRetail .login-form-col .social-icons-wrapper .social-icons { width: 40px; height: 40px; position: relative; background-color: transparent; border-radius: 50%; margin-right: 24px; transition: background-color .3s ease-in-out; } .LoginRetail .login-form-col .social-icons-wrapper .social-icons .social-svg-icon { width: 24px; height: 24px; fill: #266eff; color: #266eff; stroke: none; } .LoginRetail .login-form-col .social-icons-wrapper .social-icons .absolute-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .LoginRetail .login-form-col .social-icons-wrapper .social-icons:last-child { margin-right: 0; } .input-error-msg { display: none; font-family: ibm-medium; font-size: 10px; line-height: 1.1; text-align: left; padding: 2px 0 0 24px; color: #e64b4b; } .underline { text-decoration: underline; } .languagesContainer { justify-content: flex-end; min-width: 200px; display: flex; position: absolute; right: 220px; top: 33px; z-index: 12; } .languagesContainer .s-portal-languageSelector { top: 77px; right: 57px; display: flex; align-items: center; padding: 2px; background-color: #f3f6f8; border-radius: 20px; } .languagesContainer .s-portal-languageSelector-dd { display: none; } .languagesContainer .s-portal-language.active:after { position: absolute; content: ""; width: 36px; height: 36px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #266eff; z-index: -1; } .languagesContainer .active-lang > ul.s-portal-languageSelector { cursor: pointer; } .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="ar"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="ru-RU"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="he"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="es-AR"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="mk-MK"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="ro-RO"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="uk-UA"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="sr-Cyr-CS"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="sq-AL"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="tr-TR"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="de-DE"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="sq"], .languagesContainer .active-lang > ul.s-portal-languageSelector > li[data-culture="tr"] { display: none; } .languagesContainer .active-lang > ul.s-portal-languageSelector > li.invisible { display: none; } .languagesContainer .active-lang > ul.s-portal-languageSelector > .s-portal-language { position: relative; font-family: ibm-medium; font-size: 14px; line-height: 1; letter-spacing: -.02em; color: #194137; padding: 9px; background-color: #f3f6f8; border-radius: 50%; transition: background-color .3s; z-index: 1; } .languagesContainer .lang-selector { display: none; } .lang-title { font-family: ibm-medium; text-transform: uppercase; } body.languageVisible .languagesContainer { opacity: 0; } body.languageVisible .languagesContainer .s-portal-languageSelector { top: 33px; right: 220px; } .table-row { width: 100%; min-height: 50px; padding: 16px 0; background-color: #f3f6f8; border-radius: 12px; border: 2px solid #f3f6f8; transition: border .3s ease-in-out; cursor: pointer; } .margin-5 { margin-bottom: 5px; } .flex-center { align-items: center; } .flex-layout { display: flex; } .icon-left-wrapper { min-width: 56px; max-width: 56px; width: 100%; padding-top: 1.3%; left: -45px; top: 13px; } .icon-left-wrapper:after { content: ""; width: 1px; height: 30px; position: absolute; right: 0; top: -15px; background-color: #d7d8db; } .icon-left-wrapper .down-arrow, .icon-left-wrapper .up-arrow { width: 9px; height: 12px; stroke: none; color: #75868E; } .icon-right-wrapper { min-width: 60px; max-width: 60px; width: 100%; padding-top: 12.5%; opacity: 0; visibility: hidden; transition: opacity ease-in-out .3s, visibility ease-in-out .3s; right: -130%; top: 12px; cursor: pointer; } .icon-right-wrapper::after { content: ""; width: 1px; height: 30px; position: absolute; left: 0; top: -13px; background-color: #d7d8db; } .icon-right-wrapper .download-icon-svg { width: 12px; height: 16px; fill: #194137; stroke: none; } .icon-right-wrapper .print-icon-svg, .icon-right-wrapper .unread-icon-svg, .icon-right-wrapper .read-icon-svg, .icon-right-wrapper .trash-icon-svg { width: 20px; height: 20px; fill: #666696; color: #666696; stroke: none; } .icon-right-wrapper svg.print-icon-svg { left: 35% !important; } .icon-right-wrapper .unread-icon-svg { display: none; } .icon-right-wrapper .read-icon-svg { display: block; } .icon-right-wrapper.CREATED .unread-icon-svg { display: block; } .icon-right-wrapper.CREATED .read-icon-svg { display: none; } .mail-icon-svg { width: 20px; height: 20px; fill: #666696; stroke: none; } .table-intro-payment .with-icon-left { padding-left: 50px; } .relative { position: relative; } .first-col { padding-left: 20px; } .date-col { width: 15%; padding-right: 10px; } .info-payment-col { width: 69%; padding-right: 15px; } .line-height-1 { line-height: 1; } .line-height-2 { line-height: 1.25; } .last-col { padding-right: 20px; } .payment-col { width: 24%; padding-left: 10px; } .text-7 { font-size: 12px; } .font-6 { font-family: "ibm-medium"; } .right { text-align: right !important; } .uppercase { text-transform: uppercase; } .header-col-1 { padding-left: 5px; } .AccountTurnoverV2 .down-arrow, .AccountTurnoverV2 .up-arrow { width: 10px; height: 10px; stroke: none; } .AccountTurnoverV2 .down-arrow { fill: #75868e; color: #75868e; transform: rotate(180deg); } .AccountTurnoverV2 .down-arrow { color: #266eff; } .AccountTurnoverV2 .absolute-center, .AccountTurnoverV2 .contain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .AccountStatements .absolute-center, .AccountStatements .contain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .arrow-icon-svg { position: absolute; width: 20px; height: 20px; fill: #75868e; stroke: none; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #266eff; } .gvCardSpendings, .gvCardTurnover, .gvAccountTurnoverPreview { position: relative; margin-bottom: 50px; } .gvCardSpendings .clientGrid thead th:nth-child(2), .gvCardTurnover .clientGrid thead th:nth-child(2), .gvAccountTurnoverPreview .clientGrid thead th:nth-child(2) { width: 15%; margin-left: 23px; } .gvCardSpendings .clientGrid thead th:nth-child(3), .gvCardTurnover .clientGrid thead th:nth-child(3), .gvAccountTurnoverPreview .clientGrid thead th:nth-child(3) { width: 69%; margin-left: 15px; } .gvCardSpendings .clientGrid thead th:nth-child(4), .gvCardTurnover .clientGrid thead th:nth-child(4), .gvAccountTurnoverPreview .clientGrid thead th:nth-child(4) { width: 24%; } .gvCardSpendings .clientGrid tbody tr, .gvCardTurnover .clientGrid tbody tr, .gvAccountTurnoverPreview .clientGrid tbody tr { align-self: center; } .gvCardSpendings .clientGrid tbody tr td:nth-child(2), .gvCardTurnover .clientGrid tbody tr td:nth-child(2), .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(2) { width: 15%; padding-left: 37px; margin-right: 30px; } .gvCardSpendings .clientGrid tbody tr td:nth-child(2) div ~ span, .gvCardTurnover .clientGrid tbody tr td:nth-child(2) div ~ span, .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(2) div ~ span { display: block; margin-left: 24px; margin-top: 6px; } .gvCardSpendings .clientGrid tbody tr td:nth-child(3), .gvCardTurnover .clientGrid tbody tr td:nth-child(3), .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(3) { width: 73%; } .gvCardSpendings .clientGrid tbody tr td:nth-child(3) span span, .gvCardTurnover .clientGrid tbody tr td:nth-child(3) span span, .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(3) span span { display: block; margin-top: 9px; } .gvCardSpendings .clientGrid tbody tr td:nth-child(4), .gvCardTurnover .clientGrid tbody tr td:nth-child(4), .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(4) { width: 20%; padding-right: 20px; } .gvCardSpendings .clientGrid tbody tr td:nth-child(4) p, .gvCardTurnover .clientGrid tbody tr td:nth-child(4) p, .gvAccountTurnoverPreview .clientGrid tbody tr td:nth-child(4) p { margin-top: 9px; } .gvAccountTurnoverPreview svg.search-icon-svg { left: 10px; top: 19px; } .gvOrderPreviewList .clientGrid thead tr th:nth-child(2) { width: 15%; margin-left: 38px; } .gvOrderPreviewList .clientGrid thead tr th:nth-child(3) { width: 69%; margin-left: 0px; } .gvOrderPreviewList .clientGrid thead tr th:nth-child(4) { width: 24%; } .gvOrderPreviewList .clientGrid tbody tr td span { font-size: 15px !important; font-family: "aeonik-regular" !important; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(2) { width: 15%; padding-left: 25px; margin-right: 30px; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(2) span { display: block; margin-left: 25px; margin-top: 3px; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(2) span .icon-left-wrapper:after { content: ""; width: 1px; height: 30px; position: absolute; right: 0px; top: -15px; background-color: #d7d8db; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(3) { width: 69%; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(3) span span { display: block; margin-left: 15px; margin-top: 10px; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(4) { width: 20%; padding-right: 20px; text-align: right; } .gvOrderPreviewList .clientGrid tbody tr td:nth-child(4) span span { margin-top: 10px; } .gvLoanRepayments { position: relative; } .gvLoanRepayments .icon-left-wrapper { top: 13px; left: -60px; } .gvLoanRepayments .clientGrid thead th:nth-child(2) { width: 15%; margin-left: 23px; } .gvLoanRepayments .clientGrid thead th:nth-child(3) { width: 45%; margin-left: 10px; } .gvLoanRepayments .clientGrid thead th:nth-child(4) { width: 21%; padding-right: 5px; } .gvLoanRepayments .clientGrid thead th:nth-child(5) { width: 18%; padding-left: 107px; } .gvLoanRepayments .clientGrid tbody { width: 100%; } .gvLoanRepayments .clientGrid tbody tr { align-self: center; } .gvLoanRepayments .clientGrid tbody tr td { display: block; } .gvLoanRepayments .clientGrid tbody tr td p { display: block; padding-top: 8px; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(2) { width: 15%; padding-left: 60px; margin-right: 30px; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(2) div ~ span { display: block; margin-left: 10px; margin-top: -2px; padding-top: 8px; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(3) { width: 45%; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(3) span span { display: block; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(4) { width: 20%; padding-right: 20px; } .gvLoanRepayments .clientGrid tbody tr td:nth-child(5) { width: 20%; padding-right: 20px; } .gvStatementList .clientGrid .align-left { text-align: left; } .gvStatementList .clientGrid .align-center { text-align: center; } .gvStatementList .clientGrid thead th:nth-child(2) { width: 25%; padding-left: 70px; } .gvStatementList .clientGrid thead th:nth-child(3) { width: 18%; } .gvStatementList .clientGrid thead th:nth-child(4) { width: 15%; } .gvStatementList .clientGrid thead th:nth-child(4) div { float: left; } .gvStatementList .clientGrid thead th:nth-child(5) { width: 11%; } .gvStatementList .clientGrid thead th:nth-child(6) { width: 14%; } .gvStatementList .clientGrid thead th:nth-child(7) { width: 8%; } .gvStatementList .clientGrid thead th:nth-child(7) > div { padding-right: 0 !important; width: 100%; } .gvStatementList .clientGrid thead th:nth-child(8) span { visibility: hidden; } .gvStatementList .clientGrid tbody .icon-right-wrapper { right: -50px; } .gvStatementList .clientGrid tbody tr { align-self: center; cursor: auto; } .gvStatementList .clientGrid tbody tr td:nth-child(2) { width: 24%; padding-left: 50px; } .gvStatementList .clientGrid tbody tr td:nth-child(2) span { display: block; } .gvStatementList .clientGrid tbody tr td:nth-child(2) span span ~ span { margin-left: 10px; margin-top: 5px; } .gvStatementList .clientGrid tbody tr td:nth-child(3) { width: 18%; } .gvStatementList .clientGrid tbody tr td:nth-child(3) span { display: block; margin-left: 10px; margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(4) { width: 15%; } .gvStatementList .clientGrid tbody tr td:nth-child(4) span { display: block; margin-left: 10px; margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(5) { width: 8%; } .gvStatementList .clientGrid tbody tr td:nth-child(5) span { display: block; margin-left: 10px; margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(6) { width: 14%; margin-left: 17px; } .gvStatementList .clientGrid tbody tr td:nth-child(6) span { display: block; margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(7) { width: 11%; } .gvStatementList .clientGrid tbody tr td:nth-child(7) span { display: block; margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(7) span div { margin-top: 8px; } .gvStatementList .clientGrid tbody tr td:nth-child(8) { width: 9%; min-width: 60px; position: sticky; margin-top: 4px; } .gvStatementList .clientGrid tbody tr td:nth-child(8) .right-icons-hidden-wrapper .icon-right-wrapper { position: absolute; right: 0px; top: 10px; } .gvStatementList .clientGrid tbody tr td:nth-child(8) .right-icons-hidden-wrapper .icon-right-wrapper .print-icon-svg { left: 50% !important; } .gvStatementList .clientGrid tbody tr td:nth-child(8) .right-icons-hidden-wrapper .icon-right-wrapper:after { top: -10px; } .gvStatementDetails .clientGrid thead th:nth-child(2) { width: 12%; } .gvStatementDetails .clientGrid thead th:nth-child(3) { width: 12%; } .gvStatementDetails .clientGrid thead th:nth-child(4) { width: 40%; } .gvStatementDetails .clientGrid thead th:nth-child(4) div { float: left; } .gvStatementDetails .clientGrid thead th:nth-child(5) { width: 6%; margin-left: 20px; } .gvStatementDetails .clientGrid thead th:nth-child(6) { width: 10%; } .gvStatementDetails .clientGrid thead th:nth-child(6) div { float: right; padding-right: 0; } .gvStatementDetails .clientGrid thead th:nth-child(7) { width: 10%; } .gvStatementDetails .clientGrid thead th:nth-child(7) div { float: right; padding-right: 0; } .gvStatementDetails .clientGrid thead th:nth-child(8) { width: 10%; } .gvStatementDetails .clientGrid thead th:nth-child(8) div { float: right; padding-right: 0; } .gvStatementDetails .clientGrid tbody tr { align-self: center; cursor: auto; vertical-align: middle; padding: 5px 0; } .gvStatementDetails .clientGrid tbody tr td:nth-child(2) { width: 12%; padding-left: 10px; } .gvStatementDetails .clientGrid tbody tr td:nth-child(2) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(3) { width: 12%; } .gvStatementDetails .clientGrid tbody tr td:nth-child(3) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(4) { width: 40%; } .gvStatementDetails .clientGrid tbody tr td:nth-child(4) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(5) { width: 6%; text-align: right; } .gvStatementDetails .clientGrid tbody tr td:nth-child(5) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(6) { width: 10%; } .gvStatementDetails .clientGrid tbody tr td:nth-child(6) div { float: right; } .gvStatementDetails .clientGrid tbody tr td:nth-child(6) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(7) { width: 10%; } .gvStatementDetails .clientGrid tbody tr td:nth-child(7) div { float: right; } .gvStatementDetails .clientGrid tbody tr td:nth-child(7) span { display: block; } .gvStatementDetails .clientGrid tbody tr td:nth-child(8) { width: 10%; } .gvStatementDetails .clientGrid tbody tr td:nth-child(8) div { float: right; } .gvStatementDetails .clientGrid tbody tr td:nth-child(8) span { display: block; } .currency-icon { width: 20px; height: 20px; margin-right: 15px; } .with-icon { display: flex; align-items: center; } .with-border { position: relative; } .with-border::after { content: ""; width: 1px; height: 60%; position: absolute; top: 2px; right: 0; background-color: #d7d8db; } .currency-flag { content: ""; position: absolute; top: 6px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; background-repeat: no-repeat; background-size: cover; background-position: 50%; } .gvCurrencyExchange .clientGrid thead tr { padding: 0 15px 0 18px; } .gvCurrencyExchange .clientGrid thead tr th { text-align: right; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(2) { width: 9.92%; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(2) div { float: left; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(3) { width: 14.18%; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(3) div { float: right; padding-right: 0; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(4), .gvCurrencyExchange .clientGrid thead tr th:nth-child(5), .gvCurrencyExchange .clientGrid thead tr th:nth-child(6), .gvCurrencyExchange .clientGrid thead tr th:nth-child(7), .gvCurrencyExchange .clientGrid thead tr th:nth-child(8) { width: 15.18%; padding-left: 40px; } .gvCurrencyExchange .clientGrid thead tr th:nth-child(4) div, .gvCurrencyExchange .clientGrid thead tr th:nth-child(5) div, .gvCurrencyExchange .clientGrid thead tr th:nth-child(6) div, .gvCurrencyExchange .clientGrid thead tr th:nth-child(7) div, .gvCurrencyExchange .clientGrid thead tr th:nth-child(8) div { float: right; padding-right: 0; white-space: break-spaces; } .gvCurrencyExchange .clientGrid tbody tr { cursor: auto; padding: 0 15px 11px 10px; transform: none; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(2) { width: 9.92%; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(2) span span { padding: 5px; display: block; margin-top: -6px; padding-left: 10px; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(3) { width: 14.18%; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(3) span { display: block; float: right; padding: 5px; margin-top: -6px; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(4), .gvCurrencyExchange .clientGrid tbody tr td:nth-child(5), .gvCurrencyExchange .clientGrid tbody tr td:nth-child(6), .gvCurrencyExchange .clientGrid tbody tr td:nth-child(7), .gvCurrencyExchange .clientGrid tbody tr td:nth-child(8) { width: 15.18%; } .gvCurrencyExchange .clientGrid tbody tr td:nth-child(4) span, .gvCurrencyExchange .clientGrid tbody tr td:nth-child(5) span, .gvCurrencyExchange .clientGrid tbody tr td:nth-child(6) span, .gvCurrencyExchange .clientGrid tbody tr td:nth-child(7) span, .gvCurrencyExchange .clientGrid tbody tr td:nth-child(8) span { display: block; float: right; padding: 5px; margin-top: -6px; } .accountStatements.modal-wrapper.active { width: 1200px !important; max-width: none !important; left: calc(50% - 500px) !important; } .clientGridPager .wrapper { display: flex; padding: 2px; background-color: #f3f6f8; border-radius: 20px; margin-left: 0px; } .clientGridPager .wrapper .activeNum { padding-left: 8px; padding-top: 5px; font-family: 'ibm-bold'; width: 34px; left: 2px; height: 32px; display: block; position: absolute; top: 51%; transform: translateY(-50%); border-radius: 26px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16); } .clientGridPager .wrapper ul { display: flex; } .clientGridPager .wrapper ul li { position: relative; font-family: 'ibm-medium'; font-size: 14px; line-height: 1; letter-spacing: -.02em; color: #194137; padding: 9px; border-radius: 50%; transition: background-color .3s; z-index: 1; } .right-content-wrapper { width: 73% !important; float: right; } .right-content-wrapper .right-intro-serach-filter-wrapper { position: relative; padding-bottom: 14px; } .customOffers { width: 100% !important; } .customOffers .right-intro-serach-filter-wrapper::after { display: none; } .customOffers .custom-offers-slider .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; justify-content: space-between; } .customOffers .custom-offers-slider .slide { position: relative; padding: 32px 24px; border-radius: 12px; overflow: hidden; margin-right: 24px; } .customOffers .custom-offers-slider .slide:last-child { margin-right: 0 !important; } .customOffers .custom-offers-slider .slide-type-image { width: calc(30% - 18px); height: 18vw; max-height: 220px; background-color: #194137; cursor: pointer; background-size: cover; transition: transform 0.5s; } .customOffers .custom-offers-slider .slide-type-image::after { position: absolute; content: ''; width: 100%; height: 100%; inset: 0; background: linear-gradient(transparent 0%, #000 100%); opacity: 0.3; } .customOffers .custom-offers-slider .slide-type-image:hover { transform: scale(1.05); } .customOffers .custom-offers-slider .slide-type-image .slide-title { font-family: "ibm-medium"; font-size: 12px; line-height: 1.25; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin-bottom: 8px; transition: color .3s; } .customOffers .custom-offers-slider .slide-type-image .slide-text { font-family: "tt-norms-regular"; font-size: 24px; line-height: 1.0833333; color: #fff; transition: color .3s; width: 100%; margin-left: 0; margin-top: 0; } .customOffers .custom-offers-slider .slide-type-image img { transition: transform .3s ease-in-out; } .customOffers .custom-offers-slider .dashboard-offer1 { background-image: url("../AIKRetail/images/demo/E-banking-4-320x220px.jpg"); } .customOffers .custom-offers-slider .dashboard-offer2 { background-image: url("../AIKRetail/images/demo/E-banking-7-320x220px.jpg"); } .customOffers .custom-offers-slider .slide-type-bg-1 .slide-content, .customOffers .custom-offers-slider .slide-type-bg-2 .slide-content { align-items: flex-start; } .customOffers .custom-offers-slider .slide-type-bg-1 { width: calc(20% - 18px); height: 18vw; max-height: 220px; cursor: pointer; background-color: #266eff; transition: background-color .3s; } .customOffers .custom-offers-slider .slide-type-bg-1:hover { background-color: #000F28; } .customOffers .custom-offers-slider .slide-type-bg-1:hover .slide-text { color: #fff; } .customOffers .custom-offers-slider .slide-type-bg-1:hover .slide-arrow { color: #f21844; transform: translateX(10px); } .customOffers .custom-offers-slider .slide-type-bg-1 .slide-text { font-family: "tt-norms-regular"; font-size: 24px; line-height: 1.2; color: #fff; width: 100%; margin-left: 0; margin-top: 0; } .customOffers .custom-offers-slider .slide-type-bg-1 .slide-arrow { color: #fff; } .customOffers .custom-offers-slider .slide-type-bg-2 { width: calc(20% - 18px); height: 18vw; max-height: 220px; background-color: #000F28; cursor: pointer; transition: background-color .3s; } .customOffers .custom-offers-slider .slide-type-bg-2:hover { background-color: #266eff; } .customOffers .custom-offers-slider .slide-type-bg-2:hover .slide-text { color: #fff; } .customOffers .custom-offers-slider .slide-type-bg-2:hover .slide-arrow { color: #fff; transform: translateX(10px); } .customOffers .custom-offers-slider .slide-type-bg-2 .slide-text { font-family: "tt-norms-regular"; font-size: 24px; line-height: 1.2; color: #fff; width: 100%; margin-left: 0; margin-top: 0; } .customOffers .custom-offers-slider .slide-type-bg-2 .slide-arrow { color: #f21844; } .customOffers .custom-offers-slider .slide-content { position: relative; display: flex; align-items: flex-end; height: 100%; z-index: 1; } .customOffers .custom-offers-slider .slide-arrow { position: absolute; width: 16px; height: 15px; bottom: 0; right: 0; transition: color .3s, transform .3s; color: #fff; } .customOffers .custom-offers-slider .offer-CREDIT-dash .slide-arrow, .customOffers .custom-offers-slider .offer-SAVINGS-dash .slide-arrow { bottom: inherit; top: 0; } .customOffers .custom-offers-slider .offer-CREDIT-dash:hover .slide-arrow, .customOffers .custom-offers-slider .offer-SAVINGS-dash:hover .slide-arrow { transform: translateX(10px); } .customOffers .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0 0 20px 0; z-index: 1; border-radius: 12px; overflow-x: auto; } .dashboard { justify-content: space-between; float: right !important; } .dashboard .currency-main-form-buttons { transform: translate(0%, -50%); } .dashboard .currency-main-form-buttons .btn-1.with-icon { padding: 17px 100px 16px 20px; text-align: left; width: 220px; } .dashboard .AccountTurnoverV2 .gridFilterArea { display: none; } .dashboard .AccountTurnoverV2 .clientGridPager { display: none !important; } .dashboard .CurrencyExchangeV2 { width: 50%; margin: 0px !important; float: left; padding: 0px; position: relative; } .dashboard .CurrencyExchangeV2 .margin-56 { margin-top: 0px; } .dashboard .CurrencyExchangeV2 .currency-intro-text { margin-bottom: 0px; } .dashboard .CurrencyExchangeV2 .currency-form { margin-bottom: 0px; padding-bottom: 0px; } .dashboard .CurrencyExchangeV2 .currency-form::before { display: none; } .dashboard .CurrencyExchangeV2 .currency-table-wrapper::after { display: none; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr { padding-right: 15px; display: flex; align-items: flex-end; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(2) { width: 18%; margin-right: 20px; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(4) { width: 27% !important; padding-right: 10px; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(5) { width: 27% !important; padding-right: 10px; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(6) { width: 27% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(3), .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(7), .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid thead tr th:nth-child(8) { width: 0% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr { padding-right: 15px; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(2) { width: 21% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(4) { width: 27% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(5) { width: 27% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(6) { width: 27% !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(3), .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(7), .dashboard .CurrencyExchangeV2 .gvCurrencyExchange .clientGrid tbody tr td:nth-child(8) { width: 0% !important; } .dashboard .CurrencyCalculator { width: 50%; float: right; padding-left: 26px; margin-left: 0px !important; margin-bottom: 0px; } .dashboard .CurrencyCalculator .btn-5 { margin-bottom: 35px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-title { margin-bottom: 8px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left { padding-right: 0 !important; box-shadow: none !important; width: 100%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper { padding-bottom: 24px; margin-bottom: 24px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-wrapper { margin-bottom: 0; margin-right: 0; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-wrapper:first-child { margin-right: 35px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .col-l { width: 50%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.with-border .input-wrapper-inner:after { position: absolute; content: ""; width: 100%; height: 1px; bottom: 0; left: 0; background: transparent; border-top: 1px solid #d7d8db; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner { display: flex; justify-content: space-between; align-items: flex-start; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .col-1 { width: 100%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-wrapper:first-child { margin-right: 35px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-1 { width: 100% !important; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-between-arrow-wrapper { position: absolute; width: 12px; height: 11px; top: calc(40% - 6px); left: 50%; transform: translate(-50%, -50%); color: #266eff; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-between-arrow-wrapper .input-between-arrow { width: 100%; height: 100%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left::after { display: none; } .dashboard .CurrencyCalculator .currency-calculator-right { display: none; } .dashboard .CurrencyCalculator .select-1 { height: 50px !important; width: 100%; } .dashboard .CurrencyCalculator .select-1 .dk-selected { top: -7px; } .dashboard .CurrencyCalculator .select-1-currency-icon::before { width: 23px !important; height: 25px !important; } .search-filter-bar .search-wrapper { width: 78%; margin-right: 16px; } .search-filter-bar .search-wrapper .serach-input { height: 40px; width: 100%; padding: 11px 15px 11px 44px; border: 2px solid #c3cbd0; border-radius: 30px; font-size: 14px; font-family: "ibm-regular"; letter-spacing: -.01em; color: #75868e; } .search-filter-bar .filter-wrapper { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; cursor: pointer; -webkit-transition: background-color .3s; transition: background-color .3s; } .justify-end { justify-content: flex-end; } .search-icon-svg { width: 20px; height: 20px; left: 12px; top: 18px; transform: translateY(-50%); color: #666696; } .filter-icon-svg { width: 24px; height: 24px; stroke: none; -webkit-transition: color .3s; transition: color .3s; color: #266eff; } .absolute { position: absolute; } .space-between { justify-content: space-between; } .document-icon-svg { width: 14px; height: 16px; fill: #75868e; stroke: none; } .ui-dialog-content, .modal-content, .table-payment-wrapper, .side-modal-content, .modal-wrapper { scrollbar-color: #C3CBD0 transparent; scrollbar-width: thin; } .ui-dialog-content::-webkit-scrollbar, .modal-content::-webkit-scrollbar, .table-payment-wrapper::-webkit-scrollbar, .side-modal-content::-webkit-scrollbar, .modal-wrapper::-webkit-scrollbar { width: 8px; } .ui-dialog-content::-webkit-scrollbar-track, .modal-content::-webkit-scrollbar-track, .table-payment-wrapper::-webkit-scrollbar-track, .side-modal-content::-webkit-scrollbar-track, .modal-wrapper::-webkit-scrollbar-track { background: transparent; } .ui-dialog-content::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .table-payment-wrapper::-webkit-scrollbar-thumb, .side-modal-content::-webkit-scrollbar-thumb, .modal-wrapper::-webkit-scrollbar-thumb { background: #C3CBD0; border-radius: 5px; } .ui-dialog-content::-webkit-scrollbar-thumb:hover, .modal-content::-webkit-scrollbar-thumb:hover, .table-payment-wrapper::-webkit-scrollbar-thumb:hover, .side-modal-content::-webkit-scrollbar-thumb:hover, .modal-wrapper::-webkit-scrollbar-thumb:hover { background: #a6b2ba; } .modal-container { display: flex; align-items: center; justify-content: center; position: fixed; width: 100%; height: 100%; inset: 0; transform: translateY(100%); transition: opacity 1.2s, visibility .5s, transform .5s; transition-delay: 0; opacity: 0; visibility: hidden; z-index: 201; } .modal-container.active { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0; } .modal-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .modal-header { position: sticky; top: 0; left: 0; background-color: #F0F1F5; padding: 29px 75px 25px 32px; overflow: hidden; z-index: 2; width: 100%; } .modal-header::after { position: absolute; content: ''; width: 100%; height: 1px; left: 0; bottom: 0; border-top: 1px solid #d7d8db; } .modal-close { position: absolute; width: 24px; height: 24px; top: 32px; right: 32px; color: #666696; transition: color .3s; cursor: pointer; } .modal-close:hover { color: #194137; } .modal-close:active .modal-close-icon { transform: scale(0.95); } .modal-close-icon { position: absolute; width: 100%; height: 100%; inset: 0; transition: transform .2s; } .modal-content { padding: 32px; background: #F0F1F5; position: relative; z-index: 1; } .modal-footer { padding: 0 32px 32px; bottom: 0; left: 0; background-color: #F0F1F5; z-index: 2; } .modal-footer .buttons-wrapper:nth-child(1).btn-1 { margin-left: 150px; } .modal-footer .buttons-wrapper .btn-2.with-icon-left { background-color: #fff; } .modal-footer .buttons-wrapper .btn-2.with-icon-left:hover { background-color: #e6e6e6; } .modal-footer .buttons-wrapper div { margin-top: 0; } .three-options-wrapper { position: relative; display: flex; align-items: center; padding: 4px; background-color: #d7d8db; border-radius: 30px; } .part-modal-inner { position: relative; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #d7d8db; /*p { margin-bottom: 20px !important; font-size: 12px; font-family: $font-aeonik-medium; }*/ } .part-modal-inner:last-child { border-bottom: none; } .option-toggle { position: relative; width: 33.3333%; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.14; letter-spacing: -.02em; color: #666696; padding: 15px 26px 14px; text-align: center; border-radius: 26px; z-index: 2; float: left; cursor: pointer; } .option-toggle.active { color: #000F28; font-family: "aeonik-bold"; } .selector-toggle-indicator { display: block; position: absolute; width: 33.3333%; height: 44px; top: 50%; transform: translateY(-50%); border-radius: 26px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16); z-index: 1; } .date-modal-inner-wrapper { position: absolute; width: 100%; left: 0; bottom: 40px; position: relative; bottom: 0; left: 0; opacity: 1; } .date-modal-inner-wrapper .currency-filter-box { width: calc(50% - 10px); } .date-modal-inner-wrapper .currency-filter-box .label-1 { top: 5px; } .date-modal-inner-wrapper.active { position: relative; bottom: 0; left: 0; opacity: 1; visibility: visible; } .date-modal-inner-wrapper .input-datepicker-wrapper { min-width: 200px; max-width: 200px; padding: 8px 8px 0; top: 123%; } .date-modal-inner-wrapper .calendar-right { margin-right: 0; } .date-modal-inner-wrapper .datepicker .ui-datepicker-next, .date-modal-inner-wrapper .datepicker .ui-datepicker-prev { width: 20px; height: 20px; top: 2px; } .date-modal-inner-wrapper .datepicker .ui-datepicker-next { right: -2px; } .date-modal-inner-wrapper .datepicker .ui-datepicker-next.ui-state-hover { right: -2px; } .date-modal-inner-wrapper .datepicker .ui-datepicker-title { min-height: 17px; padding: 0 24px; } .date-modal-inner-wrapper .datepicker .ui-datepicker-title select { font-size: 12px; } .date-modal-inner-wrapper .datepicker .ui-datepicker-title table { font-size: 0.6em; } .date-modal-inner-wrapper .datepicker th span { font-size: 12px !important; } .date-modal-inner-wrapper .datepicker td { font-size: 12px !important; } .date-modal-inner-wrapper .datepicker td .ui-state-default { min-height: 20px !important; min-width: 20px !important; } .date-modal-inner-wrapper .datepicker td .ui-state-default::after { top: -2px !important; width: 20px !important; height: 20px !important; } .date-modal-inner-wrapper .currency-filter { background: transparent; } .currency-filter-calendar-icon { position: absolute; width: 16px; height: 15px; right: 22px; stroke: none; fill: #75868E; } .currency-filter-box.disable { opacity: .6; pointer-events: none; } .currency-filter-box.disable .input-1.hasDatepicker { color: #75868e; } .currency-filter-box.disable .hasDatepicker { color: #75868e; } .currency-filter-box.disable .currency-filter, .currency-filter-box.disable .label-1 { opacity: 0.6; pointer-events: none; } .currency-filter-box.disable .datepicker-date { color: #75868E; } .transaction-filter-group-double { display: flex; justify-content: space-between; align-items: center; width: 100%; } .inner-input-wrapper { width: 100%; } .inner-input-wrapper .input-wrapper { width: 50%; margin-right: 15px; } .inner-input-wrapper .input-wrapper:last-child { margin-right: 0; } .account-info-popup-wrapper { flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid #d7d8db; } .account-info-popup-wrapper .inner-loan-detail { width: 100%; margin-bottom: 4px; } .modal-content .input-wrapper { margin-bottom: 0; } .modal-content-inner .inner-loan-detail { flex-wrap: wrap; } .modal-content-inner .inner-loan-detail h3 { width: 100%; } .highcharts-figure { color: transparent !important; margin-top: -30px; margin-right: 28px; } .highcharts-figure #container { height: 192px; } .highcharts-figure, .highcharts-data-table table { min-width: 200px; max-width: 200px; } .chart-legend { margin-top: -160px; margin-left: 238px; position: absolute; } .first-data::after, .second-data::after { content: ""; position: absolute; width: 8px; height: 8px; left: -20px; top: 50%; transform: translateY(-50%); border-radius: 50%; } .first-data::after { background-color: #7da8ff; } .second-data::after { background-color: #000F28; } /* Side modal */ .side-modal-wrapper { position: absolute; width: 100%; max-width: 420px; height: 100vh; top: 0; right: 0; background-color: #fff; border-left: 1px solid #C3CBD0; overflow: hidden; } .side-modal-header { position: relative; padding: 32px; overflow: hidden; } .side-modal-header::after { position: absolute; content: ''; width: 76%; height: 10px; left: 50%; bottom: -18px; box-shadow: 0px -4px 17px 4px rgba(0, 0, 0, 0.1); transform: translateX(-50%); } .side-modal-title { padding-right: 32px; } .side-modal-close { position: absolute; width: 24px; height: 24px; top: 30px; right: 28px; color: #75868E; transition: color .3s; } .side-modal-close:hover { color: #194137; } .side-modal-close:active .side-modal-close-icon { transform: scale(0.95); } .side-modal-close-icon { position: absolute; width: 100%; height: 100%; inset: 0; transition: transform .2s; } .side-modal-content { height: calc(100vh - 175px); padding: 20px 32px 0 32px; overflow-y: auto; } .side-modal-footer { position: absolute; width: 100%; bottom: 0; left: 0; padding: 20px 32px 32px 32px; background-color: #fff; } .holos-menu-item .menu-icon { position: relative; width: 56px !important; height: 56px !important; border-radius: 50%; transition: background-color .3s; background-color: transparent; } .holos-menu-item.selected .menu-icon, .holos-menu-item:hover .menu-icon { position: relative; width: 56px; height: 56px; border-radius: 50%; transition: background-color .3s; background-color: #266eff; } .holos-menu-item.selected .menu-icon svg, .holos-menu-item:hover .menu-icon svg { color: #fff; } .find-more-wrapper, .nav-icons-1 { position: relative; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; } .find-more-wrapper:hover, .nav-icons-1:hover { border-color: #666696; } .find-more-wrapper:hover svg, .nav-icons-1:hover svg { color: #666696; } .nav-icons-1:first-child { margin-right: 8px; } .find-more-wrapper svg, .nav-icons-1 svg { position: absolute; width: 20px; height: 20px; color: #fff; stroke: none; left: 50%; top: 50%; transform: translate(-50%, -50%); } .accounts-list, .card-list { margin-right: 40px; } .left-content-wrapper { margin-top: 30px; } .right-content-wrapper { width: 75%; float: right; margin-top: 50px; } .right-content-wrapper .search-filter-bar { width: 31%; } .main-info-left-wrapper { padding: 32px; border-radius: 16px; background: #266eff; } .main-info-left-wrapper.cards-wrapper, .main-info-left-wrapper.loans-wrapper { background-color: #000F28; } .main-info-left-wrapper.cards-wrapper .card-info-wrapper, .main-info-left-wrapper.cards-wrapper .loans-info-wrapper, .main-info-left-wrapper.loans-wrapper .card-info-wrapper, .main-info-left-wrapper.loans-wrapper .loans-info-wrapper { display: flex; justify-content: space-between; align-items: center; } .main-info-left-wrapper.cards-wrapper .card-info-wrapper .main-decor-wrapper, .main-info-left-wrapper.cards-wrapper .loans-info-wrapper .main-decor-wrapper, .main-info-left-wrapper.loans-wrapper .card-info-wrapper .main-decor-wrapper, .main-info-left-wrapper.loans-wrapper .loans-info-wrapper .main-decor-wrapper { width: 88px; height: 135px; background-image: url(images/main-decor.png); background-repeat: no-repeat; background-size: 100%; } .main-info-left-wrapper .navigation-accessories-wrapper { position: relative; margin-top: 30px; } .main-info-left-wrapper .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .main-info-left-wrapper .swiper-container .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; transform: translate3d(0px, 0, 0); } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide { flex-shrink: 0; height: 100%; position: relative; } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide:after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; border-top: 1px solid #7da8ff; background: transparent; } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide .upper-info-wrapper h2 { margin-top: 3px; } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide .dual-state-wrapper { flex-wrap: wrap; } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide .dual-state-wrapper .left-state { padding-right: 5px; position: relative; width: 50%; /*&:after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; right: 0; @include border-vertical }*/ } .main-info-left-wrapper .swiper-container .swiper-wrapper .swiper-slide .dual-state-wrapper .right-state { padding-left: 24px; width: 50%; } .main-info-left-wrapper .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .bottom-left-btn-wrapper { position: relative; padding-top: 32px; } .bottom-left-btn-wrapper .btn-1.bigger-btn.with-icon-left { margin-top: 5px; } .bottom-left-btn-wrapper svg.btn-arrow { color: #f21844; } .bottom-left-btn-wrapper:after { content: ""; width: 99%; height: 1px; position: absolute; top: 0; left: 0; background: transparent; border-top: 1px solid #d7d8db; } .transaction-filter-group-double { display: flex; justify-content: space-between; align-items: center; width: 100%; } .inner-input-wrapper { width: 100%; } .inner-input-wrapper .input-wrapper { width: 50%; margin-right: 15px; } .inner-input-wrapper .input-wrapper:last-child { margin-right: 0; } .modal-content .input-wrapper { margin-bottom: 0; } .modal-content-inner .inner-loan-detail { flex-wrap: wrap; } .modal-content-inner .inner-loan-detail h3 { width: 100%; } .map-wrapper { width: 100%; height: 100vh; overflow: hidden; } .gm-style .gm-style-iw-c { width: 311px !important; min-width: 294px !important; max-height: unset !important; padding: 24px !important; border-radius: 12px !important; } .gm-style-iw-d { max-height: unset !important; overflow: hidden !important; } .gm-style .gm-style-iw-t::after { display: none !important; } .gm-style .gm-style-iw-tc { display: none !important; } .gm-ui-hover-effect { display: none !important; } .infobox-wrapper-inner .location-info-top { position: relative; display: flex; justify-content: space-between; padding-bottom: 23px; margin-bottom: 16px; } .infobox-wrapper-inner .location-info-top::after { position: absolute; content: ''; width: 100%; height: 2px; bottom: 0; left: 0; background: transparent; border-top: 1px solid #d7d8db; } .infobox-wrapper-inner .location-info-top-left { width: 23%; } .infobox-wrapper-inner .location-info-icon-wrapper { position: relative; width: 63px; height: 84px; margin-left: auto; margin-right: auto; } .infobox-wrapper-inner .location-info-distance { position: relative; padding-left: 18px; } .infobox-wrapper-inner .location-info-distance::after { position: absolute; content: ''; width: 5px; height: 5px; top: 2px; left: 0; background-color: #194137; border: 5px solid #e6e6e6; border-radius: 50%; } .infobox-wrapper-inner .location-info-top-right { width: 72%; } .infobox-wrapper-inner .location-info-with-icon { position: relative; padding-left: 30px; } .infobox-wrapper-inner .location-info-icon { position: absolute; width: 16px; height: 16px; top: 1px; left: 0; color: #194137; } .infobox-wrapper-inner .location-info-mid { position: relative; padding-bottom: 23px; margin-bottom: 16px; } .infobox-wrapper-inner .location-info-mid::after { position: absolute; content: ''; width: 100%; height: 2px; bottom: 0; left: 0; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .infobox-wrapper-inner .location-info-mid-addition-info-block { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #F3F6F8; border-radius: 10px; } .infobox-wrapper-inner .location-info-mid-addition-info-block:first-child { margin-top: 20px; } .infobox-wrapper-inner .location-info-mid-addition-info-block:not(:last-child) { margin-bottom: 8px; } .infobox-wrapper-inner .location-info-mid-adddition-image-wrapper { position: relative; width: 16px; height: 20px; margin-right: 16px; margin-left: 8px; } .infobox-wrapper-inner .location-info-mid-addition-text { position: relative; width: calc(100% - 40px); padding-left: 17px; } .infobox-wrapper-inner .location-info-mid-addition-text::after { position: absolute; content: ''; width: 2px; height: 60%; top: 50%; left: 0; transform: translateY(-50%); background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .infobox-wrapper-inner .btn-1.color-2.closeinfowindow { background-color: #F0F1F5; color: #266eff; } .infobox-wrapper-inner .btn-1.color-2.closeinfowindow:hover { background-color: #F0F1F5; } .map-controls-wrapper { position: absolute; display: flex; justify-content: flex-end; align-items: center; top: 50px; right: 50px; } .map-controls-wrapper .map-control-btn { position: relative; width: 56px; height: 56px; margin-left: 16px; background-color: #fff; color: #75868E; box-shadow: 0px 5px 24px rgba(0, 0, 0, 0.12); border-radius: 50%; transition: color .3s, box-shadow .3s; cursor: pointer; } .map-controls-wrapper .map-control-btn:hover { color: #194137; box-shadow: 0px 5px 24px rgba(0, 0, 0, 0.22); } .map-controls-wrapper .map-control-icon { position: absolute; width: 24px; height: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #282930; } .locationSearchModal .input-wrapper-inner { width: 100%; } .map-search-locations-list .map-search-locations-list-item-link { position: relative; display: block; padding: 16px 20px 16px 50px; } .map-search-locations-list .map-search-locations-list-item-link::after { position: absolute; content: ''; width: 100%; height: 2px; bottom: 0; left: 0; background: transparent; border-top: 1px solid #d7d8db; } .map-search-locations-list .map-search-locations-list-item-link:hover .map-search-locations-list-arrow { right: -10px; } .map-search-locations-list .map-search-locations-list-icon { position: absolute; width: 45px; height: 69px; top: 50%; left: 2px; transform: translateY(-50%); color: #f21844; } .map-search-locations-list .map-search-locations-list-arrow-wrapper { position: absolute; width: 11px; height: 11px; top: 50%; right: 0; transform: translateY(-50%); } .map-search-locations-list .map-search-locations-list-arrow { position: absolute; width: 100%; height: 100%; inset: 0; color: #f21844; transition: .3s; } .side-modal-enter-active, .side-modal-leave-active { transform: translateX(100%); transition: transform .5s; } .side-modal-leave-to { transform: translateX(100%); } .side-modal-enter-to { transform: translateX(0); } .label-radio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .label-radio::after { content: ""; position: absolute; left: 48px; top: 10px; height: 72%; width: 2px; background: transparent; border-left: 1px solid #d7d8db; } .label-text-1 { display: block; padding: 23px 40px 20px 60px; } .radio-input-1 { position: absolute; width: 100%; height: 100%; top: 0; right: 0; opacity: 0; cursor: pointer; } .radio-input-1:checked ~ .checkmark { opacity: 1; visibility: visible; } .radio-wrapper { width: 100%; min-height: 60px; margin-bottom: 8px; background-color: #F3F6F8; border-radius: 12px; } .checkmark { position: absolute; width: 20px; height: 20px; background-color: #266eff; border-radius: 50%; top: 50%; right: 16px; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity ease-in-out .3s, visibility ease-in-out .3s; } .radio-checkmark { width: 10px; height: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #fff; stroke: none; } .radio-icon-left-wrapper { position: absolute; width: 16px; height: 16px; top: 50%; left: 20px; transform: translateY(-50%); stroke: none; } .radio-icon-left-wrapper .btn-icon-left { width: 100%; height: 100%; fill: #194137; stroke: none; } /* Header */ .header-top { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 30px 56px; transition: transform .5s; transform: translateY(0); z-index: 20; } .site-logo-wrapper { float: left; width: 407px; height: 100px; margin-top: -30px; background-color: #000F28; border-radius: 0 0 10px 0; } .site-logo-wrapper .site-logo-nonlogin { position: relative; } .site-logo-wrapper .site-logo-nonlogin:before { content: ""; position: absolute; top: 19px; left: calc(100% + 10px); width: 20px; height: 10px; background-color: #000F28; z-index: -1; } .site-logo-wrapper .site-logo { position: relative; display: block; background: url(images/login/aik-logo.png) center/100% no-repeat; width: 100%; height: 100%; } .site-logo-wrapper .site-logo:before, .site-logo-wrapper .site-logo:after { position: absolute; top: -42px; width: 25px; } .site-logo-wrapper .site-logo:before { content: ""; left: calc(100% + 68px); background-color: #F0F1F5; border-radius: 10px 0 0 0; z-index: 1; height: 20px; top: -24px; } .site-logo-wrapper .site-logo:after { content: ""; left: calc(100% + 52px); background-color: #000F28; -webkit-clip-path: polygon(90% 0, 0 92%, 0 0); clip-path: polygon(90% 0, 0 92%, 0 0); height: 99px; } .site-logo-wrapper:before { content: ""; position: absolute; width: 100%; height: 19px; top: 0; left: 0; background-color: #000F28; } .site-logo-nonlogin { display: flex; justify-content: center; align-items: center; } .lang-selector { cursor: pointer; } .header-icons-wrapper, .lang-wrapper { display: flex; justify-content: flex-end; min-width: 200px; margin-right: 40px; height: 40px; } .header-icons-wrapper .lang-selector, .header-icons-wrapper .lang-nav, .lang-wrapper .lang-selector, .lang-wrapper .lang-nav { display: flex; align-items: center; background-color: #d7d8db; border-radius: 25px; padding: 3px; z-index: 1; } .header-icons-wrapper .lang-selector .lang-option, .header-icons-wrapper .lang-nav .lang-option, .lang-wrapper .lang-selector .lang-option, .lang-wrapper .lang-nav .lang-option { position: relative; font-family: "ibm-medium"; font-size: 14px; line-height: 1; letter-spacing: -0.02em; color: #000F28; padding: 8px; border-radius: 50%; transition: background-color .3s; z-index: 1; } .header-icons-wrapper .lang-selector .lang-option.active::after, .header-icons-wrapper .lang-nav .lang-option.active::after, .lang-wrapper .lang-selector .lang-option.active::after, .lang-wrapper .lang-nav .lang-option.active::after { position: absolute; content: ''; width: 32px; height: 32px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff; z-index: -1; } .lang-wrapper { position: absolute; top: 40px; right: 20px; display: flex; justify-content: flex-end; min-width: 168px; margin-right: 25px; cursor: pointer; } .lang-wrapper .lang-nav { border-radius: 20px; } .lang-wrapper .lang-nav .lang-option.active:after { position: absolute; content: ''; width: 32px; height: 32px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff; z-index: -1; } .header-icon-wrapper { display: inline-block; position: relative; width: 40px; height: 40px; margin-left: 16px; background-color: #F3F6F8; border-radius: 50%; color: #194137; transition: color .3s, background-color .3s; cursor: pointer; } .header-icon-wrapper.has-notification .messages-number { background: #f21844; border-radius: 100%; position: absolute; right: 0; top: 0; width: 16px; height: 16px; text-align: center; line-height: 16px; font-size: 11px; font-family: "ibm-semibold"; color: #fff; } .header-icon-wrapper .header-icon { position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*.UserInfo i { display: inline-block; width: 22px; height: 22px; background-position: center center; background-repeat: no-repeat; cursor: pointer; margin-right: 10px; }*/ /*#region userinfo*/ .s-widget.UserInfo { width: 100%; background-color: transparent; height: 100%; margin-bottom: 0px; margin-top: 30px; } .s-widget.UserInfo .s-widget-content { height: 100%; } .s-widget.UserInfo .s-widget-body { min-height: 0; height: 100%; } .userinfo .s-widget-body .heading { float: left; font-size: 19px; text-transform: uppercase; padding-left: 20px; line-height: 40px; } .userinfo .s-widget-body .loginControls { text-align: right; height: 40px; margin-top: 20px; } .userinfo .site-logo-nonlogin { margin: 0; display: block; width: 100%; height: 100%; cursor: pointer; padding: 43px 52px 24px 150px; } .ui-draggable .ui-dialog-titlebar { visibility: hidden; display: none !important; } .left-inner-loan-detail { width: 45%; padding-right: 35px; } .right-inner-loan-detail { width: 55%; } .overlay-slider-1 { opacity: 0.001 !important; } .header-icon-wrapper { display: inline-block; position: relative; width: 40px; height: 40px; margin-left: 16px; background-color: #fff; border-radius: 50%; color: #266eff; transition: color .3s,background-color .3s; } .header-icon-wrapper:hover { background-color: #266eff; color: #fff; } .header-icon-wrapper:hover .header-icon { color: #fff; } .header-icon-wrapper .header-icon { position: absolute; width: 24px; height: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .s-widget-header:after { content: ""; width: 67%; height: 2px; left: 482px; position: absolute; border: 0; margin-top: 15px; background: repeating-linear-gradient(90deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 5px); } div.statementsFilter { border-bottom: none !important; } .calendarFilter { height: 50px; border: 1px solid #c3cbd0; border-radius: 30px; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f6f8)); background: linear-gradient(#fff, #f3f6f8); cursor: pointer; padding: 21px 40px 7px 22px; } div.statementsFilter { border-bottom: none !important; } .right-intro-serach-filter-wrapper { position: relative; padding-bottom: 14px; } .serach-input { height: 36px; width: 100%; padding: 11px 15px 11px 44px; border: 2px solid #d7d8db; border-radius: 30px; font-size: 14px; font-family: "aeonik-regular"; letter-spacing: -0.01em; color: #75868E; } .serach-input:-webkit-autofill, .serach-input:-webkit-autofill:hover, .serach-input:-webkit-autofill:focus, .serach-input:-webkit-autofill:active, .serach-input:-webkit-autofill::first-line { -webkit-text-fill-color: #75868E; font-size: 14px; font-family: "ibm-regular"; background-color: #fff; transition: background-color 5000s ease-in-out 0s; } .serach-input::placeholder { font-size: 14px; font-family: "ibm-regular"; letter-spacing: -0.01em; color: #75868E; } .title-intro-search-filter { width: 30%; padding-right: 10px; white-space: nowrap; } .right-intro-serach-filter-wrapper { position: relative; padding-bottom: 14px; } .right-intro-serach-filter-wrapper::after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; border-top: 1px solid #d1d1d1; background: transparent; } .gridFilterArea { position: absolute; top: -94px; right: 50px; } .ui-dialog-titlebar button { display: none; } .cardStatementFilter .modal-content, .accountStatementFilter .modal-content { z-index: unset; } .cardStatementFilter .modal-footer, .accountStatementFilter .modal-footer { position: unset !important; bottom: 20px; left: 25px; background-color: #F0F1F5; margin-bottom: 0; margin-top: -25px; } .cardStatementFilter .calendarFilter, .accountStatementFilter .calendarFilter { height: 50px; border: 1px solid #c3cbd0; border-radius: 30px; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f6f8)); background: linear-gradient(#fff, #f3f6f8); cursor: pointer; background: transparent; font-family: ibm-regular; font-size: 14px; } .cardStatementFilter .filterdata_StatementFilter, .accountStatementFilter .filterdata_StatementFilter { transition: left 0.3s ease-in-out 0s, right 0.3s ease-in-out 0s; } .cardStatementFilter .modal-content { padding: 0 32px; } .documentList .dk-option, .accountTurnoverFilter .dk-option { margin-left: 10px !important; } .documentList .calendarFilter, .accountTurnoverFilter .calendarFilter { height: 50px; border: 1px solid #c3cbd0; border-radius: 30px; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f6f8)); background: linear-gradient(#fff, #f3f6f8); cursor: pointer; background: transparent; padding: 21px 40px 7px 22px; font-family: ibm-regular; font-size: 14px; } .documentList .filterdata, .documentList .itemTypesIndicator, .accountTurnoverFilter .filterdata, .accountTurnoverFilter .itemTypesIndicator { transition: left 0.3s ease-in-out 0s, right 0.3s ease-in-out 0s; } .modal-wrapper { width: 500px; } .statementDetails.right-dialog.visible { max-width: 1060px !important; width: 100% !important; top: 0px !important; overflow-x: auto !important; } .statementDetails.right-dialog.visible .ui-widget-content { height: auto !important; } .statementDetails.right-dialog.visible .ui-dialog-titlebar { display: none; } .statementDetails.right-dialog.visible .modal-wrapper { width: 1060px !important; } .statementDetails.right-dialog.visible .printButton { position: absolute; width: 24px; height: 24px; top: 26px; right: 36px; color: #75868E; transition: color .3s; } .statementDetails.right-dialog.visible .onPrintButtonAccountNumber { margin-top: 10px; margin-left: 20px; display: inline-block; } .statementDetails.right-dialog.visible .onPrintButtonAccountNumber .accNumber { margin-top: 10px; width: 380px; display: inline-block; } .statementDetails.right-dialog.visible .onPrintButtonAccountNumber .accNumber .accStateNumber { margin-left: 100px; } .statementDetails.right-dialog.visible .onPrintButtonAccountNumber .accNumber .accStateDate { margin-left: 106px; } .statementDetails.right-dialog.visible .previousBalance { margin-right: 15px; display: inline-block; margin-top: 10px; } .statementDetails.right-dialog.visible .gvStatementDetails { margin-left: 20px; width: 1020px; } .statementDetails.right-dialog.visible .onbtnBack { margin-left: 5px; } .table-navigation-wrapper { flex-wrap: wrap; } .show-more-wrapper { position: relative; display: flex; align-items: center; padding: 3px 2px; background-color: #d7d8db; border-radius: 20px; } .show-more-wrapper .selector-toggle-indicator { height: 32px; font-family: "aeonik-bold"; } .show-tables { position: relative; font-family: "aeonik-medium"; font-size: 14px; line-height: 1; letter-spacing: -.02em; color: #666696; padding: 10px; border-radius: 50%; transition: background-color .3s; z-index: 1; cursor: pointer; } .gray-navigation .nav-icons-1 { border: 1px solid #C3CBD0; } .gray-navigation .nav-icons-1 .arrow-icon-svg { fill: #75868E; } .gvCardSpendings, .gvCardTurnover { position: relative; } .sort-indicator { display: inline-block; margin-left: 5px; margin-bottom: -3px; } .EVD { background: url("images/cards/direktna_kartice_app_visa_electron.png"); } .EVG { background: url("images/cards/direktna_kartice_app_visa_debit_gold.png"); } .EVC, .EVY, .EVZ { background: url("images/cards/direktna_kartice_app_visa_classic.png"); } .EUP { background: url("images/cards/direktna_kartice_app_mu_white.png"); } .EUD { background: url("images/cards/direktna_kartice_app_mu_red.png"); } .EUC { background: url("images/cards/direktna_kartice_app_mu_black.png"); } .EBH { background: url("images/cards/direktna_kartice_app_mastercard_veliko_srce.png"); } .EMC, .EMY, .EMZ { background: url("images/cards/direktna_kartice_app_mastercard_standard.png"); } .EDD, .EDL, .EDX { background: url("images/cards/direktna_kartice_app_dinacard_debitna.png"); } .EMG { background: url("images/cards/direktna_kartice_app_mastercard_gold.png"); } .EMD, .EMX { background: url("images/cards/direktna_kartice_app_mastercard_debitna_bezkontaktna.png"); } .EFX { background: url("images/cards/direktna_kartice_app_mastercard_debit_dinarski_debitni.png"); } .EDC, .ECL, .EDY { background: url("images/cards/direktna_kartice_app_dinacard_kredit.png"); } .DCC, .DCD, .J09, .DDE, .DFE, .DDN, .DKD { background: url("images/cards/Dina_debitna.png"); } .DDC { background: url("images/cards/Dina_debitna_Contactless200x126.png"); border-radius: 10px; } .D12, .D13, .D14, .D15, .D16, .D17, .D18, .D24, .D21, .D26, .D19, .D20, .J01  { background: url("images/cards/Dina_kreditna.png"); } .MCC, .MCD, .MSI, .MDB, .MDC, .MAE, .MDF, .MDS, .J08, .HCE, .MAD, .MDF, .MDN, .D01, .D02 { background: url("images/cards/MasterCard_debitna.png"); } .MKS, .MCS, .MC2, .MC3, .MKW, .MSS, .MS2, .MS3, .J02, .J10, .MCE, .MCO, .XYZ, .MSN, .MES, .MSR, .MSE, .MRS, .S00, .S01, .S02, .S03 { background: url("images/cards/MasterCard_kreditna.png"); } .VIE, .VVA, .VCL, .VDE, .VES, .VED, .VEL, .VEC, .J07 { background: url("images/cards/Visa_debitna.png"); } .VSG, .VKG, .VGC, .VIG, .VGD, .VGT, .VDG, .VG1, .VG3, .MG1, .MG2, .MG3, .MG4, .MG5 { background: url("images/cards/Visa_gold_kreditna.png"); } .VKC, .V12, .V13, .V14, .V15, .V16, .V17, .V18, .V19, .V20, .V24, .VCC, .VCH, .VIC, .VIF, .VSC, .VCT, .VDC, .VC1, .VC3, .J03, .J04 { background: url("images/cards/Visa_kreditna.png"); } .MPL { background: url("images/cards/Platinum-kartica.png"); } .MDG, .MGD { background: url("images/cards/Master-debitna-gold.png"); } .MKG, .MGC, .MGE, .MEG, .MGS, .MGR, .MGN, .MGK, .G01, .G02 { background: url("images/cards/Master-kreditna-gold.png"); } .SKN, .SK2, .SK5, .SK9, .SK1 { background: url("images/cards/ic_super_card.png"); } .ISK { background: url("images/cards/card_supercardplus.png"); } .SNP { background: url("images/cards/card_sanamanaputu.png"); } .card-img { display: inline-block; width: 130px; height: 70px; background-repeat: no-repeat; background-size: contain; } .card-img-wrapper { max-width: 112px; width: 130px; height: 70px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25); } .card-img-wrapper.main-view { width: 100%; } .card-img-wrapper.main-view .card-img { width: 100%; } .CardTurnover .tableFilter { display: none; } .CardTurnover .tableHeader { display: none; } .CardTurnover .down-arrow { color: #266eff; } .CardSpendings .down-arrow { color: #266eff; } .undueLiabilitiesCardPopup .bottom-left-btn-wrapper, .unusedChecks .bottom-left-btn-wrapper, .reservedAccountPopup .bottom-left-btn-wrapper, .reservedCardPopup .bottom-left-btn-wrapper, .cardDetailsPopup .bottom-left-btn-wrapper, .accountDetailsPopup .bottom-left-btn-wrapper { padding-top: 0; } .undueLiabilitiesCardPopup .bottom-left-btn-wrapper:after, .unusedChecks .bottom-left-btn-wrapper:after, .reservedAccountPopup .bottom-left-btn-wrapper:after, .reservedCardPopup .bottom-left-btn-wrapper:after, .cardDetailsPopup .bottom-left-btn-wrapper:after, .accountDetailsPopup .bottom-left-btn-wrapper:after { display: none; } .undueLiabilitiesCardPopup .ui-dialog-titlebar, .unusedChecks .ui-dialog-titlebar, .reservedAccountPopup .ui-dialog-titlebar, .reservedCardPopup .ui-dialog-titlebar, .cardDetailsPopup .ui-dialog-titlebar, .accountDetailsPopup .ui-dialog-titlebar { display: none; } .undueLiabilitiesCardPopup .right-inner-loan-detail, .unusedChecks .right-inner-loan-detail, .reservedAccountPopup .right-inner-loan-detail, .reservedCardPopup .right-inner-loan-detail, .cardDetailsPopup .right-inner-loan-detail, .accountDetailsPopup .right-inner-loan-detail { width: 50%; } .undueLiabilitiesCardPopup .inner-loan-detail, .unusedChecks .inner-loan-detail, .reservedAccountPopup .inner-loan-detail, .reservedCardPopup .inner-loan-detail, .cardDetailsPopup .inner-loan-detail, .accountDetailsPopup .inner-loan-detail { display: -webkit-box; margin-bottom: 3px; } .undueLiabilitiesCardPopup .modal-footer, .unusedChecks .modal-footer, .reservedAccountPopup .modal-footer, .reservedCardPopup .modal-footer, .cardDetailsPopup .modal-footer, .accountDetailsPopup .modal-footer { padding: 25px 30px 0 30px !important; margin-bottom: -20px; } .undueLiabilitiesCardPopup .btn-1, .unusedChecks .btn-1, .reservedAccountPopup .btn-1, .reservedCardPopup .btn-1, .cardDetailsPopup .btn-1, .accountDetailsPopup .btn-1 { position: relative; display: inline-block; min-width: 100px; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.214285; letter-spacing: -0.02em; text-align: center; transition: color .3s, background-color .3s, transform .3s; background-color: #fff; color: #000F28; } .undueLiabilitiesCardPopup .btn-1.bigger-btn, .unusedChecks .btn-1.bigger-btn, .reservedAccountPopup .btn-1.bigger-btn, .reservedCardPopup .btn-1.bigger-btn, .cardDetailsPopup .btn-1.bigger-btn, .accountDetailsPopup .btn-1.bigger-btn { min-height: unset !important; } .undueLiabilitiesCardPopup .btn-1.bigger-btn span, .unusedChecks .btn-1.bigger-btn span, .reservedAccountPopup .btn-1.bigger-btn span, .reservedCardPopup .btn-1.bigger-btn span, .cardDetailsPopup .btn-1.bigger-btn span, .accountDetailsPopup .btn-1.bigger-btn span { float: left; } .undueLiabilitiesCardPopup .btn-1.bigger-btn.with-icon-left, .unusedChecks .btn-1.bigger-btn.with-icon-left, .reservedAccountPopup .btn-1.bigger-btn.with-icon-left, .reservedCardPopup .btn-1.bigger-btn.with-icon-left, .cardDetailsPopup .btn-1.bigger-btn.with-icon-left, .accountDetailsPopup .btn-1.bigger-btn.with-icon-left { padding: 23px 64px 20px !important; } .CardBalancePreviewSlider .with-icon, .AccountBalancePreviewSlider .with-icon, .LoanBalancePreviewSlider .with-icon, .PersonalDataV2 .with-icon { display: block; background: #fff; color: #666696; font-family: "aeonik-regular"; } .CardBalancePreviewSlider .btn-1.bigger-btn, .AccountBalancePreviewSlider .btn-1.bigger-btn, .LoanBalancePreviewSlider .btn-1.bigger-btn, .PersonalDataV2 .btn-1.bigger-btn { min-height: unset; } .CardBalancePreviewSlider .btn-1.bigger-btn:after, .AccountBalancePreviewSlider .btn-1.bigger-btn:after, .LoanBalancePreviewSlider .btn-1.bigger-btn:after, .PersonalDataV2 .btn-1.bigger-btn:after { left: 56px; } .CardBalancePreviewSlider .btn-icon-left, .AccountBalancePreviewSlider .btn-icon-left, .LoanBalancePreviewSlider .btn-icon-left, .PersonalDataV2 .btn-icon-left { left: 16px; } .CardBalancePreviewSlider .btn-arrow, .AccountBalancePreviewSlider .btn-arrow, .LoanBalancePreviewSlider .btn-arrow, .PersonalDataV2 .btn-arrow { color: #f21844; } .LoanBalancePreviewSlider .no-account-wapper .with-icon, .CardBalancePreviewSlider .no-account-wapper .with-icon { display: block; background: #266eff; color: #fff; } .btn-2 { position: relative; display: inline-block; min-width: 100px; padding: 23px 20px 20px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1.214285; letter-spacing: -.02em; border-radius: 12px; text-align: center; transition: color .3s,background-color .3s,-webkit-transform .3s; transition: color .3s,background-color .3s,transform .3s; transition: color .3s,background-color .3s,transform .3s,-webkit-transform .3s; white-space: nowrap; } .btn-2 .with-icon-left { padding: 23px 64px 20px; } .btn-2 .color-2 { background-color: #f3f6f8; color: #194137; } .buttons-wrapper a, .buttons-wrapper button { width: 100%; } .ui-dialog-buttonpane:before { position: absolute; content: ""; width: calc(100% - 60px); height: 2px; border-top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: transparent; border-top: 1px solid #d7d8db; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: unset !important; /*background: #f3f6f8 !important;*/ color: #194137; } .ui-button .ui-button-text { display: contents !important; line-height: 1.4; } .ui-button .ui-button-text .AccountBalancePreviewSlider .with-icon { display: block; } .left-loan-detail:after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; right: 0; background: repeating-linear-gradient(200deg, rgba(195, 203, 208, 0.8), rgba(195, 203, 208, 0.8) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 5px); } .left-inner-loan-detail { width: 45%; padding-right: 35px; } .right-inner-loan-detail { width: 55%; } .left-loan-detail, .right-loan-detail { width: 50%; } .right-loan-detail { padding-left: 32px; } .left-loan-detail { padding-right: 5px; } .flex-start { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .print-icon-svg { width: 16px; height: 16px; stroke: none; } .print-wrapper { width: 40px; height: 40px; background-color: #fff; border: 1px solid #c3cbd0; border-radius: 50%; cursor: pointer; } /*JQUERY UI OVERRIDE*/ .ui-dialog.no-yes-dialog .ui-widget-content { background: transparent; } /* Overlays */ .ui-widget-overlay { opacity: .3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /*region ui-dialog*/ .side-modal.ui-dialog { border: none !important; background: transparent !important; z-index: 1000 !important; display: block !important; position: fixed !important; width: 100vw !important; height: 100vh !important; overflow: auto; overflow-x: hidden; } .side-modal .ui-widget-content { border: none !important; background: none !important; z-index: 1000 !important; display: block !important; position: fixed !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.4); } .side-modal.ui-dialog .ui-dialog-titlebar { padding-top: 27px; padding-left: 50px; box-sizing: border-box; } .side-modal .ui-dialog-title { font-size: 20px !important; font-weight: 700 !important; padding-right: 50px !important; font-family: Verdana !important; color: black; margin: 0; margin-bottom: 10px; } .side-modal .ui-widget-header { border: none; background: none; } .side-modal .ui-icon { width: 30px; height: 30px; background: none; } .side-modal .ui-dialog-titlebar-close { position: absolute !important; width: 30px !important; height: 30px !important; top: 35px !important; right: 40px !important; background-image: url(images/icons/close.png) !important; background-size: 20px !important; background-repeat: no-repeat !important; background-color: white !important; border: none; } .ui-resizable-se { display: none !important; } .ui-dialog { background: #f0f1f5 !important; } .text-position { padding-left: 5px; padding-top: 3px; } .accountDetailsPopup .right-inner-loan-detail { display: flex; } .editCardName.ui-dialog-content.ui-widget-content, .editAccountName.ui-dialog-content.ui-widget-content { width: 100% !important; display: block !important; } .editCardName.ui-dialog-content.ui-widget-content:before, .editAccountName.ui-dialog-content.ui-widget-content:before { display: none !important; } .gvUnusedCheques .clientGrid tbody tr .value, .gvUndueLiabilities .clientGrid tbody tr .value, .gvReservedFunds .clientGrid tbody tr .value { line-height: normal; } .undue-liabilities-dialog .ui-dialog-buttonset button, .reserved-dialog .ui-dialog-buttonset button, .short-dialog .ui-dialog-buttonset button, .filter-dialog .ui-dialog-buttonset button { border: transparent; background-size: 25px !important; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; position: absolute; top: 46px; left: 40px; background: url(images/back-1.png) no-repeat, transparent; } .undue-liabilities-dialog .ui-dialog-content.ui-widget-content, .reserved-dialog .ui-dialog-content.ui-widget-content, .short-dialog .ui-dialog-content.ui-widget-content, .filter-dialog .ui-dialog-content.ui-widget-content { height: 100% !important; max-height: 100vh !important; } .undue-liabilities-dialog .check-title, .reserved-dialog .check-title, .short-dialog .check-title, .filter-dialog .check-title { color: #7b7b7b; } .reservedAccountPopup.right-dialog, .reservedCardPopup.right-dialog { width: 800px !important; max-width: 800px !important; } .reservedAccountPopup .modal-wrapper, .reservedAccountPopup .ui-dialog-content.ui-widget-content, .reservedCardPopup .modal-wrapper, .reservedCardPopup .ui-dialog-content.ui-widget-content { width: 100% !important; } .unusedChecks .modal-wrapper { width: 490px; } .undueLiabilitiesCardPopup.right-dialog { width: 900px !important; max-width: 900px !important; } .undueLiabilitiesCardPopup .modal-wrapper, .undueLiabilitiesCardPopup .ui-dialog-content.ui-widget-content { width: 100% !important; } #gvUnusedCheques .clientGrid thead { display: none; } #gvUnusedCheques .clientGrid td.align-left { align-self: center; } .isHidden { display: none; } .isVisible { display: block; } .fullWidth { width: 100% !important; } .no-account-img-wrapper { width: 18.5%; padding-top: 8.4%; margin: 0 auto 60px; } .no-account-wapper .buttons-wrapper { max-width: 210px; margin: 0 auto 40px; } #no-accounts-main { margin-top: 208px; } @media screen and (min-width: 1400px) and (min-height: 1000px) { #no-accounts-main .no-account-wapper { height: calc(100vh - 483px); display: flex; flex-direction: column; justify-content: center; } } .object-fit-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; background-repeat: no-repeat; background-size: cover; background-position: center center; } .object-fit-cover > img { visibility: hidden !important; display: block; width: 100%; height: 100%; } .object-fit-contain { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; background-repeat: no-repeat; background-size: contain; background-position: center center; } .object-fit-contain > div { visibility: hidden !important; display: block; width: 100%; height: 100%; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .display-none { display: none; } .no-card { height: 139px; background-image: url(images/no-acc.png); background-size: contain; } .no-account { height: 139px; background-image: url(images/no-acc.png); background-size: contain; } .unusedChequesPopup tbody tr td, .unusedChecks tbody tr td { padding-left: 20px !important; padding-right: 20px !important; } .reservedAccountPopup tbody tr td:nth-child(3) .tablesaw-cell-content { display: grid; } .reservedCardPopup thead, .reservedAccountPopup thead { display: none; } .reservedCardPopup tbody tr .icon-left-wrapper, .reservedAccountPopup tbody tr .icon-left-wrapper { top: 17px; left: -50px; } .reservedCardPopup tbody tr td:nth-child(2), .reservedAccountPopup tbody tr td:nth-child(2) { width: 22%; padding-left: 50px; } .reservedCardPopup tbody tr td:nth-child(2) div ~ span, .reservedAccountPopup tbody tr td:nth-child(2) div ~ span { margin-left: 10px; } .reservedCardPopup tbody tr td:nth-child(3), .reservedAccountPopup tbody tr td:nth-child(3) { width: 58%; display: grid; align-items: center; } .reservedCardPopup tbody tr td:nth-child(4), .reservedAccountPopup tbody tr td:nth-child(4) { width: 20%; padding-right: 20px; } .undueLiabilitiesCardPopup .clientGrid thead th { text-align: left; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(2) { padding-left: 10px; width: 20%; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(3) { width: 20%; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(4) { width: 40%; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(4) div { float: left; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(5) { width: 20%; padding-right: 15px; } .undueLiabilitiesCardPopup .clientGrid thead th:nth-child(5) div { float: right; } .undueLiabilitiesCardPopup .clientGrid tbody tr td:nth-child(2) { padding-left: 50px; width: 20%; } .undueLiabilitiesCardPopup .clientGrid tbody tr td:nth-child(2) div ~ span { margin-left: 10px; margin-top: 5px; } .undueLiabilitiesCardPopup .clientGrid tbody tr td:nth-child(3) { width: 20%; } .undueLiabilitiesCardPopup .clientGrid tbody tr td:nth-child(4) { width: 45%; line-height: 15px; } .undueLiabilitiesCardPopup .clientGrid tbody tr td:nth-child(5) { width: 15%; padding-right: 15px; } .CardStatements .clientGrid thead th { text-align: left; } .CardStatements .clientGrid thead th:nth-child(2) { padding-left: 20px; } .CardStatements .clientGrid tbody tr td:nth-child(2) { padding-left: 20px; } .CardStatements .clientGrid tbody tr td:nth-child(5) { width: 110px; } .CardStatements .clientGrid tbody tr td p { height: 38px; vertical-align: middle; } /*infoDialog*/ .info-dialog.ui-dialog-titlebar.ui-widget-header, .ui-dialog-titlebar.ui-widget-header.ui-dialog.information { display: block; position: sticky; top: 0; left: 0; background-color: #fff; padding: 30px 60px 30px 30px; overflow: hidden; z-index: 2; } .info-dialog.ui-dialog-titlebar.ui-widget-header::after, .ui-dialog-titlebar.ui-widget-header.ui-dialog.information::after { position: absolute; content: ''; width: 76%; height: 10px; left: 50%; bottom: -18px; box-shadow: 0px -4px 17px 4px rgba(0, 0, 0, 0.1); transform: translateX(-50%); } .error-dialog.ui-widget-header { display: block !important; } .no-yes-dialog.editCardName, .no-yes-dialog.editAccountName { padding: 0; } .down-arrow { width: 10px; height: 10px; stroke: none; color: #75868E; } .up-arrow { width: 10px; height: 10px; stroke: none; fill: #194137; } .slick-list { width: 100%; } .loansDetailsPopup .bottom-left-btn-wrapper { padding-top: 0; } .loansDetailsPopup .bottom-left-btn-wrapper:after { display: none; } .LoanNotice { width: 100%; padding: 65px 8px 0 20px; margin: 0 auto; margin-bottom: -25px; } .LoanNotice .s-widget-body-header { display: none !important; } .LoanNotice .clientGrid thead { display: none; } .LoanNotice .clientGrid tbody tr { background-color: rgba(230, 75, 75, 0.05); border: none; border-top: none; border-bottom: none; } .LoanNotice .clientGrid tbody tr:first-child { border: none !important; } .LoanNotice .clientGrid tbody tr:hover { border: none; } .LoanNotice .clientGrid tbody tr td { color: #e64b4b !important; font-size: 15px; font-family: 'ibm-regular'; line-height: 1.2; vertical-align: middle; letter-spacing: -.01em; padding: 16px; } .LoanNotice .clientGrid tbody tr td span div { margin-left: 40px; } .LoanNotice .clientGrid tbody tr td span .gap-from-icon { position: fixed; margin-left: 45px; } .LoanNotice .icon-left-wrapper { padding-top: 0; top: 10px; } .LoanNotice .icon-left-wrapper:after { content: ""; background: repeating-linear-gradient(180deg, rgba(230, 75, 75, 0.8), rgba(230, 75, 75, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); height: calc(100% + 38px); top: -20px; left: 50px; } .LoanNotice .notice-position { margin-left: -30px; } .LoanNotice .icon-left-wrapper.notice-after:after { height: calc(100% + 22px); } .LoanNotice .alert-wrapper { padding: 21px 10px 21px 0; background-color: rgba(230, 75, 75, 0.05); border-radius: 12px; padding-left: 56px; } .LoanNotice .alert-wrapper .icon-left-wrapper:after { content: ""; background: repeating-linear-gradient(180deg, rgba(230, 75, 75, 0.8), rgba(230, 75, 75, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .LoanNotice .alert-wrapper .icon-left-wrapper .absolute-center { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); } .LoanNotice .gap-from-icon { padding-left: 16px; } .bell-alert { width: 20px; height: 20px; fill: #f21844; color: #f21844; stroke: none; } .float-right { float: right; } #gvLoanAnnuityPlan { margin-top: 40px; } #gvLoanAnnuityPlan .clientGrid thead tr { display: flex; align-items: flex-end; } #gvLoanAnnuityPlan .clientGrid thead tr th { margin-top: 0; line-height: 1.2; font-size: 12px; font-family: "ibm-medium"; color: #75868e; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(2) { width: 15%; margin-right: 25px; padding-left: 20px; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(3) { width: 15%; margin-right: 20px; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(4) { width: 15%; margin-right: 30px; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(5) { width: 15%; margin-right: 30px; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(6) { width: 20%; padding-left: 10px; } #gvLoanAnnuityPlan .clientGrid thead tr th:nth-child(7) { width: 22%; padding-right: 120px; } #gvLoanAnnuityPlan .clientGrid tbody tr { width: 100%; height: 72px; min-height: 50px; padding: 16px 0; background-color: #fff; border-radius: 12px; transition: border .3s ease-in-out; cursor: pointer; align-items: center; } #gvLoanAnnuityPlan .clientGrid tbody tr:hover { border: 2px solid #266eff; } #gvLoanAnnuityPlan .clientGrid tbody tr td { align-items: center; } #gvLoanAnnuityPlan .clientGrid tbody tr td .tablesaw-cell-content { line-height: 1.2; font-size: 15px; font-family: "aeonik-regular"; text-transform: uppercase; color: #000F28; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(2) { width: 15%; margin-right: 30px; padding-left: 20px; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(3) { width: 15%; margin-right: 30px; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(4) { width: 15%; margin-right: 30px; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(4) .tablesaw-cell-content { float: left; text-align-last: start; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(4) span { display: block; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(5) { width: 15%; margin-right: 30px; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(5) .tablesaw-cell-content { float: left; text-align-last: start; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(5) span { display: block; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(6) { width: 20%; padding-left: 10px; margin-top: -5px; text-align: left; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(6) .tablesaw-cell-content { float: left; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(7) { width: 22%; padding-right: 20px; display: inline-table; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(7) .tablesaw-cell-content { float: left; padding-right: 20px; } #gvLoanAnnuityPlan .clientGrid tbody tr td:nth-child(7) span { display: block; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(2) { width: 16%; margin-left: 13px; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(3) { width: 22.5%; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(4) { width: 22.5%; margin-left: 7px; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(4) div { float: left; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(5) { width: 20%; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(5) div { float: right; padding-right: 0px; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(6) { width: 20%; } #gvExchangeOfficeOverview .clientGrid thead tr th:nth-child(6) div { float: right; padding-right: 0px; margin-right: -14px; } #gvExchangeOfficeOverview .clientGrid tbody tr { align-self: center; cursor: auto; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(2) { width: 15%; padding-left: 45px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(2) span { display: block; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(2) span span ~ span { margin-left: 20px; margin-top: 5px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(3) { width: 22.5%; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(3) span { display: block; margin-left: 10px; margin-top: 7px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(4) { width: 22.5%; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(4) span { display: block; margin-left: 10px; margin-top: 7px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(5) { width: 20%; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(5) span { display: block; margin-right: 5px; margin-top: 7px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(6) { width: 20%; margin-right: 20px; } #gvExchangeOfficeOverview .clientGrid tbody tr td:nth-child(6) span { display: block; margin-top: 7px; } .arrow-up-down { width: 16px; height: 16px; fill: #666696; color: #666696; } .ExchangeOfficeOverview { width: 98%; } .LoanAnnuityPlan { margin-top: 50px; } .LoanAnnuityPlan .left-inner-loan-detail { width: 45%; padding-right: 15px; display: flex; align-items: center; } .LoanAnnuityPlan .title-intro-search-filter { width: 50%; } .LoanAnnuityPlan .tableHeader { background-color: unset; border: none; color: #888; padding-top: 30px; } .LoanAnnuityPlan a.ui-button:active { border: none; background: none; } .LoanAnnuityPlan .left-loan-detail:after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .LoanAnnuityPlan .left-inner-loan-detail { width: 65%; padding-right: 35px; } .LoanAnnuityPlan .right-inner-loan-detail { width: 43%; color: #000; } .LoanAnnuityPlan .round-empty-btn { float: right; width: 40px; height: 40px; background-color: #fff !important; border-radius: 50%; -webkit-transition: border-color .3s; transition: border-color .3s; } .LoanAnnuityPlan .round-empty-btn:hover { background-color: #ebebeb !important; } .LoanAnnuityPlan .round-empty-btn .round-empty-btn-icon { width: 20px; height: 20px; stroke: none; color: #266eff; } .display-none { display: none; } ::-ms-reveal { display: none; } .filterlocationSearchModal .checkmark.activeche { opacity: 1; visibility: visible; } .social-linkedin { background-image: url("images/icons/ic_linkedin.svg"); } .social-instagram { background-image: url("images/icons/ic_instagram.svg"); } .token-info-wrapper { width: 100%; padding: 35px 32px; background-color: #F3F6F8; border-radius: 12px; } .token-info-wrapper { display: flex; justify-content: space-between; align-items: center; } .token-info-inner { display: flex; width: calc(100% - 127px); } .token-info-inner .token-info-col { width: 24%; padding-right: 15px; } .token-info-inner .token-info-col:first-child { position: relative; width: 28%; padding-right: 30px; padding-left: 44px; } .token-info-inner .token-info-col:first-child::after { position: absolute; content: ''; width: 2px; height: 100%; top: 0; right: 15px; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .token-info-inner .token-info-col:last-child { padding-right: 0 !important; } .token-info-inner .token-info-icon-wrapper { position: absolute; width: 28px; height: 32px; top: 50%; left: 0; transform: translateY(-50%); } .token-info-inner .token-info-icon-wrapper svg { width: 100%; height: 100%; } .token-table-wrapper .table-payment-wrapper { min-height: unset; } .token-table-wrapper .table-inner-wapper.table-no-overflow { min-width: 340px; } .token-table-wrapper .table-intro-payment .first-col { width: 100%; } .token-table-wrapper .first-col { width: 28%; } .token-table-wrapper .last-col { width: calc(72% - 60px); } .no-token-img-wrapper { width: 16vw; max-width: 116px; min-width: 70px; height: 22vw; max-height: 160px; min-height: 96px; margin: 60px auto 40px auto; } .no-token-img-wrapper img { object-fit: contain; } .table-icon { width: 16px; height: 16px; } .table-row { width: 100%; min-height: 48px; padding: 16px 0; background-color: #fff; border-radius: 12px; border: 2px solid #fff; transition: border ease-in-out .3s; cursor: pointer; } .table-row:hover { border: 2px solid #266eff; } .table-row:hover .icon-right-wrapper { opacity: 1; visibility: visible; } .profile-info-left { padding-left: 25px; width: 330px; padding-right: 70px; } .profile-image-wrapper { position: relative; width: 100%; height: 330px; margin-bottom: 23px; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } .profile-image-wrapper-background { background-image: url(images/no-profile-img.jpg); } .profile-image-wrapper::after { position: absolute; content: ''; width: 100%; height: 100%; inset: 0; background-color: #266eff; opacity: 0; transition: opacity .3s; } .profile-image-wrapper:hover::after { opacity: .2; } .profile-image-wrapper:hover .upload-icon-wrapper { opacity: 1; } .upload-icon-wrapper { position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; border-radius: 50%; background-color: #266eff; color: #fff; transform: translate(-50%, -50%); z-index: 1; opacity: 0; transition: opacity .3s; } .upload-icon-wrapper svg { position: absolute; width: 30px; height: 26px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .profile-image-input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; z-index: 2; opacity: 0; } .profile-name { margin-bottom: 16px; line-height: 1.5; } .profile-id-number span { display: block; } .profile-info-right { width: calc(100% - 330px); margin-left: -150px; } .profile-info-right-inner { width: 84%; max-width: 515px; margin-left: auto; margin-right: inherit; padding-right: 25px; } .modal-reset-fields-wrapper .input-wrapper { margin-bottom: 16px; } .reset-password-list { padding-left: 16px; list-style: disc; } .reset-password-list .reset-password-list-item { font-family: "ibm-regular"; font-size: 14px; line-height: 1.42857; color: #75868E; } .reset-password-list .reset-password-list-item.has-error { color: #f21844; } .token-info-wrapper { width: 100%; padding: 35px 32px; background-color: #fff; border-radius: 12px; margin-top: 20px; } .token-info-wrapper { display: flex; justify-content: space-between; align-items: center; } .token-info-inner { display: flex; width: calc(100% - 127px); } .token-info-inner .token-info-col { width: 24%; padding-right: 15px; } .token-info-inner .token-info-col:first-child { position: relative; width: 28%; padding-right: 30px; padding-left: 44px; } .token-info-inner .token-info-col:first-child::after { position: absolute; content: ''; width: 1px; height: 100%; top: 0; right: 50px; background: transparent; border-left: 1px solid #d7d8db; } .token-info-inner .token-info-col:last-child { padding-right: 0; } .token-info-inner .token-info-icon-wrapper { position: absolute; width: 28px; height: 32px; top: 50%; left: 0; transform: translateY(-50%); } .token-info-inner .token-info-icon-wrapper svg { width: 100%; height: 100%; } .token-table-wrapper .table-payment-wrapper { min-height: unset; } .token-table-wrapper .table-inner-wapper.table-no-overflow { min-width: 340px; } .token-table-wrapper .table-intro-payment .first-col { width: 100%; } .token-table-wrapper .first-col { width: 28%; } .token-table-wrapper .last-col { width: calc(72% - 60px); } .no-token-img-wrapper { width: 16vw; max-width: 116px; min-width: 70px; height: 22vw; max-height: 160px; min-height: 96px; margin: 60px auto 40px auto; } .no-token-img-wrapper img { object-fit: contain; } .split-text-wrapper { align-items: flex-start; padding: 17px 20px; border-radius: 12px; } .split-text-wrapper:not(:last-child) { margin-bottom: 4px; } .split-text-wrapper.type-2 .split-text-left { width: 71%; } .split-text-left { padding-right: 10px; } .split-text-right { text-align: right; } .PersonalDataV2 .profile-buttons-wrapper { background-clip: unset; box-sizing: unset; } .PersonalDataV2 .profile-buttons-wrapper .buttons-wrapper { box-sizing: unset; background-clip: unset; } .PersonalDataV2 .profile-buttons-wrapper .buttons-wrapper .btn-1 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 47px 0 62px; } .PersonalDataV2 .profile-buttons-wrapper .buttons-wrapper .btn-1 .btn-arrow { color: #f21844; } .btn-with-tooltip { flex-wrap: wrap; padding: 6px 20px; } .btn-with-tooltip .btn-tooltip-wrap { position: relative; width: 40px; } .btn-with-tooltip .z-2 { z-index: 2; } .btn-with-tooltip .tooltip-wrapper { position: absolute; width: 22px; height: 16px; top: 18px; right: 20px; padding-right: 6px; } .btn-with-tooltip .tooltip-wrapper.type-3 { position: relative; top: auto; right: auto; padding: 0; } .btn-with-tooltip .tooltip-wrapper .tooltip-icon-wrapper { color: #75868e; } .btn-with-tooltip .btn-tooltip-text { position: relative; width: -webkit-calc(100% - 64px); width: calc(100% - 64px); padding-right: 50px; } .btn-with-tooltip .btn-tooltip-text.type-2 { padding-right: 0; } .btn-with-tooltip .btn-tooltip-text:after { content: ""; position: absolute; top: 0; left: -25px; display: block; width: 2px; height: 100%; background: transparent; border-left: 1px solid #d7d8db; } .CreditorTemplateManaging { margin-top: 65px; } .CreditorTemplateManaging .icon-right-wrapper { position: sticky; } .CrontoTokenList .table-row { box-sizing: border-box; } .CrontoTokenList .table-row .first-col { padding-left: 20px; } .CrontoTokenList .table-row:hover .icon-right-wrapper { opacity: 1; visibility: visible; } .CrontoTokenList .icon-right-wrapper { position: sticky; } .CrontoTokenList .icon-left-wrapper { min-width: 50px; max-width: 50px; width: 100%; padding-top: 1.3%; left: auto; top: 0; } .CrontoTokenList .icon-left-wrapper:after { content: ""; width: 2px; height: calc(100% + 15px); position: absolute; right: -2px; top: -8px; background: transparent; border-left: 1px solid #d7d8db; } .CrontoTokenList .token-info-wrapper { box-sizing: border-box; } .CrontoTokenList .token-info-wrapper .token-table-wrapper .table-payment-wrapper { min-height: unset; } .CrontoTokenList .token-info-wrapper .token-table-wrapper .table-payment-wrapper .table-inner-wapper.table-no-overflow { min-width: 340px; } .CrontoTokenList .token-info-button-wrapper .btn-1 { min-width: unset; cursor: pointer; } .CrontoTokenList .table-intro-payment.with-icon-left { padding-left: 50px; } .CrontoTokenList .table-row { cursor: unset; } .CrontoTokenList .table-row:hover .right-icons-wrapper .icon-right-wrapper .print-icon-svg { cursor: pointer; } .CrontoTokenList .border-bottom-wrapper { position: relative; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #d7d8db; } .documentList .ui-dialog-titlebar, .accountTurnoverFilter .ui-dialog-titlebar, .cardPaymemtPopup .ui-dialog-titlebar, .paymentOverviewFilter .ui-dialog-titlebar, .exchangeOverviewFilter .ui-dialog-titlebar, .cardTurnoverFilter .ui-dialog-titlebar, .cardSpendingsFilter .ui-dialog-titlebar, .messages-filter .ui-dialog-titlebar, .newMessage .ui-dialog-titlebar { display: none !important; } .documentList .dk-select.select-1, .accountTurnoverFilter .dk-select.select-1, .cardPaymemtPopup .dk-select.select-1, .paymentOverviewFilter .dk-select.select-1, .exchangeOverviewFilter .dk-select.select-1, .cardTurnoverFilter .dk-select.select-1, .cardSpendingsFilter .dk-select.select-1, .messages-filter .dk-select.select-1, .newMessage .dk-select.select-1 { position: relative; } .documentList .select-1 ~ .label-1, .accountTurnoverFilter .select-1 ~ .label-1, .cardPaymemtPopup .select-1 ~ .label-1, .paymentOverviewFilter .select-1 ~ .label-1, .exchangeOverviewFilter .select-1 ~ .label-1, .cardTurnoverFilter .select-1 ~ .label-1, .cardSpendingsFilter .select-1 ~ .label-1, .messages-filter .select-1 ~ .label-1, .newMessage .select-1 ~ .label-1 { top: 5px !important; font-size: 12px; } .documentList .select-1, .accountTurnoverFilter .select-1, .cardPaymemtPopup .select-1, .paymentOverviewFilter .select-1, .exchangeOverviewFilter .select-1, .cardTurnoverFilter .select-1, .cardSpendingsFilter .select-1, .messages-filter .select-1, .newMessage .select-1 { width: 100% !important; padding: 21px 32px 7px 24px !important; max-width: 100% !important; height: 50px !important; position: relative !important; width: 100% !important; border-radius: 30px !important; cursor: pointer !important; border: 1px solid #C3CBD0 !important; background: linear-gradient(#fff 0%, #F3F6F8 100%) !important; transition: border-color .2s, border-radius .2s !important; font-size: 14px !important; font-family: "aeonik-regular"; color: #000F28; } .documentList .select-1, .accountTurnoverFilter .select-1, .cardPaymemtPopup .select-1, .paymentOverviewFilter .select-1, .exchangeOverviewFilter .select-1, .cardTurnoverFilter .select-1, .cardSpendingsFilter .select-1, .messages-filter .select-1, .newMessage .select-1 { /* border: none !important; width: 100% !important; padding: 0 10px !important; font-family: "futura", sans-serif !important; font-size: 15px !important; line-height: 29px !important; height: 50px !important;*/ } .documentList dk-select, .documentList .dk-select-multi, .accountTurnoverFilter dk-select, .accountTurnoverFilter .dk-select-multi, .cardPaymemtPopup dk-select, .cardPaymemtPopup .dk-select-multi, .paymentOverviewFilter dk-select, .paymentOverviewFilter .dk-select-multi, .exchangeOverviewFilter dk-select, .exchangeOverviewFilter .dk-select-multi, .cardTurnoverFilter dk-select, .cardTurnoverFilter .dk-select-multi, .cardSpendingsFilter dk-select, .cardSpendingsFilter .dk-select-multi, .messages-filter dk-select, .messages-filter .dk-select-multi, .newMessage dk-select, .newMessage .dk-select-multi { position: relative; display: inline-block; vertical-align: middle; line-height: 1.5em; width: 200px; cursor: pointer; box-sizing: border-box; } .documentList .select-1::after, .accountTurnoverFilter .select-1::after, .cardPaymemtPopup .select-1::after, .paymentOverviewFilter .select-1::after, .exchangeOverviewFilter .select-1::after, .cardTurnoverFilter .select-1::after, .cardSpendingsFilter .select-1::after, .messages-filter .select-1::after, .newMessage .select-1::after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; } .documentList .select-1 .dk-select-options, .accountTurnoverFilter .select-1 .dk-select-options, .cardPaymemtPopup .select-1 .dk-select-options, .paymentOverviewFilter .select-1 .dk-select-options, .exchangeOverviewFilter .select-1 .dk-select-options, .cardTurnoverFilter .select-1 .dk-select-options, .cardSpendingsFilter .select-1 .dk-select-options, .messages-filter .select-1 .dk-select-options, .newMessage .select-1 .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; padding-top: 10px; width: auto; z-index: 20; font-family: "Source-Sans-Pro", sans-serif; border-radius: 0 0 25px 25px !important; border-top: 1px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); } .documentList .select-1 .dk-select-options .dk-option:hover, .accountTurnoverFilter .select-1 .dk-select-options .dk-option:hover, .cardPaymemtPopup .select-1 .dk-select-options .dk-option:hover, .paymentOverviewFilter .select-1 .dk-select-options .dk-option:hover, .exchangeOverviewFilter .select-1 .dk-select-options .dk-option:hover, .cardTurnoverFilter .select-1 .dk-select-options .dk-option:hover, .cardSpendingsFilter .select-1 .dk-select-options .dk-option:hover, .messages-filter .select-1 .dk-select-options .dk-option:hover, .newMessage .select-1 .dk-select-options .dk-option:hover { background-color: #e6e6e6; } .documentList .dk-select-options.active, .accountTurnoverFilter .dk-select-options.active, .cardPaymemtPopup .dk-select-options.active, .paymentOverviewFilter .dk-select-options.active, .exchangeOverviewFilter .dk-select-options.active, .cardTurnoverFilter .dk-select-options.active, .cardSpendingsFilter .dk-select-options.active, .messages-filter .dk-select-options.active, .newMessage .dk-select-options.active { display: block !important; } .documentList .input-wrapper .input-wrapper-inner .input-1:active, .documentList .input-wrapper .input-wrapper-inner .input-1:focus, .accountTurnoverFilter .input-wrapper .input-wrapper-inner .input-1:active, .accountTurnoverFilter .input-wrapper .input-wrapper-inner .input-1:focus, .cardPaymemtPopup .input-wrapper .input-wrapper-inner .input-1:active, .cardPaymemtPopup .input-wrapper .input-wrapper-inner .input-1:focus, .paymentOverviewFilter .input-wrapper .input-wrapper-inner .input-1:active, .paymentOverviewFilter .input-wrapper .input-wrapper-inner .input-1:focus, .exchangeOverviewFilter .input-wrapper .input-wrapper-inner .input-1:active, .exchangeOverviewFilter .input-wrapper .input-wrapper-inner .input-1:focus, .cardTurnoverFilter .input-wrapper .input-wrapper-inner .input-1:active, .cardTurnoverFilter .input-wrapper .input-wrapper-inner .input-1:focus, .cardSpendingsFilter .input-wrapper .input-wrapper-inner .input-1:active, .cardSpendingsFilter .input-wrapper .input-wrapper-inner .input-1:focus, .messages-filter .input-wrapper .input-wrapper-inner .input-1:active, .messages-filter .input-wrapper .input-wrapper-inner .input-1:focus, .newMessage .input-wrapper .input-wrapper-inner .input-1:active, .newMessage .input-wrapper .input-wrapper-inner .input-1:focus { border-color: #c3cbd0; } .documentList .input-wrapper .selection-wrapper-inner .select-1, .accountTurnoverFilter .input-wrapper .selection-wrapper-inner .select-1, .cardPaymemtPopup .input-wrapper .selection-wrapper-inner .select-1, .paymentOverviewFilter .input-wrapper .selection-wrapper-inner .select-1, .exchangeOverviewFilter .input-wrapper .selection-wrapper-inner .select-1, .cardTurnoverFilter .input-wrapper .selection-wrapper-inner .select-1, .cardSpendingsFilter .input-wrapper .selection-wrapper-inner .select-1, .messages-filter .input-wrapper .selection-wrapper-inner .select-1, .newMessage .input-wrapper .selection-wrapper-inner .select-1 { border-color: #c3cbd0; appearance: none; } .documentList .select-1.active, .accountTurnoverFilter .select-1.active, .cardPaymemtPopup .select-1.active, .paymentOverviewFilter .select-1.active, .exchangeOverviewFilter .select-1.active, .cardTurnoverFilter .select-1.active, .cardSpendingsFilter .select-1.active, .messages-filter .select-1.active, .newMessage .select-1.active { border-radius: 25px 25px 0 0 !important; } .accountTurnoverFilter .dk-select.select-1 { margin-bottom: 30px; } .paymentOverviewFilter .select-1 ~ .label-1, .exchangeOverviewFilter .select-1 ~ .label-1 { top: 42px !important; font-size: 1em; } .paymentOverviewFilter .part-modal-inner:nth-child(3), .exchangeOverviewFilter .part-modal-inner:nth-child(3) { padding-bottom: 0px; } .paymentOverviewFilter .part-modal-inner:nth-child(3)::after, .exchangeOverviewFilter .part-modal-inner:nth-child(3)::after { content: ""; width: 0; height: 0; position: absolute; bottom: 0; left: 0; background: none; } .paymentOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-2, .exchangeOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-2 { background-color: #fff; font-size: 15px; font-family: "aeonik-medium"; } .paymentOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-2 .btn-arrow, .exchangeOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-2 .btn-arrow { color: #266eff; } .paymentOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-1, .exchangeOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-1 { font-size: 15px; font-family: "aeonik-medium"; } .paymentOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-1 .btn-arrow, .exchangeOverviewFilter .modal-footer .buttons-wrapper .btn-1.color-1 .btn-arrow { color: #fff; } .paymentOverviewFilter .calendarFilter, .exchangeOverviewFilter .calendarFilter { background: transparent; } .exchangeOverviewFilter .select-1 ~ .label-1 { top: 42px !important; } .float-inherit { float: inherit; } .reset-password-list { padding-left: 16px; list-style: disc; } .reset-password-list .reset-password-list-item { font-family: "ibm-regular"; font-size: 14px; line-height: 1.42857; color: #75868e; } .reset-password-list .reset-password-list-item ul { list-style-type: inherit; } .reset-password-list .reset-password-list-item ul li { font-family: "aeonik-regular"; font-size: 13px; color: #666696; } .border-bottom-wrapper { position: relative; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #d7d8db; } .changePasswordDialog .input-wrapper.with-icon .input-1 { padding: 21px 40px 7px 24px; border: 1px solid #c3cbd0; border-radius: 30px; -webkit-transition: border-color .2s; transition: border-color .2s; } .changePasswordDialog .btn-1 { font-family: "aeonik-medium"; } .changePasswordDialog .with-icon { display: block; } .changePasswordDialog .ui-dialog-titlebar { display: none; } /***************************/ .s-widget-zone-center { float: none !important; margin: 0 auto; min-height: 100px; box-sizing: border-box; max-width: 1195px; } .PaymentOrderV2 #no-accounts-main, .accountStatementDropdown #no-accounts-main, .PaymentTransferV2 #no-accounts-main { background: #F3F6F8 !important; border-radius: 16px; padding: 21px 135px 21px 94px !important; margin-top: 0 !important; } .paymentOrdercommissionDialog .border-bottom-wrapper .input-wrapper, .casOrdercommissionDialog .border-bottom-wrapper .input-wrapper, .PaymentOrderV2 .border-bottom-wrapper .input-wrapper, .accountStatementDropdown .border-bottom-wrapper .input-wrapper, .FXTrading .border-bottom-wrapper .input-wrapper, .PaymentTransferV2 .border-bottom-wrapper .input-wrapper { margin-bottom: 0px; } .paymentOrdercommissionDialog .double-info-slider-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper, .PaymentOrderV2 .double-info-slider-wrapper, .accountStatementDropdown .double-info-slider-wrapper, .FXTrading .double-info-slider-wrapper, .PaymentTransferV2 .double-info-slider-wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 40px; border-bottom: 1px solid #d7d8db; } .paymentOrdercommissionDialog .double-info-slider-wrapper:before, .casOrdercommissionDialog .double-info-slider-wrapper:before, .PaymentOrderV2 .double-info-slider-wrapper:before, .accountStatementDropdown .double-info-slider-wrapper:before, .FXTrading .double-info-slider-wrapper:before, .PaymentTransferV2 .double-info-slider-wrapper:before { position: absolute; content: ""; bottom: -8px; width: 22px; height: 30px; background-color: #f0f1f5; border-bottom: 1px solid #d7d8db; left: 50%; border-radius: 0 0 0 1px; -webkit-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); } .paymentOrdercommissionDialog .double-info-slider-wrapper:after, .casOrdercommissionDialog .double-info-slider-wrapper:after, .PaymentOrderV2 .double-info-slider-wrapper:after, .accountStatementDropdown .double-info-slider-wrapper:after, .FXTrading .double-info-slider-wrapper:after, .PaymentTransferV2 .double-info-slider-wrapper:after { position: absolute; content: ""; bottom: -8px; width: 22px; height: 30px; background-color: #f0f1f5; border-bottom: 1px solid #d7d8db; left: 50.4%; border-radius: 0 0 1px 0; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .accountStatementDropdown .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .FXTrading .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-outher-wrapper:first-child { margin-right: 40px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-outher-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-outher-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-outher-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-outher-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-outher-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-outher-wrapper { width: -webkit-calc(50% - 20px); width: calc(50% - 20px); } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper { padding: 22px 135px 22px 104px !important; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts { background: #fff !important; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts:before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts:after { display: none; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper { width: unset; height: unset; left: 35%; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper .no-account-icon { width: 32px; height: 32px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper p { color: #666696; font-family: "aeonik-medium"; width: max-content; padding-left: 16px; padding-top: 3px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.empty:before, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper.empty:before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper.empty:before, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper.empty:before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper.empty:before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper.empty:before { display: none; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper { position: absolute; width: 24px; height: 24px; top: 50%; left: 41px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper { left: 22px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon { width: 100%; height: 100%; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slide, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slide, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .info-slide, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content { width: 100%; padding-right: 18px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .payments-card-img-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .payments-card-img-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .payments-card-img-wrapper, .accountStatementDropdown .double-info-slider-wrapper .payments-card-img-wrapper, .FXTrading .double-info-slider-wrapper .payments-card-img-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .payments-card-img-wrapper { position: absolute; width: 88px; height: 127px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url(images/card-decor.png) 0 0 no-repeat; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper:before, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper:before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper:before { right: 132px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper:before, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper:before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper:before { position: absolute; content: ""; width: 1px; height: 44px; top: 50%; background: #666696; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:after, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:after, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper:after, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper:after, .FXTrading .double-info-slider-wrapper .info-slider-wrapper:after, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper:after { left: 68px; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper:before, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper:before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper:before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper:before { position: absolute; content: ""; width: 1px; height: 44px; top: 50%; background: #666696; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper { position: relative; padding: 40px 176px 40px 112px; border-radius: 16px; background: #000F28; height: 75px; overflow: hidden; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap { right: 22px !important; } .paymentOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .casOrdercommissionDialog .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .accountStatementDropdown .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap { position: absolute; top: 50%; right: 34px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .paymentOrdercommissionDialog .double-info-slider-wrapper .empty, .casOrdercommissionDialog .double-info-slider-wrapper .empty, .PaymentOrderV2 .double-info-slider-wrapper .empty, .accountStatementDropdown .double-info-slider-wrapper .empty, .FXTrading .double-info-slider-wrapper .empty, .PaymentTransferV2 .double-info-slider-wrapper .empty { background: #fff !important; } .paymentOrdercommissionDialog .double-info-slider-wrapper .emptyIcon, .casOrdercommissionDialog .double-info-slider-wrapper .emptyIcon, .PaymentOrderV2 .double-info-slider-wrapper .emptyIcon, .accountStatementDropdown .double-info-slider-wrapper .emptyIcon, .FXTrading .double-info-slider-wrapper .emptyIcon, .PaymentTransferV2 .double-info-slider-wrapper .emptyIcon { left: 40% !important; } .paymentOrdercommissionDialog .double-info-slider-wrapper .empty-message, .casOrdercommissionDialog .double-info-slider-wrapper .empty-message, .PaymentOrderV2 .double-info-slider-wrapper .empty-message, .accountStatementDropdown .double-info-slider-wrapper .empty-message, .FXTrading .double-info-slider-wrapper .empty-message, .PaymentTransferV2 .double-info-slider-wrapper .empty-message { margin-left: 30px; width: 202px; color: #666696; margin-top: 3px; padding-left: 16px; } .paymentOrdercommissionDialog .empty-debit, .casOrdercommissionDialog .empty-debit, .PaymentOrderV2 .empty-debit, .accountStatementDropdown .empty-debit, .FXTrading .empty-debit, .PaymentTransferV2 .empty-debit { width: 100% !important; box-shadow: none !important; } .paymentOrdercommissionDialog .swiper-container, .casOrdercommissionDialog .swiper-container, .PaymentOrderV2 .swiper-container, .accountStatementDropdown .swiper-container, .FXTrading .swiper-container, .PaymentTransferV2 .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .paymentOrdercommissionDialog .swiper-container .swiper-notification, .casOrdercommissionDialog .swiper-container .swiper-notification, .PaymentOrderV2 .swiper-container .swiper-notification, .accountStatementDropdown .swiper-container .swiper-notification, .FXTrading .swiper-container .swiper-notification, .PaymentTransferV2 .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .paymentOrdercommissionDialog .swiper-container-android .swiper-slide, .paymentOrdercommissionDialog .swiper-wrapper, .casOrdercommissionDialog .swiper-container-android .swiper-slide, .casOrdercommissionDialog .swiper-wrapper, .PaymentOrderV2 .swiper-container-android .swiper-slide, .PaymentOrderV2 .swiper-wrapper, .accountStatementDropdown .swiper-container-android .swiper-slide, .accountStatementDropdown .swiper-wrapper, .FXTrading .swiper-container-android .swiper-slide, .FXTrading .swiper-wrapper, .PaymentTransferV2 .swiper-container-android .swiper-slide, .PaymentTransferV2 .swiper-wrapper { transform: translate3d(0px, 0, 0); } .paymentOrdercommissionDialog .swiper-wrapper, .casOrdercommissionDialog .swiper-wrapper, .PaymentOrderV2 .swiper-wrapper, .accountStatementDropdown .swiper-wrapper, .FXTrading .swiper-wrapper, .PaymentTransferV2 .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .paymentOrdercommissionDialog .swiper-container-fade .swiper-container-fade, .casOrdercommissionDialog .swiper-container-fade .swiper-container-fade, .PaymentOrderV2 .swiper-container-fade .swiper-container-fade, .accountStatementDropdown .swiper-container-fade .swiper-container-fade, .FXTrading .swiper-container-fade .swiper-container-fade, .PaymentTransferV2 .swiper-container-fade .swiper-container-fade { pointer-events: auto; } .paymentOrdercommissionDialog .swiper-container-fade .swiper-slide, .casOrdercommissionDialog .swiper-container-fade .swiper-slide, .PaymentOrderV2 .swiper-container-fade .swiper-slide, .accountStatementDropdown .swiper-container-fade .swiper-slide, .FXTrading .swiper-container-fade .swiper-slide, .PaymentTransferV2 .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .paymentOrdercommissionDialog .title-5, .casOrdercommissionDialog .title-5, .PaymentOrderV2 .title-5, .accountStatementDropdown .title-5, .FXTrading .title-5, .PaymentTransferV2 .title-5 { font-size: -webkit-calc(20px + 4 * ((100vw - 320px)/1600)); font-size: calc(20px + 4 * ((100vw - 320px) / 1600)); } .paymentOrdercommissionDialog .title-5, .casOrdercommissionDialog .title-5, .PaymentOrderV2 .title-5, .accountStatementDropdown .title-5, .FXTrading .title-5, .PaymentTransferV2 .title-5 { font-size: 24px; } .paymentOrdercommissionDialog .title-5, .casOrdercommissionDialog .title-5, .PaymentOrderV2 .title-5, .accountStatementDropdown .title-5, .FXTrading .title-5, .PaymentTransferV2 .title-5 { line-height: 1.1; letter-spacing: -.01em; font-size: 20px; } .paymentOrdercommissionDialog .font-1, .casOrdercommissionDialog .font-1, .PaymentOrderV2 .font-1, .accountStatementDropdown .font-1, .FXTrading .font-1, .PaymentTransferV2 .font-1 { font-family: aeonik-regular; } .paymentOrdercommissionDialog .text-color-2, .casOrdercommissionDialog .text-color-2, .PaymentOrderV2 .text-color-2, .accountStatementDropdown .text-color-2, .FXTrading .text-color-2, .PaymentTransferV2 .text-color-2 { color: #fff; } .paymentOrdercommissionDialog .nav-icons-1:first-child, .casOrdercommissionDialog .nav-icons-1:first-child, .PaymentOrderV2 .nav-icons-1:first-child, .accountStatementDropdown .nav-icons-1:first-child, .FXTrading .nav-icons-1:first-child, .PaymentTransferV2 .nav-icons-1:first-child { margin-right: 8px; } .paymentOrdercommissionDialog .nav-icons-1, .casOrdercommissionDialog .nav-icons-1, .PaymentOrderV2 .nav-icons-1, .accountStatementDropdown .nav-icons-1, .FXTrading .nav-icons-1, .PaymentTransferV2 .nav-icons-1 { position: relative; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; -webkit-transition: border-color .3s; transition: border-color .3s; cursor: pointer; } .paymentOrdercommissionDialog .nav-icons-1:hover, .casOrdercommissionDialog .nav-icons-1:hover, .PaymentOrderV2 .nav-icons-1:hover, .accountStatementDropdown .nav-icons-1:hover, .FXTrading .nav-icons-1:hover, .PaymentTransferV2 .nav-icons-1:hover { border-color: #666696; } .paymentOrdercommissionDialog .nav-icons-1:hover svg, .casOrdercommissionDialog .nav-icons-1:hover svg, .PaymentOrderV2 .nav-icons-1:hover svg, .accountStatementDropdown .nav-icons-1:hover svg, .FXTrading .nav-icons-1:hover svg, .PaymentTransferV2 .nav-icons-1:hover svg { color: #666696; } .paymentOrdercommissionDialog .nav-icons-1 svg, .casOrdercommissionDialog .nav-icons-1 svg, .PaymentOrderV2 .nav-icons-1 svg, .accountStatementDropdown .nav-icons-1 svg, .FXTrading .nav-icons-1 svg, .PaymentTransferV2 .nav-icons-1 svg { position: absolute; width: 20px; height: 20px; fill: #fff; color: #fff; stroke: none; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: fill .3s; transition: fill .3s; } .paymentOrdercommissionDialog .info-slider-wrapper .nav-next, .casOrdercommissionDialog .info-slider-wrapper .nav-next, .PaymentOrderV2 .info-slider-wrapper .nav-next, .accountStatementDropdown .info-slider-wrapper .nav-next, .FXTrading .info-slider-wrapper .nav-next, .PaymentTransferV2 .info-slider-wrapper .nav-next { margin-right: 0; } .paymentOrdercommissionDialog .payments-main-form-inner.justify-center, .casOrdercommissionDialog .payments-main-form-inner.justify-center, .PaymentOrderV2 .payments-main-form-inner.justify-center, .accountStatementDropdown .payments-main-form-inner.justify-center, .FXTrading .payments-main-form-inner.justify-center, .PaymentTransferV2 .payments-main-form-inner.justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .paymentOrdercommissionDialog .payments-main-form-inner, .casOrdercommissionDialog .payments-main-form-inner, .PaymentOrderV2 .payments-main-form-inner, .accountStatementDropdown .payments-main-form-inner, .FXTrading .payments-main-form-inner, .PaymentTransferV2 .payments-main-form-inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 30px; } .paymentOrdercommissionDialog .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child, .casOrdercommissionDialog .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child, .PaymentOrderV2 .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child, .accountStatementDropdown .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child, .FXTrading .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child, .PaymentTransferV2 .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child { margin-right: 0; } .paymentOrdercommissionDialog .payments-main-form-inner .payments-main-form-col-2:first-child, .casOrdercommissionDialog .payments-main-form-inner .payments-main-form-col-2:first-child, .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2:first-child, .accountStatementDropdown .payments-main-form-inner .payments-main-form-col-2:first-child, .FXTrading .payments-main-form-inner .payments-main-form-col-2:first-child, .PaymentTransferV2 .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 40px; } .paymentOrdercommissionDialog .payments-main-form-inner .payments-main-form-col-2, .casOrdercommissionDialog .payments-main-form-inner .payments-main-form-col-2, .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2, .accountStatementDropdown .payments-main-form-inner .payments-main-form-col-2, .FXTrading .payments-main-form-inner .payments-main-form-col-2, .PaymentTransferV2 .payments-main-form-inner .payments-main-form-col-2 { width: 50%; } .paymentOrdercommissionDialog .payments-main-form-inner:after, .casOrdercommissionDialog .payments-main-form-inner:after, .PaymentOrderV2 .payments-main-form-inner:after, .accountStatementDropdown .payments-main-form-inner:after, .FXTrading .payments-main-form-inner:after, .PaymentTransferV2 .payments-main-form-inner:after { content: ""; width: 100%; height: 1px; position: absolute; right: 0; bottom: 0; background: #d7d8db; } .paymentOrdercommissionDialog .input-wrapper, .casOrdercommissionDialog .input-wrapper, .PaymentOrderV2 .input-wrapper, .accountStatementDropdown .input-wrapper, .FXTrading .input-wrapper, .PaymentTransferV2 .input-wrapper { position: relative; margin-bottom: 16px; } .paymentOrdercommissionDialog .selection-wrapper-inner, .casOrdercommissionDialog .selection-wrapper-inner, .PaymentOrderV2 .selection-wrapper-inner, .accountStatementDropdown .selection-wrapper-inner, .FXTrading .selection-wrapper-inner, .PaymentTransferV2 .selection-wrapper-inner { border-radius: 30px; } .paymentOrdercommissionDialog .payments-main-form-buttons, .casOrdercommissionDialog .payments-main-form-buttons, .PaymentOrderV2 .payments-main-form-buttons, .accountStatementDropdown .payments-main-form-buttons, .FXTrading .payments-main-form-buttons, .PaymentTransferV2 .payments-main-form-buttons { max-width: 632px; margin-left: auto; margin-right: auto; } .paymentOrdercommissionDialog .payments-main-form-buttons .btn-1.color-1[disabled], .casOrdercommissionDialog .payments-main-form-buttons .btn-1.color-1[disabled], .PaymentOrderV2 .payments-main-form-buttons .btn-1.color-1[disabled], .accountStatementDropdown .payments-main-form-buttons .btn-1.color-1[disabled], .FXTrading .payments-main-form-buttons .btn-1.color-1[disabled], .PaymentTransferV2 .payments-main-form-buttons .btn-1.color-1[disabled] { background-color: #d7d8db; pointer-events: none; } .paymentOrdercommissionDialog .justify-center, .casOrdercommissionDialog .justify-center, .PaymentOrderV2 .justify-center, .accountStatementDropdown .justify-center, .FXTrading .justify-center, .PaymentTransferV2 .justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .paymentOrdercommissionDialog .dk-select.select-1, .casOrdercommissionDialog .dk-select.select-1, .PaymentOrderV2 .dk-select.select-1, .accountStatementDropdown .dk-select.select-1, .FXTrading .dk-select.select-1, .PaymentTransferV2 .dk-select.select-1 { position: relative; } .paymentOrdercommissionDialog .select-1 ~ .label-1, .casOrdercommissionDialog .select-1 ~ .label-1, .PaymentOrderV2 .select-1 ~ .label-1, .accountStatementDropdown .select-1 ~ .label-1, .FXTrading .select-1 ~ .label-1, .PaymentTransferV2 .select-1 ~ .label-1 { top: 8px !important; font-size: 12px; margin-left: 45px; } .paymentOrdercommissionDialog .select-1.accountStatementSelect, .casOrdercommissionDialog .select-1.accountStatementSelect, .PaymentOrderV2 .select-1.accountStatementSelect, .accountStatementDropdown .select-1.accountStatementSelect, .FXTrading .select-1.accountStatementSelect, .PaymentTransferV2 .select-1.accountStatementSelect { height: 42px !important; } .paymentOrdercommissionDialog .select-1, .casOrdercommissionDialog .select-1, .PaymentOrderV2 .select-1, .accountStatementDropdown .select-1, .FXTrading .select-1, .PaymentTransferV2 .select-1 { padding: 16px 32px 7px 24px; max-width: 100%; height: 25px; position: relative; width: 100%; border-radius: 30px; cursor: pointer; border: 1px solid #c3cbd0; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f6f8)); background: linear-gradient(#fff, #f3f6f8); -webkit-transition: border-color .2s,border-radius .2s; transition: border-color .2s,border-radius .2s; } .paymentOrdercommissionDialog dk-select, .paymentOrdercommissionDialog .dk-select-multi, .casOrdercommissionDialog dk-select, .casOrdercommissionDialog .dk-select-multi, .PaymentOrderV2 dk-select, .PaymentOrderV2 .dk-select-multi, .accountStatementDropdown dk-select, .accountStatementDropdown .dk-select-multi, .FXTrading dk-select, .FXTrading .dk-select-multi, .PaymentTransferV2 dk-select, .PaymentTransferV2 .dk-select-multi { position: relative; display: inline-block; vertical-align: middle; line-height: 1.5em; width: 200px; cursor: pointer; box-sizing: border-box; } .paymentOrdercommissionDialog .select-1::after, .casOrdercommissionDialog .select-1::after, .PaymentOrderV2 .select-1::after, .accountStatementDropdown .select-1::after, .FXTrading .select-1::after, .PaymentTransferV2 .select-1::after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; } .paymentOrdercommissionDialog .select-1 .dk-select-options, .casOrdercommissionDialog .select-1 .dk-select-options, .PaymentOrderV2 .select-1 .dk-select-options, .accountStatementDropdown .select-1 .dk-select-options, .FXTrading .select-1 .dk-select-options, .PaymentTransferV2 .select-1 .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; width: auto; z-index: 20; font-family: "aeonik-regular"; border-radius: 0 0 30px 30px !important; border: 1px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.23); } .paymentOrdercommissionDialog .select-1 .dk-select-options .dk-option, .casOrdercommissionDialog .select-1 .dk-select-options .dk-option, .PaymentOrderV2 .select-1 .dk-select-options .dk-option, .accountStatementDropdown .select-1 .dk-select-options .dk-option, .FXTrading .select-1 .dk-select-options .dk-option, .PaymentTransferV2 .select-1 .dk-select-options .dk-option { padding: 9px 16px; -webkit-transition: color .3s ease; transition: color .3s ease; cursor: pointer; font-family: "aeonik-regular"; font-size: 15px; color: #000F28 !important; text-align: left; background: transparent; border-top: 1px solid transparent; -webkit-transition: background .3s; transition: background .3s; } .paymentOrdercommissionDialog .select-1 .dk-select-options .dk-option:hover, .casOrdercommissionDialog .select-1 .dk-select-options .dk-option:hover, .PaymentOrderV2 .select-1 .dk-select-options .dk-option:hover, .accountStatementDropdown .select-1 .dk-select-options .dk-option:hover, .FXTrading .select-1 .dk-select-options .dk-option:hover, .PaymentTransferV2 .select-1 .dk-select-options .dk-option:hover { background-color: #F3F6F8 !important; } .paymentOrdercommissionDialog .dk-select-options.active, .casOrdercommissionDialog .dk-select-options.active, .PaymentOrderV2 .dk-select-options.active, .accountStatementDropdown .dk-select-options.active, .FXTrading .dk-select-options.active, .PaymentTransferV2 .dk-select-options.active { display: block !important; } .paymentOrdercommissionDialog .input-wrapper .input-wrapper-inner .input-1:active, .paymentOrdercommissionDialog .input-wrapper .input-wrapper-inner .input-1:focus, .casOrdercommissionDialog .input-wrapper .input-wrapper-inner .input-1:active, .casOrdercommissionDialog .input-wrapper .input-wrapper-inner .input-1:focus, .PaymentOrderV2 .input-wrapper .input-wrapper-inner .input-1:active, .PaymentOrderV2 .input-wrapper .input-wrapper-inner .input-1:focus, .accountStatementDropdown .input-wrapper .input-wrapper-inner .input-1:active, .accountStatementDropdown .input-wrapper .input-wrapper-inner .input-1:focus, .FXTrading .input-wrapper .input-wrapper-inner .input-1:active, .FXTrading .input-wrapper .input-wrapper-inner .input-1:focus, .PaymentTransferV2 .input-wrapper .input-wrapper-inner .input-1:active, .PaymentTransferV2 .input-wrapper .input-wrapper-inner .input-1:focus { border-color: #c3cbd0; } .paymentOrdercommissionDialog .input-wrapper .selection-wrapper-inner .select-1, .casOrdercommissionDialog .input-wrapper .selection-wrapper-inner .select-1, .PaymentOrderV2 .input-wrapper .selection-wrapper-inner .select-1, .accountStatementDropdown .input-wrapper .selection-wrapper-inner .select-1, .FXTrading .input-wrapper .selection-wrapper-inner .select-1, .PaymentTransferV2 .input-wrapper .selection-wrapper-inner .select-1 { border-color: #c3cbd0; appearance: none; } .paymentOrdercommissionDialog .select-1.active, .casOrdercommissionDialog .select-1.active, .PaymentOrderV2 .select-1.active, .accountStatementDropdown .select-1.active, .FXTrading .select-1.active, .PaymentTransferV2 .select-1.active { border-radius: 25px 25px 0 0 !important; } .paymentOrdercommissionDialog .creditcurrencies_RUR:before, .casOrdercommissionDialog .creditcurrencies_RUR:before, .PaymentOrderV2 .creditcurrencies_RUR:before, .accountStatementDropdown .creditcurrencies_RUR:before, .FXTrading .creditcurrencies_RUR:before, .PaymentTransferV2 .creditcurrencies_RUR:before { background-image: url(images/icons/ic_exchange_eur.png); } .paymentOrdercommissionDialog .select-1 .select-1-currency-icon:before, .casOrdercommissionDialog .select-1 .select-1-currency-icon:before, .PaymentOrderV2 .select-1 .select-1-currency-icon:before, .accountStatementDropdown .select-1 .select-1-currency-icon:before, .FXTrading .select-1 .select-1-currency-icon:before, .PaymentTransferV2 .select-1 .select-1-currency-icon:before { position: absolute; content: ""; width: 20px; height: 20px; top: 35%; left: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; } .paymentOrdercommissionDialog .select-1 .select-1-currency-icon:before, .casOrdercommissionDialog .select-1 .select-1-currency-icon:before, .PaymentOrderV2 .select-1 .select-1-currency-icon:before, .accountStatementDropdown .select-1 .select-1-currency-icon:before, .FXTrading .select-1 .select-1-currency-icon:before, .PaymentTransferV2 .select-1 .select-1-currency-icon:before { position: absolute; content: ""; width: 20px; height: 20px; top: 35%; left: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; border-top-color: transparent; } .paymentOrdercommissionDialog .select-1 .select-1-currency-icon, .casOrdercommissionDialog .select-1 .select-1-currency-icon, .PaymentOrderV2 .select-1 .select-1-currency-icon, .accountStatementDropdown .select-1 .select-1-currency-icon, .FXTrading .select-1 .select-1-currency-icon, .PaymentTransferV2 .select-1 .select-1-currency-icon { position: relative; padding-left: 67px; } .paymentOrdercommissionDialog .select-1 .select-1-currency-iconli:before, .casOrdercommissionDialog .select-1 .select-1-currency-iconli:before, .PaymentOrderV2 .select-1 .select-1-currency-iconli:before, .accountStatementDropdown .select-1 .select-1-currency-iconli:before, .FXTrading .select-1 .select-1-currency-iconli:before, .PaymentTransferV2 .select-1 .select-1-currency-iconli:before { position: absolute; content: ""; width: 20px; height: 20px; top: 50%; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; } .paymentOrdercommissionDialog .select-1 .select-1-currency-iconli, .casOrdercommissionDialog .select-1 .select-1-currency-iconli, .PaymentOrderV2 .select-1 .select-1-currency-iconli, .accountStatementDropdown .select-1 .select-1-currency-iconli, .FXTrading .select-1 .select-1-currency-iconli, .PaymentTransferV2 .select-1 .select-1-currency-iconli { position: relative; padding-left: 67px; } .paymentOrdercommissionDialog .currency-eur:before, .casOrdercommissionDialog .currency-eur:before, .PaymentOrderV2 .currency-eur:before, .accountStatementDropdown .currency-eur:before, .FXTrading .currency-eur:before, .PaymentTransferV2 .currency-eur:before { background-image: url(images/icons/ic_exchange_eur.png); } .paymentOrdercommissionDialog .select-1 .dk-selected, .casOrdercommissionDialog .select-1 .dk-selected, .PaymentOrderV2 .select-1 .dk-selected, .accountStatementDropdown .select-1 .dk-selected, .FXTrading .select-1 .dk-selected, .PaymentTransferV2 .select-1 .dk-selected { background-color: transparent !important; max-width: 100%; height: 22px; position: relative; width: 100%; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.4; color: #000F28; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-left: -12px; } .paymentOrdercommissionDialog .select-1 .dk-selected:focus, .paymentOrdercommissionDialog .select-1 .dk-selected:hover, .paymentOrdercommissionDialog .select-1 .dk-selected:active, .casOrdercommissionDialog .select-1 .dk-selected:focus, .casOrdercommissionDialog .select-1 .dk-selected:hover, .casOrdercommissionDialog .select-1 .dk-selected:active, .PaymentOrderV2 .select-1 .dk-selected:focus, .PaymentOrderV2 .select-1 .dk-selected:hover, .PaymentOrderV2 .select-1 .dk-selected:active, .accountStatementDropdown .select-1 .dk-selected:focus, .accountStatementDropdown .select-1 .dk-selected:hover, .accountStatementDropdown .select-1 .dk-selected:active, .FXTrading .select-1 .dk-selected:focus, .FXTrading .select-1 .dk-selected:hover, .FXTrading .select-1 .dk-selected:active, .PaymentTransferV2 .select-1 .dk-selected:focus, .PaymentTransferV2 .select-1 .dk-selected:hover, .PaymentTransferV2 .select-1 .dk-selected:active { border-color: #ccccdc !important; } .paymentOrdercommissionDialog .select-1 .dk-selected:focus:after, .paymentOrdercommissionDialog .select-1 .dk-selected:hover:after, .paymentOrdercommissionDialog .select-1 .dk-selected:active:after, .casOrdercommissionDialog .select-1 .dk-selected:focus:after, .casOrdercommissionDialog .select-1 .dk-selected:hover:after, .casOrdercommissionDialog .select-1 .dk-selected:active:after, .PaymentOrderV2 .select-1 .dk-selected:focus:after, .PaymentOrderV2 .select-1 .dk-selected:hover:after, .PaymentOrderV2 .select-1 .dk-selected:active:after, .accountStatementDropdown .select-1 .dk-selected:focus:after, .accountStatementDropdown .select-1 .dk-selected:hover:after, .accountStatementDropdown .select-1 .dk-selected:active:after, .FXTrading .select-1 .dk-selected:focus:after, .FXTrading .select-1 .dk-selected:hover:after, .FXTrading .select-1 .dk-selected:active:after, .PaymentTransferV2 .select-1 .dk-selected:focus:after, .PaymentTransferV2 .select-1 .dk-selected:hover:after, .PaymentTransferV2 .select-1 .dk-selected:active:after { border-color: #ccccdc !important; } .paymentOrdercommissionDialog .select-1-currency-icon:after, .casOrdercommissionDialog .select-1-currency-icon:after, .PaymentOrderV2 .select-1-currency-icon:after, .accountStatementDropdown .select-1-currency-icon:after, .FXTrading .select-1-currency-icon:after, .PaymentTransferV2 .select-1-currency-icon:after { position: absolute; content: ""; width: 1px; height: 30px; top: 50%; left: 49px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8), rgba(195, 203, 208, 0.8) 1px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 3px); } .paymentOrdercommissionDialog .select-1-currency-iconli:after, .casOrdercommissionDialog .select-1-currency-iconli:after, .PaymentOrderV2 .select-1-currency-iconli:after, .accountStatementDropdown .select-1-currency-iconli:after, .FXTrading .select-1-currency-iconli:after, .PaymentTransferV2 .select-1-currency-iconli:after { position: absolute; content: ""; width: 1px; height: 34px; top: 50%; left: 51px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #ccccdc; } .paymentOrdercommissionDialog .currenciesText, .casOrdercommissionDialog .currenciesText, .PaymentOrderV2 .currenciesText, .accountStatementDropdown .currenciesText, .FXTrading .currenciesText, .PaymentTransferV2 .currenciesText { margin-top: 7px; margin-left: -10px; } .FXTrading .select-1 .dk-select-options .dk-option { padding: 8px 15px; padding-left: 67px; } .accountStatementDropdown .select .dk-option { padding: 10px; } .accountStatementDropdown .select-1 .dk-select-options { max-height: 70px; } .success-icon { background-image: url(images/icons/success-icon.svg); } .cardPaymentransactionDetails, .intrabankDataSuccess, .transferSuccess, .exchangeDetails, .fXTradingCommissionDialog, .exchangeConfirmationDialog { width: 100% !important; /* .modal-footer:after { position: absolute; content: ""; width: -webkit-calc(100% - 60px); width: calc(100% - 60px); height: 2px; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: repeating-linear-gradient(90deg,rgba(195,203,208,.8) 0,rgba(195,203,208,.8) 3px,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 7px); }*/ } .cardPaymentransactionDetails .modal-status-info .modal-status-info-img-wrapper, .intrabankDataSuccess .modal-status-info .modal-status-info-img-wrapper, .transferSuccess .modal-status-info .modal-status-info-img-wrapper, .exchangeDetails .modal-status-info .modal-status-info-img-wrapper, .fXTradingCommissionDialog .modal-status-info .modal-status-info-img-wrapper, .exchangeConfirmationDialog .modal-status-info .modal-status-info-img-wrapper { width: 40px; height: 40px; } .cardPaymentransactionDetails .modal-content-inner.modal-status-info, .intrabankDataSuccess .modal-content-inner.modal-status-info, .transferSuccess .modal-content-inner.modal-status-info, .exchangeDetails .modal-content-inner.modal-status-info, .fXTradingCommissionDialog .modal-content-inner.modal-status-info, .exchangeConfirmationDialog .modal-content-inner.modal-status-info { display: flex; flex-wrap: nowrap; flex-direction: row; } .cardPaymentransactionDetails .modal-status-info-img-wrapper, .intrabankDataSuccess .modal-status-info-img-wrapper, .transferSuccess .modal-status-info-img-wrapper, .exchangeDetails .modal-status-info-img-wrapper, .fXTradingCommissionDialog .modal-status-info-img-wrapper, .exchangeConfirmationDialog .modal-status-info-img-wrapper { background: url(images/icons/success-icon.svg); width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; } .cardPaymentransactionDetails .modal-status-info-img-wrapper.success, .intrabankDataSuccess .modal-status-info-img-wrapper.success, .transferSuccess .modal-status-info-img-wrapper.success, .exchangeDetails .modal-status-info-img-wrapper.success, .fXTradingCommissionDialog .modal-status-info-img-wrapper.success, .exchangeConfirmationDialog .modal-status-info-img-wrapper.success { background: url(images/icons/success-icon.svg); background-repeat: no-repeat; background-size: cover; } .cardPaymentransactionDetails .modal-status-info-img-wrapper.error, .intrabankDataSuccess .modal-status-info-img-wrapper.error, .transferSuccess .modal-status-info-img-wrapper.error, .exchangeDetails .modal-status-info-img-wrapper.error, .fXTradingCommissionDialog .modal-status-info-img-wrapper.error, .exchangeConfirmationDialog .modal-status-info-img-wrapper.error { background: url(images/icons/info-icon.png); background-repeat: no-repeat; background-size: cover; } .cardPaymentransactionDetails .modal-status-info-content.user-content, .intrabankDataSuccess .modal-status-info-content.user-content, .transferSuccess .modal-status-info-content.user-content, .exchangeDetails .modal-status-info-content.user-content, .fXTradingCommissionDialog .modal-status-info-content.user-content, .exchangeConfirmationDialog .modal-status-info-content.user-content { width: calc(100% - 40px); padding-left: 30px; font-family: ibm-regular; font-size: 15px; line-height: 1.33333333; letter-spacing: -.02em; margin-top: 0px; } .cardPaymentransactionDetails .user-content p, .intrabankDataSuccess .user-content p, .transferSuccess .user-content p, .exchangeDetails .user-content p, .fXTradingCommissionDialog .user-content p, .exchangeConfirmationDialog .user-content p { font-family: "aeonik-regular"; } .cardPaymentransactionDetails .successfully-ico, .intrabankDataSuccess .successfully-ico, .transferSuccess .successfully-ico, .exchangeDetails .successfully-ico, .fXTradingCommissionDialog .successfully-ico, .exchangeConfirmationDialog .successfully-ico { position: absolute; width: 15%; height: 100%; top: 35%; left: 30px; transform: translateY(-50%); stroke: none !important; } .cardPaymentransactionDetails .error-ico, .intrabankDataSuccess .error-ico, .transferSuccess .error-ico, .exchangeDetails .error-ico, .fXTradingCommissionDialog .error-ico, .exchangeConfirmationDialog .error-ico { position: absolute; width: 15%; height: 100%; top: 35%; left: 30px; transform: translateY(-50%); stroke: none !important; } .cardPaymentransactionDetails .account-info-popup-wrapper .left-inner-loan-detail, .intrabankDataSuccess .account-info-popup-wrapper .left-inner-loan-detail, .transferSuccess .account-info-popup-wrapper .left-inner-loan-detail, .exchangeDetails .account-info-popup-wrapper .left-inner-loan-detail, .fXTradingCommissionDialog .account-info-popup-wrapper .left-inner-loan-detail, .exchangeConfirmationDialog .account-info-popup-wrapper .left-inner-loan-detail { width: 45%; padding-right: 15px; } .cardPaymentransactionDetails .account-info-popup-wrapper .right-inner-loan-detail, .intrabankDataSuccess .account-info-popup-wrapper .right-inner-loan-detail, .transferSuccess .account-info-popup-wrapper .right-inner-loan-detail, .exchangeDetails .account-info-popup-wrapper .right-inner-loan-detail, .fXTradingCommissionDialog .account-info-popup-wrapper .right-inner-loan-detail, .exchangeConfirmationDialog .account-info-popup-wrapper .right-inner-loan-detail { width: 55%; } .cardPaymentransactionDetails .letter-spacing-1, .intrabankDataSuccess .letter-spacing-1, .transferSuccess .letter-spacing-1, .exchangeDetails .letter-spacing-1, .fXTradingCommissionDialog .letter-spacing-1, .exchangeConfirmationDialog .letter-spacing-1 { letter-spacing: -.01em; } .cardPaymentransactionDetails .line-height-9, .intrabankDataSuccess .line-height-9, .transferSuccess .line-height-9, .exchangeDetails .line-height-9, .fXTradingCommissionDialog .line-height-9, .exchangeConfirmationDialog .line-height-9 { line-height: 1.6; } .cardPaymentransactionDetails .text-6, .intrabankDataSuccess .text-6, .transferSuccess .text-6, .exchangeDetails .text-6, .fXTradingCommissionDialog .text-6, .exchangeConfirmationDialog .text-6 { font-size: 13px; } .cardPaymentransactionDetails .font-5, .intrabankDataSuccess .font-5, .transferSuccess .font-5, .exchangeDetails .font-5, .fXTradingCommissionDialog .font-5, .exchangeConfirmationDialog .font-5 { font-family: ibm-regular; } .cardPaymentransactionDetails .text-color-11, .intrabankDataSuccess .text-color-11, .transferSuccess .text-color-11, .exchangeDetails .text-color-11, .fXTradingCommissionDialog .text-color-11, .exchangeConfirmationDialog .text-color-11 { color: #75868e; } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange { padding-bottom: 15px; padding-left: 0px; padding-right: 0px; /*&.open { height: 300px; }*/ } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange .modal-content-inner .account-info-popup-wrapper.exchange-details { height: 185px; overflow: hidden; transition: 0.5s ease; padding-left: 30px; padding-right: 30px; } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange .modal-content-inner .account-info-popup-wrapper.exchange-details.dividedExchange { height: 145px; } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange .modal-content-inner .account-info-popup-wrapper.exchange-details.dividedExchange.open { height: 300px; } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange .modal-content-inner .account-info-popup-wrapper.exchange-details .left-inner-loan-detail { width: 45%; } .fXTradingCommissionDialog .read-messages-list .modal-content.dividedExchange .modal-content-inner .account-info-popup-wrapper.exchange-details .right-inner-loan-detail { width: 55%; } .fXTradingCommissionDialog .read-messages-list .toggle-exchange-details { display: flex; justify-content: center; text-align: center; padding: 18px; cursor: pointer; background-color: #f3f6f8; color: #266eff; } .fXTradingCommissionDialog .read-messages-list .toggle-exchange-details .expand-icon { width: 14px; height: 14px; margin-right: 5px; color: #266eff; } .exchangeConfirmationDialog .account-info-popup-wrapper .left-inner-loan-detail { width: 100%; } .exchangeConfirmationDialog .modal-footer:after { display: none; } .info-slider-wrapper .nav-next { margin-right: 0; } .changePasswordDialog .input-icon-wrapper:hover .input-icon { color: #194137 !important; } .changePasswordDialog .input-icon-wrapper.active .pw-hidden { opacity: 0; visibility: hidden; } .changePasswordDialog .input-icon-wrapper.active .pw-visible { opacity: 1; visibility: visible; } .changePasswordDialog .input-icon-wrapper .pw-visible { opacity: 0; visibility: hidden; } .no-token-img-wrapper { height: 22vw; max-height: 160px; min-height: 96px; min-width: 100%; max-width: 100%; width: 100%; margin: 60px auto 40px; } .no-token-img-wrapper div { object-fit: contain; } .CrontoTokenList #no-accounts-main { margin-top: 0px; } .CrontoTokenList .container-3 { max-width: inherit; } .CrontoTokenList .activation-image { background-image: url(images/no-acc.png); background-size: 100%; width: 160px; background-repeat: no-repeat; margin: 0 auto; } .CurrencyCalculator .GBP:before, .FXTrading .GBP:before { background-image: url(images/icons/ic_excgange_gbp.png); } .CurrencyCalculator .AUD:before, .FXTrading .AUD:before { background-image: url(images/icons/australia.png); } .CurrencyCalculator .RUB:before, .FXTrading .RUB:before { background-image: url(images/icons/russia.png); } .CurrencyCalculator .RUR:before, .FXTrading .RUR:before { background-image: url(images/icons/russia.png); } .CurrencyCalculator .SEK:before, .FXTrading .SEK:before { background-image: url(images/icons/sweden.png); } .CurrencyCalculator .CAD:before, .FXTrading .CAD:before { background-image: url(images/icons/canada.png); } .CurrencyCalculator .DKK:before, .FXTrading .DKK:before { background-image: url(images/icons/denmark.png); } .CurrencyCalculator .JPY:before, .FXTrading .JPY:before { background-image: url(images/icons/japan.png); } .CurrencyCalculator .NOK:before, .FXTrading .NOK:before { background-image: url(images/icons/norway.png); } .CurrencyCalculator .EUR:before, .FXTrading .EUR:before { background-image: url(images/icons/ic_exchange_eur.png); } .CurrencyCalculator .USD:before, .FXTrading .USD:before { background-image: url(images/icons/ic_exchange_usd.png); } .CurrencyCalculator .RSD:before, .FXTrading .RSD:before { background-image: url(images/icons/icon-rsd-table.png); } .CurrencyCalculator .CHF:before, .FXTrading .CHF:before { background-image: url(images/icons/ic_exchange_chf.png); } .double-info-slider-arrow-wrapper { position: absolute; width: 12px; height: 11px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #194137; } .double-info-slider-arrow-wrapper .double-info-slider-arrow { width: 100%; height: 100%; } .payments-main-form-buttons button { width: 23%; } .PaymentTransferV2 { width: 100%; margin-left: 13px; margin-top: 20px; } .PaymentTransferV2 .slick-track { height: 70px; } .PaymentTransferV2 .input-wrapper .input-text-right { right: 20px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1; letter-spacing: -.02em; color: #666696; position: absolute; top: 50%; transform: translateY(-50%); } .PaymentTransferV2 .input-wrapper .input-text-right:after { content: ""; width: 1px; height: 28px; left: -20px; position: absolute; top: 50%; transform: translateY(-50%); background: #ccccdc; } .PaymentTransferV2 .input-wrapper.with-text-right .input-1 { padding: 18px 0px 7px; padding-left: 24px; width: 97%; } .PaymentTransferV2 .input-wrapper.with-text-right .input-1:focus { border-color: #d7d8db; } .PaymentTransferV2 .input-wrapper.with-text-right .input-1.bold { font-family: "aeonik-bold" !important; } .PaymentTransferV2 .input-wrapper.with-text-right .disabledLabel:focus ~ .label-1, .PaymentTransferV2 .input-wrapper.with-text-right .disabledLabel:active ~ .label-1 { top: 16px !important; font-size: 14px !important; } .PaymentTransferV2 #no-accounts-main { margin-top: 50px; } .PaymentTransferV2 .no-card-img-wrapper .no-account { height: 139px; background-image: url(images/icons/ic_nema_racuna@2x.png); background-size: contain; width: 24px; height: 24px; left: 35%; top: 50%; } .PaymentTransferV2 .no-card-img-wrapper p { font-size: 17px; color: #75868e; padding-top: 4%; } .loan-list-zone { margin-left: 90px; } .loan-details-zone { width: 69% !important; } .paymentTransferCommissionDialog .modal-content .modal-content-inner { padding-bottom: 24px; margin-bottom: 10px; border-bottom: 1px solid #d7d8db; } .paymentTransferCommissionDialog .modal-footer { padding: 0 32px 32px 32px !important; } .paymentTransferCommissionDialog .modal-footer .buttons-wrapper { margin-bottom: 10px; margin-top: 4px; } .paymentTransferCommissionDialog .modal-footer .buttons-wrapper .btn-1.color-1 { background-color: #266eff; color: #fff; font-family: "aeonik-medium"; } .paymentTransferCommissionDialog .modal-footer .buttons-wrapper .btn-1.color-2 { color: #266eff; font-family: "aeonik-medium"; } .paymentTransferCommissionDialog .ui-dialog.right-dialog .ui-dialog-content { overflow: scroll; } .right-dialog.visible.tokenDelete #messageBoxElement { margin-top: 35px; } .right-dialog.visible.tokenDelete #messageBoxElement:before { display: none !important; } .right-dialog.visible.tokenCrontoDialog .qr-img-wrapper { margin-left: -60px; } .right-dialog.visible.tokenCrontoDialog .ui-dialog-titlebar { margin-left: 15px; } .right-dialog.visible.tokenCrontoDialog .ui-dialog-titlebar:after { width: 75%; } .right-dialog.visible.tokenCrontoDialog .ui-dialog-content.ui-widget-content { padding: 0 !important; } .right-dialog.visible.editData .ui-dialog-content.ui-widget-content { margin-left: -45px; margin-top: 20px; } .right-dialog.visible.sessionExpired .ui-dialog-content.ui-widget-content { margin-top: 20px; } .right-dialog.visible.sessionExpired .ui-dialog-content.ui-widget-content:before { display: none !important; } .right-dialog.visible.session .ui-dialog-content.ui-widget-content { margin-top: 20px; } .right-dialog.visible.session .ui-dialog-content.ui-widget-content:before { display: none !important; } .right-dialog.visible.paymentOverview, .right-dialog.visible.session, .right-dialog.visible.tokenDelete, .right-dialog.visible.transactionCanceled, .right-dialog.visible.tokenCrontoDialog, .right-dialog.visible.editData, .right-dialog.visible.sessionExpired { display: block; left: 0 !important; } .right-dialog.visible.paymentOverview .ui-dialog-titlebar, .right-dialog.visible.session .ui-dialog-titlebar, .right-dialog.visible.tokenDelete .ui-dialog-titlebar, .right-dialog.visible.transactionCanceled .ui-dialog-titlebar, .right-dialog.visible.tokenCrontoDialog .ui-dialog-titlebar, .right-dialog.visible.editData .ui-dialog-titlebar, .right-dialog.visible.sessionExpired .ui-dialog-titlebar { width: inherit; height: 75px; display: block !important; position: relative; z-index: 3; width: 100%; } .right-dialog.visible.paymentOverview .ui-dialog-titlebar:after, .right-dialog.visible.session .ui-dialog-titlebar:after, .right-dialog.visible.tokenDelete .ui-dialog-titlebar:after, .right-dialog.visible.transactionCanceled .ui-dialog-titlebar:after, .right-dialog.visible.tokenCrontoDialog .ui-dialog-titlebar:after, .right-dialog.visible.editData .ui-dialog-titlebar:after, .right-dialog.visible.sessionExpired .ui-dialog-titlebar:after { position: absolute; content: ""; width: calc(100vw - 80px); height: 1px; left: 0; right: 0; bottom: 0; border-top: 1px solid #d7d8db; box-shadow: none; } .right-dialog.visible.paymentOverview .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.session .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.tokenDelete .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.transactionCanceled .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.tokenCrontoDialog .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.editData .ui-dialog-titlebar .ui-dialog-title, .right-dialog.visible.sessionExpired .ui-dialog-titlebar .ui-dialog-title { position: relative; left: -30px; line-height: .8888888; font-size: 24px !important; font-family: "tt-norms-regular"; width: calc(100% + 60px); color: #266eff; float: left; padding-top: 25px; padding-bottom: 10px; } .right-dialog.visible.paymentOverview .ui-dialog-content.ui-widget-content, .right-dialog.visible.session .ui-dialog-content.ui-widget-content, .right-dialog.visible.tokenDelete .ui-dialog-content.ui-widget-content, .right-dialog.visible.transactionCanceled .ui-dialog-content.ui-widget-content, .right-dialog.visible.tokenCrontoDialog .ui-dialog-content.ui-widget-content, .right-dialog.visible.editData .ui-dialog-content.ui-widget-content, .right-dialog.visible.sessionExpired .ui-dialog-content.ui-widget-content { font-family: "aeonik-regular"; color: #000F28; font-size: 15px; } .right-dialog.visible.paymentOverview .qr-wrapper .qr-img-wrapper, .right-dialog.visible.session .qr-wrapper .qr-img-wrapper, .right-dialog.visible.tokenDelete .qr-wrapper .qr-img-wrapper, .right-dialog.visible.transactionCanceled .qr-wrapper .qr-img-wrapper, .right-dialog.visible.tokenCrontoDialog .qr-wrapper .qr-img-wrapper, .right-dialog.visible.editData .qr-wrapper .qr-img-wrapper, .right-dialog.visible.sessionExpired .qr-wrapper .qr-img-wrapper { width: 200px; height: 200px; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane, .right-dialog.visible.session .ui-dialog-buttonpane, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane, .right-dialog.visible.editData .ui-dialog-buttonpane, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane { padding: 0; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; justify-content: flex-start; margin-top: 30px; padding-bottom: 10px; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset button, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset button { width: 48%; font-family: "aeonik-medium"; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget { background-image: url(images/icons/ic_strelica.png); background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: 172px 18px !important; text-align: left; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover { background-image: url(images/icons/ic_strelica.png) !important; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover { background-image: url(images/icons/ic_strelica.png) !important; } .right-dialog.visible.paymentOverview .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.session .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.tokenDelete .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.transactionCanceled .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.tokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.editData .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover, .right-dialog.visible.sessionExpired .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover { background-image: url(images/icons/ic_strelica_blue.png) !important; } .error-dialog { top: 50% !important; } .qr-wrapper { display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 60px !important; } .qr-wrapper .qr-img-wrapper { width: 160px; height: 160px; } .qr-wrapper .qr-img-wrapper .qr-img { width: 100%; height: 100%; } .qr-wrapper .qr-content { width: calc(100% - 160px); padding-left: 0; padding-top: 12px; } .timer-wrapper .timer-line-bcg { position: relative; width: 100%; height: 8px; background-color: #d7d8db; border-radius: 4px; } .timer-wrapper .timer-line { display: block; position: absolute; width: 100%; height: 8px; top: 0; left: 0; background-color: #266eff; border-radius: 4px; -webkit-transition: all .3s; transition: all .3s; } .tokenCrontoDialog, .casTokenCrontoDialog { /*.modal-content { padding: 0; padding-bottom: 20px; }*/ } .tokenCrontoDialog .top-margin, .casTokenCrontoDialog .top-margin { margin-top: 20px; } .tokenCrontoDialog .modal-footer, .casTokenCrontoDialog .modal-footer { padding: 0 32px 32px; } .tokenCrontoDialog .modal-footer span, .casTokenCrontoDialog .modal-footer span { font-family: "aeonik-medium"; } .tokenCrontoDialog .modal-footer .btn-1.color-2, .casTokenCrontoDialog .modal-footer .btn-1.color-2 { background-color: #fff; color: #266eff; } .tokenCrontoDialog .modal-footer .btn-1.color-2:hover, .casTokenCrontoDialog .modal-footer .btn-1.color-2:hover { background-color: #e6e6e6; } .tokenCrontoDialog .modal-footer .btn-1.color-1, .casTokenCrontoDialog .modal-footer .btn-1.color-1 { background-color: #266eff; color: #fff; } .tokenCrontoDialog .modal-footer .btn-1.color-1:hover, .casTokenCrontoDialog .modal-footer .btn-1.color-1:hover { background-color: #0050f2; } .PaymentOrderV2 .currencyCode, .accountStatementDropdown .currencyCode { position: relative; top: -6px; font-size: 16px !important; color: white !important; margin-right: 1px; } .PaymentOrderV2 .text-color-5, .accountStatementDropdown .text-color-5 { font-size: 16px !important; margin-top: 5px; color: white !important; } .PaymentOrderV2 .s-widget-content, .accountStatementDropdown .s-widget-content { float: none !important; margin: 0 auto; min-height: 100px; box-sizing: border-box; max-width: 1195px; } .PaymentOrderV2 .input-select-paymentCode, .accountStatementDropdown .input-select-paymentCode { width: 100% !important; } .PaymentOrderV2 .input-select-templateSelect .currenciesText, .accountStatementDropdown .input-select-templateSelect .currenciesText { margin-top: 7px; margin-left: -47px !important; } .PaymentOrderV2 .calendarFilter, .accountStatementDropdown .calendarFilter { padding: 19px 0px 7px 23px !important; font-family: "aeonik-regular"; font-size: 14px; } .PaymentOrderV2 .info-slider-wrapper, .accountStatementDropdown .info-slider-wrapper { position: relative; padding: 31px 176px 31px 112px; border-radius: 16px; background: #000F28; } .PaymentOrderV2 .info-slider-wrapper .info-slider-icon-wrapper, .accountStatementDropdown .info-slider-wrapper .info-slider-icon-wrapper { position: absolute; width: 32px; height: 32px; top: 50%; left: 38px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .info-slider-wrapper .info-slider-icon, .accountStatementDropdown .info-slider-wrapper .info-slider-icon { width: 100%; height: 100%; } .PaymentOrderV2 .info-slider-wrapper:after, .PaymentOrderV2 .info-slider-wrapper:before, .accountStatementDropdown .info-slider-wrapper:after, .accountStatementDropdown .info-slider-wrapper:before { position: absolute; content: ""; width: 1px; height: 44px; top: 50%; background: #666696; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .info-slider-wrapper:before, .accountStatementDropdown .info-slider-wrapper:before { right: 157px; } .PaymentOrderV2 .payments-decor-wrapper, .accountStatementDropdown .payments-decor-wrapper { position: absolute; width: 162px; height: 120px; top: 50%; left: 55%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("images/payments-decor.png") 0 0 no-repeat; } .PaymentOrderV2 .swiper-container, .accountStatementDropdown .swiper-container { margin-left: auto !important; margin-right: auto !important; position: relative !important; overflow: hidden !important; list-style: none !important; padding: 0 !important; z-index: 1 !important; } .PaymentOrderV2 .swiper-wrapper, .accountStatementDropdown .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .PaymentOrderV2 .swiper-slide, .accountStatementDropdown .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .PaymentOrderV2 .info-slider-wrapper .info-slide, .accountStatementDropdown .info-slider-wrapper .info-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: block; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100% !important; } .PaymentOrderV2 .info-slider-wrapper .info-slide-content-left, .accountStatementDropdown .info-slider-wrapper .info-slide-content-left { width: 50%; padding-right: 15px; display: inline-block; } .PaymentOrderV2 .info-slider-wrapper .info-slide-content-right, .accountStatementDropdown .info-slider-wrapper .info-slide-content-right { width: 50%; display: initial; margin-top: -47px; float: right; } .PaymentOrderV2 .info-slider-wrapper .navigation-wrap, .accountStatementDropdown .info-slider-wrapper .navigation-wrap { display: flex; position: absolute; top: 50%; right: 34px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .info-slider-wrapper:after, .accountStatementDropdown .info-slider-wrapper:after { left: 94px; } .PaymentOrderV2 .info-slider-wrapper:after, .PaymentOrderV2 .info-slider-wrapper:before, .accountStatementDropdown .info-slider-wrapper:after, .accountStatementDropdown .info-slider-wrapper:before { position: absolute; content: ""; width: 1px; height: 44px; top: 50%; background: #666696; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .payments-main-form-inner, .accountStatementDropdown .payments-main-form-inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 30px; } .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2:first-child, .accountStatementDropdown .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 40px; } .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2, .accountStatementDropdown .payments-main-form-inner .payments-main-form-col-2 { width: 50%; } .PaymentOrderV2 .input-1, .accountStatementDropdown .input-1 { padding: 21px 0 7px 24px !important; border: 1px solid #d7d8db !important; border-radius: 30px !important; -webkit-transition: border-color .2s !important; transition: border-color .2s !important; width: 96% !important; color: #000F28; } .PaymentOrderV2 .input-1.bold, .accountStatementDropdown .input-1.bold { font-family: 'ibm-bold'; } .PaymentOrderV2 .input-1:disabled, .accountStatementDropdown .input-1:disabled { border: none !important; background-color: #fff; color: #666696; } .PaymentOrderV2 .dk-selected, .accountStatementDropdown .dk-selected { height: 25px !important; } .PaymentOrderV2 .dk-selected .currenciesText, .accountStatementDropdown .dk-selected .currenciesText { margin-top: 7px; margin-left: 20px; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.4; color: #000F28; } .PaymentOrderV2 .select-1:not(.accountStatementSelect), .accountStatementDropdown .select-1:not(.accountStatementSelect) { width: 90% !important; } .PaymentOrderV2 .select-1 ~ .label-1, .accountStatementDropdown .select-1 ~ .label-1 { top: 5px !important; font-size: 12px; margin-left: 8px; } .PaymentOrderV2 .input-grid-wrapper .input-wrapper:not(:last-child), .accountStatementDropdown .input-grid-wrapper .input-wrapper:not(:last-child) { margin-right: 16px; } .PaymentOrderV2 .input-grid-wrapper .col-s, .accountStatementDropdown .input-grid-wrapper .col-s { max-width: 120px; flex-shrink: 0; } .PaymentOrderV2 .input-grid-wrapper .col-xs, .accountStatementDropdown .input-grid-wrapper .col-xs { max-width: 102px; flex-shrink: 0; } .PaymentOrderV2 .input-grid-wrapper .input-wrapper, .accountStatementDropdown .input-grid-wrapper .input-wrapper { width: 100%; } .PaymentOrderV2 .input-grid-wrapper .input-wrapper:not(:last-child), .accountStatementDropdown .input-grid-wrapper .input-wrapper:not(:last-child) { margin-right: 16px; } .PaymentOrderV2 .input-grid-wrapper, .accountStatementDropdown .input-grid-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .PaymentOrderV2 .input-grid-wrapper .col-m, .accountStatementDropdown .input-grid-wrapper .col-m { max-width: 160px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 0px; } .PaymentOrderV2 .inputwrapper, .accountStatementDropdown .inputwrapper { margin-left: 11px; width: 95% !important; } .PaymentOrderV2 .calendarFilter, .accountStatementDropdown .calendarFilter { height: 22px !important; font-family: "aeonik-regular"; font-size: 14px; line-height: 1; } .PaymentOrderV2 .ui-datepicker-trigger, .accountStatementDropdown .ui-datepicker-trigger { margin-top: -32px; display: block; margin-left: 150px; } .PaymentOrderV2 .checkbox-toggle, .accountStatementDropdown .checkbox-toggle { min-height: 0px !important; padding: 17px 70px 16px 24px; border-radius: 30px; border: 1px solid transparent; background-color: #fff; -webkit-transition: border .3s; transition: border .3s; margin-left: 15px; } .PaymentOrderV2 .checkbox-toggle .custom-switch-wrapper, .accountStatementDropdown .checkbox-toggle .custom-switch-wrapper { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .checkbox-toggle .custom-switch-btn, .accountStatementDropdown .checkbox-toggle .custom-switch-btn { width: 20px; height: 20px; left: 3px; background-color: #fff; border-radius: 50%; -webkit-transition: background-color .3s,-webkit-transform .2s; transition: background-color .3s,-webkit-transform .2s; transition: transform .2s,background-color .3s; transition: transform .2s,background-color .3s,-webkit-transform .2s; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .checkbox-toggle .checkbox-toggle-label, .accountStatementDropdown .checkbox-toggle .checkbox-toggle-label { font-family: "aeonik-medium"; font-size: 13px; line-height: 1.2; color: #000F28; } .PaymentOrderV2 .checkbox-toggle .checkbox-toggle-input, .accountStatementDropdown .checkbox-toggle .checkbox-toggle-input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 100px; cursor: pointer; opacity: 0; z-index: 1; } .PaymentOrderV2 .checkbox-toggle .custom-switch-wrapper, .accountStatementDropdown .checkbox-toggle .custom-switch-wrapper { width: 50px; height: 26px; right: 13px; border-radius: 100px; background-color: #c3cbd0; -webkit-transition: background-color .3s; transition: background-color .3s; } .PaymentOrderV2 .input-wrapper.input-text, .accountStatementDropdown .input-wrapper.input-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 50px; } .PaymentOrderV2 .checkbox-toggle .checkbox-toggle-input:checked + .custom-switch-wrapper .custom-switch-btn, .accountStatementDropdown .checkbox-toggle .checkbox-toggle-input:checked + .custom-switch-wrapper .custom-switch-btn { -webkit-transform: translate(24px, -50%); transform: translate(24px, -50%); background-color: #266eff; } .PaymentOrderV2 .part-modal-inner-payments, .accountStatementDropdown .part-modal-inner-payments { position: relative; padding-bottom: 0px; } .PaymentOrderV2 .btn-4.color-2, .accountStatementDropdown .btn-4.color-2 { background-color: #fff; color: #266eff; width: 33%; } .PaymentOrderV2 .btn-4.color-2:hover, .accountStatementDropdown .btn-4.color-2:hover { background-color: #ebebeb; } .PaymentOrderV2 .payments-main-form-buttons a, .PaymentOrderV2 .payments-main-form-buttons button, .accountStatementDropdown .payments-main-form-buttons a, .accountStatementDropdown .payments-main-form-buttons button { width: 33%; } .PaymentOrderV2 .btn-4, .accountStatementDropdown .btn-4 { position: relative; display: inline-block; min-width: 100px; padding: 17px 36px 16px 50px; font-family: aeonik-medium; font-size: 14px; line-height: 1.214285; letter-spacing: -.02em; border-radius: 30px; text-align: center; -webkit-transition: color .3s,background-color .3s,-webkit-transform .3s; transition: color .3s,background-color .3s,-webkit-transform .3s; transition: color .3s,background-color .3s,transform .3s; transition: color .3s,background-color .3s,transform .3s,-webkit-transform .3s; } .PaymentOrderV2 .btn-4 .btn-icon, .accountStatementDropdown .btn-4 .btn-icon { position: absolute; width: 24px; height: 24px; top: 50%; left: 32px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .PaymentOrderV2 .dk-selected:before, .accountStatementDropdown .dk-selected:before { display: none !important; } .PaymentOrderV2 .btn-1, .accountStatementDropdown .btn-1 { font-size: 15px; } .PaymentOrderV2 .btn-1 .btn-arrow, .accountStatementDropdown .btn-1 .btn-arrow { position: absolute; width: 9px; height: 12px; top: 50%; right: 24px; color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .PaymentOrderV2 .input-wrapper-inner.borderError .input-1, .accountStatementDropdown .input-wrapper-inner.borderError .input-1 { border-color: #266eff; } .transferSuccess .accountDetailsPopup { overflow: unset !important; width: inherit !important; } .transferSuccess .user-content p { font-family: ibm-regular; font-size: 15px; line-height: 1.33333333; letter-spacing: -.02em; } .transferSuccess .error-ico { top: 38%; } .transferSuccess .successfully-ico { top: 40%; } .transferSuccess .modal-status-info-content.user-content { margin-top: 0px; } .transferSuccess .modal-footer { padding: 25px 30px 20px 30px !important; } #gvCardStatements { position: relative; } #gvCardStatements .icon-left-wrapper:after { right: 7px; } #gvCardStatements .clientGrid thead th:nth-child(2) { width: 20%; margin-left: 10px; padding-left: 50px; } #gvCardStatements .clientGrid thead th:nth-child(3) { width: 30%; padding-left: 50px; } #gvCardStatements .clientGrid thead th:nth-child(4) { width: 25%; padding-left: 39px; } #gvCardStatements .clientGrid thead th:nth-child(4) div { float: left; } #gvCardStatements .clientGrid thead th:nth-child(5) { width: 15%; } #gvCardStatements .clientGrid thead th:nth-child(5) .sort-indicator { visibility: hidden; } #gvCardStatements .clientGrid thead th:nth-child(6) { width: 15%; } #gvCardStatements .clientGrid thead th:nth-child(6) .sort-indicator { visibility: hidden; } #gvCardStatements .clientGrid tbody tr { align-self: center; } #gvCardStatements .clientGrid tbody tr td:nth-child(2) { width: 20%; padding-left: 50px; } #gvCardStatements .clientGrid tbody tr td:nth-child(2) span { display: block; } #gvCardStatements .clientGrid tbody tr td:nth-child(2) span span ~ span { margin-left: 10px; margin-top: 5px; } #gvCardStatements .clientGrid tbody tr td:nth-child(3) { width: 30%; } #gvCardStatements .clientGrid tbody tr td:nth-child(3) span { padding-left: 28px; } #gvCardStatements .clientGrid tbody tr td:nth-child(4) { width: calc(50% - 120px); } #gvCardStatements .clientGrid tbody tr td:nth-child(4) span { padding-left: 24px; } #gvCardStatements .clientGrid tbody tr td:nth-child(5) { width: 60px !important; text-align: center; position: sticky; /*a { height: -webkit-fill-available; display: inherit; padding-bottom: 14px; }*/ } #gvCardStatements .clientGrid tbody tr td:nth-child(5) span { display: block; } #gvCardStatements .clientGrid tbody tr td:nth-child(5) span div span { top: 10px; right: unset; } #gvCardStatements .clientGrid tbody tr td:nth-child(5) span div span svg { left: unset !important; } #gvCardStatements .clientGrid tbody tr td:nth-child(6) { width: 60px !important; text-align: center; position: sticky; /*a { height: -webkit-fill-available; display: inherit; padding-bottom: 14px; }*/ } #gvCardStatements .clientGrid tbody tr td:nth-child(6) span { display: block; } #gvCardStatements .clientGrid tbody tr td:nth-child(6) span div span { top: 10px; right: unset; } #gvCardStatements .clientGrid tbody tr td:nth-child(6) span div span svg { left: unset !important; } .PaymentOrderV2 .input-wrapper.input-margin, .accountStatementDropdown .input-wrapper.input-margin, .CreditorTemplateManaging .input-wrapper.input-margin { margin-bottom: 16px !important; } .PaymentOrderV2 .gridFilterArea, .accountStatementDropdown .gridFilterArea, .CreditorTemplateManaging .gridFilterArea { position: absolute; top: -50px; left: 0; right: 0; box-sizing: border-box !important; background-clip: border-box !important; width: 78%; max-width: 272px; margin-right: 16px; } .PaymentOrderV2 .gridFilterArea .search-filter-bar, .accountStatementDropdown .gridFilterArea .search-filter-bar, .CreditorTemplateManaging .gridFilterArea .search-filter-bar { box-sizing: border-box !important; background-clip: border-box !important; } .PaymentOrderV2 .gridFilterArea .gridFilterInput, .accountStatementDropdown .gridFilterArea .gridFilterInput, .CreditorTemplateManaging .gridFilterArea .gridFilterInput { box-sizing: border-box !important; background-clip: border-box !important; } .PaymentOrderV2 .search-wrapper, .accountStatementDropdown .search-wrapper, .CreditorTemplateManaging .search-wrapper { width: 78%; max-width: 272px; margin-right: 16px; background-clip: border-box !important; box-sizing: border-box !important; } .PaymentOrderV2 .search-wrapper input, .accountStatementDropdown .search-wrapper input, .CreditorTemplateManaging .search-wrapper input { box-sizing: border-box !important; } .PaymentOrderV2 .search-wrapper .search-icon-svg, .accountStatementDropdown .search-wrapper .search-icon-svg, .CreditorTemplateManaging .search-wrapper .search-icon-svg { stroke: none; width: 20px; height: 20px; left: -28px; top: 18px; transform: translateY(-50%); } .PaymentOrderV2 .serach-input, .accountStatementDropdown .serach-input, .CreditorTemplateManaging .serach-input { height: 40px; } .PaymentOrderV2 .paymentTemplates, .accountStatementDropdown .paymentTemplates, .CreditorTemplateManaging .paymentTemplates { box-sizing: border-box !important; } .PaymentOrderV2 .paymentTemplates div.flex-layout.flex-wrap.space-between.flex-center, .accountStatementDropdown .paymentTemplates div.flex-layout.flex-wrap.space-between.flex-center, .CreditorTemplateManaging .paymentTemplates div.flex-layout.flex-wrap.space-between.flex-center { box-sizing: border-box !important; } .PaymentOrderV2 .paymentTemplates .btn-1, .accountStatementDropdown .paymentTemplates .btn-1, .CreditorTemplateManaging .paymentTemplates .btn-1 { font-family: "aeonik-medium"; font-size: 15px; } .PaymentOrderV2 .paymentTemplates .icon-left-wrapper:after, .accountStatementDropdown .paymentTemplates .icon-left-wrapper:after, .CreditorTemplateManaging .paymentTemplates .icon-left-wrapper:after { height: 35px; top: 14px; } .PaymentOverviewV2, .gvOrderPreviewList { position: relative; } .PaymentOverviewV2 .gridFilterArea, .gvOrderPreviewList .gridFilterArea { position: absolute; right: 130px; } .PaymentOverviewV2 .search-wrapper, .gvOrderPreviewList .search-wrapper { width: 87%; } .PaymentOverviewV2 .search-wrapper .search-icon-svg, .gvOrderPreviewList .search-wrapper .search-icon-svg { top: 19px; } .PaymentOverviewV2 .serach-input, .gvOrderPreviewList .serach-input { padding: unset; padding-left: 50px; } .btn-1.with-icon.smaller-btn { padding: 12px 47px 11px 20px; } .wider-modal { max-width: 800px; } .wider-modal .buttons-wrapper { max-width: 436px; margin-left: auto; margin-right: auto; } .payments-main-form-inner { position: relative; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding-bottom: 0px; } .payments-main-form-inner .payments-main-form-col-2 { width: 50%; } .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 40px; } .payments-main-form-inner .input-wrapper-inner.borderError .input-1 { border-color: #266eff !important; } .modal-close .modal-close-icon { color: #666696 !important; } .creditorTemplate.ui-dialog.no-yes-dialog { padding: 10px 30px 15px 30px; width: 800px !important; } .creditorTemplate { max-width: 800px; } .creditorTemplate .ui-dialog-titlebar { display: none !important; } .creditorTemplate .ui-widget-header { display: none !important; } .creditorTemplate .select-1 { height: 45px; } .creditorTemplate .input-grid-wrapper { float: left; width: -webkit-fill-available; } .creditorTemplate .label-1 { position: absolute; left: 24px; font-family: ibm-regular; line-height: 1.285714; letter-spacing: -.01em; color: #75868e; transition: top .2s,font-size .2s; pointer-events: none; } .creditorTemplate .input-select-paymentCode .dk-select { height: 50px; } .creditorTemplate .focusin .label-1 { top: 8px !important; font-size: 12px !important; } .creditorTemplate .select-1 { height: 20px; } .creditorTemplate .currenciesText { margin-left: 0px; margin-top: 5px; } .creditorTemplate.right-dialog.visible { width: 100% !important; } .creditorTemplate .modal-wrapper { width: 100%; } .creditorTemplate .dk-select.input-1 { padding-right: 40px; } .creditorTemplate .dk-selected { height: 22px; } .creditorTemplate .dk-selected:before { border: none !important; } .creditorTemplate .payments-main-form-inner:after { visibility: hidden; } .creditorTemplate .ui-dialog-content.ui-widget-content { width: 98% !important; } .creditorTemplate .payments-main-form-inner.justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .creditorTemplate .payments-main-form-inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #d7d8db; } .creditorTemplate .payments-main-form-inner .payments-main-form-col .input-1 { padding: 25px 33px 7px 24px; } .creditorTemplate .payments-main-form-inner.justify-center .payments-main-form-col-2:first-child { margin-right: 0; } .creditorTemplate .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 40px; } .creditorTemplate .payments-main-form-inner .payments-main-form-col-2 { width: 50%; } .creditorTemplate .payments-main-form-inner:after { content: ""; width: 100%; height: 2px; position: absolute; right: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 7px); } .creditorTemplate .input-wrapper { position: relative; margin-bottom: 16px; } .creditorTemplate .selection-wrapper-inner { border-radius: 30px; } .creditorTemplate .payments-main-form-buttons { max-width: 632px; margin-left: auto; margin-right: auto; } .creditorTemplate .justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .creditorTemplate .dk-select.select-1 { position: relative; background: linear-gradient(#fff, #f3f6f8); } .creditorTemplate .dk-select.select-1 .dk-selected { background-color: unset; } .creditorTemplate dk-select, .creditorTemplate .dk-select-multi { position: relative; display: inline-block; vertical-align: middle; line-height: 1.5em; width: 200px; cursor: pointer; box-sizing: border-box; } .creditorTemplate .select-1::after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; } .creditorTemplate .select-1 .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; width: auto; z-index: 20; font-family: "aeonik-regular"; font-size: 15px; border-radius: 0 0 30px 30px !important; border: 1px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); } .creditorTemplate .select-1 .dk-select-options .dk-option:hover { background-color: #F3F6F8; } .creditorTemplate .dk-select-options.active { display: block !important; } .creditorTemplate .input-wrapper .input-wrapper-inner .input-1:active, .creditorTemplate .input-wrapper .input-wrapper-inner .input-1:focus { border-color: #c3cbd0; } .creditorTemplate .input-wrapper .selection-wrapper-inner .select-1 { border-color: #c3cbd0; appearance: none; } .creditorTemplate .select-1.active { border-radius: 25px 25px 0 0 !important; } .creditorTemplate .selection-wrapper-inner { border-radius: 30px; } .creditorTemplate .selection-wrapper-inner .select-1 { padding: 21px 32px 7px 24px; max-width: 100%; height: 50px; position: relative; width: 100%; border-radius: 30px; cursor: pointer; border: 1px solid #c3cbd0; background: linear-gradient(#fff, #f3f6f8); transition: border-color .2s,border-radius .2s; } .creditorTemplate .selection-wrapper-inner .select-1:after { content: ""; width: 7px; height: 12px; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 7px; } .creditorTemplate .selection-wrapper-inner .select-1 .dk-selected { background-color: unset; border: none; max-width: 100%; height: 22px; position: relative; width: 100%; font-family: ibm-regular; font-size: 14px; line-height: 1.4; color: #000; cursor: pointer; appearance: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .creditorTemplate .selection-wrapper-inner .select-1 .dk-selected:before { content: none; } .creditorTemplate .selection-wrapper-inner .select-1 .dk-selected:after { border-left: unset; } .creditorTemplate .selection-wrapper-inner .select-1 .dk-select-open-down { border-radius: 25px 25px 0 0; } .creditorTemplate .selection-wrapper-inner .select-1 .dk-select-options { height: 250px; overflow: hidden; overflow-y: visible; position: absolute; width: calc(100% + 2px); top: calc(100% + 1px); left: -1px; border: 1px solid #c3cbd0; background-color: #fff; border-top: none; opacity: 0; visibility: hidden; transition: opacity .3s ease,visibility .3s ease; max-height: 300px; overflow: auto; border-radius: 0 0 30px 30px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.23); z-index: 4; } .creditorTemplate .modal-content .border-bottom-wrapper .input-wrapper { margin-bottom: 0; } .creditorTemplate .modal-content .border-bottom-wrapper .input-wrapper .input-1 { padding: 25px 33px 7px 24px; } .creditorTemplate .modal-footer { padding: 0 32px 32px; } .creditorTemplate .modal-footer .buttons-wrapper { max-width: 436px; margin-left: auto; margin-right: auto; } .creditorTemplate .modal-footer .buttons-wrapper .btn-1 { font-size: 15px; font-family: "aeonik-medium"; } .creditorTemplate .modal-footer .buttons-wrapper .btn-1.color-2 { background-color: #fff; color: #266eff; } .creditorTemplate .modal-footer .buttons-wrapper .btn-1.color-2:hover { background-color: #e6e6e6; } .creditorTemplate .modal-footer .buttons-wrapper .btn-1.color-1 { background-color: #266eff; color: #fff; } .creditorTemplate .modal-footer .buttons-wrapper .btn-1.color-1:hover { background-color: #0050f2; } .input-grid-wrapper { display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; } .input-grid-wrapper .input-wrapper { width: 100%; } .input-grid-wrapper .col-xs { max-width: 102px; margin-right: 16px; } .casOrdercommissionDialog, .paymentOrdercommissionDialog { /*.select-1 .dk-selected { height: 32px !important; }*/ } .casOrdercommissionDialog .select-1 ~ .label-1, .paymentOrdercommissionDialog .select-1 ~ .label-1 { margin-left: 0px !important; } .casOrdercommissionDialog .select-1, .paymentOrdercommissionDialog .select-1 { height: 50px !important; } .casOrdercommissionDialog .dk-selected:before, .paymentOrdercommissionDialog .dk-selected:before { top: 50%; border: solid transparent; border-width: 0.25em 0.25em 0; border-top-color: #CCCCCC; margin: -0.125em 0.5em 0 0; display: none !important; } .casOrdercommissionDialog .typeauthText, .paymentOrdercommissionDialog .typeauthText { margin-top: 5px; margin-left: 12px; } .casOrdercommissionDialog .typeauthText, .paymentOrdercommissionDialog .typeauthText { margin-top: 5px; margin-left: 12px; } .document-icon-svg { width: 20px; height: 20px; color: #666696; stroke: none; } .document-icon-svg .text-color-3 { color: #666696; } .gvTemplateList { position: relative; display: flex; flex-wrap: wrap; gap: 20px; } .gvTemplateList .print-icon-svg.absolute-center { left: 50% !important; } .gvTemplateList .clientGrid tbody tr { align-self: center; height: 46px; } .gvTemplateList .clientGrid tbody tr td:nth-child(2) { width: calc(100% - 120px); padding-left: 45px; padding-top: 5px; } .gvTemplateList .clientGrid tbody tr td:nth-child(2) .tablesaw-cell-content { position: fixed; } .gvTemplateList .clientGrid tbody tr td:nth-child(2) .tablesaw-cell-content .document-icon-svg { padding-top: 7px; width: 20px; height: 20px; fill: #666696; } .gvTemplateList .clientGrid tbody tr td:nth-child(2) .tablesaw-cell-content .icon-left-wrapper:after { height: 35px; top: -14px; } .gvTemplateList .clientGrid tbody tr td:nth-child(2) .tablesaw-cell-content span { padding-left: 30px; color: #666696; } .gvTemplateList .clientGrid tbody tr td:nth-child(3) { width: 60px; padding-right: 7px; padding-top: 20px; } .gvTemplateList .clientGrid tbody tr td:nth-child(4) { width: 60px; padding-right: 30px; padding-top: 20px; } .gvTemplateList .clientGridPager { width: 100%; padding-left: 0; } .gvMessageList .icon-right-wrapper .read-icon-svg, .gvMessageList .icon-right-wrapper .unread-icon-svg { color: transparent !important; } .gvMessageList .clientGrid thead tr th:nth-child(3) { padding-left: 88px; } .gvMessageList .clientGrid thead tr th:nth-child(4) { padding-left: 34px; } .gvMessageList .clientGrid tbody tr { align-self: center; height: 50px !important; } .gvMessageList .clientGrid tbody tr:has(.message-subject.CREATED) { background-color: #d4e2ff; border-color: #d4e2ff; } .gvMessageList .clientGrid tbody tr:has(.message-subject.CREATED) td:nth-child(3) .tablesaw-cell-content span { font-family: "aeonik-bold"; } .gvMessageList .clientGrid tbody tr:has(.message-subject.CREATED) td:nth-child(3) .tablesaw-cell-content span span { font-family: "aeonik-bold"; } .gvMessageList .clientGrid tbody tr td .icon-right-wrapper { position: sticky; } .gvMessageList .clientGrid tbody tr td:nth-child(2) .tablesaw-cell-content .custom-checkbox-2 { top: 4px !important; } .gvMessageList .clientGrid tbody tr td:nth-child(3) { width: 20%; padding-left: 65px; padding-top: 8px; } .gvMessageList .clientGrid tbody tr td:nth-child(3) .tablesaw-cell-content .document-icon-svg { padding-top: 4px; } .gvMessageList .clientGrid tbody tr td:nth-child(3) .tablesaw-cell-content .icon-left-wrapper { left: -50px; } .gvMessageList .clientGrid tbody tr td:nth-child(3) .tablesaw-cell-content span { padding-left: 24px; bottom: 4px; position: relative; color: #000F28; } .gvMessageList .clientGrid tbody tr td:nth-child(3) .tablesaw-cell-content span span.CREATED { font-family: "aeonik-bold"; } .gvMessageList .clientGrid tbody tr td:nth-child(4) { width: calc(100% - 120px); padding-right: 7px; } .gvMessageList .clientGrid tbody tr td:nth-child(4) .icon-left-wrapper:after { display: none; } .gvMessageList .clientGrid tbody tr td:nth-child(4) .tablesaw-cell-content .document-icon-svg { padding-top: 4px; } .gvMessageList .clientGrid tbody tr td:nth-child(4) .tablesaw-cell-content span { padding-left: 20px; position: relative; bottom: 2px; color: #000F28; } .gvMessageList .clientGrid tbody tr td:nth-child(4) .tablesaw-cell-content span.CREATED { font-family: "aeonik-bold"; } .gvMessageList .clientGrid tbody tr td:nth-child(5) { width: 60px; padding-right: 30px; padding-top: 20px; color: #000F28; } .gvMessageList .clientGrid tbody tr td:nth-child(6) { width: 60px; padding-right: 30px; padding-top: 20px; color: #000F28; } .gvMessageList .clientGridPager { padding: 15px 0px 10px 0; } .gvMessageList .gridFilterArea { position: absolute; top: 90px; left: 0px; width: 22.1%; } .gvMessageList .gridFilterArea .search-filter-bar { width: 22.1%; } #gvCardStatementsDetail { position: relative; padding: 0px 30px 30px 30px; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(2) { width: 15% !important; padding-left: 20px; text-align: left; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(3) { width: 15% !important; text-align: left; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(4) { width: 27% !important; text-align: left; padding-left: 14px; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(4) div { float: left; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(5) { width: 24% !important; text-align: left; padding-left: 53px; } #gvCardStatementsDetail .clientGrid thead tr th:nth-child(6) div { padding-right: 0px; } #gvCardStatementsDetail .clientGrid tbody tr { align-self: center; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(2) { width: 15% !important; padding-left: 20px; padding-top: 10px; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(3) { width: 14% !important; padding-right: 7px; padding-top: 12px; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(4) { width: 27% !important; padding-right: 7px; padding-top: 12px; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(5) { width: 24% !important; padding-right: 7px; padding-top: 12px; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(6) { width: 10% !important; padding-right: 7px; padding-top: 12px; } #gvCardStatementsDetail .clientGrid tbody tr td:nth-child(7) { width: 10% !important; padding-right: 20px; padding-top: 12px; } .FXTrading { margin-top: 20px; } .FXTrading .currenciesText { margin-top: 5px !important; } .FXTrading .select-1 .select-1-currency-icon { overflow: visible !important; } .FXTrading .select-1 .select-1-currency-icon:after { position: absolute; display: block; content: ""; width: 1px; height: 35px; top: 40%; left: 40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; border-top-color: transparent; background-color: #ccccdc !important; } .FXTrading .disabledLabel:focus ~ .label-1, .FXTrading .disabledLabel:active ~ .label-1 { top: 16px !important; font-size: 14px !important; } .FXTrading .label-1.disabledLabel { font-size: 14px; top: 13px !important; } .FXTrading .input-wrapper .input-wrapper-inner .input-1 { height: 23px !important; font-family: "aeonik-bold"; } .FXTrading .double-info-slider-wrapper .info-slider-wrapper.no-accounts .info-slider-icon-wrapper { left: 30%; } .template-column { background-color: #f3f6f8; height: 54px; width: 100%; min-height: 50px; border-radius: 12px; border: 2px solid #f3f6f8; transition: border .3s ease-in-out; cursor: pointer; margin-bottom: 5px; } .template-column:hover { border: 2px solid #194137; } .CurrencyCalculator .currency-main-form-buttons { margin: auto; margin-top: 40px; } .CurrencyCalculator .currency-main-form-buttons .btn-1.with-icon { padding: 17px 100px 16px 20px; text-align: left; } .CurrencyCalculator .label-1 { position: absolute; top: 5px !important; font-size: 12px !important; left: 24px; font-family: ibm-regular; line-height: 1.285714; letter-spacing: -.01em; color: #666696; transition: top .2s,font-size .2s; pointer-events: none; } .CurrencyCalculator .currency-calculator-wrapper { display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; background-clip: border-box; box-sizing: border-box; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left { position: relative; width: 58%; padding: 15px 84px 15px 0; box-shadow: 26px 0 21px -28px rgba(0, 0, 0, 0.2); background-clip: border-box; box-sizing: border-box; display: grid; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left:after { position: absolute; content: ""; top: 46.5%; width: 21px; height: 15px; background-color: #f0f1f5; border-bottom: 1px solid #d7d8db; left: calc(100% - 0px); border-radius: 0 0 1px 0; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-60deg); transform-origin: center; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left:before { position: absolute; content: ""; top: 46.5%; width: 21px; height: 15px; background-color: #f0f1f5; border-bottom: 1px solid #d7d8db; left: calc(100% - 11px); border-radius: 0 0 0 1px; -webkit-transform: translateX(-50%) rotate(30deg); transform: translateY(-50%) rotate(-120deg); } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper { display: flex; justify-content: space-between; -webkit-box-pack: justify; -webkit-box-align: start; align-items: flex-start; position: relative; margin-bottom: 29px; padding-bottom: 20px; border-bottom: 1px solid #d7d8db; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .col-l { width: 50%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .col-l:first-child { margin-right: 35px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-wrapper { margin-bottom: 0px !important; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-between-arrow-wrapper { position: absolute; width: 12px; height: 11px; top: calc(40% - 12px); left: 50%; transform: translate(-50%, -50%); color: #266eff; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-between-arrow-wrapper .input-between-arrow { width: 100%; height: 100%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper { margin-bottom: 0; position: relative; height: 65px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner { position: relative; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-1 { padding: 21px 23px 7px; border: 1px solid #d7d8db; border-radius: 30px; -webkit-transition: border-color .2s; transition: border-color .2s; width: 92%; font-family: "aeonik-regular"; font-size: 14px; line-height: 1; color: #000F28; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .label-1 { position: absolute; top: 5px; font-size: 12px; left: 24px; font-family: "aeonik-regular"; line-height: 1.285714; letter-spacing: -.01em; color: #666696; transition: top .2s,font-size .2s; pointer-events: none; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.with-border:after { display: none; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-right { width: 42%; background-clip: border-box; box-sizing: border-box; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-right .currency-calculator-content { max-width: 310px; padding-left: 20px; margin-left: auto; margin-right: auto; } .CurrencyCalculator .from.active { display: block !important; border-radius: 25px 25px 0 0 !important; } .CurrencyCalculator .to.active { display: block !important; border-radius: 25px 25px 0 0 !important; } .CurrencyCalculator .part-modal-inner { padding-bottom: 0px; margin-bottom: 0px; } .CurrencyCalculator .part-modal-inner:after { display: none; } .CurrencyCalculator .amountCurrencyinputAmount .label-1 { top: 16px !important; font-size: 14px !important; } .CurrencyCalculator .amountCurrencyinputAmount.focusin .label-1 { top: 8px !important; font-size: 12px !important; } .CurrencyCalculator .input-select-fxtrading .label-1 { left: 62px !important; } .CurrencyCalculator .select .dk-select-options { padding: 0; left: 0px; right: 0px; } .CurrencyCalculator .select .dk-option { padding: 9px 0px; } .CurrencyCalculator .select .dk-option:hover { background-color: #f3f6f8; } .CurrencyCalculator .select-1 { padding: 18px 10px 5px 24px; max-width: 100%; height: 25px; position: relative; width: 85%; border-radius: 30px; cursor: pointer; border: 1px solid #c3cbd0; background: linear-gradient(#fff, #f3f6f8); transition: border-color .2s,border-radius .2s; } .CurrencyCalculator .select-1:after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; } .CurrencyCalculator .select-1 .select-1-currency-icon:before { position: absolute; content: ""; width: 20px; height: 23px; top: 8px; left: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; border-top-color: transparent; } .CurrencyCalculator .select-1 .dk-select-options { position: absolute; display: none; left: -1px; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow: hidden; padding-top: 0px; width: auto; z-index: 20; font-family: "Source-Sans-Pro", sans-serif; border-radius: 0 0 25px 25px !important; border-top: 2px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); } .CurrencyCalculator .select-1 .dk-select-options .dk-option span { font-size: 15px; font-family: "aeonik-regular"; } .CurrencyCalculator .select-1 .select-1-currency-iconli { position: relative; padding-left: 7px; } .CurrencyCalculator .select-1 .select-1-currency-iconli:before { position: absolute; content: ""; width: 20px; height: 20px; top: 24px; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 20px; background-repeat: no-repeat; background-position: 50%; border-top-color: transparent; } .CurrencyCalculator .select-1 .select-1-currency-iconli span { padding-left: 55px; height: 30px; padding-top: 0px; } .CurrencyCalculator .select-1 .select-1-currency-iconli span:after { position: absolute; content: ""; width: 1px; height: 30px; top: 50%; left: 49px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #ccccdc; } .CurrencyCalculator .select-1 .dk-selected { background-color: transparent !important; max-width: 100%; height: 23px; top: -4px; position: relative; width: 100%; font-family: "aeonik-regular"; font-size: 14px; line-height: 1.4; color: #000F28; cursor: pointer; appearance: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-left: -12px; overflow: visible; } .CurrencyCalculator .select-1 .dk-selected .currenciesText { padding-left: 50px; height: 30px; padding-top: 7px; } .CurrencyCalculator .select-1 .dk-selected .currenciesText::after { position: absolute; content: ""; width: 1px; height: 35px; top: 50%; left: 37px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: transparent; border-left: 1px solid #d7d8db; } ul.k-tabstrip-items { padding-left: 28px; } .dk-option-selected { color: inherit !important; } .paymentPurpose { margin-left: 1px; } .crontoDialogView .user-content p:not(:last-child) { margin-bottom: 16px; } .crontoDialogView .modal-content { padding: 0; } .crontoDialogView .modal-header { padding: 29px 75px 25px32px !important; } .crontoDialogView .qr-wrapper { margin-top: 0; margin-bottom: 0 !important; padding: 32px; padding-bottom: 20px; } .crontoDialogView .qr-wrapper .qr-content user-content { padding-left: 38px; } .crontoDialogView .top-margin { padding: 0 32px 0 32px; } .crontoDialogView .top-margin .input-1 { height: 50px; } .crontoDialogView .top-margin .input-1:focus { border-color: #d7d8db; } .crontoDialogView .timer-wrapper { padding: 0 32px 32px 32px; } .crontoDialogView .user-content b { font-family: ibm-bold; } .crontoDialogView .user-content li { margin-bottom: 5px; } .crontoDialogView .user-content li, .crontoDialogView .user-content p { font-family: ibm-regular; font-size: 15px; line-height: 1.33333333; letter-spacing: -.02em; } .crontoDialogView .user-content ol { list-style-type: decimal; } .crontoDialogView .user-content ol, .crontoDialogView .user-content ul { padding-left: 20px; margin-bottom: 20px; } .crontoDialogView ol, .crontoDialogView ul { list-style: none; } .cardPaymemtPopup .modal-card-wrapper { position: relative; padding: 16px 90px 16px 129px; border-radius: 12px; background: #000F28; overflow: hidden; } .cardPaymemtPopup .card-img-wrapper { left: 13px !important; } .cardPaymemtPopup .modal-card-wrapper .card-img-wrapper, .cardPaymemtPopup .modal-card-wrapper:after { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cardPaymemtPopup .card-img-wrapper { max-width: 112px; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); } .cardPaymemtPopup .card-img { display: inline-block; width: 130px; height: 70px; background-repeat: no-repeat; background-size: contain; } .cardPaymemtPopup .modal-card-wrapper:after { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cardPaymemtPopup .modal-card-wrapper:after { content: ""; width: 1px; height: -webkit-calc(100% - 32px); height: calc(100% - 32px); left: 111px; background: #666696; } .cardPaymemtPopup .title-5 { line-height: 1.25; letter-spacing: -.01em; font-size: 20px; } .cardPaymemtPopup .title-1 { font-size: 30px; } .cardPaymemtPopup .inline-block { display: inline-block; } .cardPaymemtPopup .text-color-5 { font-size: 16px; color: #fff !important; } .cardPaymemtPopup .comboboxText { white-space: nowrap; width: 85%; overflow: hidden; text-overflow: ellipsis; margin-right: 11px; margin-left: 40px; margin-top: -11px; } .cardPaymemtPopup .selected.select-1-currency-icon { position: relative; padding-left: 67px; } .cardPaymemtPopup .acc-icon:before { background-image: url(images/icons/money.png); } .cardPaymemtPopup .comboboxText:before { position: absolute; content: ""; width: 20px; height: 20px; margin-top: 15px; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; /* background-color: #c3cbd0; */ background-size: 20px; background-repeat: no-repeat; background-position: 50%; } .cardPaymemtPopup .dk-option.comboboxText:before { background-size: 16px; } .cardPaymemtPopup .comboboxSpanText { white-space: nowrap; width: 92%; overflow: hidden; text-overflow: ellipsis; margin-right: 11px; margin-left: 10px; margin-top: -11px; } .cardPaymemtPopup .dk-option.comboboxText { width: 100%; margin-left: 0px; } .cardPaymemtPopup .dk-option .comboboxSpanText { padding-left: 40px; } .cardPaymemtPopup .input-wrapper.with-text-right .input-1 { padding: 21px 80px 7px 24px; } .cardPaymemtPopup .input-wrapper .input-text-right { right: 20px; font-family: "aeonik-medium"; font-size: 14px; line-height: 1; letter-spacing: -.02em; color: #666696; } .cardPaymemtPopup .input-wrapper .input-text-right, .cardPaymemtPopup .input-wrapper .input-text-right:after { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cardPaymemtPopup .input-wrapper .input-text-right:after { content: ""; width: 1px; height: 28px; left: -20px; background: #ccccdc; } .cardPaymemtPopup .acc-icon:after { position: absolute; content: ""; width: 1px; height: 34px; margin-top: 15px; left: 52px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #ccccdc; } .cardPaymemtPopup .modal-card-content { position: inherit; } .modal-card-wrapper { position: relative; padding: 16px 16px 16px 100px; border-radius: 12px; background: linear-gradient(90deg, #194137 0%, #00cda5 100%); overflow: hidden; } .modal-card-wrapper::after { content: ""; width: 2px; height: calc(100% - 32px); position: absolute; top: 50%; left: 80px; transform: translateY(-50%); background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .modal-card-wrapper .card-img-wrapper { position: absolute; top: 50%; left: -50px; transform: translateY(-50%); } .offers-slider-other { position: relative; padding-bottom: 72px; } .offers-slider-other.single-image { padding-bottom: 40px; } .offers-slider-other.single-image .swiper-pagination, .offers-slider-other.single-image .navigation-wrap { display: none; } .offers-slider-other .slide { width: 100%; height: 33.5vw; max-height: 400px; border-radius: 20px; overflow: hidden; } .offers-slider-other .slide-inner { position: relative; display: flex; align-items: center; width: 100%; height: 100%; padding: 20px 64px; } .offers-slider-other .slide-content { position: relative; max-width: 340px; } .offers-slider-other .slide-content .btn-1 { min-width: 200px; } .offers-slider-other .navigation-wrap { position: absolute; right: 40px; bottom: 40px; z-index: 1; } .offers-slider-other .nav-icons-1:hover { border-color: #fff; } .offers-slider-other .nav-icons-1:hover svg { fill: #fff; } .offers-slider-other .nav-icons-1:last-child { margin-right: 0; } .offers-slider-other .swiper-pagination { bottom: 30px; left: 50%; transform: translateX(-50%); } .offers-slider-other .swiper-pagination-bullet { background-color: #75868E; } .offers-slider-other .swiper-pagination-bullet:not(:last-child) { margin-right: 4px; } .offers-slider-other .swiper-pagination-bullet-active { background-color: #194137; } .offers-filter { padding-top: 30px; } .offers-filter .offers-radio-wrap { margin-bottom: 12px; } .offers-blocks-form { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 43px; } .offers-blocks-form:after { position: absolute; content: ''; width: 100%; height: 2px; top: 0; left: 0; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); visibility: hidden; } .offers-filter { width: 250px; } .offers-boxes-wrapper { width: calc(100% - 260px); } .offers-box { display: flex; flex-wrap: wrap; justify-content: space-between; height: 16.5vw; max-height: 200px; overflow: hidden; } .offers-box:hover .offers-box-img-wrapper img { transform: scale(1.05); } .offers-box:not(:last-child) { margin-bottom: 24px; } .offers-box .offers-box-img-wrapper { position: relative; width: 40%; height: 100%; overflow: hidden; } .offers-box .offers-box-img-wrapper img { transition: .3s ease-in-out; } .offers-box .offers-box-content { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 60%; padding: 32px; gap: 10px; background-color: #F3F6F8; border-radius: 20px; } .offers-box .offers-box-content small { font-size: 20px; } .offers-box .btn-1 { min-width: 200px; } .offers-table .icon-left-wrapper:after { top: -7px; } .table-payment-wrapper.offers-table .table-row { padding: 0; } .table-payment-wrapper.offers-table .date-col { width: 19%; } .table-payment-wrapper.offers-table .info-payment-col { width: 26%; } .table-payment-wrapper.offers-table .payment-col { width: 55%; } .table-payment-wrapper.offers-table .payment-col.last-col { display: flex; justify-content: space-between; align-items: center; } .table-payment-wrapper.offers-table .payment-col.last-col p { padding-right: 5px; } .payment-col-links-wrapper { display: flex; justify-content: flex-end; width: 230px; } .payment-col-links-wrapper .payment-col-link { position: relative; width: 50%; padding: 6px 10px; text-align: center; color: #266eff; } .payment-col-links-wrapper .payment-col-link::after { position: absolute; content: ''; width: 2px; height: 100%; top: 50%; left: 0; transform: translateY(-50%); background: transparent; border-left: 1px solid #d7d8db; } .title-buttons-filter-wrapper { flex-wrap: wrap; } .title-buttons-filter-wrapper .filter-wrapper { flex-shrink: 0; margin-bottom: 20px; } .offers-loans-wrap { flex-wrap: wrap; max-width: 1002px; padding-right: 60px; } .offers-loans-nav { max-width: 330px; width: 38%; } .offers-loans-nav .number-step-wrap:not(:last-child) { margin-bottom: 8px; } .offers-loans-step { max-width: 515px; width: 58%; } .number-step-wrap { padding: 15px 19px 15px 14px; border-radius: 12px; } .number-step-wrap.active { border: 2px solid #266eff; } .number-step-wrap.active .number-step-text, .number-step-wrap.active .number-step-num { font-family: "aeonik-bold"; color: #000F28; } .number-step-num { position: relative; min-width: 32px; text-align: center; padding-right: 12px; } .number-step-num:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; height: 100%; width: 1px; background: transparent; border-left: 1px solid #d7d8db; } .number-step-num ~ .number-step-text { margin-left: auto; width: calc(100% - 48px); } .offer-loans-step-section { position: relative; padding-bottom: 40px; } .offer-loans-step-section.type-2 { padding-bottom: 30px; } .offer-loans-step-section.type-3 { padding-bottom: 20px; } .offer-loans-step-section.type-3:after { display: none; } .offer-loans-step-section:after { content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2px; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .offer-loans-sliders .input-wrapper { margin-bottom: 0; } .offer-loans-sliders .input-wrapper:not(:last-child) { margin-bottom: 40px; } .range-wrapper .range-slider { margin-bottom: 24px; } .split-text-wrapper { align-items: flex-start; padding: 17px 20px; border-radius: 12px; } .split-text-wrapper:not(:last-child) { margin-bottom: 4px; } .split-text-wrapper.type-2 .split-text-left { width: 71%; } .split-text-left { padding-right: 10px; } .split-text-right { text-align: right; } .centered-buttons-wrap { flex-wrap: wrap; } .centered-buttons-wrap .btn-1 { width: 210px; max-width: 100%; margin: 0 8px 8px !important; } .message-wrapper { padding-top: 40px; } .message-wrapper.with-border { position: relative; padding-bottom: 160px; } .message-wrapper.with-border:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; display: block; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .message-text { max-width: 640px; margin: auto; } .msgHubThreadList .dashboard { float: unset !important; } .offers-loan-info .btn-with-tooltip { margin-top: 26px; } .custom-radio-btn { display: block; position: relative; padding-left: 42px; cursor: pointer; } .custom-radio-btn input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .custom-radio-btn input:checked ~ .custom-radio-btn-checkmark { border-width: 5px; border-color: #266eff; } .custom-radio-btn input:checked ~ .custom-radio-btn-text { font-family: "aeonik-bold"; color: #266eff; } .custom-radio-btn .custom-radio-btn-checkmark { position: absolute; width: 19px; height: 19px; top: 2px; left: 0; border-radius: 50%; border: 1px solid #75868E; } .custom-radio-btn .custom-radio-btn-text { font-family: "aeonik-regular"; font-size: 15px; line-height: 22px; color: #666696; } .k-animation-container .Forms_CategorizedFormList, .k-widget .Forms_CategorizedFormList, .k-widget * .Forms_CategorizedFormList, .k-animation-container * .Forms_CategorizedFormList, .k-widget *:before .Forms_CategorizedFormList, .k-animation-container *:after .Forms_CategorizedFormList, .k-block .k-header .Forms_CategorizedFormList, .k-list-container .Forms_CategorizedFormList { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .img-wrapper { background-size: cover !important; } .offer-CREDITCARD { background: url(images/demo/E-banking-2-600x400px.jpg) 0 0 no-repeat; } .offer-LONGTERMLOAN { background: url(images/demo/E-banking-7-600x400px.jpg) 0 0 no-repeat; } .offer-KESKREDIT { background: url(images/demo/E-banking-1-600x400px.jpg) 0 0 no-repeat; } .offer-KESKREDIT2 { background: url("images/demo/Kes kredit bez prenosa zarade_600x400px.jpg") 0 0 no-repeat; } .offer-REFKREDIT { background: url(images/demo/E-banking-5-600x400px.jpg) 0 0 no-repeat; } .offer-SAVINGS-dash { background: url(images/demo/E-banking-4.jpg) 0 0 no-repeat; } .offer-CREDIT-dash { background: url(images/demo/E-banking.jpg) 0 0 no-repeat; } .offer-OVERDRAFTLOS { background: url(images/demo/E-banking-3-600x400px.jpg) 0 0 no-repeat; } .offer-DEPOSITEUR { background: url(images/demo/E-banking-4-600x400px.jpg) 0 0 no-repeat; } .offer-DEPOSITUSD { background: url(images/demo/Oroceni-depoziti-USD_600x400px.jpg) 0 0 no-repeat; } .offer-DEPOSITRSD { background: url("images/demo/Oroceni depozit RSD_600x400px.jpg") 0 0 no-repeat; } .offer-DEPOSITINTERESTADVEUR { background: url(images/demo/Oročeni-depozit-u-valuti-EUR-sa-isplatom-kamate-unapred.jpg) 0 0 no-repeat; } .offer-DEPOSITINTERESTMONTHEUR { background: url("images/demo/Oroceni depozit - mesecna isplata kamate_600x400px.jpg") 0 0 no-repeat; } .offer-AVISTARSD { background: url("images/demo/Depoziti po vidjenju RSD_600x400px.jpg") 0 0 no-repeat; } .offer-AVISTAEUR { background: url("images/demo/Depoziti po vidjenju EUR-USD_600x400px.jpg") 0 0 no-repeat; } .offer-34 { background: url(images/demo/offers-4.jpg) 0 0 no-repeat; } .offer-DEPOSITRSD_slider { background: url(images/demo/E-banking-4-1070x400px.jpg) 0 0 no-repeat; } .offer-REFKREDIT_slider { background: url(images/demo/E-banking-5-1070x400px.jpg) 0 0 no-repeat; } .offer-LONGTERMLOAN_slider { background: url(images/demo/E-banking-7-1070x400px.jpg) 0 0 no-repeat; } .transferCommissionDialog { /* .line-height-9 { margin-top: -50px !important; }*/ } .transferCommissionDialog .right-inner-loan-detail { margin-top: 5px !important; } .transactionCanceled .ui-dialog-content:before { background-image: url(images/ic_uspesno.png) !important; width: 90px !important; height: 50px !important; } .btn-icon-left.withdraw { position: absolute; width: 16px; height: 15px; top: 50%; left: 20px; transform: translateY(-50%); background-image: url(../AIKRetail/images/ic_opozovi_placanje.png); } .casOrdercommissionDialog .currenciesText { margin-top: 0; margin-left: 12px; font-family: "aeonik-regular"; color: #000F28; } .casOrdercommissionDialog .dk-selected .currenciesText::after { display: none; } .casOrdercommissionDialog .ui-dialog-titlebar { display: none; } .casOrdercommissionDialog .dk-select-options { padding-top: 0px !important; } .casOrdercommissionDialog .dk-select-options .dk-option:hover { background-color: #f3f6f8; } .casOrdercommissionDialog .input-wrapper { margin-bottom: 0px; } .casOrdercommissionDialog .select-1 { padding: 21px 32px 7px 24px; height: 50px !important; } .casOrdercommissionDialog .buttons-wrapper .btn-1.color-2 { background-color: #fff; color: #266eff; font-size: 15px; } .casOrdercommissionDialog .buttons-wrapper .btn-1.color-2:hover { background-color: #e6e6e6; } .casOrdercommissionDialog .buttons-wrapper .btn-1.color-1 { background-color: #266eff; color: #fff; font-size: 15px; } .casOrdercommissionDialog .buttons-wrapper .btn-1.color-1:hover { background-color: #0050f2; } .casTokenCrontoDialog { left: 0 !important; width: 500px !important; } .casTokenCrontoDialog .modal-content { padding: 32px; } .casTokenCrontoDialog .ui-dialog-titlebar { display: none !important; } .casTokenCrontoDialog .ui-dialog-titlebar:after { position: absolute; content: ""; width: 76%; height: 10px; left: 50%; bottom: -18px; box-shadow: 0 -4px 17px 4px rgba(0, 0, 0, 0.1); transform: translateX(-50%); } .casTokenCrontoDialog .ui-dialog-titlebar .ui-dialog-title { float: left !important; line-height: .8888888; font-size: 18px !important; font-family: 'aeonik-medium'; width: auto; color: #194137; float: left; padding-top: 25px; padding-bottom: 10px; } .casTokenCrontoDialog .cronto { margin-top: 20px; width: calc(100% - 160px); padding-left: 38px; } .casTokenCrontoDialog .ui-dialog-content.ui-widget-content { font-family: 'ibm-regular'; font-size: 15px; } .casTokenCrontoDialog .ui-dialog-buttonpane { padding: 0; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; justify-content: flex-start; margin-top: 30px; padding-bottom: 10px; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset button { width: 48%; font-family: "aeonik-medium"; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget { background-image: url(images/icons/ic_strelica@2x.png) !important; background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: 172px 18px !important; text-align: left; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover { background-image: url(images/icons/ic_strelica_gr.png) !important; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:hover { background-image: url(images/icons/ic_strelica_gr.png) !important; } .casTokenCrontoDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.ui-corner-all.ui-widget:nth-child(1):hover { background-image: url(images/icons/ic_strelica@2x.png) !important; } .casTokenCrontoDialog .ui-widget-content.ui-dialog-content { width: -webkit-fill-available; } .casTokenCrontoDialog .qr-wrapper { margin-bottom: 60px !important; } .casTokenCrontoDialog .qr-wrapper .qr-img-wrapper { width: 160px; height: 160px; } .casTokenCrontoDialog .user-content ol li { margin-bottom: 5px; } .casTokenCrontoDialog .user-content li { font-family: ibm-regular; font-size: 15px; line-height: 1.33333333; letter-spacing: -.02em; } .casTokenCrontoDialog .guide_text { font-family: ibm-regular; font-size: 15px; line-height: 1.33333333; letter-spacing: -.02em; margin-bottom: 5px; } .casTokenCrontoDialog .modal-content { padding: 32px; } .casTokenCrontoDialog .modal-content .input-wrapper .input-wrapper-inner .input-1 { padding: 21px 33px 7px 24px; min-height: 50px; } .casTokenCrontoDialog .modal-content .input-wrapper .input-wrapper-inner .input-1:focus { border-color: #d7d8db; } .casTokenCrontoDialog .modal-footer { padding: 0 32px 32px; } .CASTransfer .input-wrapper { box-sizing: border-box; background-clip: border-box; } .CASTransfer .input-wrapper .input-wrapper-inner .input-1 { width: 90%; padding: 24px 33px 7px 24px; } .CASTransfer .deact-up { margin-left: 7%; margin-right: 20px; } .CASTransfer .reg { margin-left: 5%; } .CASTransfer .account:before { background-image: url(images/icons/ic_racuni.png); } .CASTransfer .empty-debit { width: 100% !important; box-shadow: none !important; } .CASTransfer .ui-dialog.no-yes-dialog { margin-top: 120px; } .CASTransfer .empty { background: #F2F6F9 !important; } .CASTransfer .double-info-slider-wrapper { position: relative; display: flex; -webkit-box-pack: justify; justify-content: space-between; } .CASTransfer .double-info-slider-wrapper .empty-message { margin-left: 150px; width: max-content; } .CASTransfer .double-info-slider-wrapper .info-slider-wrapper { position: relative; border-radius: 30px; height: 59px; margin-right: -57px; } .CASTransfer .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper { position: absolute; width: 24px; height: 24px; top: 50%; transform: translateY(-50%); } .CASTransfer .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper .info-slider-icon { width: 100%; height: 100%; margin-left: 115px; } .CASTransfer .btn-1.with-icon { padding: 17px 10px 16px 20px; text-align: left; } .CASTransfer .input-1.name, .CASTransfer .input-1.jmbg, .CASTransfer .input-1.phone { background-color: #fff; border: 1px solid transparent; color: #666696; opacity: 1; } .CASTransfer .input-1.name:active, .CASTransfer .input-1.name:focus, .CASTransfer .input-1.jmbg:active, .CASTransfer .input-1.jmbg:focus, .CASTransfer .input-1.phone:active, .CASTransfer .input-1.phone:focus { border: 1px solid transparent !important; } .CASTransfer .input-1.nickname:active, .CASTransfer .input-1.nickname:focus { border: 1px solid #d7d8db !important; } .CASTransfer .input-1:active, .CASTransfer .input-1:focus { border: 1px solid transparent; border-color: transparent !important; } .CASTransfer .dk-select.select-1 { position: relative; background: linear-gradient(#fff, #f3f6f8); } .CASTransfer .dk-select.select-1 .dk-selected { background-color: unset; } .CASTransfer .dk-select { height: 20%; } .CASTransfer .currenciesText { margin-top: -3px; margin-left: 17px; } .CASTransfer .currenciesText:before { background-image: url(images/icons/money.png); background-size: 20px; background-color: transparent; border-radius: 0; background-repeat: no-repeat; background-position: 50%; position: absolute; content: ""; width: 20px; height: 20px; margin-top: 13px; left: 2px; transform: translateY(-50%); } .CASTransfer .border-bottom-wrapper { position: relative; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #d7d8db; } .CASTransfer .centered-buttons-wrap { flex-wrap: wrap; box-sizing: border-box; justify-content: center; } .CASTransfer .centered-buttons-wrap .btn-1 { font-size: 15px; } .CASTransfer .dk-option-selected span { padding-left: 52px; } .CASTransfer .dk-option-selected span:before { position: absolute; content: ""; width: 1px; height: 34px; top: 50%; left: 52px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #ccccdc; } .CASTransfer .dk-option-selected:before { background-image: url(images/icons/money.png); background-size: 16px; background-color: transparent; border-radius: 0; background-repeat: no-repeat; background-position: 50%; position: absolute; content: ""; width: 20px; height: 20px; margin-top: 13px; left: 17px; transform: translateY(-50%); } .CASTransfer .dk-selected { height: 22px; padding-left: 30px; position: relative; } .CASTransfer .select .dk-selected:before { display: none; } .CASTransfer .select-1 { max-width: 92%; height: 20px; position: relative; width: 100%; border-radius: 30px; cursor: pointer; border: 1px solid #c3cbd0; padding: 15px 32px 15px 24px; padding-left: 16px; } .CASTransfer .select-1 .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; width: auto; z-index: 20; font-family: "aeonik-regular"; border-radius: 0 0 30px 30px !important; border: 1px solid #c3cbd0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.23); transition: opacity .3s ease, visibility .3s ease; } .CASTransfer .select-1 .dk-select-options.active { display: block !important; } .CASTransfer .select-1 .dk-select-options .dk-option { padding: 9px 16px; } .CASTransfer .select-1 .dk-select-options .dk-option:hover { background-color: #f3f6f8 !important; } .CASTransfer .select-1:after { content: ""; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 20px; } .CASTransfer .select-1:before { position: absolute; content: ""; width: 1px; height: 34px; top: 50%; left: 52px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #ccccdc; } .CASTransfer .select-1.active { border-radius: 25px 25px 0 0 !important; } .CASTransfer .centered-buttonss-wrap .btn-1 { font-size: 14px; } .btn-1.color-3 { background-color: #F0F1F5; color: #e64b4b; } .prenesi-main-form-top-info { position: relative; max-width: 800px; padding-top: 40px; margin-left: auto; margin-right: auto; text-align: center; } .prenesi-img-wrapper { width: 47vw; max-width: 268px; min-width: 185px; height: 11vw; padding-right: 3px; max-height: 50px; min-height: 43px; margin: 0 auto 24px; background-image: url("images/prenesi.png"); background-size: contain; background-repeat: no-repeat; } .prenesi-main-form-top-fields { max-width: 515px; margin-left: auto; margin-right: auto; } .payments-main-form-buttons { max-width: 632px; margin-left: auto; margin-right: auto; } .SliderTutorial .slide .inner p:nth-child(1) { margin-bottom: 20px; } .Forms_ActiveWorkflowListAIK .s-overlay { background-color: transparent !important; } .Forms_ActiveWorkflowListAIK .right-intro-serach-filter-wrapper::after { display: none !important; } .Forms_ActiveWorkflowListAIK .icon-left-wrapper { min-width: 50px; max-width: 50px; width: 100%; padding-top: 1.3%; left: 0px !important; top: 0px !important; } .Forms_ActiveWorkflowListAIK .table-intro-payment.with-icon-left { padding-left: 50px; } .Forms_ActiveWorkflowListAIK .last-col { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .Forms_ActiveWorkflowListAIK .pager.flex-layout.space-between { flex-wrap: wrap; margin-bottom: 50px; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; } .Forms_ActiveWorkflowListAIK .profile-text-arrow, .Forms_ActiveWorkflowListAIK .profile-text-arrow.rotate { width: 20px; height: 20px; stroke: none; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: fill .3s; transition: fill .3s; color: #266eff; position: absolute; } .Forms_ActiveWorkflowListAIK .previous_link { border: 1px solid #c3cbd0; -webkit-transition: border-color .3s; transition: border-color .3s; } .Forms_ActiveWorkflowListAIK .previous_link:first-child { margin-right: 8px; } .Forms_ActiveWorkflowListAIK .next_link, .Forms_ActiveWorkflowListAIK .previous_link { position: relative; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: #fff; border: 0; } .Forms_ActiveWorkflowListAIK .next_link:hover, .Forms_ActiveWorkflowListAIK .previous_link:hover { background: #e6e6e6; } .Forms_ActiveWorkflowListAIK .widget-pagination.templates { margin-bottom: 10px; -webkit-box-align: center; align-items: center; display: flex; } .Forms_ActiveWorkflowListAIK .pagination.flex-layout.flex-center { line-height: 1.25; font-size: 12px; font-family: "aeonik-medium"; color: #666696; text-transform: uppercase; margin-top: -12px; margin-right: 10px; } .Forms_ActiveWorkflowListAIK .pageCurrent { margin-right: 5px; margin-left: 5px; } .Forms_ActiveWorkflowListAIK .ellipse.more { display: none !important; } .Forms_ActiveWorkflowListAIK .ellipse.less { display: none !important; } .page-title-wrapper { position: relative; } .page-title-wrapper::after { position: absolute; content: ''; width: 100%; height: 1px; bottom: 0; left: 0; background: transparent; border-top: 1px solid #d7d8db; } .page-title-wrapper .title-buttons-wrapper { margin-left: -8px; overflow-x: auto; } .page-title-wrapper .title-buttons-wrapper .btn-3 { margin-bottom: 20px; margin-left: 8px; flex-shrink: 0; } .page-title-wrapper .title-buttons-wrapper-inner { display: flex; } .page-title-wrapper.with-return { padding-bottom: 30px; } .page-title-wrapper.with-return .page-title-inner { margin-left: 24px; } .nav-icons-2 { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; } .nav-icons-2:hover { background-color: #e6e6e6; } .nav-icons-2 svg { width: 16px; height: 13px; color: #266eff; fill: #266eff; } .s-widget.Forms_ActiveWorkflowListAIK { position: relative; } .s-widget.Forms_ActiveWorkflowListAIK .right-intro-serach-filter-wrapper { position: absolute; right: 10px; top: -70px; } .margin-top-50 { margin-top: 50px; } .PaymentOrderV2 { margin-top: 20px; } .PaymentOrderV2 .no-account { background-image: url(images/icons/ic_nema_racuna@2x.png); background-size: contain; width: 24px; height: 24px; left: 40%; top: 50%; } .PaymentOrderV2 .no-card-img-wrapper p { font-size: 17px; color: #75868e; padding-top: 4%; } .PaymentOrderV2 #no-accounts-main { margin-top: 50px; } .PaymentOrderV2 .user-account-info-cards-wrapper .user-account-card-outer h4 { margin-bottom: 16px; } .PaymentOrderV2 .input-1 { padding-right: 24px !important; width: 92% !important; } .PaymentOrderV2 .input-grid-wrapper .input-wrapper.col-s .input-wrapper-inner .input-1, .PaymentOrderV2 .input-grid-wrapper .input-wrapper.col-xs .input-wrapper-inner .input-1 { padding-right: 0px !important; } .no-title-border.page-title-wrapper::after { content: none; } .SliderTutorial, .widget-tutorial-slider { position: relative; } .SliderTutorial .slider .slick-list, .widget-tutorial-slider .slider .slick-list { max-width: 1210px; height: 400px; margin: 0 auto; border-radius: 20px !important; box-shadow: 0 17px 16px 7px rgba(0, 0, 0, 0.13); transition-duration: all 5s; } .SliderTutorial .btn-1, .widget-tutorial-slider .btn-1 { box-sizing: border-box; min-width: 200px; z-index: 2; } .SliderTutorial .widget-inner, .widget-tutorial-slider .widget-inner { height: 420px !important; margin-bottom: 50px; margin-top: 10px; } .SliderTutorial .widget-header, .widget-tutorial-slider .widget-header { position: relative; z-index: 5; } .SliderTutorial .slider, .widget-tutorial-slider .slider { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .SliderTutorial .slide, .widget-tutorial-slider .slide { height: 430px; background-position: inherit; background-repeat: no-repeat; background-size: cover; } .SliderTutorial .slide:after, .widget-tutorial-slider .slide:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .SliderTutorial .slide > a, .widget-tutorial-slider .slide > a { display: block; height: 100%; position: relative; z-index: 10; } .SliderTutorial .slick-dots, .widget-tutorial-slider .slick-dots { zoom: 1; position: relative; bottom: 0px; left: 50%; transform: translateX(-50%); position: absolute; text-align: center; transition: .3s opacity; z-index: 10; margin-bottom: -15px; } .SliderTutorial .slick-dots:after, .widget-tutorial-slider .slick-dots:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } .SliderTutorial .slick-dots li, .widget-tutorial-slider .slick-dots li { display: inline-block; } .SliderTutorial .slick-dots li.slick-active button, .widget-tutorial-slider .slick-dots li.slick-active button { background-color: #194137; opacity: 1; } .SliderTutorial .slick-dots button, .widget-tutorial-slider .slick-dots button { border-radius: 50%; color: transparent; background-color: #75868e; width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; font-size: 2px; margin: 0 2px; padding: 0; text-indent: -9999px; overflow: hidden; border: none; cursor: pointer; } .SliderTutorial .slick-slide, .widget-tutorial-slider .slick-slide { opacity: 1 !important; position: relative; } .SliderTutorial .slick-active, .widget-tutorial-slider .slick-active { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; transition-delay: .5s; opacity: 1 !important; } .SliderTutorial .slide .inner, .widget-tutorial-slider .slide .inner { position: absolute; bottom: 25%; text-align: left; padding-left: 50px; margin-bottom: 40px; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: start; align-items: flex-start; max-width: 380px; } .SliderTutorial .play-icon-btn, .widget-tutorial-slider .play-icon-btn { display: inline-block; width: 90px; min-height: 30px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; border: none; padding: 14px 36px 11px; text-align: center; border-radius: 38px; font-size: 15px; transition: all .5s; margin-left: 0px; margin-bottom: -40px; } .SliderTutorial .btn-slider-show, .widget-tutorial-slider .btn-slider-show { background-color: #fff; z-index: 100; border-radius: 38px; display: inline; padding: 15px 2px 10px; min-height: 27px; transition: all .5s; } .SliderTutorial .btn-slider-show:hover, .widget-tutorial-slider .btn-slider-show:hover { background-color: #75868E; } .SliderTutorial .btnSlider, .widget-tutorial-slider .btnSlider { display: inline-block; min-height: 50px; font-size: 15px; padding: 14px 36px 11px; border-radius: 38px; text-align: center; transition: all .5s; color: #fff; display: inline; padding-bottom: 14px; font-family: Source-Sans-Pro-Bold; } .SliderTutorial .navigation-wrap, .widget-tutorial-slider .navigation-wrap { position: absolute; right: 40px; top: 335px; z-index: 1; display: flex; } .SliderTutorial .nav-icons-1, .widget-tutorial-slider .nav-icons-1 { position: relative; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; -webkit-transition: border-color .3s; transition: border-color .3s; cursor: pointer; } .SliderTutorial .nav-icons-1:hover svg, .widget-tutorial-slider .nav-icons-1:hover svg { fill: #fff; } .SliderTutorial .nav-icons-1:first-child, .widget-tutorial-slider .nav-icons-1:first-child { margin-right: 8px; } .SliderTutorial .nav-icons-1:last-child, .widget-tutorial-slider .nav-icons-1:last-child { margin-right: 0; } .SliderTutorial .nav-icons-1 .svg, .widget-tutorial-slider .nav-icons-1 .svg { position: absolute; width: 12px; height: 12px; fill: #fff; stroke: none; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: fill .3s; } .no-yes-dialog .ui-dialog-buttonset button { width: 48% !important; } .LosInstanceId { width: 20% !important; } .losInstancetext { width: 19% !important; } .documentList .btn-2 .btn-icon-left { position: absolute; width: 16px; height: 16px; top: 50%; left: 20px; transform: translateY(-50%); stroke: currentColor !important; } .SMSDialog .ui-dialog-titlebar, .paymentOrdercommissionDialog .ui-dialog-titlebar, .intrabankDataSuccess .ui-dialog-titlebar { display: none !important; } @media all and (max-width: 1920px) { #paymentOrdercommissionDialog { max-height: 90vh !important; } } .tokenDelete { padding: 0px !important; } .tokenDelete .ui-dialog-buttonset button:nth-child(1) { background-color: #f3f6f8 !important; color: #194137 !important; background-image: url(images/icons/ic_strelica@2x.png) !important; background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: 172px 18px !important; text-align: left; } .tokenDelete .ui-dialog-buttonset button:nth-child(2) { background-color: #f3f6f8 !important; color: #194137 !important; background-image: url(images/icons/ic_strelica@2x.png) !important; background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: 172px 18px !important; text-align: left; } .tokenDelete .ui-dialog-titlebar { border: 1px solid #d7d8db !important; height: 85px !important; } .tokenDelete .ui-dialog-titlebar .ui-dialog-title { padding: 30px; border-bottom: none; } .tokenDelete .ui-dialog-content { margin-top: 0px !important; } .tokenDelete .ui-dialog-buttonpane { padding: 0 32px 32px 32px !important; } .header-side-profile-wrapper { position: absolute; display: flex; -webkit-box-align: center; width: 300px; bottom: 40px; left: 23px; } .header-side-profile-wrapper .name-color { color: #194137; } .header-side-profile-wrapper:hover .edit-icon-wrapper { color: #194137; } .header-side-profile-wrapper .header-side-profile-image-wrapper { position: relative; width: 56px; height: 56px; background-color: #c3cbd0; color: #194137; border-radius: 12px; overflow: hidden; } .header-side-profile-wrapper .header-side-profile-image-wrapper img { font-family: ibm-bold; font-size: 20px; line-height: 56px; text-align: center; } .header-side-profile-wrapper .edit-icon-wrapper { position: absolute; width: 32px; height: 32px; top: -15px; left: 39px; background-color: #fff; color: #75868e; border-radius: 50%; -webkit-transition: color .3s; transition: color .3s; } .header-side-profile-wrapper .edit-icon-wrapper svg { position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #266eff; } .header-side-profile-wrapper .header-side-profile-info-wrapper { width: -webkit-calc(100% - 56px); width: calc(100% - 56px); padding-left: 16px; opacity: 0; } .side-menu.active .header-side-profile-info-wrapper { display: none; opacity: 1; } .no-img { padding-left: 18px !important; padding-top: 18px !important; } .LoginErrorDialog { padding: 0px !important; } .LoginErrorDialog .ui-dialog-buttonset button:nth-child(1) { background-image: url(images/icons/ic_strelica.png) !important; background-size: 7% !important; background-repeat: no-repeat !important; background-position: 150px 18px !important; text-align: left !important; } .LoginErrorDialog .ui-dialog-titlebar { padding-bottom: 0px; padding: 29px 75px 53px 32px !important; border: none; border-bottom: 1px solid #d7d8db !important; } .LoginErrorDialog .ui-dialog-titlebar .ui-dialog-title { font-family: "tt-norms-regular"; font-size: 24px; color: #266eff; padding: 0; border-bottom: 0; } .LoginErrorDialog .ui-helper-clearfix:after { display: none !important; } .LoginErrorDialog .ui-dialog-content { padding: 32px !important; } .LoginErrorDialog .ui-dialog-content:before { display: none; } .LoginErrorDialog .ui-dialog-buttonpane { padding: 0px 32px 32px !important; } .LoginErrorDialog .ui-dialog-buttonpane:before { display: none !important; } .LoginErrorDialog .ui-dialog-buttonpane .ui-dialog-buttonset { padding-top: 0px !important; } .cursor-pointer { cursor: pointer; } .emptyTableMessage { padding-left: 20px !important; font-family: "aeonik-regular"; } .deleteCreditorTemplate.visible { display: block !important; } .deleteCreditorTemplate.visible .ui-dialog-title { float: left !important; line-height: .8888888 !important; font-size: 24px !important; font-family: "tt-norms-regular"; width: auto !important; color: #266eff !important; float: left !important; padding-top: 0px !important; padding-bottom: 10px !important; } .deleteCreditorTemplate.visible .ui-button.ui-corner-all.ui-widget { background-image: url(images/icons/ic_strelica.png) !important; background-size: 7% !important; background-repeat: no-repeat !important; background-position: 126px 20px !important; text-align: left; } .deleteCreditorTemplate.visible .messageBoxElement.ui-widget-content { line-height: 37px !important; } .deleteCreditorTemplate.visible .ui-dialog-titlebar { padding: 32px; height: 85px; border-bottom: 1px solid #d7d8db; } .deleteCreditorTemplate.visible .ui-dialog-titlebar .ui-dialog-title { border-bottom: none; } .SMSDialog #SMSmessageDialog { width: inherit !important; } .activeWorkflowFilter .part-modal-inner { padding-bottom: 0px !important; } .activeWorkflowFilter .part-modal-inner::after { display: none !important; } .invisible { display: none !important; } .cardTurnoverContentMulti { display: block; text-align: center; margin-top: -18px; } .cardTurnoverContentMultiSec { display: block; text-align: center; margin-top: 90px; } .CardSpendings .part-modal-inner-paymentCodeMulticardSpendings { position: relative; padding-bottom: 0px; } .CardSpendings .gridFilterArea.top { top: -144px !important; } .CardSpendings .input-select-paymentCodeMulticardSpendings { width: 15% !important; } .CardSpendings .select-1 { width: 100% !important; padding: 4px 33px 7px 28px !important; max-width: 100% !important; height: 35px !important; position: relative !important; width: 100% !important; border-radius: 30px !important; cursor: pointer !important; border: 1px solid #C3CBD0 !important; background: linear-gradient(#fff 0%, #F3F6F8 100%) !important; transition: border-color .2s, border-radius .2s !important; font-size: 14px !important; } .CardSpendings .select-1::after { content: ""; width: 7px; height: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 7px; } .CardSpendings .dk-select-options.active { display: block !important; } .CardSpendings .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; padding-top: 10px; width: auto; z-index: 20; font-family: "Source-Sans-Pro", sans-serif; border-radius: 0 0 25px 25px !important; border-top: 2px solid #c3cbd0; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); } .CardSpendings .select-1.active { border-radius: 25px 25px 0 0 !important; } .CardTurnover .part-modal-inner-paymentCodeMulticard { position: relative; padding-bottom: 0px; } .CardTurnover .gridFilterArea.top { top: -144px !important; } .CardTurnover .input-select-paymentCodeMulticard { width: 15% !important; } .CardTurnover .select-1 { width: 100% !important; padding: 4px 33px 7px 28px !important; max-width: 100% !important; height: 35px !important; position: relative !important; width: 100% !important; border-radius: 30px !important; cursor: pointer !important; border: 1px solid #C3CBD0 !important; background: linear-gradient(#fff 0%, #F3F6F8 100%) !important; transition: border-color .2s, border-radius .2s !important; font-size: 14px !important; } .CardTurnover .select-1::after { content: ""; width: 7px; height: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url(images/icons/arrow-up-down.svg) 95% no-repeat; background-size: 7px; } .CardTurnover .dk-select-options.active { display: block !important; } .CardTurnover .dk-select-options { position: absolute; display: none; left: 0; right: 0; top: 100%; margin-top: -5px; position: absolute; background-color: white; border-radius: 10px; list-style: none; margin: 0; max-height: 300px; overflow-x: hidden; overflow-y: auto; padding-top: 10px; width: auto; z-index: 20; font-family: "Source-Sans-Pro", sans-serif; border-radius: 0 0 25px 25px !important; border-top: 2px solid #c3cbd0; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3); } .CardTurnover .select-1.active { border-radius: 25px 25px 0 0 !important; } .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.info-dialog.success-dialog.visible.session, .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.success-dialog.visible.session.information, .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.error-dialog.info-dialog.visible.messageBoxElement.session, .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.error-dialog.visible.messageBoxElement.session.information { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); transition: none; } .default.Html #login-header-2 { display: none; } .default.Html .activation-form-col.contaxt .inner { padding-top: 130px; /*margin-left: 23%;*/ } .default.Html .activation-form-col { /*position: fixed;*/ display: flex; /*flex-direction: column;*/ justify-content: space-between; align-items: center; /*width: 100%;*/ min-height: unset; margin: 0 0 0 auto; } .default.Html .activation-welcome-col { background-color: transparent; } .notification-list-filter-group-double { display: flex; justify-content: space-between; align-items: center; width: 100%; } .MessageHubNotificationList { margin-top: 20px; } .MessageHubNotificationList .widget-tabs { border: 0; width: 100%; position: absolute; top: 0; padding: 0; } .MessageHubNotificationList .widget-tabs:after { position: absolute; content: ""; width: 100%; height: 1px; top: 60px; left: 0; background-color: #d7d8db; visibility: visible; } .MessageHubNotificationList .widget-tabs li { padding: 6px 20px; } .MessageHubNotificationList .widget-tabs li a { color: #666696; font-family: "aeonik-regular"; font-size: 15px; } .MessageHubNotificationList .widget-tabs li:after { display: none; } .MessageHubNotificationList .widget-tabs li:hover { color: #266eff; font-family: "aeonik-bold"; border-radius: 20px; border: 2px solid; padding: 9px 16px; } .MessageHubNotificationList .widget-tabs li:hover a { font-size: 15px; color: #266eff; font-family: "aeonik-bold"; } .MessageHubNotificationList .widget-tabs li.active { color: #266eff; font-family: "aeonik-bold"; border-radius: 20px; border: 2px solid; padding: 9px 16px; } .MessageHubNotificationList .widget-tabs li.active a { font-size: 15px; color: #266eff; font-family: "aeonik-bold"; } .MessageHubNotificationList .search-message-button { width: 255px; height: 40px; border-radius: 30px; } .MessageHubNotificationList .filter-dialog-button { position: relative; border: 0; } .MessageHubNotificationList .search-filter-bar { top: 90px !important; left: 275px !important; } .MessageHubNotificationList .search-filter-bar .message-hub { width: 80%; margin-right: 16px; z-index: 99; } .MessageHubNotificationList .search-filter-bar .search-wrapper .search-icon-svg { left: 24px !important; } .MessageHubNotificationList .gvMessageList .gridFilterArea .gridFilterInput { height: 40px; padding: 11px 15px 11px 50px; } .MessageHubNotificationList .file-input-wrap.attachment { position: absolute; top: 0; right: 0; } .newMessage .part-modal-inner { padding: 0; margin: 0; border-bottom: none; } .newMessage .part-modal-inner::after { display: none; } .newMessage .part-modal-inner .input-wrap.editor { margin-bottom: 20px; } .newMessage .input-wrap.cf .texarea-1 { background-color: #fff; } .newMessage .input-wrap.cf .char-counter { font-size: 14px; font-family: "ibm-regular"; color: #75868E; margin-bottom: 0 !important; } .newMessage .input-wrap.cf .label-1 { top: 14px; } .newMessage .addAttachment p { margin-bottom: 15px !important; font-size: 18px; color: #000; } .newMessage .addAttachment div:nth-child(1) { margin: 15px 0 0 0; } .newMessage .attachment-card { border-radius: 25px; position: relative; border: 1px solid #C3CBD0; padding: 0px 48px 0 0; width: 100%; max-width: 100%; cursor: pointer; height: 50px; background-image: linear-gradient(#fff, #F3F6F8); margin: 20px 0 0 0; } .newMessage .attachment-card:nth-child(1) { margin: 15px 0 0 0; } .newMessage .attachment-card:before { display: none; } .newMessage .attachment-card span { text-transform: unset; color: #000F28; } .newMessage .attachment-card p { font-family: "aeonik-regular"; font-size: 15px; color: #000F28; border: 0; padding-left: 24px; margin-bottom: 4px !important; } .newMessage .attachment-card .icon-wrapper:after { content: ""; position: absolute; right: 48px; width: 1px; height: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #d7d8db; } .newMessage .attachment-card .icon-wrapper .close-icon-svg { width: 20px; height: 20px; color: #666696; } .newMessage .close { background-image: none; } .newMessage .select-1 { padding-top: 17px !important; } .new-message-dialog-button { position: absolute; top: 0; right: 0; z-index: 99; cursor: pointer; padding: 12px 50px 11px 23px !important; } .msgHubThreadList { margin-top: 24px; } .msgHubThreadList .message { height: 50px; background: #F3F6F8; border-radius: 12px; border: 2px solid transparent; margin-bottom: 4px; padding: 0 70px 0 109px; line-height: 50px; } .msgHubThreadList .message:hover { border: 2px solid #194137; } .msgHubThreadList .message .archive-button { border: 0; right: 12px; } .msgHubThreadList .message .archive-button::after { content: ""; position: absolute; right: 36px; top: 0; height: 30px; width: 2px; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .msgHubThreadList .title { font-family: "ibm-regular"; font-size: 15px; line-height: 16px; letter-spacing: 0px; color: #26343B; float: unset; } .msgHubThreadList .date { font-family: "ibm-regular"; font-size: 15px; line-height: 16px; letter-spacing: 0px; color: #75868E; margin-right: 10px; } .msgHubThreadList .message-icon { display: inline-block; position: absolute; left: 58px; } .msgHubThreadList .message-icon svg { stroke: unset; } .msgHubThreadList .message-icon::after { content: ""; position: absolute; left: 32px; top: 10px; height: 60%; width: 2px; background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .msgHubThreadList .custom-checkbox-2 .check { left: 20%; } .read-message h3.modal-title { font-size: 32px; font-family: "aeonik-light"; letter-spacing: -0.32px; line-height: 36px; margin-bottom: 10px; } .read-message h3.modal-title small { font-family: "aeonik-regular"; font-size: 12px; } .read-message .modal-close-button { background-image: url(images/icons/ic_menjacnica_opcije_krug.png); width: 24px; height: 24px; background-size: cover; top: 26px !important; right: 20px; } .read-message .modal-text { position: relative; font-family: "aeonik-regular"; font-size: 15px; color: #000F28; line-height: 1.33333333 !important; } .read-message .modal-text::after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #d7d8db; } .read-message .modal-att { padding-top: 24px; } .read-message .modal-att .attachment-card { border-radius: 30px; } .read-messages-list .reply { background-color: #fff; } .read-messages-list .reply .modal-inner-content { padding: 32px !important; background-color: #F0F1F5; } .read-messages-list .reply form.replyPostForm { display: flex; } .read-messages-list .reply form.replyPostForm .input-wrap { margin-bottom: 0 !important; } .read-messages-list .reply form.replyPostForm .input-wrap .texarea-1 { border-color: #d7d8db; color: #000F28; line-height: 1; font-size: 14px; } .read-messages-list .reply form.replyPostForm .input-wrap .editor.focusin .input-1.subject { padding-top: 20px !important; } .read-messages-list .reply form.replyPostForm .input-wrap .editor.focusin .label-1 { top: 7px; font-size: 12px; } .read-messages-list .reply form.replyPostForm .input-wrap .editor.focusout .label-1 { top: 17px; font-size: 14px; } .read-messages-list .reply #areaReplyMessage { padding: 21px 24px 10px; width: 370px; height: 50px; } .read-messages-list .reply .texarea-1:focus ~ .label-1 { top: 7px; font-size: 12px; } .read-messages-list .reply .reply-button { margin-top: 0; width: 50px; height: 50px; background: #266eff; border-radius: 100%; right: 30px; position: absolute; display: flex; align-items: center; justify-content: center; } .read-messages-list .reply .reply-button svg { stroke: unset; position: absolute; stroke: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; fill: #fff; color: #fff; } .read-messages-list .reply-card { border-left: 0; background-color: #266eff; border-radius: 30px 0 30px 30px; margin-bottom: 30px; } .read-messages-list .reply-card p { color: #fff; line-height: 1.2 !important; } .read-messages-list .reply-card .modal-text::after { display: none; } .read-messages-list .post:last-child .reply-card { margin-bottom: 0; } .user-img { position: relative; width: 37px; height: 37px; border-radius: 50%; overflow: hidden; background-size: 18px; } .user-img.no-profile { line-height: 37px; text-align: center; background: #F3F6F8; } .user-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .user-img img.bank-icon { width: 18px; height: 15px; } .side-modal.messages-filter #dk1-combobox { font-family: "ibm-regular"; font-size: 14px; color: #000; position: relative; bottom: 6px; } .side-modal.messages-filter #dk1-combobox .label-1 { font-size: 12px; color: #75868E; } .side-modal.messages-filter .currency-filter-box input { font-family: "aeonik-regular"; font-size: 14px; color: #000; background: transparent; } .side-modal.messages-filter .currency-filter-box .label-1 { font-family: "aeonik-regular"; font-size: 14px; color: #666696; } .side-modal.messages-filter .modal-content .part-modal-inner .input-select-3 .dk-select .dk-select-options .dk-option { padding: 10px; } .messageTemplates { position: relative; padding-top: 155px; } .messageTemplates .search-filter-bar.filter-dialog-button { width: 40px; position: absolute; top: 110px; left: 331px; } .messageTemplates .emptyTableStyle .info-img { display: block; background-image: url(images/no-acc.png); background-size: 100%; width: 100px; height: 100px; background-repeat: no-repeat; margin: 0 auto; } .messageTemplates .emptyTableStyle a { text-decoration: underline; color: #000F28; } .sender-info { column-gap: 20px; min-height: 38px; flex-direction: row-reverse; } .sender-info .user-name { line-height: 12px; } .right-chat-message .sender-info { flex-direction: row-reverse; } .chat-box { max-height: 400px; overflow: auto; padding: 20px 30px 0 30px; } .chat-box .post.bank-reply .sender-info { flex-direction: row; } .chat-box .post.bank-reply .sender-info .user-img { background-image: url("images/icons/ic_aik.png"); background-repeat: no-repeat; background-position: center; } .chat-box .post.bank-reply .reply-card { background-color: #F3F6F8; border-radius: 0 30px 30px 30px; } .chat-box .post.bank-reply .reply-card p { color: #000F28 !important; } .archive-message-hub .gvMessageList .icon-right-wrapper { display: none; } .archive-message-hub .gvMessageList .gridFilterArea { left: 0; } .archive-message-hub .checkbox.custom-checkbox-2 { display: none; } .archive-message-hub .gvMessageList .clientGrid tbody tr td:nth-child(3) { padding-left: 50px; width: 20%; } .archive-message-hub .gvMessageList .clientGrid thead tr th:nth-child(3) { padding-left: 55px; } .archive-message-hub .gvMessageList .clientGrid thead tr th:nth-child(4) { padding-left: 40px; } .archive-message-hub .chat-box { padding: 20px 30px 20px 30px; } .archive-message-hub .messageTemplates .search-filter-bar.filter-dialog-button { left: 269px; } #InstallmentDay { margin-top: 30px; } .icon-wrapper { position: absolute; width: 40px; height: 30px; right: 0; } .icon-wrapper::after { content: ""; position: absolute; right: 50px; width: 2px; height: 80%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: repeating-linear-gradient(180deg, rgba(195, 203, 208, 0.8), rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 6px); } .close-icon-svg { position: absolute; width: 23px; height: 23px; right: 13px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: color .3s; } .close-icon-svg:hover { color: #194137; } .char-counter { position: absolute; bottom: 22px; right: 24px; margin: 0; transition: color .3s; } .char-counter.over-max { color: #194137; } .upload-infomration { margin-bottom: 20px; } .read-messages-list .modal-title-2 small { font-size: 12px; color: #666696; font-family: "aeonik-regular"; } .zindex1000005 { z-index: 1000005; } .preapproved-blocks-form { text-align: center; } .preapproved-blocks-inner { display: inline-block; width: 100%; min-height: 180px; background-color: #000F28; cursor: pointer; position: relative; border-radius: 20px; text-align: left; } .preapproved-blocks-inner__content { max-width: 400px; padding-left: 220px; width: 100%; } .preapproved-blocks-inner__content h2 { padding-top: 35px; font-family: "tt-norms-regular"; color: #fff; } .preapproved-blocks-inner__content div { padding-top: 35px; } .preapproved-blocks-inner span.amount { color: #fff; font-family: "tt-norms-regular"; } .preapproved-blocks-inner span.period { color: #fff; font-family: "tt-norms-regular"; } .preapproved-blocks-inner span { text-align: left; color: #266eff; padding: 5px; font-family: "aeonik-bold"; } .preapproved-blocks-inner svg { width: 35px; height: 35px; float: right; position: relative; right: 20px; bottom: 10px; color: #f21844; } .ips-message { padding-left: 25px; font-size: 12px; color: #666696; } .notification-counter { position: absolute; font-size: 0.8em; } .word-break { word-wrap: break-word; } .ml-20 { margin-left: 20px !important; } .border-bottom { border-bottom: 1px solid #d7d8db; padding-bottom: 14px; } .editCreditorManagerName .modal-content .input-wrapper .input-1 { border-color: #d7d8db; } .editCreditorManagerName .modal-footer .buttons-wrapper .btn-1 { font-size: 15px; font-family: "aeonik-medium"; } .editCreditorManagerName .modal-footer .buttons-wrapper .btn-1.color-2 { background-color: #fff; color: #266eff; } .editCreditorManagerName .modal-footer .buttons-wrapper .btn-1.color-2:hover { background-color: #e6e6e6; } .editCreditorManagerName .modal-footer .buttons-wrapper .btn-1.color-1 { background-color: #266eff; color: #fff; } .editCreditorManagerName .modal-footer .buttons-wrapper .btn-1.color-1:hover { background-color: #0050f2; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-header { padding: 29px 75px 25px 32px; background-color: #F0F1F5; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-header .title-5 { line-height: 1.2; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .border-bottom-wrapper { margin-bottom: 32px; madding-bottom: 32px; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .border-bottom-wrapper .modal-card-wrapper .payments-card-img-wrapper { position: absolute; width: 88px; height: 127px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url(images/card-decor.png) 0 0 no-repeat; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .border-bottom-wrapper .modal-card-wrapper .mini-card-wrapper { position: absolute; width: 64px; height: 40px; top: 44px; right: 25px; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .border-bottom-wrapper .modal-card-wrapper .mini-card-wrapper .card-img { width: 64px; height: 40px; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .input-select-payment2 .dk-select-options { font-size: 15px; font-family: "aeonik-regular"; color: #000F28; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .input-select-payment2 .dk-select-options .dk-option:hover { background-color: #F3F6F8; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .input-wrapper.with-text-right { padding-bottom: 32px; border-bottom: 1px solid #d7d8db; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-content-inner .input-wrapper.with-text-right .input-wrapper-inner .input-1 { min-height: 50px; font-family: "ibm-bold"; } .cardPaymemtPopup .modal-wrapper .modal-wrapper-inner .modal-footer .btn-1 { font-size: 15px; font-family: "aeonik-medium"; line-height: 1.214285; letter-spacing: -0.02em; } .blue-box-info { background-color: #fff; border: 1px solid #266eff; border-radius: 12px; padding: 12px 16px; font-size: 14px; } .blue-box-info .info-header { display: flex; align-items: flex-start; gap: 12px; } .blue-box-info .info_icon { background-size: contain; background-image: url(images/icons/info-icon.png); background-repeat: no-repeat; width: 90px; height: 35px; } .sca_timer_dialog_title { font-weight: bold; margin-bottom: 20px; } .sca_timer_dialog_text { text-align: center; line-height: 1.5; margin-bottom: 20px; font-size: 13px; } .sca_timer_dialog_timeot { background-color: #118DB8; color: #FFF; padding: 10px 20px; border-radius: 4px; display: inline-flex; align-items: center; font-weight: 500; margin-bottom: 20px; } .sca_timer_dialog_timeot_icon { background-size: contain; background-image: url(images/icons/timer_icon.png); background-repeat: no-repeat; width: 22px; height: 22px; } .sca_timer_dialog_cancel { margin-top: 15px; background-color: white; border: 1px solid #ccc; padding: 10px 50px; cursor: pointer; font-size: 16px; } .to-title.ui-dialog ui-dialog-titlebar.ui-widget-header { display: none; } /* colors */ /*#region fonts*/ @font-face { font-family: "futura"; src: url("fonts/Futura-Roman.eot"); src: url("fonts/Futura-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Roman.woff") format("woff"), url("fonts/Futura-Roman.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "futura"; src: url("fonts/Futura-Dem.eot"); src: url("fonts/Futura-Dem.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Dem.woff") format("woff"), url("fonts/Futura-Dem.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "futura"; src: url("fonts/Futura-Bold.eot"); src: url("fonts/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Bold.woff") format("woff"), url("fonts/Futura-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "futura"; src: url("fonts/Futura-ExtraBold.eot"); src: url("fonts/Futura-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-ExtraBold.woff") format("woff"), url("fonts/Futura-ExtraBold.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-regular"; src: url("fonts/aeonik-regular.woff"); src: url("fonts/aeonik-regular.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-regular.woff") format("woff"), url("fonts/aeonik-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-light"; src: url("fonts/aeonik-light.woff"); src: url("fonts/aeonik-light.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-light.woff") format("woff"), url("fonts/aeonik-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-bold"; src: url("fonts/aeonik-bold.woff"); src: url("fonts/aeonik-bold.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-bold.woff") format("woff"), url("fonts/aeonik-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "aeonik-medium"; src: url("fonts/aeonik-medium.woff"); src: url("fonts/aeonik-medium.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-medium.woff") format("woff"), url("fonts/aeonik-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-bold"; src: url("fonts/ibmplexsans-bold.woff"); src: url("fonts/ibmplexsans-bold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-bold.woff") format("woff"), url("fonts/ibmplexsans-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-light"; src: url("fonts/ibmplexsans-light.woff"); src: url("fonts/ibmplexsans-light.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-light.woff") format("woff"), url("fonts/ibmplexsans-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-medium"; src: url("fonts/ibmplexsans-medium.woff"); src: url("fonts/ibmplexsans-medium.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-medium.woff") format("woff"), url("fonts/ibmplexsans-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-regular"; src: url("fonts/ibmplexsans-regular.woff"); src: url("fonts/ibmplexsans-regular.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "ibm-semibold"; src: url("fonts/ibmplexsans-semibold.woff"); src: url("fonts/ibmplexsans-semibold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-semibold.woff") format("woff"), url("fonts/ibmplexsans-semibold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "tt-norms-regular"; src: url("fonts/TT_Norms_Pro_Serif_Regular.woff"); src: url("fonts/TT_Norms_Pro_Serif_Regular.woff?#iefix") format("embedded-opentype"), url("fonts/TT_Norms_Pro_Serif_Regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } /*#endregion fonts*/ @media only screen and (min-width: 961px) { .logo { position: static; width: 450px; height: 80px; background: url("images/logo.png") no-repeat; margin-top: 30px; margin-left: 20px; } .main-menu { position: static; width: auto; margin: 0; } .s-portal-menu { width: 100%; } .userInfoContent { display: block; } .userinfo .s-widget-body { width: auto; height: 100%; } .userinfo .s-widget-header { display: none; } .userInfoPopoverPlaceholder { display: none; } .s-portal-menu > .sf-menu { display: block; } .s-portal-menu > .slicknav_menu { display: none; } .UserInfo div.loginControls { border-top-right-radius: 10px; border-top-left-radius: 10px; } } /*# sourceMappingURL=theme.desktop.css.map */ /*! UIkit 2.26.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ /* ======================================================================== Component: Base ========================================================================== */ /* * 1. Normalize default `font-family` and set `font-size` to support `rem` units * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom * 3. Style */ /* Fix viewport for IE10 snap mode ========================================================================== */ @media screen and (max-width: 400px) { @-ms-viewport { width: device-width; } } /* ======================================================================== Component: Grid ========================================================================== */ /* * 1. Makes grid more robust so that it can be used with other block elements like lists */ .uk-grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin: 0; padding: 0; list-style: none; } /* * DEPRECATED * Micro clearfix * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit */ .uk-grid:before, .uk-grid:after { content: ""; display: block; overflow: hidden; } .uk-grid:after { clear: both; } /* * Grid cell * 1. Space is allocated solely based on content dimensions * 2. Makes grid more robust so that it can be used with other block elements * 3. DEPRECATED Using `float` to support IE9 */ .uk-grid > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ margin: 0; /* 3 */ float: left; } /* * Remove margin from the last-child */ .uk-grid > * > :last-child { // margin-bottom: 0; } /* Grid gutter ========================================================================== */ /* * Default gutter */ /* Horizontal */ .uk-grid { margin-left: -25px; } .uk-grid > * { padding-left: 25px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel { // margin-top: 25px; } /* Large screen and bigger */ @media (min-width: 1220px) { /* Horizontal */ .uk-grid { margin-left: -35px; } .uk-grid > * { padding-left: 35px; } /* Vertical */ .uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel { // margin-top: 35px; } } /* * Collapse gutter */ /* Horizontal */ .uk-grid-collapse { margin-left: 0; } .uk-grid-collapse > * { padding-left: 0; } /* Vertical */ .uk-grid-collapse + .uk-grid-collapse, .uk-grid-collapse > .uk-grid-margin, .uk-grid-collapse > * > .uk-panel + .uk-panel { margin-top: 0; } /* * Small gutter */ /* Horizontal */ .uk-grid-small { margin-left: -10px; } .uk-grid-small > * { padding-left: 10px; } /* Vertical */ .uk-grid-small + .uk-grid-small, .uk-grid-small > .uk-grid-margin, .uk-grid-small > * > .uk-panel + .uk-panel { margin-top: 10px; } /* * Medium gutter */ /* Horizontal */ .uk-grid-medium { margin-left: -25px; } .uk-grid-medium > * { padding-left: 25px; } /* Vertical */ .uk-grid-medium + .uk-grid-medium, .uk-grid-medium > .uk-grid-margin, .uk-grid-medium > * > .uk-panel + .uk-panel { margin-top: 25px; } /* * Large gutter */ /* Large screen and bigger */ @media (min-width: 960px) { /* Horizontal */ .uk-grid-large { margin-left: -35px; } .uk-grid-large > * { padding-left: 35px; } /* Vertical */ .uk-grid-large + .uk-grid-large, .uk-grid-large-margin, .uk-grid-large > * > .uk-panel + .uk-panel { margin-top: 35px; } } /* Extra Large screens */ @media (min-width: 1220px) { /* Horizontal */ .uk-grid-large { margin-left: -50px; } .uk-grid-large > * { padding-left: 50px; } /* Vertical */ .uk-grid-large + .uk-grid-large, .uk-grid-large-margin, .uk-grid-large > * > .uk-panel + .uk-panel { margin-top: 50px; } } /* Modifier: `uk-grid-divider` ========================================================================== */ /* * Horizontal divider * Only works with the default gutter. Does not work with gutter collapse, small or large. * Does not work with `uk-push-*`, `uk-pull-*` and not if the columns float into the next row. */ .uk-grid-divider:not(:empty) { margin-left: -25px; margin-right: -25px; } .uk-grid-divider > * { padding-left: 25px; padding-right: 25px; } .uk-grid-divider > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2), .uk-grid-divider > [class*='uk-width-2-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-3-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-4-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-5-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-6-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-7-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-8-']:nth-child(n+2), .uk-grid-divider > [class*='uk-width-9-']:nth-child(n+2) { border-left: 1px solid #dddddd; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-grid-divider > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) { border-left: 1px solid #dddddd; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-grid-divider > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) { border-left: 1px solid #dddddd; } } /* Large screen and bigger */ @media (min-width: 1220px) { /* * Large gutter */ .uk-grid-divider:not(:empty) { margin-left: -35px; margin-right: -35px; } .uk-grid-divider > * { padding-left: 35px; padding-right: 35px; } .uk-grid-divider:empty { margin-top: 35px; margin-bottom: 35px; } } /* * Vertical divider */ .uk-grid-divider:empty { margin-top: 25px; margin-bottom: 25px; border-top: 1px solid #dddddd; } /* Match panels in grids ========================================================================== */ /* * 1. Behave like a block element */ .uk-grid-match > * { display: -ms-flexbox; display: -webkit-flex; display: flex; /* 1 */ -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .uk-grid-match > * > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; box-sizing: border-box; width: 100%; } /* Even grid cell widths ========================================================================== */ [class*='uk-grid-width'] > * { box-sizing: border-box; width: 100%; } .uk-grid-width-1-2 > * { width: 50%; } .uk-grid-width-1-3 > * { width: 33.333%; } .uk-grid-width-1-4 > * { width: 25%; } .uk-grid-width-1-5 > * { width: 20%; } .uk-grid-width-1-6 > * { width: 16.666%; } .uk-grid-width-1-10 > * { width: 10%; } .uk-grid-width-auto > * { width: auto; } /* Phone landscape and bigger */ @media (min-width: 480px) { .uk-grid-width-small-1-1 > * { width: 100%; } .uk-grid-width-small-1-2 > * { width: 50%; } .uk-grid-width-small-1-3 > * { width: 33.333%; } .uk-grid-width-small-1-4 > * { width: 25%; } .uk-grid-width-small-1-5 > * { width: 20%; } .uk-grid-width-small-1-6 > * { width: 16.666%; } .uk-grid-width-small-1-10 > * { width: 10%; } } /* Tablet and bigger */ @media (min-width: 768px) { .uk-grid-width-medium-1-1 > * { width: 100%; } .uk-grid-width-medium-1-2 > * { width: 50%; } .uk-grid-width-medium-1-3 > * { width: 33.333%; } .uk-grid-width-medium-1-4 > * { width: 25%; } .uk-grid-width-medium-1-5 > * { width: 20%; } .uk-grid-width-medium-1-6 > * { width: 16.666%; } .uk-grid-width-medium-1-10 > * { width: 10%; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-grid-width-large-1-1 > * { width: 100%; } .uk-grid-width-large-1-2 > * { width: 50%; } .uk-grid-width-large-1-3 > * { width: 33.333%; } .uk-grid-width-large-1-4 > * { width: 25%; } .uk-grid-width-large-1-5 > * { width: 20%; } .uk-grid-width-large-1-6 > * { width: 16.666%; } .uk-grid-width-large-1-10 > * { width: 10%; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-grid-width-xlarge-1-1 > * { width: 100%; } .uk-grid-width-xlarge-1-2 > * { width: 50%; } .uk-grid-width-xlarge-1-3 > * { width: 33.333%; } .uk-grid-width-xlarge-1-4 > * { width: 25%; } .uk-grid-width-xlarge-1-5 > * { width: 20%; } .uk-grid-width-xlarge-1-6 > * { width: 16.666%; } .uk-grid-width-xlarge-1-10 > * { width: 10%; } } /* Sub-objects: `uk-width-*` ========================================================================== */ [class*='uk-width'] { box-sizing: border-box; width: 100%; } /* * Widths */ /* Whole */ .uk-width-1-1 { width: 100%; } /* Halves */ .uk-width-1-2, .uk-width-2-4, .uk-width-3-6, .uk-width-5-10 { width: 50%; } /* Thirds */ .uk-width-1-3, .uk-width-2-6 { width: 33.333%; } .uk-width-2-3, .uk-width-4-6 { width: 66.666%; } /* Quarters */ .uk-width-1-4 { width: 25%; } .uk-width-3-4 { width: 75%; } /* Fifths */ .uk-width-1-5, .uk-width-2-10 { width: 20%; } .uk-width-2-5, .uk-width-4-10 { width: 40%; } .uk-width-3-5, .uk-width-6-10 { width: 60%; } .uk-width-4-5, .uk-width-8-10 { width: 80%; } /* Sixths */ .uk-width-1-6 { width: 16.666%; } .uk-width-5-6 { width: 83.333%; } /* Tenths */ .uk-width-1-10 { width: 10%; } .uk-width-3-10 { width: 30%; } .uk-width-7-10 { width: 70%; } .uk-width-9-10 { width: 90%; } /* Phone landscape and bigger */ @media (min-width: 480px) { /* Whole */ .uk-width-small-1-1 { width: 100%; } /* Halves */ .uk-width-small-1-2, .uk-width-small-2-4, .uk-width-small-3-6, .uk-width-small-5-10 { width: 50%; } /* Thirds */ .uk-width-small-1-3, .uk-width-small-2-6 { width: 33.333%; } .uk-width-small-2-3, .uk-width-small-4-6 { width: 66.666%; } /* Quarters */ .uk-width-small-1-4 { width: 25%; } .uk-width-small-3-4 { width: 75%; } /* Fifths */ .uk-width-small-1-5, .uk-width-small-2-10 { width: 20%; } .uk-width-small-2-5, .uk-width-small-4-10 { width: 40%; } .uk-width-small-3-5, .uk-width-small-6-10 { width: 60%; } .uk-width-small-4-5, .uk-width-small-8-10 { width: 80%; } /* Sixths */ .uk-width-small-1-6 { width: 16.666%; } .uk-width-small-5-6 { width: 83.333%; } /* Tenths */ .uk-width-small-1-10 { width: 10%; } .uk-width-small-3-10 { width: 30%; } .uk-width-small-7-10 { width: 70%; } .uk-width-small-9-10 { width: 90%; } } /* Tablet and bigger */ @media (min-width: 768px) { /* Whole */ .uk-width-medium-1-1 { width: 100%; } /* Halves */ .uk-width-medium-1-2, .uk-width-medium-2-4, .uk-width-medium-3-6, .uk-width-medium-5-10 { width: 50%; } /* Thirds */ .uk-width-medium-1-3, .uk-width-medium-2-6 { width: 33.333%; } .uk-width-medium-2-3, .uk-width-medium-4-6 { width: 66.666%; } /* Quarters */ .uk-width-medium-1-4 { width: 25%; } .uk-width-medium-3-4 { width: 75%; } /* Fifths */ .uk-width-medium-1-5, .uk-width-medium-2-10 { width: 20%; } .uk-width-medium-2-5, .uk-width-medium-4-10 { width: 40%; } .uk-width-medium-3-5, .uk-width-medium-6-10 { width: 60%; } .uk-width-medium-4-5, .uk-width-medium-8-10 { width: 80%; } /* Sixths */ .uk-width-medium-1-6 { width: 16.666%; } .uk-width-medium-5-6 { width: 83.333%; } /* Tenths */ .uk-width-medium-1-10 { width: 10%; } .uk-width-medium-3-10 { width: 30%; } .uk-width-medium-7-10 { width: 70%; } .uk-width-medium-9-10 { width: 90%; } } /* Desktop and bigger */ @media (min-width: 960px) { /* Whole */ .uk-width-large-1-1 { width: 100%; } /* Halves */ .uk-width-large-1-2, .uk-width-large-2-4, .uk-width-large-3-6, .uk-width-large-5-10 { width: 50%; } /* Thirds */ .uk-width-large-1-3, .uk-width-large-2-6 { width: 33.333%; } .uk-width-large-2-3, .uk-width-large-4-6 { width: 66.666%; } /* Quarters */ .uk-width-large-1-4 { width: 25%; } .uk-width-large-3-4 { width: 75%; } /* Fifths */ .uk-width-large-1-5, .uk-width-large-2-10 { width: 20%; } .uk-width-large-2-5, .uk-width-large-4-10 { width: 40%; } .uk-width-large-3-5, .uk-width-large-6-10 { width: 60%; } .uk-width-large-4-5, .uk-width-large-8-10 { width: 80%; } /* Sixths */ .uk-width-large-1-6 { width: 16.666%; } .uk-width-large-5-6 { width: 83.333%; } /* Tenths */ .uk-width-large-1-10 { width: 10%; } .uk-width-large-3-10 { width: 30%; } .uk-width-large-7-10 { width: 70%; } .uk-width-large-9-10 { width: 90%; } } /* Large screen and bigger */ @media (min-width: 1220px) { /* Whole */ .uk-width-xlarge-1-1 { width: 100%; } /* Halves */ .uk-width-xlarge-1-2, .uk-width-xlarge-2-4, .uk-width-xlarge-3-6, .uk-width-xlarge-5-10 { width: 50%; } /* Thirds */ .uk-width-xlarge-1-3, .uk-width-xlarge-2-6 { width: 33.333%; } .uk-width-xlarge-2-3, .uk-width-xlarge-4-6 { width: 66.666%; } /* Quarters */ .uk-width-xlarge-1-4 { width: 25%; } .uk-width-xlarge-3-4 { width: 75%; } /* Fifths */ .uk-width-xlarge-1-5, .uk-width-xlarge-2-10 { width: 20%; } .uk-width-xlarge-2-5, .uk-width-xlarge-4-10 { width: 40%; } .uk-width-xlarge-3-5, .uk-width-xlarge-6-10 { width: 60%; } .uk-width-xlarge-4-5, .uk-width-xlarge-8-10 { width: 80%; } /* Sixths */ .uk-width-xlarge-1-6 { width: 16.666%; } .uk-width-xlarge-5-6 { width: 83.333%; } /* Tenths */ .uk-width-xlarge-1-10 { width: 10%; } .uk-width-xlarge-3-10 { width: 30%; } .uk-width-xlarge-7-10 { width: 70%; } .uk-width-xlarge-9-10 { width: 90%; } } /* Sub-object: `uk-push-*` and `uk-pull-*` ========================================================================== */ /* * Source ordering * Works only with `uk-width-medium-*` */ /* Tablet and bigger */ @media (min-width: 768px) { [class*='uk-push-'], [class*='uk-pull-'] { position: relative; } /* * Push */ /* Halves */ .uk-push-1-2, .uk-push-2-4, .uk-push-3-6, .uk-push-5-10 { left: 50%; } /* Thirds */ .uk-push-1-3, .uk-push-2-6 { left: 33.333%; } .uk-push-2-3, .uk-push-4-6 { left: 66.666%; } /* Quarters */ .uk-push-1-4 { left: 25%; } .uk-push-3-4 { left: 75%; } /* Fifths */ .uk-push-1-5, .uk-push-2-10 { left: 20%; } .uk-push-2-5, .uk-push-4-10 { left: 40%; } .uk-push-3-5, .uk-push-6-10 { left: 60%; } .uk-push-4-5, .uk-push-8-10 { left: 80%; } /* Sixths */ .uk-push-1-6 { left: 16.666%; } .uk-push-5-6 { left: 83.333%; } /* Tenths */ .uk-push-1-10 { left: 10%; } .uk-push-3-10 { left: 30%; } .uk-push-7-10 { left: 70%; } .uk-push-9-10 { left: 90%; } /* * Pull */ /* Halves */ .uk-pull-1-2, .uk-pull-2-4, .uk-pull-3-6, .uk-pull-5-10 { left: -50%; } /* Thirds */ .uk-pull-1-3, .uk-pull-2-6 { left: -33.333%; } .uk-pull-2-3, .uk-pull-4-6 { left: -66.666%; } /* Quarters */ .uk-pull-1-4 { left: -25%; } .uk-pull-3-4 { left: -75%; } /* Fifths */ .uk-pull-1-5, .uk-pull-2-10 { left: -20%; } .uk-pull-2-5, .uk-pull-4-10 { left: -40%; } .uk-pull-3-5, .uk-pull-6-10 { left: -60%; } .uk-pull-4-5, .uk-pull-8-10 { left: -80%; } /* Sixths */ .uk-pull-1-6 { left: -16.666%; } .uk-pull-5-6 { left: -83.333%; } /* Tenths */ .uk-pull-1-10 { left: -10%; } .uk-pull-3-10 { left: -30%; } .uk-pull-7-10 { left: -70%; } .uk-pull-9-10 { left: -90%; } } /* ======================================================================== Component: Panel ========================================================================== */ /* * 1. Needed for `a` elements * 2. Create position context for badges */ .uk-panel { /* 1 */ display: block; /* 2 */ position: relative; } /* * Allow panels to be anchors */ .uk-panel, .uk-panel:hover { text-decoration: none; } /* * Micro clearfix to make panels more robust */ .uk-panel:before, .uk-panel:after { content: ""; display: table; } .uk-panel:after { clear: both; } /* * Remove margin from the last-child if not `uk-widget-title` */ .uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; } /* Sub-object: `uk-panel-title` ========================================================================== */ .uk-panel-title { margin-top: 0; margin-bottom: 15px; font-size: 18px; line-height: 24px; font-weight: normal; text-transform: none; color: #444444; } /* Sub-object: `uk-panel-badge` ========================================================================== */ .uk-panel-badge { position: absolute; top: 0; right: 0; z-index: 1; } /* Sub-object: `uk-panel-teaser` ========================================================================== */ .uk-panel-teaser { margin-bottom: 15px; } /* Sub-object: `uk-panel-body` ========================================================================== */ .uk-panel-body { padding: 15px; } /* Modifier: `uk-panel-box` ========================================================================== */ .uk-panel-box { padding: 15px; background: #f5f5f5; color: #444444; } .uk-panel-box-hover:hover { color: #444444; } .uk-panel-box .uk-panel-title { color: #444444; } .uk-panel-box .uk-panel-badge { top: 10px; right: 10px; } .uk-panel-box > .uk-panel-teaser { margin-top: -15px; margin-left: -15px; margin-right: -15px; } /* * Nav in panel */ .uk-panel-box > .uk-nav-side { margin: 0 -15px; } /* * Sub-modifier: `uk-panel-box-primary` */ .uk-panel-box-primary { background-color: #ebf7fd; color: #2d7091; } .uk-panel-box-primary-hover:hover { color: #2d7091; } .uk-panel-box-primary .uk-panel-title { color: #2d7091; } /* * Sub-modifier: `uk-panel-box-secondary` */ .uk-panel-box-secondary { background-color: #eeeeee; color: #444444; } .uk-panel-box-secondary-hover:hover { color: #444444; } .uk-panel-box-secondary .uk-panel-title { color: #444444; } /* Modifier: `uk-panel-hover` ========================================================================== */ .uk-panel-hover { padding: 15px; color: #444444; } .uk-panel-hover:hover { background: #f5f5f5; color: #444444; } .uk-panel-hover .uk-panel-badge { top: 10px; right: 10px; } .uk-panel-hover > .uk-panel-teaser { margin-top: -15px; margin-left: -15px; margin-right: -15px; } /* Modifier: `uk-panel-header` ========================================================================== */ .uk-panel-header .uk-panel-title { padding-bottom: 10px; border-bottom: 1px solid #dddddd; color: #444444; } /* Modifier: `uk-panel-space` ========================================================================== */ .uk-panel-space { padding: 30px; } .uk-panel-space .uk-panel-badge { top: 30px; right: 30px; } /* Modifier: `uk-panel-divider` ========================================================================== */ .uk-panel + .uk-panel-divider { margin-top: 50px !important; } .uk-panel + .uk-panel-divider:before { content: ""; display: block; position: absolute; top: -25px; left: 0; right: 0; border-top: 1px solid #dddddd; } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-panel + .uk-panel-divider { margin-top: 70px !important; } .uk-panel + .uk-panel-divider:before { top: -35px; } } /* ======================================================================== Component: Block ========================================================================== */ .uk-block { position: relative; box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; } /* Phone landscape and bigger */ @media (min-width: 768px) { .uk-block { padding-top: 50px; padding-bottom: 50px; } } /* * Micro clearfix to make blocks more robust */ .uk-block:before, .uk-block:after { content: ""; display: table; } .uk-block:after { clear: both; } /* * Remove margin from the last-child */ .uk-block > :last-child { margin-bottom: 0; } /* Padding Modifier ========================================================================== */ /* * Large padding */ .uk-block-large { padding-top: 20px; padding-bottom: 20px; } /* Tablets and bigger */ @media (min-width: 768px) { .uk-block-large { padding-top: 50px; padding-bottom: 50px; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-block-large { padding-top: 100px; padding-bottom: 100px; } } /* Color Modifier ========================================================================== */ /* * Default */ .uk-block-default { background: #ffffff; } /* * Muted */ .uk-block-muted { background: #f9f9f9; } /* * Primary */ .uk-block-primary { background: #00a8e6; } /* * Secondary */ .uk-block-secondary { background: #222222; } /* * Adjust padding between equal colored blocks */ .uk-block-default + .uk-block-default, .uk-block-muted + .uk-block-muted, .uk-block-primary + .uk-block-primary, .uk-block-secondary + .uk-block-secondary { padding-top: 0; } /* ======================================================================== Component: Article ========================================================================== */ /* * Micro clearfix to make articles more robust */ .uk-article:before, .uk-article:after { content: ""; display: table; } .uk-article:after { clear: both; } /* * Remove margin from the last-child */ .uk-article > :last-child { margin-bottom: 0; } /* * Vertical gutter for articles */ .uk-article + .uk-article { margin-top: 25px; } /* Sub-object `uk-article-title` ========================================================================== */ .uk-article-title { font-size: 36px; line-height: 42px; font-weight: normal; text-transform: none; } .uk-article-title a { color: inherit; text-decoration: none; } /* Sub-object `uk-article-meta` ========================================================================== */ .uk-article-meta { font-size: 12px; line-height: 18px; color: #999999; } /* Sub-object `uk-article-lead` ========================================================================== */ .uk-article-lead { color: #444444; font-size: 18px; line-height: 24px; font-weight: normal; } /* Sub-object `uk-article-divider` ========================================================================== */ .uk-article-divider { margin-bottom: 25px; border-color: #dddddd; } * + .uk-article-divider { margin-top: 25px; } /* ======================================================================== Component: Comment ========================================================================== */ /* Sub-object `uk-comment-header` ========================================================================== */ .uk-comment-header { margin-bottom: 15px; } /* * Micro clearfix */ .uk-comment-header:before, .uk-comment-header:after { content: ""; display: table; } .uk-comment-header:after { clear: both; } /* Sub-object `uk-comment-avatar` ========================================================================== */ .uk-comment-avatar { margin-right: 15px; float: left; } /* Sub-object `uk-comment-title` ========================================================================== */ .uk-comment-title { margin: 5px 0 0 0; font-size: 16px; line-height: 22px; } /* Sub-object `uk-comment-meta` ========================================================================== */ .uk-comment-meta { margin: 2px 0 0 0; font-size: 11px; line-height: 16px; color: #999999; } /* Sub-object `uk-comment-body` ========================================================================== */ /* * Remove margin from the last-child */ .uk-comment-body > :last-child { margin-bottom: 0; } /* Sub-object `uk-comment-list` ========================================================================== */ .uk-comment-list { padding: 0; list-style: none; } .uk-comment-list .uk-comment + ul { margin: 15px 0 0 0; list-style: none; } .uk-comment-list > li:nth-child(n+2), .uk-comment-list .uk-comment + ul > li:nth-child(n+2) { margin-top: 15px; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-comment-list .uk-comment + ul { padding-left: 100px; } } /* Modifier `uk-comment-primary` ========================================================================== */ /* ======================================================================== Component: Cover ========================================================================== */ /* * Background image always covers and centers its element */ .uk-cover-background { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } /* * Emulates image cover, works with video and image elements * 1. Parent container which clips resized object * 2. Resizes the object to always covers its container * 3. Reset the responsive image CSS * 4. Center object */ /* 1 */ .uk-cover { overflow: hidden; } .uk-cover-object { /* 2 */ width: auto; height: auto; min-width: 100%; min-height: 100%; /* 3 */ max-width: none; /* 4 */ position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* * To center iframes use `data-uk-cover` JavaScript */ [data-uk-cover] { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ======================================================================== Component: Nav ========================================================================== */ .uk-nav, .uk-nav ul { margin: 0; padding: 0; list-style: none; } /* * Items */ .uk-nav li > a { display: block; text-decoration: none; } .uk-nav > li > a { padding: 5px 15px; } /* * Nested items */ .uk-nav ul { padding-left: 15px; } .uk-nav ul a { padding: 2px 0; } /* * Item subtitle */ .uk-nav li > a > div { font-size: 12px; line-height: 18px; } /* Sub-object: `uk-nav-header` ========================================================================== */ .uk-nav-header { padding: 5px 15px; text-transform: uppercase; font-weight: bold; font-size: 12px; } .uk-nav-header:not(:first-child) { margin-top: 15px; } /* Sub-object: `uk-nav-divider` ========================================================================== */ .uk-nav-divider { margin: 9px 15px; } /* Sub-object: `uk-nav-sub` ========================================================================== */ /* * `ul` needed for higher specificity to override padding */ ul.uk-nav-sub { padding: 5px 0 5px 15px; } /* Modifier: `uk-nav-parent-icon` ========================================================================== */ .uk-nav-parent-icon > .uk-parent > a:after { content: "\f104"; width: 20px; margin-right: -10px; float: right; font-family: FontAwesome; text-align: center; } .uk-nav-parent-icon > .uk-parent.uk-open > a:after { content: "\f107"; } /* Modifier `uk-nav-side` ========================================================================== */ /* * Items */ .uk-nav-side > li > a { color: #444444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-side > li > a:hover, .uk-nav-side > li > a:focus { background: rgba(0, 0, 0, 0.05); color: #444444; /* 2 */ outline: none; } /* Active */ .uk-nav-side > li.uk-active > a { background: #00a8e6; color: #ffffff; } /* * Sub-object: `uk-nav-header` */ .uk-nav-side .uk-nav-header { color: #444444; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-side .uk-nav-divider { border-top: 1px solid #dddddd; } /* * Nested items */ .uk-nav-side ul a { color: #0077dd; } .uk-nav-side ul a:hover { color: #005599; } /* Modifier `uk-nav-dropdown` ========================================================================== */ /* * Items */ .uk-nav-dropdown > li > a { color: #444444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-dropdown > li > a:hover, .uk-nav-dropdown > li > a:focus { background: #00a8e6; color: #ffffff; /* 2 */ outline: none; } /* * Sub-object: `uk-nav-header` */ .uk-nav-dropdown .uk-nav-header { color: #999999; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-dropdown .uk-nav-divider { border-top: 1px solid #dddddd; } /* * Nested items */ .uk-nav-dropdown ul a { color: #0077dd; } .uk-nav-dropdown ul a:hover { color: #005599; } /* Modifier `uk-nav-navbar` ========================================================================== */ /* * Items */ .uk-nav-navbar > li > a { color: #444444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-navbar > li > a:hover, .uk-nav-navbar > li > a:focus { background: #00a8e6; color: #ffffff; /* 2 */ outline: none; } /* * Sub-object: `uk-nav-header` */ .uk-nav-navbar .uk-nav-header { color: #999999; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-navbar .uk-nav-divider { border-top: 1px solid #dddddd; } /* * Nested items */ .uk-nav-navbar ul a { color: #0077dd; } .uk-nav-navbar ul a:hover { color: #005599; } /* Modifier `uk-nav-offcanvas` ========================================================================== */ /* * Items */ .uk-nav-offcanvas > li > a { color: #cccccc; padding: 10px 15px; } /* * Hover * No hover on touch devices because it behaves buggy in fixed offcanvas * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-nav-offcanvas > .uk-open > a, html:not(.uk-touch) .uk-nav-offcanvas > li > a:hover, html:not(.uk-touch) .uk-nav-offcanvas > li > a:focus { background: #404040; color: #ffffff; /* 2 */ outline: none; } /* * Active * `html .uk-nav` needed for higher specificity to override hover */ html .uk-nav.uk-nav-offcanvas > li.uk-active > a { background: #1a1a1a; color: #ffffff; } /* * Sub-object: `uk-nav-header` */ .uk-nav-offcanvas .uk-nav-header { color: #777777; } /* * Sub-object: `uk-nav-divider` */ .uk-nav-offcanvas .uk-nav-divider { border-top: 1px solid #1a1a1a; } /* * Nested items * No hover on touch devices because it behaves buggy in fixed offcanvas */ .uk-nav-offcanvas ul a { color: #cccccc; } html:not(.uk-touch) .uk-nav-offcanvas ul a:hover { color: #ffffff; } /* ======================================================================== Component: Navbar ========================================================================== */ .uk-navbar { background: #eeeeee; color: #444444; } /* * Micro clearfix */ .uk-navbar:before, .uk-navbar:after { content: ""; display: table; } .uk-navbar:after { clear: both; } /* Sub-object: `uk-navbar-nav` ========================================================================== */ .uk-navbar-nav { margin: 0; padding: 0; list-style: none; float: left; } /* * 1. Create position context for dropdowns */ .uk-navbar-nav > li { float: left; /* 1 */ position: relative; } /* * 1. Dimensions * 2. Style */ .uk-navbar-nav > li > a { display: block; box-sizing: border-box; text-decoration: none; /* 1 */ height: 40px; padding: 0 15px; line-height: 40px; /* 2 */ color: #444444; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } /* Appear not as link */ .uk-navbar-nav > li > a[href='#'] { cursor: text; } /* * Hover * 1. Apply hover style also to focus state * 2. Also apply if dropdown is opened * 3. Remove default focus style */ .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li.uk-open > a { background-color: #f5f5f5; color: #444444; /* 3 */ outline: none; } /* OnClick */ .uk-navbar-nav > li > a:active { background-color: #dddddd; color: #444444; } /* Active */ .uk-navbar-nav > li.uk-active > a { background-color: #f5f5f5; color: #444444; } /* Sub-objects: `uk-navbar-nav-subtitle` ========================================================================== */ .uk-navbar-nav .uk-navbar-nav-subtitle { line-height: 28px; } .uk-navbar-nav-subtitle > div { margin-top: -6px; font-size: 10px; line-height: 12px; } /* Sub-objects: `uk-navbar-content`, `uk-navbar-brand`, `uk-navbar-toggle` ========================================================================== */ /* * Imitate navbar items */ .uk-navbar-content, .uk-navbar-brand, .uk-navbar-toggle { box-sizing: border-box; display: block; height: 40px; padding: 0 15px; float: left; } /* * Helper to center all child elements vertically */ .uk-navbar-content:before, .uk-navbar-brand:before, .uk-navbar-toggle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* Sub-objects: `uk-navbar-content` ========================================================================== */ /* * Better sibling spacing */ .uk-navbar-content + .uk-navbar-content:not(.uk-navbar-center) { padding-left: 0; } /* * Link colors */ .uk-navbar-content > a:not([class]) { color: #0077dd; } .uk-navbar-content > a:not([class]):hover { color: #005599; } /* Sub-objects: `uk-navbar-brand` ========================================================================== */ .uk-navbar-brand { font-size: 18px; color: #444444; text-decoration: none; } /* * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-navbar-brand:hover, .uk-navbar-brand:focus { color: #444444; text-decoration: none; /* 2 */ outline: none; } /* Sub-object: `uk-navbar-toggle` ========================================================================== */ .uk-navbar-toggle { font-size: 18px; color: #444444; text-decoration: none; } /* * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-navbar-toggle:hover, .uk-navbar-toggle:focus { color: #444444; text-decoration: none; /* 2 */ outline: none; } /* * 1. Center icon vertically */ .uk-navbar-toggle:after { content: "\f0c9"; font-family: FontAwesome; /* 1 */ vertical-align: middle; } .uk-navbar-toggle-alt:after { content: "\f002"; } /* Sub-object: `uk-navbar-center` ========================================================================== */ /* * The element with this class needs to be last child in the navbar * 1. This hack is needed because other float elements shift centered text */ .uk-navbar-center { float: none; text-align: center; /* 1 */ max-width: 50%; margin-left: auto; margin-right: auto; } /* Sub-object: `uk-navbar-flip` ========================================================================== */ .uk-navbar-flip { float: right; } /* ======================================================================== Component: Subnav ========================================================================== */ /* * 1. Gutter * 2. Remove default list style */ .uk-subnav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin-left: -10px; margin-top: -10px; /* 2 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied * 3. Create position context for dropdowns */ .uk-subnav > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ padding-left: 10px; margin-top: 10px; /* 3 */ position: relative; } /* * DEPRECATED IE9 Support */ .uk-subnav:before, .uk-subnav:after { content: ""; display: block; overflow: hidden; } .uk-subnav:after { clear: both; } .uk-subnav > * { float: left; } /* Items ========================================================================== */ .uk-subnav > * > * { display: inline-block; color: #444444; } /* * Hover * 1. Apply hover style also to focus state */ .uk-subnav > * > :hover, .uk-subnav > * > :focus { color: #0077dd; text-decoration: none; } /* * Active */ .uk-subnav > .uk-active > * { color: #0077dd; } /* Modifier: 'subnav-line' ========================================================================== */ .uk-subnav-line > :before { content: ""; display: inline-block; height: 10px; vertical-align: middle; } .uk-subnav-line > :nth-child(n+2):before { margin-right: 10px; border-left: 1px solid #dddddd; } /* Modifier: 'subnav-pill' ========================================================================== */ .uk-subnav-pill > * > * { padding: 3px 9px; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-subnav-pill > * > :hover, .uk-subnav-pill > * > :focus { background: #eeeeee; color: #444444; text-decoration: none; /* 2 */ outline: none; } /* * Active * `li` needed for higher specificity to override hover */ .uk-subnav-pill > .uk-active > * { background: #00a8e6; color: #ffffff; } /* Disabled state ========================================================================== */ .uk-subnav > .uk-disabled > * { background: none; color: #999999; text-decoration: none; cursor: text; } /* ======================================================================== Component: Breadcrumb ========================================================================== */ /* * 1. Remove default list style * 2. Remove whitespace between child elements when using `inline-block` */ .uk-breadcrumb { /* 1 */ padding: 0; list-style: none; /* 2 */ font-size: 0.001px; } /* Items ========================================================================== */ /* * Reset whitespace hack */ .uk-breadcrumb > li { font-size: 1rem; vertical-align: top; } .uk-breadcrumb > li, .uk-breadcrumb > li > a, .uk-breadcrumb > li > span { display: inline-block; } .uk-breadcrumb > li:nth-child(n+2):before { content: "/"; display: inline-block; margin: 0 8px; } /* * Disabled */ .uk-breadcrumb > li:not(.uk-active) > span { color: #999999; } /* ======================================================================== Component: Pagination ========================================================================== */ /* * 1. Remove default list style * 2. Center pagination by default * 3. Remove whitespace between child elements when using `inline-block` */ .uk-pagination { /* 1 */ padding: 0; list-style: none; /* 2 */ text-align: center; /* 3 */ font-size: 0.001px; } /* * Micro clearfix * Needed if `uk-pagination-previous` or `uk-pagination-next` sub-objects are used */ .uk-pagination:before, .uk-pagination:after { content: ""; display: table; } .uk-pagination:after { clear: both; } /* Items ========================================================================== */ /* * 1. Reset whitespace hack * 2. Remove the gap at the bottom of it container */ .uk-pagination > li { display: inline-block; /* 1 */ font-size: 1rem; /* 2 */ vertical-align: top; } .uk-pagination > li:nth-child(n+2) { margin-left: 5px; } /* * 1. Makes pagination more robust against different box-sizing use * 2. Reset text-align to center if alignment modifier is used */ .uk-pagination > li > a, .uk-pagination > li > span { display: inline-block; min-width: 16px; padding: 3px 5px; line-height: 20px; text-decoration: none; /* 1 */ box-sizing: content-box; /* 2 */ text-align: center; } /* * Links */ .uk-pagination > li > a { background: #eeeeee; color: #444444; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-pagination > li > a:hover, .uk-pagination > li > a:focus { background-color: #f5f5f5; color: #444444; /* 2 */ outline: none; } /* OnClick */ .uk-pagination > li > a:active { background-color: #dddddd; color: #444444; } /* * Active */ .uk-pagination > .uk-active > span { background: #00a8e6; color: #ffffff; } /* * Disabled */ .uk-pagination > .uk-disabled > span { background-color: #f5f5f5; color: #999999; } /* Previous and next navigation ========================================================================== */ .uk-pagination-previous { float: left; } .uk-pagination-next { float: right; } /* Alignment modifiers ========================================================================== */ .uk-pagination-left { text-align: left; } .uk-pagination-right { text-align: right; } /* ======================================================================== Component: Tab ========================================================================== */ .uk-tab { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #dddddd; } /* * Micro clearfix on the deepest container */ .uk-tab:before, .uk-tab:after { content: ""; display: table; } .uk-tab:after { clear: both; } /* * Items * 1. Create position context for dropdowns */ .uk-tab > li { margin-bottom: -1px; float: left; /* 1 */ position: relative; } .uk-tab > li > a { display: block; padding: 8px 12px 8px 12px; border: 1px solid transparent; border-bottom-width: 0; color: #0077dd; text-decoration: none; } .uk-tab > li:nth-child(n+2) > a { margin-left: 5px; } /* * Hover * 1. Apply hover style also to focus state * 2. Also apply if dropdown is opened * 3. Remove default focus style */ .uk-tab > li > a:hover, .uk-tab > li > a:focus, .uk-tab > li.uk-open > a { border-color: #f5f5f5; background: #f5f5f5; color: #005599; /* 2 */ outline: none; } .uk-tab > li:not(.uk-active) > a:hover, .uk-tab > li:not(.uk-active) > a:focus, .uk-tab > li.uk-open:not(.uk-active) > a { margin-bottom: 1px; padding-bottom: 7px; } /* Active */ .uk-tab > li.uk-active > a { border-color: #dddddd; border-bottom-color: transparent; background: #ffffff; color: #444444; } /* Disabled */ .uk-tab > li.uk-disabled > a { color: #999999; cursor: text; } .uk-tab > li.uk-disabled > a:hover, .uk-tab > li.uk-disabled > a:focus, .uk-tab > li.uk-disabled.uk-active > a { background: none; border-color: transparent; } /* Modifier: 'tab-flip' ========================================================================== */ .uk-tab-flip > li { float: right; } .uk-tab-flip > li:nth-child(n+2) > a { margin-left: 0; margin-right: 5px; } /* Modifier: 'tab-responsive' ========================================================================== */ .uk-tab > li.uk-tab-responsive > a { margin-left: 0; margin-right: 0; } /* * Icon */ .uk-tab-responsive > a:before { content: "\f0c9\00a0"; font-family: FontAwesome; } /* Modifier: 'tab-center' ========================================================================== */ .uk-tab-center { border-bottom: 1px solid #dddddd; } .uk-tab-center-bottom { border-bottom: none; border-top: 1px solid #dddddd; } .uk-tab-center:before, .uk-tab-center:after { content: ""; display: table; } .uk-tab-center:after { clear: both; } /* * 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs */ .uk-tab-center .uk-tab { position: relative; right: 50%; border: none; float: right; } .uk-tab-center .uk-tab > li { position: relative; right: -50%; } .uk-tab-center .uk-tab > li > a { text-align: center; } /* Modifier: 'tab-bottom' ========================================================================== */ .uk-tab-bottom { border-top: 1px solid #dddddd; border-bottom: none; } .uk-tab-bottom > li { margin-top: -1px; margin-bottom: 0; } .uk-tab-bottom > li > a { padding-top: 8px; padding-bottom: 8px; border-bottom-width: 1px; border-top-width: 0; } .uk-tab-bottom > li:not(.uk-active) > a:hover, .uk-tab-bottom > li:not(.uk-active) > a:focus, .uk-tab-bottom > li.uk-open:not(.uk-active) > a { margin-bottom: 0; margin-top: 1px; padding-bottom: 8px; padding-top: 7px; } .uk-tab-bottom > li.uk-active > a { border-top-color: transparent; border-bottom-color: #dddddd; } /* Modifier: 'tab-grid' ========================================================================== */ /* * 1. Create position context to prevent hidden border because of negative `z-index` */ .uk-tab-grid { margin-left: -5px; border-bottom: none; /* 1 */ position: relative; z-index: 0; } .uk-tab-grid:before { display: block; position: absolute; left: 5px; right: 0; bottom: -1px; border-top: 1px solid #dddddd; /* 1 */ z-index: -1; } .uk-tab-grid > li:first-child > a { margin-left: 5px; } .uk-tab-grid > li > a { text-align: center; } /* * If `uk-tab-bottom` */ .uk-tab-grid.uk-tab-bottom { border-top: none; } .uk-tab-grid.uk-tab-bottom:before { top: -1px; bottom: auto; } /* Modifier: 'tab-left', 'tab-right' ========================================================================== */ /* Tablet and bigger */ @media (min-width: 768px) { .uk-tab-left, .uk-tab-right { border-bottom: none; } .uk-tab-left > li, .uk-tab-right > li { margin-bottom: 0; float: none; } .uk-tab-left > li > a, .uk-tab-right > li > a { padding-top: 8px; padding-bottom: 8px; } .uk-tab-left > li:nth-child(n+2) > a, .uk-tab-right > li:nth-child(n+2) > a { margin-left: 0; margin-top: 5px; } .uk-tab-left > li.uk-active > a, .uk-tab-right > li.uk-active > a { border-color: #dddddd; } /* * Modifier: 'tab-left' */ .uk-tab-left { border-right: 1px solid #dddddd; } .uk-tab-left > li { margin-right: -1px; } .uk-tab-left > li > a { border-bottom-width: 1px; border-right-width: 0; } .uk-tab-left > li:not(.uk-active) > a:hover, .uk-tab-left > li:not(.uk-active) > a:focus { margin-bottom: 0; margin-right: 1px; padding-bottom: 8px; padding-right: 11px; } .uk-tab-left > li.uk-active > a { border-right-color: transparent; } /* * Modifier: 'tab-right' */ .uk-tab-right { border-left: 1px solid #dddddd; } .uk-tab-right > li { margin-left: -1px; } .uk-tab-right > li > a { border-bottom-width: 1px; border-left-width: 0; } .uk-tab-right > li:not(.uk-active) > a:hover, .uk-tab-right > li:not(.uk-active) > a:focus { margin-bottom: 0; margin-left: 1px; padding-bottom: 8px; padding-left: 11px; } .uk-tab-right > li.uk-active > a { border-left-color: transparent; } } /* ======================================================================== Component: Thumbnav ========================================================================== */ /* * 1. Gutter * 2. Remove default list style */ .uk-thumbnav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin-left: -10px; margin-top: -10px; /* 2 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied */ .uk-thumbnav > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ padding-left: 10px; margin-top: 10px; } /* * DEPRECATED IE9 Support */ .uk-thumbnav:before, .uk-thumbnav:after { content: ""; display: block; overflow: hidden; } .uk-thumbnav:after { clear: both; } .uk-thumbnav > * { float: left; } /* Items ========================================================================== */ .uk-thumbnav > * > * { display: block; background: #ffffff; } .uk-thumbnav > * > * > img { opacity: 0.7; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } /* * Hover */ .uk-thumbnav > * > :hover > img, .uk-thumbnav > * > :focus > img { opacity: 1; } /* * Active */ .uk-thumbnav > .uk-active > * > img { opacity: 1; } /* ======================================================================== Component: List ========================================================================== */ .uk-list { padding: 0; list-style: none; } /* * Micro clearfix to make list more robust */ .uk-list > li:before, .uk-list > li:after { content: ""; display: table; } .uk-list > li:after { clear: both; } /* * Remove margin from the last-child */ .uk-list > li > :last-child { margin-bottom: 0; } /* * Nested lists */ .uk-list ul { margin: 0; padding-left: 20px; list-style: none; } /* Modifier: `uk-list-line` ========================================================================== */ .uk-list-line > li:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dddddd; } /* Modifier: `uk-list-striped` ========================================================================== */ .uk-list-striped > li { padding: 5px 5px; } .uk-list-striped > li:nth-of-type(odd) { background: #f5f5f5; } /* Modifier: `uk-list-space` ========================================================================== */ .uk-list-space > li:nth-child(n+2) { margin-top: 10px; } /* ======================================================================== Component: Description list ========================================================================== */ /* Modifier: `uk-description-list-horizontal` ========================================================================== */ /* Tablet and bigger */ @media (min-width: 768px) { .uk-description-list-horizontal { overflow: hidden; } .uk-description-list-horizontal > dt { width: 160px; float: left; clear: both; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uk-description-list-horizontal > dd { margin-left: 180px; } } /* Modifier: `uk-description-list-line` ========================================================================== */ .uk-description-list-line > dt { font-weight: normal; } .uk-description-list-line > dt:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #dddddd; } .uk-description-list-line > dd { color: #999999; } /* ======================================================================== Component: Table ========================================================================== */ /* * 1. Remove most spacing between table cells. * 2. Block element behavior * 3. Style */ .uk-table { /* 1 */ border-collapse: collapse; border-spacing: 0; /* 2 */ width: 100%; /* 3 */ margin-bottom: 15px; } /* * Add margin if adjacent element */ * + .uk-table { margin-top: 15px; } .uk-table th, .uk-table td { padding: 8px 8px; } /* * Set alignment */ .uk-table th { text-align: left; } .uk-table td { vertical-align: top; } .uk-table thead th { vertical-align: bottom; } /* * Caption and footer */ .uk-table caption, .uk-table tfoot { font-size: 12px; font-style: italic; } .uk-table caption { text-align: left; color: #999999; } /* * Active State */ .uk-table tbody tr.uk-active { background: #eeeeee; } /* Sub-modifier: `uk-table-middle` ========================================================================== */ .uk-table-middle, .uk-table-middle td { vertical-align: middle !important; } /* Modifier: `uk-table-striped` ========================================================================== */ .uk-table-striped tbody tr:nth-of-type(odd) { background: #f5f5f5; } /* Modifier: `uk-table-condensed` ========================================================================== */ .uk-table-condensed td { padding: 4px 8px; } /* Modifier: `uk-table-hover` ========================================================================== */ .uk-table-hover tbody tr:hover { background: #eeeeee; } /* ======================================================================== Component: Form ========================================================================== */ /* * 1. Define consistent box sizing. * Default is `content-box` with following exceptions set to `border-box` * `button`, `select`, `input[type="checkbox"]` and `input[type="radio"]` * `input[type="search"]` in Chrome, Safari and Opera * `input[type="color"]` in Firefox * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. * 3. Remove `border-radius` in iOS. * 4. Correct `font` properties and `color` not being inherited. */ .uk-form input, .uk-form select, .uk-form textarea { /* 1 */ box-sizing: border-box; /* 2 */ margin: 0; /* 3 */ border-radius: 0; /* 4 */ font: inherit; color: inherit; } /* * Address inconsistent `text-transform` inheritance which is only inherit in Firefox */ .uk-form select { text-transform: none; } /* * 1. Correct `font` properties not being inherited. * 2. Don't inherit the `font-weight` and use `bold` instead. * NOTE: Both declarations don't work in Chrome, Safari and Opera. */ .uk-form optgroup { /* 1 */ font: inherit; /* 2 */ font-weight: bold; } /* * Removes inner padding and border in Firefox 4+. */ .uk-form input::-moz-focus-inner { border: 0; padding: 0; } /* * Removes excess padding in IE 8/9/10. */ .uk-form input[type="checkbox"], .uk-form input[type="radio"] { padding: 0; } /* * Improves consistency of cursor style for clickable elements */ .uk-form input[type="checkbox"]:not(:disabled), .uk-form input[type="radio"]:not(:disabled) { cursor: pointer; } /* * Remove default style in iOS. */ .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="number"], .uk-form input[type="datetime"] { -webkit-appearance: none; } /* * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X. */ .uk-form input[type="search"]::-webkit-search-cancel-button, .uk-form input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ .uk-form input[type="number"]::-webkit-inner-spin-button, .uk-form input[type="number"]::-webkit-outer-spin-button { height: auto; } /* * Define consistent border, margin, and padding. */ .uk-form fieldset { border: none; margin: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE 8/9/10/11. * 2. Improve readability and alignment in all browsers. */ .uk-form textarea { /* 1 */ overflow: auto; /* 2 */ vertical-align: top; } /* * Removes placeholder transparency in Firefox. */ .uk-form ::-moz-placeholder { opacity: 1; } /* * Removes `box-shadow` for invalid controls in Firefox. */ .uk-form :invalid { box-shadow: none; } /* * Vertical alignment */ .uk-form input:not([type="radio"]):not([type="checkbox"]), .uk-form select { vertical-align: middle; } /* Style ========================================================================== */ /* * Remove margin from the last-child */ .uk-form > :last-child { margin-bottom: 0; } /* * Controls * Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image` * 1. Must be `height` because `min-height` is not working in OSX * 2. Responsiveness: Sets a maximum width relative to the parent to scale on narrower viewports * 3. Vertical `padding` needed for `select` elements in Firefox * 4. Style */ .uk-form select, .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="number"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="color"] { /* 1 */ height: 30px; /* 2 */ max-width: 100%; /* 3 */ padding: 4px 6px; /* 4 */ border: 1px solid #dddddd; background: #ffffff; color: #444444; -webkit-transition: all 0.2s linear; -webkit-transition-property: border, background, color, box-shadow, padding; transition: all 0.2s linear; transition-property: border, background, color, box-shadow, padding; } .uk-form select:focus, .uk-form textarea:focus, .uk-form input:not([type]):focus, .uk-form input[type="text"]:focus, .uk-form input[type="password"]:focus, .uk-form input[type="datetime"]:focus, .uk-form input[type="datetime-local"]:focus, .uk-form input[type="date"]:focus, .uk-form input[type="month"]:focus, .uk-form input[type="time"]:focus, .uk-form input[type="week"]:focus, .uk-form input[type="number"]:focus, .uk-form input[type="email"]:focus, .uk-form input[type="url"]:focus, .uk-form input[type="search"]:focus, .uk-form input[type="tel"]:focus, .uk-form input[type="color"]:focus { border-color: #99baca; outline: 0; background: #f5fbfe; color: #444444; } .uk-form select:disabled, .uk-form textarea:disabled, .uk-form input:not([type]):disabled, .uk-form input[type="text"]:disabled, .uk-form input[type="password"]:disabled, .uk-form input[type="datetime"]:disabled, .uk-form input[type="datetime-local"]:disabled, .uk-form input[type="date"]:disabled, .uk-form input[type="month"]:disabled, .uk-form input[type="time"]:disabled, .uk-form input[type="week"]:disabled, .uk-form input[type="number"]:disabled, .uk-form input[type="email"]:disabled, .uk-form input[type="url"]:disabled, .uk-form input[type="search"]:disabled, .uk-form input[type="tel"]:disabled, .uk-form input[type="color"]:disabled { border-color: #dddddd; background-color: #f5f5f5; color: #999999; } /* * Placeholder */ .uk-form :-ms-input-placeholder { color: #999999 !important; } .uk-form ::-moz-placeholder { color: #999999; } .uk-form ::-webkit-input-placeholder { color: #999999; } .uk-form :disabled:-ms-input-placeholder { color: #999999 !important; } .uk-form :disabled::-moz-placeholder { color: #999999; } .uk-form :disabled::-webkit-input-placeholder { color: #999999; } /* * Legend * 1. Behave like block element * 2. Correct `color` not being inherited in IE 8/9/10/11. * 3. Remove padding * 4. `margin-bottom` is not working in Safari and Opera. * Using `padding` and :after instead to create the border * 5. Style */ .uk-form legend { /* 1 */ width: 100%; /* 2 */ border: 0; /* 3 */ padding: 0; /* 4 */ padding-bottom: 15px; /* 5 */ font-size: 18px; line-height: 30px; } /* * 1. Fixes IE9 */ .uk-form legend:after { content: ""; display: block; border-bottom: 1px solid #dddddd; /* 1 */ width: 100%; } /* Size modifiers * Higher specificity needed to override defaults ========================================================================== */ select.uk-form-small, textarea.uk-form-small, input[type].uk-form-small, input:not([type]).uk-form-small { height: 25px; padding: 3px 3px; font-size: 12px; } select.uk-form-large, textarea.uk-form-large, input[type].uk-form-large, input:not([type]).uk-form-large { height: 40px; padding: 8px 6px; font-size: 16px; } /* Reset height * Must be after size modifiers ========================================================================== */ .uk-form textarea, .uk-form select[multiple], .uk-form select[size] { height: auto; } /* Validation states * Using !important to keep the selector simple ========================================================================== */ /* * Error state */ .uk-form-danger { border-color: #dc8d99 !important; background: #fff7f8 !important; color: #d85030 !important; } /* * Success state */ .uk-form-success { border-color: #8ec73b !important; background: #fafff2 !important; color: #659f13 !important; } /* Style modifiers * Using !important to keep the selector simple ========================================================================== */ /* * Blank form */ .uk-form-blank { border-color: transparent !important; border-style: dashed !important; background: none !important; } .uk-form-blank:focus { border-color: #dddddd !important; } /* Size sub-modifiers ========================================================================== */ /* * Fixed widths * Different widths for mini sized `input` and `select` elements */ input.uk-form-width-mini { width: 40px; } select.uk-form-width-mini { width: 65px; } .uk-form-width-small { width: 130px; } .uk-form-width-medium { width: 200px; } .uk-form-width-large { width: 500px; } /* Sub-objects: `uk-form-row` * Groups labels and controls in rows ========================================================================== */ /* * Micro clearfix * Needed for `uk-form-horizontal` modifier */ .uk-form-row:before, .uk-form-row:after { content: ""; display: table; } .uk-form-row:after { clear: both; } /* * Vertical gutter */ .uk-form-row + .uk-form-row { margin-top: 15px; } /* Help text * Sub-object: `uk-form-help-inline`, `uk-form-help-block` ========================================================================== */ .uk-form-help-inline { display: inline-block; margin: 0 0 0 10px; } .uk-form-help-block { margin: 5px 0 0 0; } /* Controls content * Sub-object: `uk-form-controls`, `uk-form-controls-condensed` ========================================================================== */ /* * Remove margins */ .uk-form-controls > :first-child { margin-top: 0; } .uk-form-controls > :last-child { margin-bottom: 0; } /* * Group controls and text into blocks with a small spacing between blocks */ .uk-form-controls-condensed { margin: 5px 0; } /* Modifier: `uk-form-stacked` * Requires sub-object: `uk-form-label` ========================================================================== */ .uk-form-stacked .uk-form-label { display: block; margin-bottom: 5px; font-weight: bold; } /* Modifier: `uk-form-horizontal` * Requires sub-objects: `uk-form-label`, `uk-form-controls` ========================================================================== */ /* Tablet portrait and smaller */ @media (max-width: 959px) { /* Behave like `uk-form-stacked` */ .uk-form-horizontal .uk-form-label { display: block; margin-bottom: 5px; font-weight: bold; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-form-horizontal .uk-form-label { width: 200px; margin-top: 5px; float: left; } .uk-form-horizontal .uk-form-controls { margin-left: 215px; } /* Better vertical alignment if controls are checkboxes and radio buttons with text */ .uk-form-horizontal .uk-form-controls-text { padding-top: 5px; } } /* Sub-object: `uk-form-icon` ========================================================================== */ /* * 1. Container width fits its content * 2. Create position context * 3. Prevent `inline-block` consequences */ .uk-form-icon { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; } /* * 1. Make form element clickable through icon */ .uk-form-icon > [class*='uk-icon-'] { position: absolute; top: 50%; width: 30px; margin-top: -7px; font-size: 14px; color: #999999; text-align: center; /* 1 */ pointer-events: none; } .uk-form-icon:not(.uk-form-icon-flip) > input { padding-left: 30px !important; } /* * Sub-modifier: `uk-form-icon-flip` */ .uk-form-icon-flip > [class*='uk-icon-'] { right: 0; } .uk-form-icon-flip > input { padding-right: 30px !important; } /* ======================================================================== Component: Button ========================================================================== */ /* * Removes inner padding and border in Firefox 4+. */ .uk-button::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Correct inability to style clickable `input` types in iOS. * 2. Remove margins in Chrome, Safari and Opera. * 3. Remove borders for `button`. * 4. Address `overflow` set to `hidden` in IE 8/9/10/11. * 5. Correct `font` properties and `color` not being inherited for `button`. * 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE * 7. Style * 8. `line-height` is used to create a height * 9. `min-height` is necessary for `input` elements in Firefox and Opera because `line-height` is not working. * 10. Reset button group whitespace hack * 11. Required for `a`. */ .uk-button { /* 1 */ -webkit-appearance: none; /* 2 */ margin: 0; /* 3 */ border: none; /* 4 */ overflow: visible; /* 5 */ font: inherit; color: #444444; /* 6 */ text-transform: none; /* 7 */ display: inline-block; box-sizing: border-box; padding: 0 12px; background: #eeeeee; vertical-align: middle; /* 8 */ line-height: 30px; /* 9 */ min-height: 30px; /* 10 */ font-size: 1rem; /* 11 */ text-decoration: none; text-align: center; } .uk-button:not(:disabled) { cursor: pointer; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style * 3. Required for `a` elements */ .uk-button:hover, .uk-button:focus { background-color: #f5f5f5; color: #444444; /* 2 */ outline: none; /* 3 */ text-decoration: none; } /* Active */ .uk-button:active, .uk-button.uk-active { background-color: #dddddd; color: #444444; } /* Color modifiers ========================================================================== */ /* * Modifier: `uk-button-primary` */ .uk-button-primary { background-color: #00a8e6; color: #ffffff; } /* Hover */ .uk-button-primary:hover, .uk-button-primary:focus { background-color: #35b3ee; color: #ffffff; } /* Active */ .uk-button-primary:active, .uk-button-primary.uk-active { background-color: #0091ca; color: #ffffff; } /* * Modifier: `uk-button-success` */ .uk-button-success { background-color: #8cc14c; color: #ffffff; } /* Hover */ .uk-button-success:hover, .uk-button-success:focus { background-color: #8ec73b; color: #ffffff; } /* Active */ .uk-button-success:active, .uk-button-success.uk-active { background-color: #72ae41; color: #ffffff; } /* * Modifier: `uk-button-danger` */ .uk-button-danger { background-color: #da314b; color: #ffffff; } /* Hover */ .uk-button-danger:hover, .uk-button-danger:focus { background-color: #e4354f; color: #ffffff; } /* Active */ .uk-button-danger:active, .uk-button-danger.uk-active { background-color: #c91032; color: #ffffff; } /* Disabled state * Overrides also the color modifiers ========================================================================== */ /* Equal for all button types */ .uk-button:disabled { background-color: #f5f5f5; color: #999999; } /* Modifier: `uk-button-link` ========================================================================== */ /* Reset */ .uk-button-link, .uk-button-link:hover, .uk-button-link:focus, .uk-button-link:active, .uk-button-link.uk-active, .uk-button-link:disabled { border-color: transparent; background: none; } /* Color */ .uk-button-link { color: #0077dd; } .uk-button-link:hover, .uk-button-link:focus, .uk-button-link:active, .uk-button-link.uk-active { color: #005599; text-decoration: underline; } .uk-button-link:disabled { color: #999999; } /* Focus */ .uk-button-link:focus { outline: 1px dotted; } /* Size modifiers ========================================================================== */ .uk-button-mini { min-height: 20px; padding: 0 6px; line-height: 20px; font-size: 11px; } .uk-button-small { min-height: 25px; padding: 0 10px; line-height: 25px; font-size: 12px; } .uk-button-large { min-height: 40px; padding: 0 15px; line-height: 40px; font-size: 16px; } /* Sub-object `uk-button-group` ========================================================================== */ /* * 1. Behave like buttons * 2. Create position context for dropdowns * 3. Remove whitespace between child elements when using `inline-block` * 4. Prevent buttons from wrapping * 5. Remove whitespace between child elements when using `inline-block` */ .uk-button-group { /* 1 */ display: inline-block; vertical-align: middle; /* 2 */ position: relative; /* 3 */ font-size: 0.001px; /* 4 */ white-space: nowrap; } .uk-button-group > * { display: inline-block; } /* 5 */ .uk-button-group .uk-button { vertical-align: top; } /* Sub-object: `uk-button-dropdown` ========================================================================== */ /* * 1. Behave like buttons * 2. Create position context for dropdowns */ .uk-button-dropdown { /* 1 */ display: inline-block; vertical-align: middle; /* 2 */ position: relative; } /* ======================================================================== Component: Icon ========================================================================== */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.woff2") format('woff2'), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } /* * 1. Allow margin * 2. Prevent inherit font style * 4. Correct line-height * 5. Better font rendering * 6. Remove `text-decoration` for anchors */ [class*='uk-icon-'] { font-family: FontAwesome; /* 1 */ display: inline-block; /* 2 */ font-weight: normal; font-style: normal; /* 4 */ line-height: 1; /* 5 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 6 */ [class*='uk-icon-'], [class*='uk-icon-']:hover, [class*='uk-icon-']:focus { text-decoration: none; } /* Size modifiers ========================================================================== */ .uk-icon-small { font-size: 150%; vertical-align: -10%; } .uk-icon-medium { font-size: 200%; vertical-align: -16%; } .uk-icon-large { font-size: 250%; vertical-align: -22%; } /* Modifier: `uk-icon-justify` ========================================================================== */ .uk-icon-justify { width: 1em; text-align: center; } /* Modifier: `uk-icon-spin` ========================================================================== */ .uk-icon-spin { display: inline-block; -webkit-animation: uk-rotate 2s infinite linear; animation: uk-rotate 2s infinite linear; } /* Modifier: `uk-icon-hover` ========================================================================== */ .uk-icon-hover { color: #999999; } /* * Hover */ .uk-icon-hover:hover { color: #444444; } /* Modifier: `uk-icon-button` ========================================================================== */ .uk-icon-button { box-sizing: border-box; display: inline-block; width: 35px; height: 35px; border-radius: 100%; background: #eeeeee; line-height: 35px; color: #444444; font-size: 18px; text-align: center; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-icon-button:hover, .uk-icon-button:focus { background-color: #f5f5f5; color: #444444; /* 2 */ outline: none; } /* Active */ .uk-icon-button:active { background-color: #dddddd; color: #444444; } /* Icon mapping ========================================================================== */ .uk-icon-glass:before { content: "\f000"; } .uk-icon-music:before { content: "\f001"; } .uk-icon-search:before { content: "\f002"; } .uk-icon-envelope-o:before { content: "\f003"; } .uk-icon-heart:before { content: "\f004"; } .uk-icon-star:before { content: "\f005"; } .uk-icon-star-o:before { content: "\f006"; } .uk-icon-user:before { content: "\f007"; } .uk-icon-film:before { content: "\f008"; } .uk-icon-th-large:before { content: "\f009"; } .uk-icon-th:before { content: "\f00a"; } .uk-icon-th-list:before { content: "\f00b"; } .uk-icon-check:before { content: "\f00c"; } .uk-icon-remove:before, .uk-icon-close:before, .uk-icon-times:before { content: "\f00d"; } .uk-icon-search-plus:before { content: "\f00e"; } .uk-icon-search-minus:before { content: "\f010"; } .uk-icon-power-off:before { content: "\f011"; } .uk-icon-signal:before { content: "\f012"; } .uk-icon-gear:before, .uk-icon-cog:before { content: "\f013"; } .uk-icon-trash-o:before { content: "\f014"; } .uk-icon-home:before { content: "\f015"; } .uk-icon-file-o:before { content: "\f016"; } .uk-icon-clock-o:before { content: "\f017"; } .uk-icon-road:before { content: "\f018"; } .uk-icon-download:before { content: "\f019"; } .uk-icon-arrow-circle-o-down:before { content: "\f01a"; } .uk-icon-arrow-circle-o-up:before { content: "\f01b"; } .uk-icon-inbox:before { content: "\f01c"; } .uk-icon-play-circle-o:before { content: "\f01d"; } .uk-icon-rotate-right:before, .uk-icon-repeat:before { content: "\f01e"; } .uk-icon-refresh:before { content: "\f021"; } .uk-icon-list-alt:before { content: "\f022"; } .uk-icon-lock:before { content: "\f023"; } .uk-icon-flag:before { content: "\f024"; } .uk-icon-headphones:before { content: "\f025"; } .uk-icon-volume-off:before { content: "\f026"; } .uk-icon-volume-down:before { content: "\f027"; } .uk-icon-volume-up:before { content: "\f028"; } .uk-icon-qrcode:before { content: "\f029"; } .uk-icon-barcode:before { content: "\f02a"; } .uk-icon-tag:before { content: "\f02b"; } .uk-icon-tags:before { content: "\f02c"; } .uk-icon-book:before { content: "\f02d"; } .uk-icon-bookmark:before { content: "\f02e"; } .uk-icon-print:before { content: "\f02f"; } .uk-icon-camera:before { content: "\f030"; } .uk-icon-font:before { content: "\f031"; } .uk-icon-bold:before { content: "\f032"; } .uk-icon-italic:before { content: "\f033"; } .uk-icon-text-height:before { content: "\f034"; } .uk-icon-text-width:before { content: "\f035"; } .uk-icon-align-left:before { content: "\f036"; } .uk-icon-align-center:before { content: "\f037"; } .uk-icon-align-right:before { content: "\f038"; } .uk-icon-align-justify:before { content: "\f039"; } .uk-icon-list:before { content: "\f03a"; } .uk-icon-dedent:before, .uk-icon-outdent:before { content: "\f03b"; } .uk-icon-indent:before { content: "\f03c"; } .uk-icon-video-camera:before { content: "\f03d"; } .uk-icon-photo:before, .uk-icon-image:before, .uk-icon-picture-o:before { content: "\f03e"; } .uk-icon-pencil:before { content: "\f040"; } .uk-icon-map-marker:before { content: "\f041"; } .uk-icon-adjust:before { content: "\f042"; } .uk-icon-tint:before { content: "\f043"; } .uk-icon-edit:before, .uk-icon-pencil-square-o:before { content: "\f044"; } .uk-icon-share-square-o:before { content: "\f045"; } .uk-icon-check-square-o:before { content: "\f046"; } .uk-icon-arrows:before { content: "\f047"; } .uk-icon-step-backward:before { content: "\f048"; } .uk-icon-fast-backward:before { content: "\f049"; } .uk-icon-backward:before { content: "\f04a"; } .uk-icon-play:before { content: "\f04b"; } .uk-icon-pause:before { content: "\f04c"; } .uk-icon-stop:before { content: "\f04d"; } .uk-icon-forward:before { content: "\f04e"; } .uk-icon-fast-forward:before { content: "\f050"; } .uk-icon-step-forward:before { content: "\f051"; } .uk-icon-eject:before { content: "\f052"; } .uk-icon-chevron-left:before { content: "\f053"; } .uk-icon-chevron-right:before { content: "\f054"; } .uk-icon-plus-circle:before { content: "\f055"; } .uk-icon-minus-circle:before { content: "\f056"; } .uk-icon-times-circle:before { content: "\f057"; } .uk-icon-check-circle:before { content: "\f058"; } .uk-icon-question-circle:before { content: "\f059"; } .uk-icon-info-circle:before { content: "\f05a"; } .uk-icon-crosshairs:before { content: "\f05b"; } .uk-icon-times-circle-o:before { content: "\f05c"; } .uk-icon-check-circle-o:before { content: "\f05d"; } .uk-icon-ban:before { content: "\f05e"; } .uk-icon-arrow-left:before { content: "\f060"; } .uk-icon-arrow-right:before { content: "\f061"; } .uk-icon-arrow-up:before { content: "\f062"; } .uk-icon-arrow-down:before { content: "\f063"; } .uk-icon-mail-forward:before, .uk-icon-share:before { content: "\f064"; } .uk-icon-expand:before { content: "\f065"; } .uk-icon-compress:before { content: "\f066"; } .uk-icon-plus:before { content: "\f067"; } .uk-icon-minus:before { content: "\f068"; } .uk-icon-asterisk:before { content: "\f069"; } .uk-icon-exclamation-circle:before { content: "\f06a"; } .uk-icon-gift:before { content: "\f06b"; } .uk-icon-leaf:before { content: "\f06c"; } .uk-icon-fire:before { content: "\f06d"; } .uk-icon-eye:before { content: "\f06e"; } .uk-icon-eye-slash:before { content: "\f070"; } .uk-icon-warning:before, .uk-icon-exclamation-triangle:before { content: "\f071"; } .uk-icon-plane:before { content: "\f072"; } .uk-icon-calendar:before { content: "\f073"; } .uk-icon-random:before { content: "\f074"; } .uk-icon-comment:before { content: "\f075"; } .uk-icon-magnet:before { content: "\f076"; } .uk-icon-chevron-up:before { content: "\f077"; } .uk-icon-chevron-down:before { content: "\f078"; } .uk-icon-retweet:before { content: "\f079"; } .uk-icon-shopping-cart:before { content: "\f07a"; } .uk-icon-folder:before { content: "\f07b"; } .uk-icon-folder-open:before { content: "\f07c"; } .uk-icon-arrows-v:before { content: "\f07d"; } .uk-icon-arrows-h:before { content: "\f07e"; } .uk-icon-bar-chart-o:before, .uk-icon-bar-chart:before { content: "\f080"; } .uk-icon-twitter-square:before { content: "\f081"; } .uk-icon-facebook-square:before { content: "\f082"; } .uk-icon-camera-retro:before { content: "\f083"; } .uk-icon-key:before { content: "\f084"; } .uk-icon-gears:before, .uk-icon-cogs:before { content: "\f085"; } .uk-icon-comments:before { content: "\f086"; } .uk-icon-thumbs-o-up:before { content: "\f087"; } .uk-icon-thumbs-o-down:before { content: "\f088"; } .uk-icon-star-half:before { content: "\f089"; } .uk-icon-heart-o:before { content: "\f08a"; } .uk-icon-sign-out:before { content: "\f08b"; } .uk-icon-linkedin-square:before { content: "\f08c"; } .uk-icon-thumb-tack:before { content: "\f08d"; } .uk-icon-external-link:before { content: "\f08e"; } .uk-icon-sign-in:before { content: "\f090"; } .uk-icon-trophy:before { content: "\f091"; } .uk-icon-github-square:before { content: "\f092"; } .uk-icon-upload:before { content: "\f093"; } .uk-icon-lemon-o:before { content: "\f094"; } .uk-icon-phone:before { content: "\f095"; } .uk-icon-square-o:before { content: "\f096"; } .uk-icon-bookmark-o:before { content: "\f097"; } .uk-icon-phone-square:before { content: "\f098"; } .uk-icon-twitter:before { content: "\f099"; } .uk-icon-facebook-f:before, .uk-icon-facebook:before { content: "\f09a"; } .uk-icon-github:before { content: "\f09b"; } .uk-icon-unlock:before { content: "\f09c"; } .uk-icon-credit-card:before { content: "\f09d"; } .uk-icon-rss:before { content: "\f09e"; } .uk-icon-hdd-o:before { content: "\f0a0"; } .uk-icon-bullhorn:before { content: "\f0a1"; } .uk-icon-bell:before { content: "\f0f3"; } .uk-icon-certificate:before { content: "\f0a3"; } .uk-icon-hand-o-right:before { content: "\f0a4"; } .uk-icon-hand-o-left:before { content: "\f0a5"; } .uk-icon-hand-o-up:before { content: "\f0a6"; } .uk-icon-hand-o-down:before { content: "\f0a7"; } .uk-icon-arrow-circle-left:before { content: "\f0a8"; } .uk-icon-arrow-circle-right:before { content: "\f0a9"; } .uk-icon-arrow-circle-up:before { content: "\f0aa"; } .uk-icon-arrow-circle-down:before { content: "\f0ab"; } .uk-icon-globe:before { content: "\f0ac"; } .uk-icon-wrench:before { content: "\f0ad"; } .uk-icon-tasks:before { content: "\f0ae"; } .uk-icon-filter:before { content: "\f0b0"; } .uk-icon-briefcase:before { content: "\f0b1"; } .uk-icon-arrows-alt:before { content: "\f0b2"; } .uk-icon-group:before, .uk-icon-users:before { content: "\f0c0"; } .uk-icon-chain:before, .uk-icon-link:before { content: "\f0c1"; } .uk-icon-cloud:before { content: "\f0c2"; } .uk-icon-flask:before { content: "\f0c3"; } .uk-icon-cut:before, .uk-icon-scissors:before { content: "\f0c4"; } .uk-icon-copy:before, .uk-icon-files-o:before { content: "\f0c5"; } .uk-icon-paperclip:before { content: "\f0c6"; } .uk-icon-save:before, .uk-icon-floppy-o:before { content: "\f0c7"; } .uk-icon-square:before { content: "\f0c8"; } .uk-icon-navicon:before, .uk-icon-reorder:before, .uk-icon-bars:before { content: "\f0c9"; } .uk-icon-list-ul:before { content: "\f0ca"; } .uk-icon-list-ol:before { content: "\f0cb"; } .uk-icon-strikethrough:before { content: "\f0cc"; } .uk-icon-underline:before { content: "\f0cd"; } .uk-icon-table:before { content: "\f0ce"; } .uk-icon-magic:before { content: "\f0d0"; } .uk-icon-truck:before { content: "\f0d1"; } .uk-icon-pinterest:before { content: "\f0d2"; } .uk-icon-pinterest-square:before { content: "\f0d3"; } .uk-icon-google-plus-square:before { content: "\f0d4"; } .uk-icon-google-plus:before { content: "\f0d5"; } .uk-icon-money:before { content: "\f0d6"; } .uk-icon-caret-down:before { content: "\f0d7"; } .uk-icon-caret-up:before { content: "\f0d8"; } .uk-icon-caret-left:before { content: "\f0d9"; } .uk-icon-caret-right:before { content: "\f0da"; } .uk-icon-columns:before { content: "\f0db"; } .uk-icon-unsorted:before, .uk-icon-sort:before { content: "\f0dc"; } .uk-icon-sort-down:before, .uk-icon-sort-desc:before { content: "\f0dd"; } .uk-icon-sort-up:before, .uk-icon-sort-asc:before { content: "\f0de"; } .uk-icon-envelope:before { content: "\f0e0"; } .uk-icon-linkedin:before { content: "\f0e1"; } .uk-icon-rotate-left:before, .uk-icon-undo:before { content: "\f0e2"; } .uk-icon-legal:before, .uk-icon-gavel:before { content: "\f0e3"; } .uk-icon-dashboard:before, .uk-icon-tachometer:before { content: "\f0e4"; } .uk-icon-comment-o:before { content: "\f0e5"; } .uk-icon-comments-o:before { content: "\f0e6"; } .uk-icon-flash:before, .uk-icon-bolt:before { content: "\f0e7"; } .uk-icon-sitemap:before { content: "\f0e8"; } .uk-icon-umbrella:before { content: "\f0e9"; } .uk-icon-paste:before, .uk-icon-clipboard:before { content: "\f0ea"; } .uk-icon-lightbulb-o:before { content: "\f0eb"; } .uk-icon-exchange:before { content: "\f0ec"; } .uk-icon-cloud-download:before { content: "\f0ed"; } .uk-icon-cloud-upload:before { content: "\f0ee"; } .uk-icon-user-md:before { content: "\f0f0"; } .uk-icon-stethoscope:before { content: "\f0f1"; } .uk-icon-suitcase:before { content: "\f0f2"; } .uk-icon-bell-o:before { content: "\f0a2"; } .uk-icon-coffee:before { content: "\f0f4"; } .uk-icon-cutlery:before { content: "\f0f5"; } .uk-icon-file-text-o:before { content: "\f0f6"; } .uk-icon-building-o:before { content: "\f0f7"; } .uk-icon-hospital-o:before { content: "\f0f8"; } .uk-icon-ambulance:before { content: "\f0f9"; } .uk-icon-medkit:before { content: "\f0fa"; } .uk-icon-fighter-jet:before { content: "\f0fb"; } .uk-icon-beer:before { content: "\f0fc"; } .uk-icon-h-square:before { content: "\f0fd"; } .uk-icon-plus-square:before { content: "\f0fe"; } .uk-icon-angle-double-left:before { content: "\f100"; } .uk-icon-angle-double-right:before { content: "\f101"; } .uk-icon-angle-double-up:before { content: "\f102"; } .uk-icon-angle-double-down:before { content: "\f103"; } .uk-icon-angle-left:before { content: "\f104"; } .uk-icon-angle-right:before { content: "\f105"; } .uk-icon-angle-up:before { content: "\f106"; } .uk-icon-angle-down:before { content: "\f107"; } .uk-icon-desktop:before { content: "\f108"; } .uk-icon-laptop:before { content: "\f109"; } .uk-icon-tablet:before { content: "\f10a"; } .uk-icon-mobile-phone:before, .uk-icon-mobile:before { content: "\f10b"; } .uk-icon-circle-o:before { content: "\f10c"; } .uk-icon-quote-left:before { content: "\f10d"; } .uk-icon-quote-right:before { content: "\f10e"; } .uk-icon-spinner:before { content: "\f110"; } .uk-icon-circle:before { content: "\f111"; } .uk-icon-mail-reply:before, .uk-icon-reply:before { content: "\f112"; } .uk-icon-github-alt:before { content: "\f113"; } .uk-icon-folder-o:before { content: "\f114"; } .uk-icon-folder-open-o:before { content: "\f115"; } .uk-icon-smile-o:before { content: "\f118"; } .uk-icon-frown-o:before { content: "\f119"; } .uk-icon-meh-o:before { content: "\f11a"; } .uk-icon-gamepad:before { content: "\f11b"; } .uk-icon-keyboard-o:before { content: "\f11c"; } .uk-icon-flag-o:before { content: "\f11d"; } .uk-icon-flag-checkered:before { content: "\f11e"; } .uk-icon-terminal:before { content: "\f120"; } .uk-icon-code:before { content: "\f121"; } .uk-icon-mail-reply-all:before, .uk-icon-reply-all:before { content: "\f122"; } .uk-icon-star-half-empty:before, .uk-icon-star-half-full:before, .uk-icon-star-half-o:before { content: "\f123"; } .uk-icon-location-arrow:before { content: "\f124"; } .uk-icon-crop:before { content: "\f125"; } .uk-icon-code-fork:before { content: "\f126"; } .uk-icon-unlink:before, .uk-icon-chain-broken:before { content: "\f127"; } .uk-icon-question:before { content: "\f128"; } .uk-icon-info:before { content: "\f129"; } .uk-icon-exclamation:before { content: "\f12a"; } .uk-icon-superscript:before { content: "\f12b"; } .uk-icon-subscript:before { content: "\f12c"; } .uk-icon-eraser:before { content: "\f12d"; } .uk-icon-puzzle-piece:before { content: "\f12e"; } .uk-icon-microphone:before { content: "\f130"; } .uk-icon-microphone-slash:before { content: "\f131"; } .uk-icon-shield:before { content: "\f132"; } .uk-icon-calendar-o:before { content: "\f133"; } .uk-icon-fire-extinguisher:before { content: "\f134"; } .uk-icon-rocket:before { content: "\f135"; } .uk-icon-maxcdn:before { content: "\f136"; } .uk-icon-chevron-circle-left:before { content: "\f137"; } .uk-icon-chevron-circle-right:before { content: "\f138"; } .uk-icon-chevron-circle-up:before { content: "\f139"; } .uk-icon-chevron-circle-down:before { content: "\f13a"; } .uk-icon-html5:before { content: "\f13b"; } .uk-icon-css3:before { content: "\f13c"; } .uk-icon-anchor:before { content: "\f13d"; } .uk-icon-unlock-alt:before { content: "\f13e"; } .uk-icon-bullseye:before { content: "\f140"; } .uk-icon-ellipsis-h:before { content: "\f141"; } .uk-icon-ellipsis-v:before { content: "\f142"; } .uk-icon-rss-square:before { content: "\f143"; } .uk-icon-play-circle:before { content: "\f144"; } .uk-icon-ticket:before { content: "\f145"; } .uk-icon-minus-square:before { content: "\f146"; } .uk-icon-minus-square-o:before { content: "\f147"; } .uk-icon-level-up:before { content: "\f148"; } .uk-icon-level-down:before { content: "\f149"; } .uk-icon-check-square:before { content: "\f14a"; } .uk-icon-pencil-square:before { content: "\f14b"; } .uk-icon-external-link-square:before { content: "\f14c"; } .uk-icon-share-square:before { content: "\f14d"; } .uk-icon-compass:before { content: "\f14e"; } .uk-icon-toggle-down:before, .uk-icon-caret-square-o-down:before { content: "\f150"; } .uk-icon-toggle-up:before, .uk-icon-caret-square-o-up:before { content: "\f151"; } .uk-icon-toggle-right:before, .uk-icon-caret-square-o-right:before { content: "\f152"; } .uk-icon-euro:before, .uk-icon-eur:before { content: "\f153"; } .uk-icon-gbp:before { content: "\f154"; } .uk-icon-dollar:before, .uk-icon-usd:before { content: "\f155"; } .uk-icon-rupee:before, .uk-icon-inr:before { content: "\f156"; } .uk-icon-cny:before, .uk-icon-rmb:before, .uk-icon-yen:before, .uk-icon-jpy:before { content: "\f157"; } .uk-icon-ruble:before, .uk-icon-rouble:before, .uk-icon-rub:before { content: "\f158"; } .uk-icon-won:before, .uk-icon-krw:before { content: "\f159"; } .uk-icon-bitcoin:before, .uk-icon-btc:before { content: "\f15a"; } .uk-icon-file:before { content: "\f15b"; } .uk-icon-file-text:before { content: "\f15c"; } .uk-icon-sort-alpha-asc:before { content: "\f15d"; } .uk-icon-sort-alpha-desc:before { content: "\f15e"; } .uk-icon-sort-amount-asc:before { content: "\f160"; } .uk-icon-sort-amount-desc:before { content: "\f161"; } .uk-icon-sort-numeric-asc:before { content: "\f162"; } .uk-icon-sort-numeric-desc:before { content: "\f163"; } .uk-icon-thumbs-up:before { content: "\f164"; } .uk-icon-thumbs-down:before { content: "\f165"; } .uk-icon-youtube-square:before { content: "\f166"; } .uk-icon-youtube:before { content: "\f167"; } .uk-icon-xing:before { content: "\f168"; } .uk-icon-xing-square:before { content: "\f169"; } .uk-icon-youtube-play:before { content: "\f16a"; } .uk-icon-dropbox:before { content: "\f16b"; } .uk-icon-stack-overflow:before { content: "\f16c"; } .uk-icon-instagram:before { content: "\f16d"; } .uk-icon-flickr:before { content: "\f16e"; } .uk-icon-adn:before { content: "\f170"; } .uk-icon-bitbucket:before { content: "\f171"; } .uk-icon-bitbucket-square:before { content: "\f172"; } .uk-icon-tumblr:before { content: "\f173"; } .uk-icon-tumblr-square:before { content: "\f174"; } .uk-icon-long-arrow-down:before { content: "\f175"; } .uk-icon-long-arrow-up:before { content: "\f176"; } .uk-icon-long-arrow-left:before { content: "\f177"; } .uk-icon-long-arrow-right:before { content: "\f178"; } .uk-icon-apple:before { content: "\f179"; } .uk-icon-windows:before { content: "\f17a"; } .uk-icon-android:before { content: "\f17b"; } .uk-icon-linux:before { content: "\f17c"; } .uk-icon-dribbble:before { content: "\f17d"; } .uk-icon-skype:before { content: "\f17e"; } .uk-icon-foursquare:before { content: "\f180"; } .uk-icon-trello:before { content: "\f181"; } .uk-icon-female:before { content: "\f182"; } .uk-icon-male:before { content: "\f183"; } .uk-icon-gittip:before, .uk-icon-gratipay:before { content: "\f184"; } .uk-icon-sun-o:before { content: "\f185"; } .uk-icon-moon-o:before { content: "\f186"; } .uk-icon-archive:before { content: "\f187"; } .uk-icon-bug:before { content: "\f188"; } .uk-icon-vk:before { content: "\f189"; } .uk-icon-weibo:before { content: "\f18a"; } .uk-icon-renren:before { content: "\f18b"; } .uk-icon-pagelines:before { content: "\f18c"; } .uk-icon-stack-exchange:before { content: "\f18d"; } .uk-icon-arrow-circle-o-right:before { content: "\f18e"; } .uk-icon-arrow-circle-o-left:before { content: "\f190"; } .uk-icon-toggle-left:before, .uk-icon-caret-square-o-left:before { content: "\f191"; } .uk-icon-dot-circle-o:before { content: "\f192"; } .uk-icon-wheelchair:before { content: "\f193"; } .uk-icon-vimeo-square:before { content: "\f194"; } .uk-icon-turkish-lira:before, .uk-icon-try:before { content: "\f195"; } .uk-icon-plus-square-o:before { content: "\f196"; } .uk-icon-space-shuttle:before { content: "\f197"; } .uk-icon-slack:before { content: "\f198"; } .uk-icon-envelope-square:before { content: "\f199"; } .uk-icon-wordpress:before { content: "\f19a"; } .uk-icon-openid:before { content: "\f19b"; } .uk-icon-institution:before, .uk-icon-bank:before, .uk-icon-university:before { content: "\f19c"; } .uk-icon-mortar-board:before, .uk-icon-graduation-cap:before { content: "\f19d"; } .uk-icon-yahoo:before { content: "\f19e"; } .uk-icon-google:before { content: "\f1a0"; } .uk-icon-reddit:before { content: "\f1a1"; } .uk-icon-reddit-square:before { content: "\f1a2"; } .uk-icon-stumbleupon-circle:before { content: "\f1a3"; } .uk-icon-stumbleupon:before { content: "\f1a4"; } .uk-icon-delicious:before { content: "\f1a5"; } .uk-icon-digg:before { content: "\f1a6"; } .uk-icon-pied-piper:before { content: "\f1a7"; } .uk-icon-pied-piper-alt:before { content: "\f1a8"; } .uk-icon-drupal:before { content: "\f1a9"; } .uk-icon-joomla:before { content: "\f1aa"; } .uk-icon-language:before { content: "\f1ab"; } .uk-icon-fax:before { content: "\f1ac"; } .uk-icon-building:before { content: "\f1ad"; } .uk-icon-child:before { content: "\f1ae"; } .uk-icon-paw:before { content: "\f1b0"; } .uk-icon-spoon:before { content: "\f1b1"; } .uk-icon-cube:before { content: "\f1b2"; } .uk-icon-cubes:before { content: "\f1b3"; } .uk-icon-behance:before { content: "\f1b4"; } .uk-icon-behance-square:before { content: "\f1b5"; } .uk-icon-steam:before { content: "\f1b6"; } .uk-icon-steam-square:before { content: "\f1b7"; } .uk-icon-recycle:before { content: "\f1b8"; } .uk-icon-automobile:before, .uk-icon-car:before { content: "\f1b9"; } .uk-icon-cab:before, .uk-icon-taxi:before { content: "\f1ba"; } .uk-icon-tree:before { content: "\f1bb"; } .uk-icon-spotify:before { content: "\f1bc"; } .uk-icon-deviantart:before { content: "\f1bd"; } .uk-icon-soundcloud:before { content: "\f1be"; } .uk-icon-database:before { content: "\f1c0"; } .uk-icon-file-pdf-o:before { content: "\f1c1"; } .uk-icon-file-word-o:before { content: "\f1c2"; } .uk-icon-file-excel-o:before { content: "\f1c3"; } .uk-icon-file-powerpoint-o:before { content: "\f1c4"; } .uk-icon-file-photo-o:before, .uk-icon-file-picture-o:before, .uk-icon-file-image-o:before { content: "\f1c5"; } .uk-icon-file-zip-o:before, .uk-icon-file-archive-o:before { content: "\f1c6"; } .uk-icon-file-sound-o:before, .uk-icon-file-audio-o:before { content: "\f1c7"; } .uk-icon-file-movie-o:before, .uk-icon-file-video-o:before { content: "\f1c8"; } .uk-icon-file-code-o:before { content: "\f1c9"; } .uk-icon-vine:before { content: "\f1ca"; } .uk-icon-codepen:before { content: "\f1cb"; } .uk-icon-jsfiddle:before { content: "\f1cc"; } .uk-icon-life-bouy:before, .uk-icon-life-buoy:before, .uk-icon-life-saver:before, .uk-icon-support:before, .uk-icon-life-ring:before { content: "\f1cd"; } .uk-icon-circle-o-notch:before { content: "\f1ce"; } .uk-icon-ra:before, .uk-icon-rebel:before { content: "\f1d0"; } .uk-icon-ge:before, .uk-icon-empire:before { content: "\f1d1"; } .uk-icon-git-square:before { content: "\f1d2"; } .uk-icon-git:before { content: "\f1d3"; } .uk-icon-hacker-news:before { content: "\f1d4"; } .uk-icon-tencent-weibo:before { content: "\f1d5"; } .uk-icon-qq:before { content: "\f1d6"; } .uk-icon-wechat:before, .uk-icon-weixin:before { content: "\f1d7"; } .uk-icon-send:before, .uk-icon-paper-plane:before { content: "\f1d8"; } .uk-icon-send-o:before, .uk-icon-paper-plane-o:before { content: "\f1d9"; } .uk-icon-history:before { content: "\f1da"; } .uk-icon-genderless:before, .uk-icon-circle-thin:before { content: "\f1db"; } .uk-icon-header:before { content: "\f1dc"; } .uk-icon-paragraph:before { content: "\f1dd"; } .uk-icon-sliders:before { content: "\f1de"; } .uk-icon-share-alt:before { content: "\f1e0"; } .uk-icon-share-alt-square:before { content: "\f1e1"; } .uk-icon-bomb:before { content: "\f1e2"; } .uk-icon-soccer-ball-o:before, .uk-icon-futbol-o:before { content: "\f1e3"; } .uk-icon-tty:before { content: "\f1e4"; } .uk-icon-binoculars:before { content: "\f1e5"; } .uk-icon-plug:before { content: "\f1e6"; } .uk-icon-slideshare:before { content: "\f1e7"; } .uk-icon-twitch:before { content: "\f1e8"; } .uk-icon-yelp:before { content: "\f1e9"; } .uk-icon-newspaper-o:before { content: "\f1ea"; } .uk-icon-wifi:before { content: "\f1eb"; } .uk-icon-calculator:before { content: "\f1ec"; } .uk-icon-paypal:before { content: "\f1ed"; } .uk-icon-google-wallet:before { content: "\f1ee"; } .uk-icon-cc-visa:before { content: "\f1f0"; } .uk-icon-cc-mastercard:before { content: "\f1f1"; } .uk-icon-cc-discover:before { content: "\f1f2"; } .uk-icon-cc-amex:before { content: "\f1f3"; } .uk-icon-cc-paypal:before { content: "\f1f4"; } .uk-icon-cc-stripe:before { content: "\f1f5"; } .uk-icon-bell-slash:before { content: "\f1f6"; } .uk-icon-bell-slash-o:before { content: "\f1f7"; } .uk-icon-trash:before { content: "\f1f8"; } .uk-icon-copyright:before { content: "\f1f9"; } .uk-icon-at:before { content: "\f1fa"; } .uk-icon-eyedropper:before { content: "\f1fb"; } .uk-icon-paint-brush:before { content: "\f1fc"; } .uk-icon-birthday-cake:before { content: "\f1fd"; } .uk-icon-area-chart:before { content: "\f1fe"; } .uk-icon-pie-chart:before { content: "\f200"; } .uk-icon-line-chart:before { content: "\f201"; } .uk-icon-lastfm:before { content: "\f202"; } .uk-icon-lastfm-square:before { content: "\f203"; } .uk-icon-toggle-off:before { content: "\f204"; } .uk-icon-toggle-on:before { content: "\f205"; } .uk-icon-bicycle:before { content: "\f206"; } .uk-icon-bus:before { content: "\f207"; } .uk-icon-ioxhost:before { content: "\f208"; } .uk-icon-angellist:before { content: "\f209"; } .uk-icon-cc:before { content: "\f20a"; } .uk-icon-shekel:before, .uk-icon-sheqel:before, .uk-icon-ils:before { content: "\f20b"; } .uk-icon-meanpath:before { content: "\f20c"; } .uk-icon-buysellads:before { content: "\f20d"; } .uk-icon-connectdevelop:before { content: "\f20e"; } .uk-icon-dashcube:before { content: "\f210"; } .uk-icon-forumbee:before { content: "\f211"; } .uk-icon-leanpub:before { content: "\f212"; } .uk-icon-sellsy:before { content: "\f213"; } .uk-icon-shirtsinbulk:before { content: "\f214"; } .uk-icon-simplybuilt:before { content: "\f215"; } .uk-icon-skyatlas:before { content: "\f216"; } .uk-icon-cart-plus:before { content: "\f217"; } .uk-icon-cart-arrow-down:before { content: "\f218"; } .uk-icon-diamond:before { content: "\f219"; } .uk-icon-ship:before { content: "\f21a"; } .uk-icon-user-secret:before { content: "\f21b"; } .uk-icon-motorcycle:before { content: "\f21c"; } .uk-icon-street-view:before { content: "\f21d"; } .uk-icon-heartbeat:before { content: "\f21e"; } .uk-icon-venus:before { content: "\f221"; } .uk-icon-mars:before { content: "\f222"; } .uk-icon-mercury:before { content: "\f223"; } .uk-icon-transgender:before { content: "\f224"; } .uk-icon-transgender-alt:before { content: "\f225"; } .uk-icon-venus-double:before { content: "\f226"; } .uk-icon-mars-double:before { content: "\f227"; } .uk-icon-venus-mars:before { content: "\f228"; } .uk-icon-mars-stroke:before { content: "\f229"; } .uk-icon-mars-stroke-v:before { content: "\f22a"; } .uk-icon-mars-stroke-h:before { content: "\f22b"; } .uk-icon-neuter:before { content: "\f22c"; } .uk-icon-facebook-official:before { content: "\f230"; } .uk-icon-pinterest-p:before { content: "\f231"; } .uk-icon-whatsapp:before { content: "\f232"; } .uk-icon-server:before { content: "\f233"; } .uk-icon-user-plus:before { content: "\f234"; } .uk-icon-user-times:before { content: "\f235"; } .uk-icon-hotel:before, .uk-icon-bed:before { content: "\f236"; } .uk-icon-viacoin:before { content: "\f237"; } .uk-icon-train:before { content: "\f238"; } .uk-icon-subway:before { content: "\f239"; } .uk-icon-medium-logo:before { content: "\f23a"; } .uk-icon-500px:before { content: "\f26e"; } .uk-icon-amazon:before { content: "\f270"; } .uk-icon-balance-scale:before { content: "\f24e"; } .uk-icon-battery-empty:before, .uk-icon-battery-0:before { content: "\f244"; } .uk-icon-battery-quarter:before, .uk-icon-battery-1:before { content: "\f243"; } .uk-icon-battery-half:before, .uk-icon-battery-2:before { content: "\f242"; } .uk-icon-battery-three-quarters:before, .uk-icon-battery-3:before { content: "\f241"; } .uk-icon-battery-full:before, .uk-icon-battery-4:before { content: "\f240"; } .uk-icon-black-tie:before { content: "\f27e"; } .uk-icon-calendar-check-o:before { content: "\f274"; } .uk-icon-calendar-minus-o:before { content: "\f272"; } .uk-icon-calendar-plus-o:before { content: "\f271"; } .uk-icon-calendar-times-o:before { content: "\f273"; } .uk-icon-cc-diners-club:before { content: "\f24c"; } .uk-icon-cc-jcb:before { content: "\f24b"; } .uk-icon-chrome:before { content: "\f268"; } .uk-icon-clone:before { content: "\f24d"; } .uk-icon-commenting:before { content: "\f27a"; } .uk-icon-commenting-o:before { content: "\f27b"; } .uk-icon-contao:before { content: "\f26d"; } .uk-icon-creative-commons:before { content: "\f25e"; } .uk-icon-expeditedssl:before { content: "\f23e"; } .uk-icon-firefox:before { content: "\f269"; } .uk-icon-fonticons:before { content: "\f280"; } .uk-icon-get-pocket:before { content: "\f265"; } .uk-icon-gg:before { content: "\f260"; } .uk-icon-gg-circle:before { content: "\f261"; } .uk-icon-hand-lizard-o:before { content: "\f258"; } .uk-icon-hand-stop-o:before, .uk-icon-hand-paper-o:before { content: "\f256"; } .uk-icon-hand-peace-o:before { content: "\f25b"; } .uk-icon-hand-pointer-o:before { content: "\f25a"; } .uk-icon-hand-grab-o:before, .uk-icon-hand-rock-o:before { content: "\f255"; } .uk-icon-hand-scissors-o:before { content: "\f257"; } .uk-icon-hand-spock-o:before { content: "\f259"; } .uk-icon-hourglass:before { content: "\f254"; } .uk-icon-hourglass-o:before { content: "\f250"; } .uk-icon-hourglass-1:before, .uk-icon-hourglass-start:before { content: "\f251"; } .uk-icon-hourglass-2:before, .uk-icon-hourglass-half:before { content: "\f252"; } .uk-icon-hourglass-3:before, .uk-icon-hourglass-end:before { content: "\f253"; } .uk-icon-houzz:before { content: "\f27c"; } .uk-icon-i-cursor:before { content: "\f246"; } .uk-icon-industry:before { content: "\f275"; } .uk-icon-internet-explorer:before { content: "\f26b"; } .uk-icon-map:before { content: "\f279"; } .uk-icon-map-o:before { content: "\f278"; } .uk-icon-map-pin:before { content: "\f276"; } .uk-icon-map-signs:before { content: "\f277"; } .uk-icon-mouse-pointer:before { content: "\f245"; } .uk-icon-object-group:before { content: "\f247"; } .uk-icon-object-ungroup:before { content: "\f248"; } .uk-icon-odnoklassniki:before { content: "\f263"; } .uk-icon-odnoklassniki-square:before { content: "\f264"; } .uk-icon-opencart:before { content: "\f23d"; } .uk-icon-opera:before { content: "\f26a"; } .uk-icon-optin-monster:before { content: "\f23c"; } .uk-icon-registered:before { content: "\f25d"; } .uk-icon-safari:before { content: "\f267"; } .uk-icon-sticky-note:before { content: "\f249"; } .uk-icon-sticky-note-o:before { content: "\f24a"; } .uk-icon-tv:before, .uk-icon-television:before { content: "\f26c"; } .uk-icon-trademark:before { content: "\f25c"; } .uk-icon-tripadvisor:before { content: "\f262"; } .uk-icon-vimeo:before { content: "\f27d"; } .uk-icon-wikipedia-w:before { content: "\f266"; } .uk-icon-yc:before, .uk-icon-y-combinator:before { content: "\f23b"; } .uk-icon-yc-square:before, .uk-icon-y-combinator-square:before { content: "\f1d4"; } .uk-icon-bluetooth:before { content: "\f293"; } .uk-icon-bluetooth-b:before { content: "\f294"; } .uk-icon-codiepie:before { content: "\f284"; } .uk-icon-credit-card-alt:before { content: "\f283"; } .uk-icon-edge:before { content: "\f282"; } .uk-icon-fort-awesome:before { content: "\f286"; } .uk-icon-hashtag:before { content: "\f292"; } .uk-icon-mixcloud:before { content: "\f289"; } .uk-icon-modx:before { content: "\f285"; } .uk-icon-pause-circle:before { content: "\f28b"; } .uk-icon-pause-circle-o:before { content: "\f28c"; } .uk-icon-percent:before { content: "\f295"; } .uk-icon-product-hunt:before { content: "\f288"; } .uk-icon-reddit-alien:before { content: "\f281"; } .uk-icon-scribd:before { content: "\f28a"; } .uk-icon-shopping-bag:before { content: "\f290"; } .uk-icon-shopping-basket:before { content: "\f291"; } .uk-icon-stop-circle:before { content: "\f28d"; } .uk-icon-stop-circle-o:before { content: "\f28e"; } .uk-icon-usb:before { content: "\f287"; } .uk-icon-american-sign-language-interpreting:before, .uk-icon-asl-interpreting:before { content: "\f2a3"; } .uk-icon-assistive-listening-systems:before { content: "\f2a2"; } .uk-icon-audio-description:before { content: "\f29e"; } .uk-icon-blind:before { content: "\f29d"; } .uk-icon-braille:before { content: "\f2a1"; } .uk-icon-deaf:before { content: "\f2a4"; } .uk-icon-deafness:before { content: "\f2a4"; } .uk-icon-envira:before { content: "\f299"; } .uk-icon-gitlab:before { content: "\f296"; } .uk-icon-glide:before { content: "\f2a5"; } .uk-icon-glide-g:before { content: "\f2a6"; } .uk-icon-hard-of-hearing:before { content: "\f2a4"; } .uk-icon-low-vision:before { content: "\f2a8"; } .uk-icon-question-circle-o:before { content: "\f29c"; } .uk-icon-sign-language:before, .uk-icon-signing:before { content: "\f2a7"; } .uk-icon-snapchat:before { content: "\f2ab"; } .uk-icon-snapchat-ghost:before { content: "\f2ac"; } .uk-icon-snapchat-square:before { content: "\f2ad"; } .uk-icon-universal-access:before { content: "\f29a"; } .uk-icon-viadeo:before { content: "\f2a9"; } .uk-icon-viadeo-square:before { content: "\f2aa"; } .uk-icon-volume-control-phone:before { content: "\f2a0"; } .uk-icon-wheelchair-alt:before { content: "\f29b"; } .uk-icon-wpbeginner:before { content: "\f297"; } .uk-icon-wpforms:before { content: "\f298"; } /* ======================================================================== Component: Close ========================================================================== */ /* * Removes inner padding and border in Firefox 4+. */ .uk-close::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Correct inability to style clickable `input` types in iOS. * 2. Remove margins in Chrome, Safari and Opera. * 3. Remove borders for `button`. * 4. Address `overflow` set to `hidden` in IE 8/9/10/11. * 5. Correct `font` properties and `color` not being inherited for `button`. * 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE * 7. Remove default `button` padding and background color * 8. Style */ .uk-close { /* 1 */ -webkit-appearance: none; /* 2 */ margin: 0; /* 3 */ border: none; /* 4 */ overflow: visible; /* 5 */ font: inherit; color: inherit; /* 6 */ text-transform: none; /* 7. */ padding: 0; background: transparent; /* 8 */ display: inline-block; box-sizing: content-box; width: 20px; line-height: 20px; text-align: center; vertical-align: middle; opacity: 0.3; } /* Icon */ .uk-close:after { display: block; content: "\f00d"; font-family: FontAwesome; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style * 3. Required for `a` elements */ .uk-close:hover, .uk-close:focus { opacity: 0.5; /* 2 */ outline: none; /* 3 */ color: inherit; text-decoration: none; cursor: pointer; } /* Modifier ========================================================================== */ .uk-close-alt { padding: 2px; border-radius: 50%; background: #eeeeee; opacity: 1; } /* Hover */ .uk-close-alt:hover, .uk-close-alt:focus { opacity: 1; } /* Icon */ .uk-close-alt:after { opacity: 0.5; } .uk-close-alt:hover:after, .uk-close-alt:focus:after { opacity: 0.8; } /* ======================================================================== Component: Badge ========================================================================== */ .uk-badge { display: inline-block; padding: 0 5px; background: #00a8e6; font-size: 10px; font-weight: bold; line-height: 14px; color: #ffffff; text-align: center; vertical-align: middle; text-transform: none; } /* * Keep color when badge is a link */ a.uk-badge:hover { color: #ffffff; } /* Modifier: `uk-badge-notification`; ========================================================================== */ .uk-badge-notification { box-sizing: border-box; min-width: 18px; border-radius: 500px; font-size: 12px; line-height: 18px; } /* Color modifier ========================================================================== */ /* * Modifier: `uk-badge-success` */ .uk-badge-success { background-color: #8cc14c; } /* * Modifier: `uk-badge-warning` */ .uk-badge-warning { background-color: #faa732; } /* * Modifier: `uk-badge-danger` */ .uk-badge-danger { background-color: #da314b; } /* ======================================================================== Component: Alert ========================================================================== */ .uk-alert { margin-bottom: 15px; padding: 10px; background: #ebf7fd; color: #2d7091; } /* * Add margin if adjacent element */ * + .uk-alert { margin-top: 15px; } /* * Remove margin from the last-child */ .uk-alert > :last-child { margin-bottom: 0; } /* * Keep color for headings if the default heading color is changed */ .uk-alert h1, .uk-alert h2, .uk-alert h3, .uk-alert h4, .uk-alert h5, .uk-alert h6 { color: inherit; } /* Close in alert ========================================================================== */ .uk-alert > .uk-close:first-child { float: right; } /* * Remove margin from adjacent element */ .uk-alert > .uk-close:first-child + * { margin-top: 0; } /* Modifier: `uk-alert-success` ========================================================================== */ .uk-alert-success { background: #f2fae3; color: #659f13; } /* Modifier: `uk-alert-warning` ========================================================================== */ .uk-alert-warning { background: #fffceb; color: #e28327; } /* Modifier: `uk-alert-danger` ========================================================================== */ .uk-alert-danger { background: #fff1f0; color: #d85030; } /* Modifier: `uk-alert-large` ========================================================================== */ .uk-alert-large { padding: 20px; } .uk-alert-large > .uk-close:first-child { margin: -10px -10px 0 0; } /* ======================================================================== Component: Thumbnail ========================================================================== */ /* * 1. Container width fits its content * 2. Responsive behavior * 3. Corrects `max-width` behavior sed * 4. Required for `figure` element * 5. Style */ .uk-thumbnail { /* 1 */ display: inline-block; /* 2 */ max-width: 100%; /* 3 */ box-sizing: border-box; /* 3 */ margin: 0; /* 4 */ padding: 4px; border: 1px solid #dddddd; background: #ffffff; } /* * Hover state for `a` elements * 1. Apply hover style also to focus state * 2. Needed for caption * 3. Remove default focus style */ a.uk-thumbnail:hover, a.uk-thumbnail:focus { border-color: #aaaaaa; background-color: #ffffff; /* 2 */ text-decoration: none; /* 3 */ outline: none; } /* Caption ========================================================================== */ .uk-thumbnail-caption { padding-top: 4px; text-align: center; color: #444444; } /* Sizes ========================================================================== */ .uk-thumbnail-mini { width: 150px; } .uk-thumbnail-small { width: 200px; } .uk-thumbnail-medium { width: 300px; } .uk-thumbnail-large { width: 400px; } .uk-thumbnail-expand, .uk-thumbnail-expand > img { width: 100%; } /* ======================================================================== Component: Overlay ========================================================================== */ /* * 1. Container width fits its content * 2. Create position context * 3. Set max-width for responsive images to prevent `inline-block` consequences * 4. Remove the gap between the container and its child element * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit * 7. Reset margin */ .uk-overlay { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; /* 4 */ vertical-align: middle; /* 5 */ overflow: hidden; /* 6 */ -webkit-transform: translateZ(0); /* 7 */ margin: 0; } /* 6 for Safari */ .uk-overlay.uk-border-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } /* * Remove margin from content */ .uk-overlay > :first-child { margin-bottom: 0; } /* Sub-object `uk-overlay-panel` ========================================================================== */ /* * 1. Position cover * 2. Style */ .uk-overlay-panel { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* 2 */ padding: 20px; color: #ffffff; } /* * Remove margin from the last-child */ .uk-overlay-panel > :last-child, .uk-overlay-panel.uk-flex > * > :last-child { margin-bottom: 0; } /* * Keep color for headings if the default heading color is changed */ .uk-overlay-panel h1, .uk-overlay-panel h2, .uk-overlay-panel h3, .uk-overlay-panel h4, .uk-overlay-panel h5, .uk-overlay-panel h6 { color: inherit; } .uk-overlay-panel a:not([class]) { color: inherit; text-decoration: underline; } .uk-overlay-panel a[class*='uk-icon-']:not(.uk-icon-button) { color: inherit; } /* Sub-object `uk-overlay-hover` and `uk-overlay-active` ========================================================================== */ .uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { opacity: 0; } .uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { opacity: 0; } /* Modifier `uk-overlay-background` ========================================================================== */ .uk-overlay-background { background: rgba(0, 0, 0, 0.5); } /* Modifier `uk-overlay-image` ========================================================================== */ /* * Reset panel */ .uk-overlay-image { padding: 0; } /* Position modifiers ========================================================================== */ .uk-overlay-top { bottom: auto; } .uk-overlay-bottom { top: auto; } .uk-overlay-left { right: auto; } .uk-overlay-right { left: auto; } /* Sub-object `uk-overlay-icon` ========================================================================== */ .uk-overlay-icon:before { content: "\f002"; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; font-size: 50px; line-height: 1; font-family: FontAwesome; text-align: center; color: #ffffff; } /* Transitions ========================================================================== */ .uk-overlay-fade, .uk-overlay-scale, .uk-overlay-spin, .uk-overlay-grayscale, .uk-overlay-blur, [class*='uk-overlay-slide'] { transition-duration: 0.3s; transition-timing-function: ease-out; transition-property: opacity, transform, filter; } .uk-overlay-active .uk-overlay-fade, .uk-overlay-active .uk-overlay-scale, .uk-overlay-active .uk-overlay-spin, .uk-overlay-active [class*='uk-overlay-slide'] { transition-duration: 0.8s; } /* * Fade */ .uk-overlay-fade { opacity: 0.7; } .uk-overlay-hover:hover .uk-overlay-fade, .uk-overlay-hover.uk-hover .uk-overlay-fade, .uk-overlay-active .uk-active > .uk-overlay-fade { opacity: 1; } /* * Scale */ .uk-overlay-scale { -webkit-transform: scale(1); transform: scale(1); } .uk-overlay-hover:hover .uk-overlay-scale, .uk-overlay-hover.uk-hover .uk-overlay-scale, .uk-overlay-active .uk-active > .uk-overlay-scale { -webkit-transform: scale(1.1); transform: scale(1.1); } /* * Spin */ .uk-overlay-spin { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .uk-overlay-hover:hover .uk-overlay-spin, .uk-overlay-hover.uk-hover .uk-overlay-spin, .uk-overlay-active .uk-active > .uk-overlay-spin { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } /* * Grayscale */ .uk-overlay-grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .uk-overlay-hover:hover .uk-overlay-grayscale, .uk-overlay-hover.uk-hover .uk-overlay-grayscale, .uk-overlay-active .uk-active > .uk-overlay-grayscale { -webkit-filter: grayscale(0%); filter: grayscale(0%); } /* * Slide */ [class*='uk-overlay-slide'] { opacity: 0; } /* Top */ .uk-overlay-slide-top { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* Bottom */ .uk-overlay-slide-bottom { -webkit-transform: translateY(100%); transform: translateY(100%); } /* Left */ .uk-overlay-slide-left { -webkit-transform: translateX(-100%); transform: translateX(-100%); } /* Right */ .uk-overlay-slide-right { -webkit-transform: translateX(100%); transform: translateX(100%); } /* Hover */ .uk-overlay-hover:hover [class*='uk-overlay-slide'], .uk-overlay-hover.uk-hover [class*='uk-overlay-slide'], .uk-overlay-active .uk-active > [class*='uk-overlay-slide'] { opacity: 1; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } /* DEPRECATED * Sub-object `uk-overlay-area` ========================================================================== */ /* * 1. Set position * 2. Set style * 3. Fade-in transition */ .uk-overlay-area { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* 2 */ background: rgba(0, 0, 0, 0.3); /* 3 */ opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; -webkit-transform: translate3d(0, 0, 0); } /* * Hover * 1. `uk-hover` to support touch devices * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier */ .uk-overlay:hover .uk-overlay-area, .uk-overlay.uk-hover .uk-overlay-area, .uk-overlay-toggle:hover .uk-overlay-area, .uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; } /* * Icon */ .uk-overlay-area:empty:before { content: "\f002"; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; font-size: 50px; line-height: 1; font-family: FontAwesome; text-align: center; color: #ffffff; } /* DEPRECATED * Sub-object `uk-overlay-area-content` ========================================================================== */ /* * Remove whitespace between child elements when using `inline-block` * Needed for Firefox */ .uk-overlay-area:not(:empty) { font-size: 0.001px; } /* * 1. Needed for vertical alignment */ .uk-overlay-area:not(:empty):before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* * 1. Set vertical alignment * 2. Reset whitespace hack * 3. Set horizontal alignment * 4. Set style */ .uk-overlay-area-content { /* 1 */ display: inline-block; box-sizing: border-box; width: 100%; vertical-align: middle; /* 2 */ font-size: 1rem; /* 3 */ text-align: center; /* 4 */ padding: 0 15px; color: #ffffff; } /* * Remove margin from the last-child */ .uk-overlay-area-content > :last-child { margin-bottom: 0; } /* * Links in overlay area */ .uk-overlay-area-content a:not([class]), .uk-overlay-area-content a:not([class]):hover { color: inherit; } /* DEPRECATED * Sub-object `uk-overlay-caption` ========================================================================== */ /* * 1. Set position * 2. Set style * 3. Fade-in transition */ .uk-overlay-caption { /* 1 */ position: absolute; bottom: 0; left: 0; right: 0; /* 2 */ padding: 15px; background: rgba(0, 0, 0, 0.5); color: #ffffff; /* 3 */ opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; -webkit-transform: translate3d(0, 0, 0); } /* * Hover * 1. `uk-hover` to support touch devices * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier */ .uk-overlay:hover .uk-overlay-caption, .uk-overlay.uk-hover .uk-overlay-caption, .uk-overlay-toggle:hover .uk-overlay-caption, .uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; } /* ======================================================================== Component: Column ========================================================================== */ [class*='uk-column-'] { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; } /* Width modifiers ========================================================================== */ .uk-column-1-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .uk-column-1-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .uk-column-1-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .uk-column-1-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .uk-column-1-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } /* Phone landscape and bigger */ @media (min-width: 480px) { .uk-column-small-1-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .uk-column-small-1-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .uk-column-small-1-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .uk-column-small-1-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .uk-column-small-1-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } } /* Tablet and bigger */ @media (min-width: 768px) { .uk-column-medium-1-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .uk-column-medium-1-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .uk-column-medium-1-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .uk-column-medium-1-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .uk-column-medium-1-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-column-large-1-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .uk-column-large-1-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .uk-column-large-1-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .uk-column-large-1-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .uk-column-large-1-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-column-xlarge-1-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .uk-column-xlarge-1-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .uk-column-xlarge-1-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .uk-column-xlarge-1-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .uk-column-xlarge-1-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } } /* ======================================================================== Component: Animation ========================================================================== */ [class*='uk-animation-'] { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Hide animated element if scrollspy is used */ @media screen { [data-uk-scrollspy*='uk-animation-']:not([data-uk-scrollspy*='target']) { opacity: 0; } } /* * Fade * Higher specificity (!important) needed because of reverse modifier */ .uk-animation-fade { -webkit-animation-name: uk-fade; animation-name: uk-fade; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: linear !important; animation-timing-function: linear !important; } /* * Fade with scale */ .uk-animation-scale-up { -webkit-animation-name: uk-fade-scale-02; animation-name: uk-fade-scale-02; } .uk-animation-scale-down { -webkit-animation-name: uk-fade-scale-18; animation-name: uk-fade-scale-18; } /* * Fade with slide */ .uk-animation-slide-top { -webkit-animation-name: uk-fade-top; animation-name: uk-fade-top; } .uk-animation-slide-bottom { -webkit-animation-name: uk-fade-bottom; animation-name: uk-fade-bottom; } .uk-animation-slide-left { -webkit-animation-name: uk-fade-left; animation-name: uk-fade-left; } .uk-animation-slide-right { -webkit-animation-name: uk-fade-right; animation-name: uk-fade-right; } /* * Scale */ .uk-animation-scale { -webkit-animation-name: uk-scale-12; animation-name: uk-scale-12; } /* * Shake */ .uk-animation-shake { -webkit-animation-name: uk-shake; animation-name: uk-shake; } /* Direction modifiers ========================================================================== */ .uk-animation-reverse { -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Duration modifiers ========================================================================== */ .uk-animation-15 { -webkit-animation-duration: 15s; animation-duration: 15s; } /* Origin modifiers ========================================================================== */ .uk-animation-top-left { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .uk-animation-top-center { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .uk-animation-top-right { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .uk-animation-middle-left { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .uk-animation-middle-right { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .uk-animation-bottom-left { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .uk-animation-bottom-center { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .uk-animation-bottom-right { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } /* Sub-object: `uk-animation-hover` ========================================================================== */ /* * Enable animation only on hover * Note: Firefox also needs this because animations are not triggered when switching between display `hidden` and `block` */ .uk-animation-hover:not(:hover), .uk-animation-hover:not(:hover) [class*='uk-animation-'], .uk-touch .uk-animation-hover:not(.uk-hover), .uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] { -webkit-animation-name: none; animation-name: none; } /* Keyframes: Fade * Used by dropdown, datepicker and slideshow component ========================================================================== */ @-webkit-keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes uk-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* Keyframes: Fade with slide ========================================================================== */ /* * Top */ @-webkit-keyframes uk-fade-top { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-fade-top { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /* * Bottom */ @-webkit-keyframes uk-fade-bottom { 0% { opacity: 0; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-fade-bottom { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } /* * Left */ @-webkit-keyframes uk-fade-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes uk-fade-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } /* * Right */ @-webkit-keyframes uk-fade-right { 0% { opacity: 0; -webkit-transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes uk-fade-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } /* Keyframes: Fade with scale ========================================================================== */ /* * Scale by 0.2 */ @-webkit-keyframes uk-fade-scale-02 { 0% { opacity: 0; -webkit-transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-02 { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); } } /* * Scale by 1.5 * Used by slideshow component */ @-webkit-keyframes uk-fade-scale-15 { 0% { opacity: 0; -webkit-transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-15 { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } /* * Scale by 1.8 */ @-webkit-keyframes uk-fade-scale-18 { 0% { opacity: 0; -webkit-transform: scale(1.8); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes uk-fade-scale-18 { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } /* Keyframes: Slide * Used by slideshow component ========================================================================== */ /* * Left */ @-webkit-keyframes uk-slide-left { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } /* * Right */ @-webkit-keyframes uk-slide-right { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } /* * Left third */ @-webkit-keyframes uk-slide-left-33 { 0% { -webkit-transform: translateX(33%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-left-33 { 0% { transform: translateX(33%); } 100% { transform: translateX(0); } } /* * Right third */ @-webkit-keyframes uk-slide-right-33 { 0% { -webkit-transform: translateX(-33%); } 100% { -webkit-transform: translateX(0); } } @keyframes uk-slide-right-33 { 0% { transform: translateX(-33%); } 100% { transform: translateX(0); } } /* Keyframes: Scale ========================================================================== */ @-webkit-keyframes uk-scale-12 { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @keyframes uk-scale-12 { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Keyframes: Rotate * Used by icon component ========================================================================== */ @-webkit-keyframes uk-rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @keyframes uk-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* Keyframes: Shake ========================================================================== */ @-webkit-keyframes uk-shake { 0%, 100% { -webkit-transform: translateX(0); } 10% { -webkit-transform: translateX(-9px); } 20% { -webkit-transform: translateX(8px); } 30% { -webkit-transform: translateX(-7px); } 40% { -webkit-transform: translateX(6px); } 50% { -webkit-transform: translateX(-5px); } 60% { -webkit-transform: translateX(4px); } 70% { -webkit-transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); } 90% { -webkit-transform: translateX(-1px); } } @keyframes uk-shake { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-9px); } 20% { transform: translateX(8px); } 30% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 50% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 70% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 90% { transform: translateX(-1px); } } /* Keyframes: Fade with slide fixed * Used by dropdown and search component ========================================================================== */ /* * Top fixed */ @-webkit-keyframes uk-slide-top-fixed { 0% { opacity: 0; -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-slide-top-fixed { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* * Bottom fixed */ @-webkit-keyframes uk-slide-bottom-fixed { 0% { opacity: 0; -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes uk-slide-bottom-fixed { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* ======================================================================== Component: Dropdown ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Box-sizing is needed for `uk-dropdown-justify` * 4. Set width */ .uk-dropdown, .uk-dropdown-blank { /* 1 */ display: none; /* 2 */ position: absolute; z-index: 1020; /* 3 */ box-sizing: border-box; /* 4 */ width: 200px; } /* * Dropdown style * 1. Reset button group whitespace hack */ .uk-dropdown { padding: 15px; background: #f5f5f5; color: #444444; /* 1 */ font-size: 1rem; vertical-align: top; } /* * 1. Show dropdown * 2. Set animation * 3. Needed for scale animation */ .uk-open > .uk-dropdown, .uk-open > .uk-dropdown-blank { /* 1 */ display: block; /* 2 */ -webkit-animation: uk-fade 0.2s ease-in-out; animation: uk-fade 0.2s ease-in-out; /* 3 */ -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* Alignment modifiers ========================================================================== */ /* * Modifier */ .uk-dropdown-top { margin-top: -5px; } .uk-dropdown-bottom { margin-top: 5px; } .uk-dropdown-left { margin-left: -5px; } .uk-dropdown-right { margin-left: 5px; } /* Nav in dropdown ========================================================================== */ .uk-dropdown .uk-nav { margin: 0 -15px; } /* Grid and panel in dropdown ========================================================================== */ /* * Vertical gutter */ /* * Grid * Higher specificity to override large gutter */ .uk-grid .uk-dropdown-grid + .uk-dropdown-grid { margin-top: 15px; } /* Panels */ .uk-dropdown-grid > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: 15px; } /* Tablet and bigger */ @media (min-width: 768px) { /* * Horizontal gutter */ .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid { margin-left: -15px; margin-right: -15px; } .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-'] { padding-left: 15px; padding-right: 15px; } /* * Column divider */ .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { border-left: 1px solid #dddddd; } /* * Width multiplier for dropdown columns */ .uk-dropdown-width-2:not(.uk-dropdown-stack) { width: 400px; } .uk-dropdown-width-3:not(.uk-dropdown-stack) { width: 600px; } .uk-dropdown-width-4:not(.uk-dropdown-stack) { width: 800px; } .uk-dropdown-width-5:not(.uk-dropdown-stack) { width: 1000px; } } /* Phone landscape and smaller */ @media (max-width: 767px) { /* * Stack columns and take full width */ .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; } /* * Vertical gutter */ .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: 15px; } } /* * Stack grid columns */ .uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; } .uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: 15px; } /* Modifier `uk-dropdown-small` ========================================================================== */ /* * Set min-width and text expands dropdown if needed */ .uk-dropdown-small { min-width: 150px; width: auto; padding: 5px; white-space: nowrap; } /* * Nav in dropdown */ .uk-dropdown-small .uk-nav { margin: 0 -5px; } /* Modifier: `uk-dropdown-navbar` ========================================================================== */ .uk-dropdown-navbar { margin-top: 0; background: #f5f5f5; color: #444444; } .uk-open > .uk-dropdown-navbar { -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out; animation: uk-slide-top-fixed 0.2s ease-in-out; } /* Modifier `uk-dropdown-scrollable` ========================================================================== */ /* * Usefull for long lists */ .uk-dropdown-scrollable { overflow-y: auto; max-height: 200px; } /* Sub-object: `uk-dropdown-overlay` ========================================================================== */ /* ======================================================================== Component: Modal ========================================================================== */ /* * This is the modal overlay and modal dialog container * 1. Hide by default * 2. Set fixed position * 3. Allow scrolling for the modal dialog * 4. Mask the background page * 5. Fade-in transition * 6. Deactivate browser history navigation in IE11 * 7. force hardware acceleration to prevent browser rendering hiccups */ .uk-modal { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; /* 3 */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* 4 */ background: rgba(0, 0, 0, 0.6); /* 5 */ opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; /* 6 */ touch-action: cross-slide-y pinch-zoom double-tap-zoom; /* 7 */ -webkit-transform: translateZ(0); transform: translateZ(0); } /* * Open state */ .uk-modal.uk-open { opacity: 1; } /* * Prevents duplicated scrollbar caused by 4. */ .uk-modal-page, .uk-modal-page body { overflow: hidden; } /* Sub-object: `uk-modal-dialog` ========================================================================== */ /* * 1. Create position context for caption, spinner and close button * 2. Set box sizing * 3. Set style * 4. Slide-in transition */ .uk-modal-dialog { /* 1 */ position: relative; /* 2 */ box-sizing: border-box; margin: 50px auto; padding: 20px; width: 600px; max-width: 100%; max-width: calc(100% - 20px); /* 3 */ background: #ffffff; /* 4 */ opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out; transition: opacity 0.3s linear, transform 0.3s ease-out; } /* Phone landscape and smaller */ @media (max-width: 767px) { /* * Fit in small screen */ .uk-modal-dialog { width: auto; margin: 10px auto; } } /* * Open state */ .uk-open .uk-modal-dialog { /* 4 */ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* * Remove margin from the last-child */ .uk-modal-dialog > :not([class*='uk-modal-']):last-child { margin-bottom: 0; } /* Close in modal ========================================================================== */ .uk-modal-dialog > .uk-close:first-child { margin: -10px -10px 0 0; float: right; } /* * Remove margin from adjacent element */ .uk-modal-dialog > .uk-close:first-child + :not([class*='uk-modal-']) { margin-top: 0; } /* Modifier: `uk-modal-dialog-lightbox` ========================================================================== */ .uk-modal-dialog-lightbox { margin: 15px auto; padding: 0; max-width: 95%; max-width: calc(100% - 30px); min-height: 50px; } /* * Close button */ .uk-modal-dialog-lightbox > .uk-close:first-child { position: absolute; top: -12px; right: -12px; margin: 0; float: none; } /* Phone landscape and smaller */ @media (max-width: 767px) { .uk-modal-dialog-lightbox > .uk-close:first-child { top: -7px; right: -7px; } } /* Modifier: `uk-modal-dialog-blank` ========================================================================== */ .uk-modal-dialog-blank { margin: 0; padding: 0; width: 100%; max-width: 100%; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } /* * Close button */ .uk-modal-dialog-blank > .uk-close:first-child { position: absolute; top: 20px; right: 20px; z-index: 1; margin: 0; float: none; } /* Modifier: `uk-modal-dialog-large` ========================================================================== */ /* Tablet and bigger */ @media (min-width: 768px) { .uk-modal-dialog-large { width: 930px; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-modal-dialog-large { width: 1130px; } } /* Sub-Object: `uk-modal-header` and `uk-modal-footer` ========================================================================== */ .uk-modal-header { margin-bottom: 15px; } .uk-modal-footer { margin-top: 15px; } /* * Remove margin from the last-child */ .uk-modal-header > :last-child, .uk-modal-footer > :last-child { margin-bottom: 0; } /* Sub-Object: `uk-modal-caption` ========================================================================== */ .uk-modal-caption { position: absolute; left: 0; right: 0; bottom: -20px; margin-bottom: -10px; color: #ffffff; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sub-Object: `uk-modal-spinner` ========================================================================== */ .uk-modal-spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 25px; color: #ddd; } .uk-modal-spinner:after { content: "\f110"; display: block; font-family: FontAwesome; -webkit-animation: uk-rotate 2s infinite linear; animation: uk-rotate 2s infinite linear; } /* ======================================================================== Component: Off-canvas ========================================================================== */ /* * This is the offcanvas overlay and bar container * 1. Hide by default * 2. Set fixed position * 3. Deactivate browser touch actions in IE11 * 4. Mask the background page */ .uk-offcanvas { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; /* 3 */ touch-action: none; /* 4 */ background: rgba(0, 0, 0, 0.1); } .uk-offcanvas.uk-active { display: block; } /* Sub-object `uk-offcanvas-page` ========================================================================== */ /* * Prepares the whole HTML page to slide-out * 1. Fix the main page and disallow scrolling * 2. Side-out transition */ .uk-offcanvas-page { /* 1 */ position: fixed; /* 2 */ -webkit-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; } /* Sub-object `uk-offcanvas-bar` ========================================================================== */ /* * This is the offcanvas bar * 1. Set fixed position * 2. Size and style * 3. Allow scrolling * 4. Side-out transition * 5. Deactivate scroll chaining in IE11 */ .uk-offcanvas-bar { /* 1 */ position: fixed; top: 0; bottom: 0; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 1001; /* 2 */ width: 270px; max-width: 100%; background: #333333; /* 3 */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* 4 */ -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; /* 5 */ -ms-scroll-chaining: none; } .uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show { -webkit-transform: translateX(0%); transform: translateX(0%); } /* Modifier `uk-offcanvas-bar-flip` ========================================================================== */ .uk-offcanvas-bar-flip { left: auto; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } /* Panel in offcanvas ========================================================================== */ .uk-offcanvas .uk-panel { margin: 20px 15px; color: #777777; } .uk-offcanvas .uk-panel-title { color: #cccccc; } .uk-offcanvas .uk-panel a:not([class]) { color: #cccccc; } .uk-offcanvas .uk-panel a:not([class]):hover { color: #ffffff; } /* ======================================================================== Component: Switcher ========================================================================== */ /* * 1. Deactivate browser history navigation in IE11 */ .uk-switcher { margin: 0; padding: 0; list-style: none; /* 1 */ touch-action: cross-slide-y pinch-zoom double-tap-zoom; } /* * Items */ .uk-switcher > :not(.uk-active) { display: none; } /* ======================================================================== Component: Text ========================================================================== */ /* Size modifiers ========================================================================== */ .uk-text-small { font-size: 11px; line-height: 16px; } .uk-text-large { font-size: 18px; line-height: 24px; font-weight: normal; } /* Weight modifiers ========================================================================== */ .uk-text-bold { font-weight: bold; } /* Color modifiers ========================================================================== */ .uk-text-muted { color: #999999 !important; } .uk-text-primary { color: #2d7091 !important; } .uk-text-success { color: #659f13 !important; } .uk-text-warning { color: #e28327 !important; } .uk-text-danger { color: #d85030 !important; } .uk-text-contrast { color: #ffffff !important; } /* Alignment modifiers ========================================================================== */ .uk-text-left { text-align: left !important; } .uk-text-right { text-align: right !important; } .uk-text-center { text-align: center !important; } .uk-text-justify { text-align: justify !important; } .uk-text-top { vertical-align: top !important; } .uk-text-middle { vertical-align: middle !important; } .uk-text-bottom { vertical-align: bottom !important; } /* Only tablets portrait and smaller */ @media (max-width: 959px) { .uk-text-center-medium { text-align: center !important; } .uk-text-left-medium { text-align: left !important; } } /* Phone landscape and smaller */ @media (max-width: 767px) { .uk-text-center-small { text-align: center !important; } .uk-text-left-small { text-align: left !important; } } /* Wrap modifiers ========================================================================== */ /* * Prevent text from wrapping onto multiple lines */ .uk-text-nowrap { white-space: nowrap; } /* * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis */ .uk-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * Break strings if their length exceeds the width of their container */ .uk-text-break { word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /* ======================================================================== Component: Utility ========================================================================== */ /* Container ========================================================================== */ .uk-container { box-sizing: border-box; max-width: 980px; padding: 0 25px; } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-container { max-width: 1200px; padding: 0 35px; } } /* * Micro clearfix */ .uk-container:before, .uk-container:after { content: ""; display: table; } .uk-container:after { clear: both; } /* * Center container */ .uk-container-center { margin-left: auto; margin-right: auto; } /* Clearing ========================================================================== */ /* * Micro clearfix * `table-cell` is used with `:before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit * `table` is used again with `:after` because `clear` only works with block elements. * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari */ .uk-clearfix:before { content: ""; display: table-cell; } .uk-clearfix:after { content: ""; display: table; clear: both; } /* * Create a new block formatting context */ .uk-nbfc { overflow: hidden; } .uk-nbfc-alt { display: table-cell; width: 10000px; } /* Alignment of block elements ========================================================================== */ /* * Float blocks * 1. Prevent content overflow on small devices */ .uk-float-left { float: left; } .uk-float-right { float: right; } /* 1 */ [class*='uk-float-'] { max-width: 100%; } /* Alignment of images and objects ========================================================================== */ /* * Alignment */ [class*='uk-align-'] { display: block; margin-bottom: 15px; } .uk-align-left { margin-right: 15px; float: left; } .uk-align-right { margin-left: 15px; float: right; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-align-medium-left { margin-right: 15px; float: left; } .uk-align-medium-right { margin-left: 15px; float: right; } } .uk-align-center { margin-left: auto; margin-right: auto; } /* Vertical alignment ========================================================================== */ /* * Remove whitespace between child elements when using `inline-block` */ .uk-vertical-align { font-size: 0.001px; } /* * The `uk-vertical-align` container needs a specific height */ .uk-vertical-align:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* * Sub-object which can have any height * 1. Reset whitespace hack */ .uk-vertical-align-middle, .uk-vertical-align-bottom { display: inline-block; max-width: 100%; /* 1 */ font-size: 1rem; } .uk-vertical-align-middle { vertical-align: middle; } .uk-vertical-align-bottom { vertical-align: bottom; } /* Height ========================================================================== */ /* * More robust if padding and border are used */ [class*='uk-height'] { box-sizing: border-box; } /* * Useful to extend the `html` and `body` element to the full height of the page. */ .uk-height-1-1 { height: 100%; } /* * Useful to create image teasers */ .uk-height-viewport { height: 100vh; min-height: 600px; } /* Responsive objects * Note: Images are already responsive by default, see Base component ========================================================================== */ /* * 1. Corrects `max-width` and `max-height` behavior if padding and border are used */ .uk-responsive-width, .uk-responsive-height { box-sizing: border-box; } /* * Responsiveness: Sets a maximum width relative to the parent and auto scales the height * `important` needed to override `uk-img-preserve img` */ .uk-responsive-width { max-width: 100% !important; height: auto; } /* * Responsiveness: Sets a maximum height relative to the parent and auto scales the width * Only works if the parent element has a fixed height. */ .uk-responsive-height { max-height: 100%; width: auto; } /* Margin ========================================================================== */ /* * Create a block with the same margin of a paragraph * Add margin if adjacent element */ .uk-margin { margin-bottom: 15px; } * + .uk-margin { margin-top: 15px; } .uk-margin-top { margin-top: 15px !important; } .uk-margin-bottom { margin-bottom: 15px !important; } .uk-margin-left { margin-left: 15px !important; } .uk-margin-right { margin-right: 15px !important; } /* * Larger margins */ .uk-margin-large { margin-bottom: 50px; } * + .uk-margin-large { margin-top: 50px; } .uk-margin-large-top { margin-top: 50px !important; } .uk-margin-large-bottom { margin-bottom: 50px !important; } .uk-margin-large-left { margin-left: 50px !important; } .uk-margin-large-right { margin-right: 50px !important; } /* * Smaller margins */ .uk-margin-small { margin-bottom: 5px; } * + .uk-margin-small { margin-top: 5px; } .uk-margin-small-top { margin-top: 5px !important; } .uk-margin-small-bottom { margin-bottom: 5px !important; } .uk-margin-small-left { margin-left: 5px !important; } .uk-margin-small-right { margin-right: 5px !important; } /* * Remove margins */ .uk-margin-remove { margin: 0 !important; } .uk-margin-top-remove { margin-top: 0 !important; } .uk-margin-bottom-remove { margin-bottom: 0 !important; } /* Padding ========================================================================== */ .uk-padding-remove { padding: 0 !important; } .uk-padding-top-remove { padding-top: 0 !important; } .uk-padding-bottom-remove { padding-bottom: 0 !important; } .uk-padding-vertical-remove { padding-top: 0 !important; padding-bottom: 0 !important; } /* Border ========================================================================== */ .uk-border-circle { border-radius: 50%; } .uk-border-rounded { border-radius: 5px; } /* Headings ========================================================================== */ .uk-heading-large { font-size: 36px; line-height: 42px; } /* Tablet and bigger */ @media (min-width: 768px) { .uk-heading-large { font-size: 52px; line-height: 64px; } } /* Link ========================================================================== */ /* * Let links appear in default text color */ .uk-link-muted, .uk-link-muted a { color: #444444; } .uk-link-muted:hover, .uk-link-muted a:hover { color: #444444; } /* * Reset link style */ .uk-link-reset, .uk-link-reset a, .uk-link-reset:hover, .uk-link-reset a:hover, .uk-link-reset:focus, .uk-link-reset a:focus { color: inherit; text-decoration: none; } /* Scrollable ========================================================================== */ /* * Enable scrolling for preformatted text */ .uk-scrollable-text { height: 300px; overflow-y: scroll; -webkit-overflow-scrolling: touch; resize: both; } /* * Box with scrolling enabled */ .uk-scrollable-box { box-sizing: border-box; height: 170px; padding: 10px; border: 1px solid #dddddd; overflow: auto; -webkit-overflow-scrolling: touch; resize: both; } .uk-scrollable-box > :last-child { margin-bottom: 0; } /* Overflow ========================================================================== */ .uk-overflow-hidden { overflow: hidden; } /* * Enable scrollbars if content is clipped */ .uk-overflow-container { overflow: auto; -webkit-overflow-scrolling: touch; } .uk-overflow-container > :last-child { margin-bottom: 0; } /* Position ========================================================================== */ .uk-position-absolute, [class*='uk-position-top'], [class*='uk-position-bottom'] { position: absolute !important; } /* Don't use `width: 100%` because it is wrong if the parent has padding. */ .uk-position-top { top: 0; left: 0; right: 0; } .uk-position-bottom { bottom: 0; left: 0; right: 0; } .uk-position-top-left { top: 0; left: 0; } .uk-position-top-right { top: 0; right: 0; } .uk-position-bottom-left { bottom: 0; left: 0; } .uk-position-bottom-right { bottom: 0; right: 0; } /* * Cover */ .uk-position-cover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* * Relative */ .uk-position-relative { position: relative !important; } /* * Z-index */ .uk-position-z-index { z-index: 1; } /* Display ========================================================================== */ /* * Display * 1. Required if child is a responsive image */ .uk-display-block { display: block !important; } .uk-display-inline { display: inline !important; } .uk-display-inline-block { display: inline-block !important; /* 1 */ max-width: 100%; } /* * Visibility * Avoids setting display to `block` so it works also with `inline-block` and `table` */ /* Desktop and bigger */ @media (min-width: 960px) { .uk-visible-small { display: none !important; } .uk-visible-medium { display: none !important; } .uk-hidden-large { display: none !important; } } /* Tablets portrait */ @media (min-width: 768px) and (max-width: 959px) { .uk-visible-small { display: none !important; } .uk-visible-large { display: none !important ; } .uk-hidden-medium { display: none !important; } } /* Phone landscape and smaller*/ @media (max-width: 767px) { .uk-visible-medium { display: none !important; } .uk-visible-large { display: none !important; } .uk-hidden-small { display: none !important; } } /* Remove from the flow and screen readers on any device */ .uk-hidden { display: none !important; visibility: hidden !important; } /* It's hidden, but still affects layout */ .uk-invisible { visibility: hidden !important; } /* Show on hover */ .uk-visible-hover:hover .uk-hidden, .uk-visible-hover:hover .uk-invisible { display: block !important; visibility: visible !important; } .uk-visible-hover-inline:hover .uk-hidden, .uk-visible-hover-inline:hover .uk-invisible { display: inline-block !important; visibility: visible !important; } /* Hide on touch */ .uk-touch .uk-hidden-touch, .uk-notouch .uk-hidden-notouch { display: none !important; } /* ======================================================================== Component: Flex ========================================================================== */ .uk-flex { display: -ms-flexbox; display: -webkit-flex; display: flex; } .uk-flex-inline { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; } /* * Fixes initial flex-shrink value in IE10 */ .uk-flex > *, .uk-flex-inline > * { -ms-flex-negative: 1; } /* Alignment ========================================================================== */ /* * Vertical alignment * Default value is `stretch` */ .uk-flex-top { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .uk-flex-middle { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .uk-flex-bottom { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } /* * Horizontal alignment * Default value is `flex-start` */ .uk-flex-center { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .uk-flex-right { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .uk-flex-space-between { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .uk-flex-space-around { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } /* Direction ========================================================================== */ .uk-flex-row-reverse { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .uk-flex-column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .uk-flex-column-reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } /* Wrap ========================================================================== */ .uk-flex-nowrap { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .uk-flex-wrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .uk-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } /* * Horizontal alignment * Default value is `stretch` */ .uk-flex-wrap-top { -ms-flex-line-pack: start; -webkit-align-content: flex-start; align-content: flex-start; } .uk-flex-wrap-middle { -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } .uk-flex-wrap-bottom { -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; } .uk-flex-wrap-space-between { -ms-flex-line-pack: justify; -webkit-align-content: space-between; align-content: space-between; } .uk-flex-wrap-space-around { -ms-flex-line-pack: distribute; -webkit-align-content: space-around; align-content: space-around; } /* Item ordering ========================================================================== */ /* * Default is 0 */ .uk-flex-order-first { -ms-flex-order: -1; -webkit-order: -1; order: -1; } .uk-flex-order-last { -ms-flex-order: 99; -webkit-order: 99; order: 99; } /* Phone landscape and bigger */ @media (min-width: 480px) { .uk-flex-order-first-small { -ms-flex-order: -1; -webkit-order: -1; order: -1; } .uk-flex-order-last-small { -ms-flex-order: 99; -webkit-order: 99; order: 99; } } /* Tablet and bigger */ @media (min-width: 768px) { .uk-flex-order-first-medium { -ms-flex-order: -1; -webkit-order: -1; order: -1; } .uk-flex-order-last-medium { -ms-flex-order: 99; -webkit-order: 99; order: 99; } } /* Desktop and bigger */ @media (min-width: 960px) { .uk-flex-order-first-large { -ms-flex-order: -1; -webkit-order: -1; order: -1; } .uk-flex-order-last-large { -ms-flex-order: 99; -webkit-order: 99; order: 99; } } /* Large screen and bigger */ @media (min-width: 1220px) { .uk-flex-order-first-xlarge { -ms-flex-order: -1; -webkit-order: -1; order: -1; } .uk-flex-order-last-xlarge { -ms-flex-order: 99; -webkit-order: 99; order: 99; } } /* Item dimensions ========================================================================== */ /* * Initial: 0 1 auto * Content dimensions, but shrinks */ /* * No Flex: 0 0 auto * Content dimensions */ .uk-flex-item-none { -ms-flex: none; -webkit-flex: none; flex: none; } /* * Relative Flex: 1 1 auto * Space is allocated considering content * 1. Fixes flex-shrink value in IE10 */ .uk-flex-item-auto { -ms-flex: auto; -webkit-flex: auto; flex: auto; /* 1 */ -ms-flex-negative: 1; } /* * Absolute Flex: 1 1 0% * Space is allocated solely based on flex */ .uk-flex-item-1 { -ms-flex: 1; -webkit-flex: 1; flex: 1; } /* ======================================================================== Component: Contrast ========================================================================== */ .uk-contrast { color: #ffffff; /* Active */ } .uk-contrast a:not([class]), .uk-contrast .uk-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .uk-contrast a:not([class]):hover, .uk-contrast .uk-link:hover { color: #ffffff; text-decoration: underline; } .uk-contrast :not(pre) > code, .uk-contrast :not(pre) > kbd, .uk-contrast :not(pre) > samp { color: #ffffff; } .uk-contrast em { color: #ffffff; } .uk-contrast h1, .uk-contrast h2, .uk-contrast h3, .uk-contrast h4, .uk-contrast h5, .uk-contrast h6 { color: #ffffff; } .uk-contrast hr { border-top-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-nav li > a, .uk-contrast .uk-nav li > a:hover { text-decoration: none; } .uk-contrast .uk-nav-side > li > a { color: #ffffff; } .uk-contrast .uk-nav-side > li > a:hover, .uk-contrast .uk-nav-side > li > a:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; } .uk-contrast .uk-nav-side > li.uk-active > a { background: #ffffff; color: #444444; } .uk-contrast .uk-nav-side .uk-nav-header { color: #ffffff; } .uk-contrast .uk-nav-side .uk-nav-divider { border-top-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-nav-side ul a { color: rgba(255, 255, 255, 0.7); } .uk-contrast .uk-nav-side ul a:hover { color: #ffffff; } .uk-contrast .uk-subnav > * > a { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .uk-contrast .uk-subnav > * > a:hover, .uk-contrast .uk-subnav > * > a:focus { color: #ffffff; text-decoration: none; } .uk-contrast .uk-subnav > .uk-active > a { color: #ffffff; } .uk-contrast .uk-subnav-line > :nth-child(n+2):before { border-left-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-subnav-pill > * > a:hover, .uk-contrast .uk-subnav-pill > * > a:focus { background: rgba(255, 255, 255, 0.7); color: #444444; text-decoration: none; } .uk-contrast .uk-subnav-pill > .uk-active > a { background: #ffffff; color: #444444; } .uk-contrast .uk-tab { border-bottom-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-tab > li > a { border-color: transparent; color: rgba(255, 255, 255, 0.7); } .uk-contrast .uk-tab > li > a:hover, .uk-contrast .uk-tab > li > a:focus, .uk-contrast .uk-tab > li.uk-open > a { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7); color: #444444; text-decoration: none; } .uk-contrast .uk-tab > li.uk-active > a { border-color: rgba(255, 255, 255, 0.2); border-bottom-color: transparent; background: #ffffff; color: #444444; } .uk-contrast .uk-tab-center { border-bottom-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-tab-grid:before { border-top-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-list-line > li:nth-child(n+2) { border-top-color: rgba(255, 255, 255, 0.2); } .uk-contrast .uk-form select, .uk-contrast .uk-form textarea, .uk-contrast .uk-form input:not([type]), .uk-contrast .uk-form input[type="text"], .uk-contrast .uk-form input[type="password"], .uk-contrast .uk-form input[type="datetime"], .uk-contrast .uk-form input[type="datetime-local"], .uk-contrast .uk-form input[type="date"], .uk-contrast .uk-form input[type="month"], .uk-contrast .uk-form input[type="time"], .uk-contrast .uk-form input[type="week"], .uk-contrast .uk-form input[type="number"], .uk-contrast .uk-form input[type="email"], .uk-contrast .uk-form input[type="url"], .uk-contrast .uk-form input[type="search"], .uk-contrast .uk-form input[type="tel"], .uk-contrast .uk-form input[type="color"] { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8); color: #444444; background-clip: padding-box; } .uk-contrast .uk-form select:focus, .uk-contrast .uk-form textarea:focus, .uk-contrast .uk-form input:not([type]):focus, .uk-contrast .uk-form input[type="text"]:focus, .uk-contrast .uk-form input[type="password"]:focus, .uk-contrast .uk-form input[type="datetime"]:focus, .uk-contrast .uk-form input[type="datetime-local"]:focus, .uk-contrast .uk-form input[type="date"]:focus, .uk-contrast .uk-form input[type="month"]:focus, .uk-contrast .uk-form input[type="time"]:focus, .uk-contrast .uk-form input[type="week"]:focus, .uk-contrast .uk-form input[type="number"]:focus, .uk-contrast .uk-form input[type="email"]:focus, .uk-contrast .uk-form input[type="url"]:focus, .uk-contrast .uk-form input[type="search"]:focus, .uk-contrast .uk-form input[type="tel"]:focus, .uk-contrast .uk-form input[type="color"]:focus { border-color: #ffffff; background: #ffffff; color: #444444; } .uk-contrast .uk-form :-ms-input-placeholder { color: rgba(68, 68, 68, 0.7) !important; } .uk-contrast .uk-form ::-moz-placeholder { color: rgba(68, 68, 68, 0.7); } .uk-contrast .uk-form ::-webkit-input-placeholder { color: rgba(68, 68, 68, 0.7); } .uk-contrast .uk-button { color: #444444; background: #ffffff; } .uk-contrast .uk-button:hover, .uk-contrast .uk-button:focus { background-color: rgba(255, 255, 255, 0.8); color: #444444; } .uk-contrast .uk-button:active, .uk-contrast .uk-button.uk-active { background-color: rgba(255, 255, 255, 0.7); color: #444444; } .uk-contrast .uk-button-primary { background-color: #00a8e6; color: #ffffff; } .uk-contrast .uk-button-primary:hover, .uk-contrast .uk-button-primary:focus { background-color: #35b3ee; color: #ffffff; } .uk-contrast .uk-button-primary:active, .uk-contrast .uk-button-primary.uk-active { background-color: #0091ca; color: #ffffff; } .uk-contrast .uk-icon-hover { color: rgba(255, 255, 255, 0.7); } .uk-contrast .uk-icon-hover:hover { color: #ffffff; } .uk-contrast .uk-icon-button { background: #ffffff; color: #444444; } .uk-contrast .uk-icon-button:hover, .uk-contrast .uk-icon-button:focus { background-color: rgba(255, 255, 255, 0.8); color: #444444; } .uk-contrast .uk-icon-button:active { background-color: rgba(255, 255, 255, 0.7); color: #444444; } .uk-contrast .uk-text-muted { color: rgba(255, 255, 255, 0.6) !important; } .uk-contrast .uk-text-primary { color: #2d7091 !important; } /* ======================================================================== Component: Print ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* colors */ /*#region fonts*/ @font-face { font-family: 'futura'; src: url("fonts/Futura-Roman.eot"); src: url("fonts/Futura-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Roman.woff") format("woff"), url("fonts/Futura-Roman.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'futura'; src: url("fonts/Futura-Dem.eot"); src: url("fonts/Futura-Dem.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Dem.woff") format("woff"), url("fonts/Futura-Dem.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: 'futura'; src: url("fonts/Futura-Bold.eot"); src: url("fonts/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-Bold.woff") format("woff"), url("fonts/Futura-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: 'futura'; src: url("fonts/Futura-ExtraBold.eot"); src: url("fonts/Futura-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Futura-ExtraBold.woff") format("woff"), url("fonts/Futura-ExtraBold.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-regular'; src: url("fonts/aeonik-regular.woff"); src: url("fonts/aeonik-regular.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-regular.woff") format("woff"), url("fonts/aeonik-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-light'; src: url("fonts/aeonik-light.woff"); src: url("fonts/aeonik-light.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-light.woff") format("woff"), url("fonts/aeonik-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-bold'; src: url("fonts/aeonik-bold.woff"); src: url("fonts/aeonik-bold.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-bold.woff") format("woff"), url("fonts/aeonik-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'aeonik-medium'; src: url("fonts/aeonik-medium.woff"); src: url("fonts/aeonik-medium.woff?#iefix") format("embedded-opentype"), url("fonts/aeonik-medium.woff") format("woff"), url("fonts/aeonik-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-bold'; src: url("fonts/ibmplexsans-bold.woff"); src: url("fonts/ibmplexsans-bold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-bold.woff") format("woff"), url("fonts/ibmplexsans-bold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-light'; src: url("fonts/ibmplexsans-light.woff"); src: url("fonts/ibmplexsans-light.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-light.woff") format("woff"), url("fonts/ibmplexsans-light.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-medium'; src: url("fonts/ibmplexsans-medium.woff"); src: url("fonts/ibmplexsans-medium.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-medium.woff") format("woff"), url("fonts/ibmplexsans-medium.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-regular'; src: url("fonts/ibmplexsans-regular.woff"); src: url("fonts/ibmplexsans-regular.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'ibm-semibold'; src: url("fonts/ibmplexsans-semibold.woff"); src: url("fonts/ibmplexsans-semibold.woff?#iefix") format("embedded-opentype"), url("fonts/ibmplexsans-semibold.woff") format("woff"), url("fonts/ibmplexsans-semibold.woff2") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'tt-norms-regular'; src: url("fonts/TT_Norms_Pro_Serif_Regular.woff"); src: url("fonts/TT_Norms_Pro_Serif_Regular.woff?#iefix") format("embedded-opentype"), url("fonts/TT_Norms_Pro_Serif_Regular.woff") format("woff"), url("fonts/ibmplexsans-regular.woff2") format("truetype"); font-weight: 900; font-style: normal; } /*#endregion fonts*/ @media only screen and (max-width: 1920px) { .accounts-list, .card-list, .loan-list-zone { width: 24%; } .k-tabstrip-items { margin-left: 210px !important; } } @media only screen and (max-width: 1800px) { .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 11%; } .NoticesSlider .slider-wrapper .slider-wrapper_middle { width: 65%; } .accounts-list, .card-list, .loan-list-zone { margin-left: 90px; } .accounts-list .container-3, .card-list .container-3, .loan-list-zone .container-3 { max-width: inherit; } .accounts-details, .cards-details, .loan-details-zone { width: 66% !important; } } @media only screen and (max-width: 1700px) { .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 67%; height: 1px; top: 256px; left: 17%; } } @media only screen and (min-width: 320px) { .PaymentOrderV2 .title-5, .PaymentTransferV2 .title-5 { font-size: -webkit-calc(20px + 4*((100vw - 320px) / 1600)) !important; font-size: calc(20px + 4*((100vw - 320px) / 1600)) !important; } } @media only screen and (min-width: 1201px) { .LoginRetail .login-form-col .inner { padding-top: 170px; padding-bottom: 144px; } .preapproved-blocks-inner__content { padding-left: 250px; } .exchangeRate.CurrencyExchangeV2, .CurrencyCalculator { margin-left: 30px !important; } } @media only screen and (min-width: 1601px) { .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 11%; } .LoginBackground .s-widget-body .login-welcome-col .inner { max-width: 1000px; position: absolute; top: 20.7%; left: 102px; } .LoginBackground .s-widget-body .login-welcome-col .inner p { padding-top: 197px; } } @media only screen and (min-width: 1601px) and (min-width: 1801px) { .NoticesSlider { top: 52px; left: 197px; width: calc(100vw - 49%); } .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 8%; } } @media only screen and (max-width: 1500px) { .LoanAnnuityPlan #gvLoanAnnuityPlan { overflow-x: auto; } .LoanAnnuityPlan #gvLoanAnnuityPlan table { min-width: 990px !important; } .NoticesSliderV2 { left: 100px; } .NoticesSliderV2 .slider-wrapper { flex-direction: column; padding-top: 30px; } .NoticesSliderV2 .slider-wrapper .pogledaj-vise-btn { display: block; max-width: 130px; margin: 0 auto; text-align: center; } .NoticesSliderV2 .slider-wrapper .close-info-btn:after, .NoticesSliderV2 .slider-wrapper .info-icon-wrapper::after { display: none; } .NoticesSliderV2 .slider-wrapper .info-icon-wrapper { height: auto; top: 25px; } .NoticesSliderV2 .slider-wrapper .close-info-btn { padding-left: 0; } .NoticesSliderV2 .slider-wrapper .navigation-wrap #nav-next { margin-right: 0; } .NoticesSliderV2 .slider-wrapper .slider-wrapper_middle { width: 100%; margin-left: 0 !important; } .NoticesSliderV2 .slider-wrapper .slider-wrapper_middle .inner p { text-align: center; } } @media only screen and (min-width: 1920px) { .PaymentOrderV2 .title-5, .PaymentTransferV2 .title-5 { font-size: 24px !important; } } @media only screen and (max-width: 1600px) { .LoginBackground .s-widget-body .login-welcome-col .inner { top: 20.5%; left: 39px; bottom: auto; } .LoginBackground .s-widget-body .login-welcome-col .inner p { padding-top: 211px; } .NoticesSlider { top: 44px; left: 135px; width: calc(100vw - 45.3%); } .accounts-list, .card-list, .loan-list-zone { margin-right: 36px; } .accounts-list.fullWidth, .card-list.fullWidth, .loan-list-zone.fullWidth { width: 100% !important; } .accounts-list .container-3, .card-list .container-3, .loan-list-zone .container-3 { max-width: inherit; } .k-tabstrip .k-tabstrip-items { margin-left: 0px !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 71%; height: 1px; top: 256px; left: 15%; } .PaymentOrderV2 .select-1 { width: 90% !important; } .PaymentOrderV2 .checkbox-toggle { margin-left: 20px; } .PaymentOrderV2 .payments-decor-wrapper { height: 117px; } } @media only screen and (min-width: 1401px) { .LoginBackground .s-widget-body .login-welcome-col { /* .inner { top: 20%; left: 4.5%; }*/ } .left-state:after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; background: transparent; border-right: 1px solid #d7d8db; } .exchangeRate.CurrencyExchangeV2, .CurrencyCalculator { margin-left: 0px !important; } } @media only screen and (max-width: 1400px) { .LoginBackground .s-widget-body .login-welcome-col .inner { top: 22.5%; left: 39px; bottom: auto; } .LoginBackground .s-widget-body .login-welcome-col .inner p { padding-top: 150px; } .LoginRetail .activation-form-col .inner .btn-activation-wrapper { max-width: 400px; } .page-title-wrapper-forTabs { margin-left: 85px; } .NoticesSlider { top: 44px; left: 136px; width: calc(100vw - 47.4%); } .NoticesSlider .slider-wrapper { justify-content: center; padding: 12px 9px 12px 0; } .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 14%; margin-bottom: 10px; } .NoticesSlider .slider-wrapper .slider-wrapper_middle { width: 88%; margin-bottom: 10px; } .left-state { padding-bottom: 10px; margin-bottom: 10px; } .dashboard .CurrencyCalculator { padding-left: 65px; margin-left: 0px !important; } .accounts-list, .card-list, .loan-list-zone { width: 22% !important; margin-right: 0; } .accounts-list .main-info-left-wrapper, .card-list .main-info-left-wrapper, .loan-list-zone .main-info-left-wrapper { padding: 32px 20px; } .accounts-list .left-state, .accounts-list .right-state, .card-list .left-state, .card-list .right-state, .loan-list-zone .left-state, .loan-list-zone .right-state { width: 100% !important; } .accounts-list .left-state, .card-list .left-state, .loan-list-zone .left-state { padding-bottom: 10px; margin-bottom: 10px; } .accounts-list .left-state:after, .card-list .left-state:after, .loan-list-zone .left-state:after { content: ""; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; border-top: 1px solid #d7d8db; } .accounts-list .right-state, .card-list .right-state, .loan-list-zone .right-state { padding-left: 0 !important; } .accounts-list .bottom-left-btn-wrapper .buttons-wrapper span, .card-list .bottom-left-btn-wrapper .buttons-wrapper span, .loan-list-zone .bottom-left-btn-wrapper .buttons-wrapper span { width: 100%; } .PaymentOrderV2 { width: 95%; padding-left: 75px; } .PaymentOverviewV2 { margin-left: 80px; width: 94%; } .CreditorTemplateManaging { margin-left: 70px; } .internal-payment, .FXTrading { width: 95%; margin-left: 75px; } .k-tabstrip .k-tabstrip-items { margin-left: 75px !important; } .k-tabstrip .k-tabstrip-items:after { width: 83%; left: 9%; } .ExchangeOfficeOverview { margin-left: 80px; width: 94%; } .PersonalDataV2, .CrontoTokenList { padding-left: 75px; } .k-tabstrip .k-content { padding-right: 0px !important; } .Forms_CategorizedFormList, .SliderTutorial, .Forms_ActiveWorkflowListAIK { margin-left: 85px; } .Forms_Form { margin-left: 85px; } .PaymentTransferV2 { margin-left: 50px !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 91% !important; } .MessageHubNotificationList { margin-left: 85px; } } @media only screen and (max-width: 1200px) { .NoticesSliderV2 { top: 140px; left: 100px; width: calc(100% - 120px); } .form-container:has( > .LosDepositOnlineResponseForm) { width: 100% !important; margin-left: 0% !important; margin-right: 5%; } .form-container:has( > .LosDepositOnlineResponseForm) .formMessage { text-align: center; } .form-container:has( > .LosAvistaOnlineResponseForm) { width: 100% !important; margin-left: 0 !important; margin-right: 5%; } .form-container:has( > .LosAvistaOnlineResponseForm) .formMessage { text-align: center; } div#login-header { margin-left: 0 !important; margin-top: 25px !important; } div#login-header:after { left: 332px; top: 0; } .languagesContainer { top: 38px; right: 63px; } .lang-wrapper { top: 38px; right: -15px; } .LoginBackground .s-widget-body .login-welcome-main .img-wrap { top: 0; } #login-header { position: absolute; top: -6px; left: 0; margin-left: 95px !important; } #login-header .site-branding-login:before { width: 100vw; } #login-header h1.site-logo { padding: 31px 52px 31px 100px !important; } #login-header h1.site-logo:before { left: 332px; height: 15px; } #login-header h1.site-logo:after { height: 95px; } #login-header h1.site-logo a { height: 30px !important; width: 165px !important; background-size: 100% !important; } .s-page-host.login .s-widget-zone { width: 100%; } .img-wrap { position: relative; width: 100%; min-height: 88vh; } .page-title-wrapper-forTabs { margin-left: 90px; } .login .s-widget-zone { float: none; } .login .s-page { padding: 0; } .login .s-page .sign-wrapper { width: 100%; height: auto; min-height: 800px; position: relative; overflow: visible; } .login .s-page .sign-wrapper .login-type .hidden { width: 100%; margin-left: 0; padding: 20px 0; } .login .s-page .LoginBackground .s-widget-body { height: 88vh; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col { width: 100%; position: relative; top: 114px; padding-left: 0; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col video { display: none; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .img-wrap { width: 100%; height: 100%; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner { max-width: 850px; top: 47.5%; left: 34px; bottom: auto; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner p, .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner span { padding-top: 130px; } .NoticesSlider { position: absolute; top: 149px; left: 136px; width: calc(100vw - 16.6%); } .NoticesSlider .slider-wrapper .slider-wrapper_middle { height: 100%; } .NoticesSlider .login-unavailable { height: 50%; width: 90%; } .NoticesSlider .login-tab.tab-2 .inner-content { top: 0; transform: translateY(0%); -ms-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -webkit-transform: translateY(0%); } .NoticesSlider .login-tab.tab-2 .to-business { position: relative; } .NoticesSlider .login-footer { position: relative; bottom: 0; left: 0; background: #1e2025; padding: 15px; } .NoticesSlider .login-footer .inner { float: right; } .NoticesSlider .signup-tab.tab .content, .NoticesSlider .login-tab.tab .content-login { height: auto; padding-top: 0px; min-height: unset; } .NoticesSlider .signup-tab.tab .content .inner, .NoticesSlider .login-tab.tab .content-login .inner { top: 0; } .NoticesSlider .signup-tab.tab .content .submit-group, .NoticesSlider .login-tab.tab .content-login .submit-group { position: static; } #content_wrap { width: 100%; } .dashboard .CurrencyExchangeV2 { width: 100%; padding: 0px; max-width: unset; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange table { min-width: unset !important; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange table .tablesaw { max-width: 100%; } .dashboard .CurrencyExchangeV2 .gvCurrencyExchange table tbody tr { width: 100% !important; } .dashboard .CurrencyCalculator { width: 100%; padding: 0px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper { padding-left: 0px; } .accounts-list, .card-list, .loan-list-zone { width: 90% !important; margin-left: 95px; } .accounts-list .left-content-wrapper, .card-list .left-content-wrapper, .loan-list-zone .left-content-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-right: 0; } .accounts-list .main-info-left-wrapper, .card-list .main-info-left-wrapper, .loan-list-zone .main-info-left-wrapper { width: 43%; } .accounts-list .left-state, .accounts-list .right-state, .card-list .left-state, .card-list .right-state, .loan-list-zone .left-state, .loan-list-zone .right-state { width: 50% !important; } .accounts-list .left-state, .card-list .left-state, .loan-list-zone .left-state { padding-right: 5px; position: relative; } .accounts-list .left-state::after, .card-list .left-state::after, .loan-list-zone .left-state::after { content: ""; width: 0px; height: 100%; position: absolute; top: 0; right: 0; left: unset; background: transparent; border-left: 1px solid #d7d8db; } .accounts-list .right-state, .card-list .right-state, .loan-list-zone .right-state { padding-left: 50px !important; } .accounts-list .bottom-left-btn-wrapper, .card-list .bottom-left-btn-wrapper, .loan-list-zone .bottom-left-btn-wrapper { width: 50%; padding-left: 47px; padding-top: 0; margin-bottom: 0; margin-right: 20px; } .accounts-list .bottom-left-btn-wrapper::after, .card-list .bottom-left-btn-wrapper::after, .loan-list-zone .bottom-left-btn-wrapper::after { content: ""; width: 2px; height: 95%; position: absolute; top: 0; right: 0; background: transparent; border-left: 3px solid #d7d8db; } .accounts-details, .cards-details, .loan-details-zone { width: 92% !important; margin-left: 95px; } .AccountTurnoverV2 .gvAccountTurnoverPreview, .AccountTurnoverV2 .gvCardSpendings, .AccountTurnoverV2 .gvCardTurnover, .AccountTurnoverV2 #gvLoanAnnuityPlan, .AccountTurnoverV2 .gvLoanRepayments, .AccountTurnoverV2 #gvExchangeOfficeOverview, .CardSpendings .gvAccountTurnoverPreview, .CardSpendings .gvCardSpendings, .CardSpendings .gvCardTurnover, .CardSpendings #gvLoanAnnuityPlan, .CardSpendings .gvLoanRepayments, .CardSpendings #gvExchangeOfficeOverview, .CardTurnover .gvAccountTurnoverPreview, .CardTurnover .gvCardSpendings, .CardTurnover .gvCardTurnover, .CardTurnover #gvLoanAnnuityPlan, .CardTurnover .gvLoanRepayments, .CardTurnover #gvExchangeOfficeOverview, .LoanAnnuityPlan .gvAccountTurnoverPreview, .LoanAnnuityPlan .gvCardSpendings, .LoanAnnuityPlan .gvCardTurnover, .LoanAnnuityPlan #gvLoanAnnuityPlan, .LoanAnnuityPlan .gvLoanRepayments, .LoanAnnuityPlan #gvExchangeOfficeOverview, .LoanRepayments .gvAccountTurnoverPreview, .LoanRepayments .gvCardSpendings, .LoanRepayments .gvCardTurnover, .LoanRepayments #gvLoanAnnuityPlan, .LoanRepayments .gvLoanRepayments, .LoanRepayments #gvExchangeOfficeOverview, .ExchangeOfficeOverview .gvAccountTurnoverPreview, .ExchangeOfficeOverview .gvCardSpendings, .ExchangeOfficeOverview .gvCardTurnover, .ExchangeOfficeOverview #gvLoanAnnuityPlan, .ExchangeOfficeOverview .gvLoanRepayments, .ExchangeOfficeOverview #gvExchangeOfficeOverview { overflow-x: auto; overflow-y: hidden; } .AccountTurnoverV2 .gvAccountTurnoverPreview table, .AccountTurnoverV2 .gvCardSpendings table, .AccountTurnoverV2 .gvCardTurnover table, .AccountTurnoverV2 #gvLoanAnnuityPlan table, .AccountTurnoverV2 .gvLoanRepayments table, .AccountTurnoverV2 #gvExchangeOfficeOverview table, .CardSpendings .gvAccountTurnoverPreview table, .CardSpendings .gvCardSpendings table, .CardSpendings .gvCardTurnover table, .CardSpendings #gvLoanAnnuityPlan table, .CardSpendings .gvLoanRepayments table, .CardSpendings #gvExchangeOfficeOverview table, .CardTurnover .gvAccountTurnoverPreview table, .CardTurnover .gvCardSpendings table, .CardTurnover .gvCardTurnover table, .CardTurnover #gvLoanAnnuityPlan table, .CardTurnover .gvLoanRepayments table, .CardTurnover #gvExchangeOfficeOverview table, .LoanAnnuityPlan .gvAccountTurnoverPreview table, .LoanAnnuityPlan .gvCardSpendings table, .LoanAnnuityPlan .gvCardTurnover table, .LoanAnnuityPlan #gvLoanAnnuityPlan table, .LoanAnnuityPlan .gvLoanRepayments table, .LoanAnnuityPlan #gvExchangeOfficeOverview table, .LoanRepayments .gvAccountTurnoverPreview table, .LoanRepayments .gvCardSpendings table, .LoanRepayments .gvCardTurnover table, .LoanRepayments #gvLoanAnnuityPlan table, .LoanRepayments .gvLoanRepayments table, .LoanRepayments #gvExchangeOfficeOverview table, .ExchangeOfficeOverview .gvAccountTurnoverPreview table, .ExchangeOfficeOverview .gvCardSpendings table, .ExchangeOfficeOverview .gvCardTurnover table, .ExchangeOfficeOverview #gvLoanAnnuityPlan table, .ExchangeOfficeOverview .gvLoanRepayments table, .ExchangeOfficeOverview #gvExchangeOfficeOverview table { min-width: 850px; } .ExchangeOfficeOverview { margin-left: 70px; } .CardStatements { overflow-x: auto; } .CardStatements #gvCardStatements table { min-width: 600px; } .icon-right-wrapper { opacity: 1; visibility: visible; } .CurrencyExchangeV2 .gvCurrencyExchange table { min-width: 1200px; } .CurrencyCalculator { margin-left: 95px; padding-left: 0px; } .CrontoTokenList .content-wrapper { flex-wrap: wrap; } .CrontoTokenList .content-wrapper .token-info-wrapper { padding: 24px 20px; } .CrontoTokenList .content-wrapper .token-info-col { padding-right: 10px; } .CrontoTokenList .content-wrapper .token-info-col:first-child { padding-right: 20px; padding-left: 32px; } .CrontoTokenList .content-wrapper .token-info-col:first-child:after { right: 12px; } .CrontoTokenList .content-wrapper .token-info-icon-wrapper { width: 22px; height: 26px; } .k-tabstrip .k-tabstrip-items { margin-left: 75px !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 88%; height: 1px; top: 250px; left: 107px; } .PaymentOrderV2 .select-1 { width: 89% !important; } .PaymentOrderV2 .input-1 { width: 86% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 80% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 85% !important; } .PaymentOverviewV2 { width: 96%; margin-left: 63px; } .CreditorTemplateManaging { margin-left: 70px; } .internal-payment, .FXTrading { width: 92%; margin-left: 75px; } .PersonalDataV2 .content-wrapper { flex-wrap: wrap; } .PersonalDataV2 .profile-info-left { padding: 0px; } .PersonalDataV2 .profile-info-right { margin-left: 0px; } .PersonalDataV2 .profile-info-right .profile-info-right-inner { width: 92%; max-width: unset; margin-right: 0; padding-right: 0px; } .ExchangeOfficeOverview { width: 93%; } .Forms_CategorizedFormList .offers-filter { width: 220px; } .Forms_CategorizedFormList .offers-boxes-wrapper { width: calc(100% - 220px); } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box { height: 170px; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box .offers-box-img-wrapper { width: 255px; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box .offers-box-content { width: calc(100% - 255px); padding: 16px; } .offers-loans-wrap { padding-right: 0px; } .offers-loans-wrap .offers-loans-step { max-width: 535px; } .PaymentTransferV2 { margin-left: 60px; } .MessageHubNotificationList { margin-left: 85px; } } @media only screen and (min-width: 1000px) and (max-width: 1200px) { .LoginRetail .login-form-col .inner { padding-top: 300px; } .FXTrading .double-info-slider-wrapper .info-slider-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper { height: 80px; } } @media only screen and (min-width: 1000px) { .login .s-page .LoginBackground .login-welcome-col .img-wrap { min-height: 100vh; } } @media only screen and (min-width: 981px) { /* .login { .s-page { .LoginBackground { .login-welcome-col { .img-wrap { min-height: 100vh; } } } } }*/ } @media only screen and (max-height: 800px) and (min-width: 981px) { .sign-wrapper { overflow: visible; } } @media only screen and (max-width: 1000px) { .preapproved-blocks-inner__content { padding: 0 25px; } .LoginBackground .s-widget-body .login-welcome-col .inner p, .LoginBackground .s-widget-body .login-welcome-col .inner span { padding-top: 157px; } .LoginRetail .activation-form-col .inner .btn-activation-wrapper { padding-right: 60px; padding-top: 58px; padding-bottom: 50px; } .LoginRetail .activation-welcome-col, .Html .activation-welcome-col { padding-top: 130px; } .LoginRetail .activation-form-col, .Html .activation-form-col { padding-top: 115px; } .NoticesSlider { left: 127px; width: calc(100vw - 18%); } .dashboard .customOffers .custom-offers-slider .slide-type-image { min-width: 305px; min-height: 220px; } .dashboard .customOffers .custom-offers-slider .slide-type-bg-1, .dashboard .customOffers .custom-offers-slider .slide-type-bg-2 { min-width: 195px; min-height: 220px; } .accounts-list .bottom-left-btn-wrapper, .card-list .bottom-left-btn-wrapper, .loan-list-zone .bottom-left-btn-wrapper { padding-left: 34px; } .accounts-details, .cards-details, .loan-details-zone { width: 90% !important; } .accounts-details .search-filter-bar, .cards-details .search-filter-bar, .loan-details-zone .search-filter-bar { width: 40%; } .accounts-details .container-3, .cards-details .container-3, .loan-details-zone .container-3 { max-width: inherit; } .loan-details-zone .loan-detail-wrapper { flex-wrap: wrap; } .loan-details-zone .loan-detail-wrapper .left-loan-detail, .loan-details-zone .loan-detail-wrapper .right-loan-detail { width: 100%; } .LoanAnnuityPlan .left-loan-detail::after { content: none; } .LoanAnnuityPlan .right-loan-detail { padding-left: 0; padding-top: 10px; margin-top: 10px; } .LoanAnnuityPlan .right-loan-detail::after { content: ""; width: 100%; height: 2px; position: absolute; top: 0; left: 0; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .CrontoTokenList .content-wrapper .token-info-inner { flex-wrap: wrap; } .CrontoTokenList .content-wrapper .token-info-col:not(:last-child) { margin-bottom: 12px; } .CrontoTokenList .content-wrapper .token-info-col, .CrontoTokenList .content-wrapper .token-info-col:first-child { width: 100%; padding-right: 0; } .CrontoTokenList .content-wrapper .token-info-col:after, .CrontoTokenList .content-wrapper .token-info-col:first-child:after { display: none; } .k-tabstrip .k-tabstrip-items { margin-left: 75px !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 87%; height: 1px; /* top: 172px;*/ left: 107px; } .PaymentTransferV2 .double-info-slider-wrapper, .FXTrading .double-info-slider-wrapper { flex-wrap: wrap; justify-content: center; } .PaymentTransferV2 .double-info-slider-wrapper .info-slider-outher-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-outher-wrapper { width: 100%; } .PaymentTransferV2 .double-info-slider-wrapper .info-slider-outher-wrapper:first-child, .FXTrading .double-info-slider-wrapper .info-slider-outher-wrapper:first-child { margin: 0 0 20px 0; } .PaymentTransferV2 .double-info-slider-wrapper .double-info-slider-arrow-wrapper, .FXTrading .double-info-slider-wrapper .double-info-slider-arrow-wrapper { position: unset; top: unset; left: unset; transform: rotate(90deg); margin-bottom: 20px; } .PaymentTransferV2 .payments-main-form-inner, .FXTrading .payments-main-form-inner { flex-wrap: wrap; } .PaymentTransferV2 .payments-main-form-inner .payments-main-form-col-2, .FXTrading .payments-main-form-inner .payments-main-form-col-2 { width: 100%; } .PaymentTransferV2 .payments-main-form-inner .payments-main-form-col-2:first-child, .FXTrading .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 0; } .PaymentOrderV2 .select-1 { width: 93% !important; } .PaymentOrderV2 .input-1 { width: 94.5% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 93% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 93.5% !important; } .PaymentOrderV2 .inputwrapper { width: 98% !important; } .FXTrading .payments-main-form-col-2 { margin-right: 55px; } .FXTrading .payments-main-form-col-2 .input-wrapper { width: 92%; } .FXTrading .select-1 .dk-selected { width: 97%; } .PaymentOverviewV2 { width: 98%; } .PaymentOverviewV2 .gvOrderPreviewList { overflow-x: auto; } .PaymentOverviewV2 .gvOrderPreviewList table { min-width: 850px; } .internal-payment, .FXTrading { width: 96% !important; margin-left: 70px; } .PaymentOrderV2 .select-1 .dk-selected { width: 97%; } .PaymentOrderV2 .payments-main-form-inner { flex-wrap: wrap; } .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2 { width: 100%; } .PaymentOrderV2 .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 0; } .CASTransfer { margin-left: 95px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left { width: 62%; padding-right: 30px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-right { width: 38%; } .PersonalDataV2 .profile-info-left { width: 300px; } .PersonalDataV2 .profile-info-right { width: -webkit-calc(100% - 300px); width: calc(100% - 300px); } .PersonalDataV2 .profile-info-right .profile-info-right-inner { width: 96%; } .k-tabstrip .k-content { padding-right: 0px !important; } .Forms_CategorizedFormList .offers-filter { width: 100%; display: flex; flex-wrap: wrap; padding: 0 0 30px 0; } .Forms_CategorizedFormList .offers-filter .offers-radio-wrap { width: 33%; padding-right: 20px; } .Forms_CategorizedFormList .offers-boxes-wrapper { width: 100%; } .Forms_ActiveWorkflowListAIK .table-payment-wrapper { overflow-x: auto; } .Forms_ActiveWorkflowListAIK .table-payment-wrapper .table-inner-wapper { min-width: 850px; } .creditorTemplate .payments-main-form-inner { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .creditorTemplate .payments-main-form-inner .payments-main-form-col-2 { width: 100%; } .creditorTemplate .payments-main-form-inner .payments-main-form-col-2:first-child { margin-right: 0px !important; } #gvAccountReservedFunds table { min-width: 650px; } .ExchangeOfficeOverview { width: 96%; } .PaymentTransferV2 .double-info-slider-wrapper .info-slider-outher-wrapper { width: 98% !important; } .MessageHubNotificationList .gvMessageList { overflow-x: auto; } .MessageHubNotificationList .gvMessageList table { max-width: unset; min-width: 910px; } } @media only screen and (max-width: 400px) and (max-height: 800px) { .login .s-page .LoginBackground .img-wrap { min-height: 500px; } .login .s-page .LoginBackground .login-welcome-col .inner { top: 21%; } .login .s-page .LoginBackground .login-welcome-col .inner p { padding-top: 10px !important; } } @media only screen and (max-width: 900px) { .PaymentOrderV2 .payments-decor-wrapper { height: 113px; } } @media only screen and (max-width: 800px) { #page-header { height: 89px !important; } #login-header h1.site-logo { padding: 11px 52px !important; } #login-header h1.site-logo:after { height: 54px; } #login-header h1.site-logo:before, div#login-header:after { left: 288px; } .header-icons-wrapper .lang-selector .lang-option, .header-icons-wrapper .lang-nav .lang-option, .lang-wrapper .lang-selector .lang-option, .lang-wrapper .lang-nav .lang-option { font-size: 11px; } .site-logo-wrapper { width: 220px; margin-top: -19px; padding-left: 64px; height: 90px; } .site-logo-wrapper .site-logo:after { left: calc(100% + 35px); height: 92px; } .site-logo-wrapper .site-logo:before { top: -21px; left: calc(100% + 50px); } .site-logo-wrapper .site-logo img { width: 100%; } .site-logo-wrapper:before { left: 0; width: 100%; } .userinfo .site-logo-nonlogin { padding: 40px 35px 24px 0; } .s-widget.UserInfo { margin-top: 19px; } #login-header { margin-left: 52px !important; margin-top: 10px !important; } div#login-header-3 { left: 0; } div#login-header-3 .site-branding-login:before { width: 100vw; } .menu-btn { left: 15px !important; top: 35px !important; } .languagesContainer { top: 23px; } .lang-wrapper { top: 23px; } .page-title-wrapper-forTabs { margin-left: 5px; } .login .s-page { margin-left: 1px; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col { top: 75px; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner { top: 48%; left: 36px; bottom: auto; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner p { padding-top: 170px; } .NoticesSlider { position: absolute; top: 116px; left: 32px; width: calc(100vw - 10.33%); } .NoticesSlider .slider-wrapper .slider-wrapper_middle { width: 85%; } .s-page-host.login { padding-left: 0px; } .accounts-list, .card-list, .loan-list-zone, .internal-payment, .FXTrading { width: 99% !important; margin-left: 0px; } .accounts-list .main-info-left-wrapper, .accounts-list .bottom-left-btn-wrapper, .card-list .main-info-left-wrapper, .card-list .bottom-left-btn-wrapper, .loan-list-zone .main-info-left-wrapper, .loan-list-zone .bottom-left-btn-wrapper, .internal-payment .main-info-left-wrapper, .internal-payment .bottom-left-btn-wrapper, .FXTrading .main-info-left-wrapper, .FXTrading .bottom-left-btn-wrapper { width: 97%; margin-right: 0px; } .accounts-list .right-state, .card-list .right-state, .loan-list-zone .right-state, .internal-payment .right-state, .FXTrading .right-state { padding-left: 73px; } .accounts-list .bottom-left-btn-wrapper, .card-list .bottom-left-btn-wrapper, .loan-list-zone .bottom-left-btn-wrapper, .internal-payment .bottom-left-btn-wrapper, .FXTrading .bottom-left-btn-wrapper { padding-top: 32px; padding-left: 0; } .accounts-list .bottom-left-btn-wrapper::after, .card-list .bottom-left-btn-wrapper::after, .loan-list-zone .bottom-left-btn-wrapper::after, .internal-payment .bottom-left-btn-wrapper::after, .FXTrading .bottom-left-btn-wrapper::after { content: ""; width: 100%; height: 0px; position: absolute; top: 0; right: 0; background: transparent; } .accounts-details, .cards-details, .loan-details-zone { width: 98% !important; margin-left: 100px; } .right-content-wrapper { width: 100% !important; } .float-inherit { width: 99% !important; margin-left: 0px; } .k-tabstrip > .k-content { margin: 0 !important; padding: 0 !important; } .k-tabstrip .k-tabstrip-items { margin-left: 0px !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 96%; height: 1px; top: 218px; left: 15px; } .PaymentTransferV2 .info-slider-wrapper, .FXTrading .info-slider-wrapper, .PaymentOrderV2 .info-slider-wrapper { padding: 30px 130px 30px 70px; } .PaymentTransferV2 .info-slider-wrapper::before, .FXTrading .info-slider-wrapper::before, .PaymentOrderV2 .info-slider-wrapper::before { right: 118px; } .PaymentTransferV2 .info-slider-wrapper::after, .FXTrading .info-slider-wrapper::after, .PaymentOrderV2 .info-slider-wrapper::after { left: 60px; } .PaymentTransferV2 .info-slider-wrapper .info-slider-icon-wrapper, .FXTrading .info-slider-wrapper .info-slider-icon-wrapper, .PaymentOrderV2 .info-slider-wrapper .info-slider-icon-wrapper { left: 20px; } .PaymentTransferV2 .info-slider-wrapper .navigation-wrap, .FXTrading .info-slider-wrapper .navigation-wrap, .PaymentOrderV2 .info-slider-wrapper .navigation-wrap { right: 15px; } .PaymentOrderV2 { width: 100%; padding-left: 0px; } .PaymentOrderV2 .input-1 { width: 92% !important; } .PaymentOrderV2 .input-1 .dk-selected { width: 95% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 91% !important; } .PaymentOrderV2 .inputwrapper { width: 97% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 91% !important; } .PaymentOrderV2 .select-1 { width: 91% !important; } .PaymentOrderV2 .checkbox-toggle { width: 78% !important; } .PaymentOverviewV2 { width: 100%; margin-left: 0px; } .ExchangeOfficeOverview { margin-left: 0px; } .CreditorTemplateManaging { margin-top: 85px; margin-left: 0px; } .CurrencyExchangeV2 { margin-left: 0px !important; } .CurrencyCalculator { margin-left: 0px !important; } .CASTransfer { margin-left: 0px; } .CASTransfer .input-wrapper .input-wrapper-inner .input-1 { width: 90%; } .CASTransfer .select-1 { width: 90%; } .PersonalDataV2 { padding-left: 0px; } .PersonalDataV2 .profile-info-left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-bottom: 40px; } .PersonalDataV2 .profile-info-left .profile-personal-info { width: 34vw; } .PersonalDataV2 .profile-info-left .profile-personal-info .profile-image-wrapper { height: 34vw; } .PersonalDataV2 .profile-info-left .profile-buttons-wrapper { width: -webkit-calc(100% - 36vw); width: calc(100% - 36vw); padding-top: 5vw; } .PersonalDataV2 .profile-info-right { width: 100%; margin-bottom: 40px; margin-left: 0px; } .PersonalDataV2 .profile-info-right .profile-info-right-inner { width: 100%; } .CrontoTokenList { padding-left: 0px; } .Forms_CategorizedFormList { margin-left: 0px; } .Forms_CategorizedFormList .custom-radio-btn { padding-left: 28px; } .SliderTutorial { margin-left: 0px; } .Forms_ActiveWorkflowListAIK { margin-left: 0px; } .Forms_Form .widget-container { padding: 0 10px; } .offers-loans-wrap { padding-right: 0 !important; } .offers-loans-wrap .offers-loans-nav { max-width: 100%; width: 100%; margin-bottom: 40px; } .offers-loans-wrap .form-container { width: 100% !important; } .offers-loans-wrap .cont-3 { max-width: 100%; width: 100%; } .offers-loans-wrap .cont-3 div [alpaca-layout-binding-field-name="NominalInterestRate"] .alpaca-container-item, .offers-loans-wrap .cont-3 div [alpaca-layout-binding-field-name="TotalRepayment"] .alpaca-container-item, .offers-loans-wrap .cont-3 div [alpaca-layout-binding-field-name="MonthlyRepayment"] .alpaca-container-item, .offers-loans-wrap .cont-3 div [alpaca-layout-binding-field-name="EfectiveInterestRate"] .alpaca-container-item { width: 100%; } .Forms_Form { margin-left: 0px; } .ExchangeOfficeOverview { width: 100%; } .PaymentTransferV2 { margin-left: 0px !important; } } @media only screen and (max-width: 720px) { .s-page { margin-left: 0px; } #page-header .site-branding { display: none !important; } .accounts-list, .card-list, .loan-list-zone { margin-left: 0px; } .accounts-list .main-info-left-wrapper, .accounts-list .bottom-left-btn-wrapper, .card-list .main-info-left-wrapper, .card-list .bottom-left-btn-wrapper, .loan-list-zone .main-info-left-wrapper, .loan-list-zone .bottom-left-btn-wrapper { width: 100%; margin-right: 0px; } .accounts-details, .cards-details, .loan-details-zone { margin-left: 0px; } .k-tabstrip .k-tabstrip-items { margin-left: 0px !important; } .k-tabstrip .k-tabstrip-items:after { position: absolute; content: ""; width: 91%; height: 1px; top: 210px; left: 34px; } .alpaca-form.workflow.LosCalculateCCForm #Info .alpaca-control-label { margin-top: 6px !important; margin-left: 5px !important; } .alpaca-form.workflow.LosCalculateCCForm div [data-alpaca-container-item-name="Info"]:before { content: ""; top: 0; left: -26px; display: inline-block; margin-left: 13px; width: 204px !important; height: 85px; background-image: url(images/icons/info-icon-forms-los.png) !important; background-repeat: no-repeat !important; text-align: left; } .activeWorkflowFilter .selector-toggle-indicator { width: 122px !important; } } @media only screen and (min-width: 800px) and (max-width: 855px) { .FXTrading, .ExchangeOfficeOverview { width: 92% !important; } .PaymentOrderV2 { width: 91% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 93% !important; } .PaymentOverviewV2 { width: 92% !important; } } @media only screen and (min-width: 961px) { body { font-size: 14px; } .appHeader { width: 950px; height: 120px; } .logo { position: static; width: 450px; height: 80px; background: url("images/logo.png") no-repeat; margin-top: 30px; margin-left: 20px; } .main-menu { position: static; width: auto; margin: 0; } .s-portal-menu { width: 100%; } .s-portal-languageSelector { display: block; } .s-portal-languageSelector-dd { display: none; } /* .userInfoContent { display: block; } .userinfo .s-widget { border: 0; background-color: #fff; border-radius: 12px; } .userinfo .s-widget-body { background-color: #fff; width: auto; height: auto; } .userinfo .s-widget-header { display: none; }*/ .userInfoPopoverPlaceholder { display: none; } .s-portal-menu > .sf-menu { display: block; } .s-portal-menu > .slicknav_menu { display: none; } } @media only screen and (max-width: 640px) { #pageHost { width: 100% !important; } .s-widget-zone { width: 100%; } .s-widget-button-maximize, .s-widget-button-collapse { display: none !important; } .ui-dialog { width: auto !important; } } @media only screen and (max-width: 600px) { .menu-btn { top: 30px !important; } .UserInfo .header-icons-wrapper { min-width: 186px; margin-right: 25px; } .UserInfo .header-icons-wrapper .main-btn-wrapper .header-icon-wrapper { width: 30px; height: 30px; margin-left: 2px; } .languagesContainer { top: 18px; right: 19px; } .lang-wrapper { top: 18px; right: -20px; } .lang-selector .lang-option, .lang-nav .lang-option { font-size: 11px !important; } .lang-selector .lang-option.active::after, .lang-nav .lang-option.active::after { width: 30px !important; height: 30px !important; } .login .s-page .LoginBackground .img-wrap { min-height: 67vh; } #login-header { margin-left: 40px !important; margin-top: 5px !important; } .login .s-page .LoginBackground .s-widget-body { height: 67vh; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col { top: 75px; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner p { padding-top: 45px; } .LoginRetail .activation-form-col, .Html .activation-form-col { padding-top: 72px; } .dashboard .customOffers .custom-offers-wrapper .search-filter-bar { justify-content: flex-start; } .NoticesSlider .slider-wrapper { padding: 0 10px 12px 10px; right: 50%; width: calc(100% - 19px); } .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 10%; width: 100%; } .NoticesSlider .slider-wrapper .info-icon-wrapper::after { content: ""; width: 100%; height: 2px; position: absolute; bottom: 0; top: unset; right: 0; background: repeating-linear-gradient(to right, rgba(195, 203, 208, 0.8) 0, rgba(195, 203, 208, 0.8) 3px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 7px); } .NoticesSlider .slider-wrapper .slider-wrapper_middle { align-items: center; width: 100% !important; margin-bottom: 10px; } .NoticesSlider .slider-wrapper .slider-wrapper_middle .slider-area .text-4 { font-size: 13px; } .NoticesSlider .slider-wrapper .navigation-wrap .nav-prev, .NoticesSlider .slider-wrapper .navigation-wrap .nav-next { width: 25px; height: 25px; } .NoticesSlider .slider-wrapper .navigation-wrap .nav-prev svg, .NoticesSlider .slider-wrapper .navigation-wrap .nav-next svg { height: 9px; } .NoticesSlider .slider-wrapper .close-info-btn { font-size: 14px; line-height: 1.766; } .accounts-list, .card-list, .loan-list-zone { width: 100% !important; } .accounts-list .right-state, .card-list .right-state, .loan-list-zone .right-state { padding-left: 50px; } .accounts-details, .cards-details, .loan-details-zone, .internal-payment, .FXTrading { width: 100% !important; margin-left: 5px; } .accounts-details .right-intro-serach-filter-wrapper, .cards-details .right-intro-serach-filter-wrapper, .loan-details-zone .right-intro-serach-filter-wrapper, .internal-payment .right-intro-serach-filter-wrapper, .FXTrading .right-intro-serach-filter-wrapper { flex-wrap: wrap; } .accounts-details .right-intro-serach-filter-wrapper .title-intro-search-filter, .cards-details .right-intro-serach-filter-wrapper .title-intro-search-filter, .loan-details-zone .right-intro-serach-filter-wrapper .title-intro-search-filter, .internal-payment .right-intro-serach-filter-wrapper .title-intro-search-filter, .FXTrading .right-intro-serach-filter-wrapper .title-intro-search-filter { margin-bottom: 20px; } .accounts-details .right-intro-serach-filter-wrapper .title-intro-search-filter, .accounts-details .right-intro-serach-filter-wrapper .search-filter-bar, .cards-details .right-intro-serach-filter-wrapper .title-intro-search-filter, .cards-details .right-intro-serach-filter-wrapper .search-filter-bar, .loan-details-zone .right-intro-serach-filter-wrapper .title-intro-search-filter, .loan-details-zone .right-intro-serach-filter-wrapper .search-filter-bar, .internal-payment .right-intro-serach-filter-wrapper .title-intro-search-filter, .internal-payment .right-intro-serach-filter-wrapper .search-filter-bar, .FXTrading .right-intro-serach-filter-wrapper .title-intro-search-filter, .FXTrading .right-intro-serach-filter-wrapper .search-filter-bar { width: 100%; } .float-inherit { margin-left: 7px; } .modal-content { padding: 30px 20px; } .modal-footer { padding: 20px; } .cardDetailsPopup .modal-footer { margin-bottom: 0 !important; padding: 20px !important; } .PaymentTransferV2 .info-slider-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper, .FXTrading .info-slider-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper, .PaymentOrderV2 .info-slider-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper { padding: 60px 15px 80px 15px !important; } .PaymentTransferV2 .info-slider-wrapper::before, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper::before, .FXTrading .info-slider-wrapper::before, .FXTrading .double-info-slider-wrapper .info-slider-wrapper::before, .PaymentOrderV2 .info-slider-wrapper::before, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper::before { height: 100px; left: 50%; right: unset; top: unset; bottom: 18px; transform: translateX(-50%) rotate(90deg); } .PaymentTransferV2 .info-slider-wrapper::after, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper::after, .FXTrading .info-slider-wrapper::after, .FXTrading .double-info-slider-wrapper .info-slider-wrapper::after, .PaymentOrderV2 .info-slider-wrapper::after, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper::after { height: 100px; left: 50%; top: -1px; transform: translateX(-50%) rotate(90deg); } .PaymentTransferV2 .info-slider-wrapper .info-slider-icon-wrapper, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .FXTrading .info-slider-wrapper .info-slider-icon-wrapper, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper, .PaymentOrderV2 .info-slider-wrapper .info-slider-icon-wrapper, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slider-icon-wrapper { top: 15px; left: 50%; transform: translateX(-50%); } .PaymentTransferV2 .info-slider-wrapper .navigation-wrap, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .FXTrading .info-slider-wrapper .navigation-wrap, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap, .PaymentOrderV2 .info-slider-wrapper .navigation-wrap, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .navigation-wrap { top: unset; right: 50% !important; bottom: 15px; transform: translateX(50%); } .PaymentTransferV2 .info-slider-wrapper .info-slide-content, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .FXTrading .info-slider-wrapper .info-slide-content, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide-content, .PaymentOrderV2 .info-slider-wrapper .info-slide-content, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content { text-align: center !important; padding-right: 0; } .PaymentTransferV2 .info-slider-wrapper .info-slide-content-left, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-left, .FXTrading .info-slider-wrapper .info-slide-content-left, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-left, .PaymentOrderV2 .info-slider-wrapper .info-slide-content-left, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-left { width: 100%; padding-right: 0; margin-bottom: 10px; text-align: center !important; } .PaymentTransferV2 .info-slider-wrapper .info-slide-content-right, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-right, .FXTrading .info-slider-wrapper .info-slide-content-right, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-right, .PaymentOrderV2 .info-slider-wrapper .info-slide-content-right, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-content-right { width: 100%; text-align: center !important; } .PaymentTransferV2 .info-slider-wrapper .font-1, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .font-1, .FXTrading .info-slider-wrapper .font-1, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .font-1, .PaymentOrderV2 .info-slider-wrapper .font-1, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .font-1 { margin-bottom: 5px; } .PaymentTransferV2 .info-slider-wrapper .info-slide-account-number, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-account-number, .FXTrading .info-slider-wrapper .info-slide-account-number, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .info-slide-account-number, .PaymentOrderV2 .info-slider-wrapper .info-slide-account-number, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .info-slide-account-number { margin-bottom: 10px; } .PaymentTransferV2 .info-slider-wrapper .font-5 span, .PaymentTransferV2 .double-info-slider-wrapper .info-slider-wrapper .font-5 span, .FXTrading .info-slider-wrapper .font-5 span, .FXTrading .double-info-slider-wrapper .info-slider-wrapper .font-5 span, .PaymentOrderV2 .info-slider-wrapper .font-5 span, .PaymentOrderV2 .double-info-slider-wrapper .info-slider-wrapper .font-5 span { display: block; font-size: 20px; } .PaymentTransferV2 .payments-main-form .payments-main-form-buttons, .FXTrading .payments-main-form .payments-main-form-buttons, .PaymentOrderV2 .payments-main-form .payments-main-form-buttons { flex-wrap: wrap; } .PaymentTransferV2 .payments-main-form .payments-main-form-buttons div, .PaymentTransferV2 .payments-main-form .payments-main-form-buttons button, .FXTrading .payments-main-form .payments-main-form-buttons div, .FXTrading .payments-main-form .payments-main-form-buttons button, .PaymentOrderV2 .payments-main-form .payments-main-form-buttons div, .PaymentOrderV2 .payments-main-form .payments-main-form-buttons button { width: 100%; } .PaymentTransferV2 .payments-main-form .payments-main-form-buttons div:not(:first-child), .PaymentTransferV2 .payments-main-form .payments-main-form-buttons button:not(:first-child), .FXTrading .payments-main-form .payments-main-form-buttons div:not(:first-child), .FXTrading .payments-main-form .payments-main-form-buttons button:not(:first-child), .PaymentOrderV2 .payments-main-form .payments-main-form-buttons div:not(:first-child), .PaymentOrderV2 .payments-main-form .payments-main-form-buttons button:not(:first-child) { margin-left: 0; } .PaymentTransferV2 .payments-main-form .payments-main-form-buttons div:not(:last-child), .PaymentTransferV2 .payments-main-form .payments-main-form-buttons button:not(:last-child), .FXTrading .payments-main-form .payments-main-form-buttons div:not(:last-child), .FXTrading .payments-main-form .payments-main-form-buttons button:not(:last-child), .PaymentOrderV2 .payments-main-form .payments-main-form-buttons div:not(:last-child), .PaymentOrderV2 .payments-main-form .payments-main-form-buttons button:not(:last-child) { margin-bottom: 16px; } .PaymentTransferV2 .slick-track, .FXTrading .slick-track, .PaymentOrderV2 .slick-track { height: 75px; left: 0 !important; } .PaymentOrderV2 .select-1 { width: 90% !important; } .PaymentOrderV2 .inputwrapper { width: 96% !important; } .PaymentOrderV2 .checkbox-toggle { width: 69% !important; } .PaymentOrderV2 .slick-track { height: unset; left: 0 !important; } .PaymentOrderV2 .info-slider-wrapper .info-slide-content-right { margin-top: unset; } .PaymentTransferV2 .input-wrapper.with-text-right .input-1 { width: 93%; } .FXTrading .payments-main-form-buttons button, .PaymentOrderV2 .payments-main-form-buttons button { width: 100%; } .FXTrading .select-1, .PaymentOrderV2 .select-1 { width: 92%; } .FXTrading .select-1 .dk-selected, .PaymentOrderV2 .select-1 .dk-selected { width: 90%; } .FXTrading .input-wrapper .input-wrapper-inner input, .PaymentOrderV2 .input-wrapper .input-wrapper-inner input { width: 92%; } .CASTransfer .centered-buttons-wrap button { width: 100%; margin-left: 5px !important; } .CASTransfer .centered-buttons-wrap .deact-up, .CASTransfer .centered-buttons-wrap .updateBtn { width: 40%; margin: 0; } .CreditorTemplateManaging .gridFilterArea input { max-width: 228px; } .exchangeRate .curencyExchangeFilter .input-wrapper-inner input { width: 97%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left { width: 100%; padding: 0 0 20px 0; box-shadow: 0 22px 21px -28px rgba(0, 0, 0, 0.2); } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left::after { bottom: -12px; top: unset; left: 50%; width: 0; height: 0; border-style: solid; border-width: 12px 19px 0 19px; border-color: #fff transparent transparent transparent; transform: translateX(-50%); } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-right { width: 100%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-content { padding: 30px 0 0 0; } .CurrencyCalculator .currency-calculator-wrapper .input-1 { width: 91% !important; } .CASTransfer .input-wrapper .input-wrapper-inner .input-1 { padding: 21px 24px 7px; width: 84%; margin-left: 7px; } .CASTransfer .select-1 { width: 84%; margin-left: 5px; } .PersonalDataV2 .profile-info-left { flex-wrap: wrap; } .PersonalDataV2 .profile-info-left .profile-personal-info { width: 100%; } .PersonalDataV2 .profile-info-left .profile-personal-info .profile-image-wrapper { width: 40vw; min-width: 180px; height: 40vw; min-height: 180px; margin-left: auto; margin-right: auto; } .PersonalDataV2 .profile-info-left .profile-buttons-wrapper { width: 100%; padding-top: 0; margin-bottom: 0; } .SliderTutorial .slide .inner p:nth-child(2) { display: none; } .cardDetailsPopup .modal-content { padding: 20px; } .Forms_CategorizedFormList .offers-filter .offers-radio-wrap { width: 45%; padding-right: 20px; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box { flex-direction: column; height: unset; max-height: unset; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box .offers-box-img-wrapper { width: 100%; height: 62vw; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box .offers-box-content { width: 100%; padding: 32px; } .Forms_CategorizedFormList .offers-boxes-wrapper .offers-box .offers-box-content-top { margin-bottom: 24px; } .MessageHubNotificationList .messageTemplates .message-controls .checkbox { left: 2px; top: 90px; } .MessageHubNotificationList .messageTemplates .message-controls .msg-button { position: absolute; left: 0; top: 25px; min-height: 40px; } .MessageHubNotificationList .messageTemplates .message-controls .msg-button.btnArchive { left: 50px; } .MessageHubNotificationList .gvMessageList { padding-top: 40px; } .MessageHubNotificationList .gvMessageList .gridFilterArea { width: 50%; } .message-hub-dialog .side-modal { min-height: 148px; max-height: 100vh !important; top: 0px !important; } .read-messages-list .reply #areaReplyMessage { width: 250px; } } @media only screen and (max-width: 500px) { .UserInfo .site-logo-wrapper { width: 180px; } .UserInfo .site-logo-wrapper .site-logo-nonlogin { width: 110px; padding: 47px 0 16px 0; } .UserInfo .site-logo-wrapper .site-logo-nonlogin:before { left: calc(100% + 6px); } .UserInfo .site-logo-wrapper .site-logo:after { left: calc(100% + 6px); height: 80px; } .UserInfo .site-logo-wrapper .site-logo:before { top: -9px; left: calc(100% + 17px); height: 37px; } .UserInfo .header-icons-wrapper { min-width: auto; } .UserInfo .header-icons-wrapper .main-btn-wrapper { padding-top: 2px; } .UserInfo .header-icons-wrapper .main-btn-wrapper .header-icon-wrapper:nth-child(2), .UserInfo .header-icons-wrapper .main-btn-wrapper .header-icon-wrapper:nth-child(3) { display: none; } .lang-wrapper .lang-nav { margin-right: 4px; } .NoticesSlider { left: 11px; top: 89px; width: calc(100vw - 2.33%); } .PaymentOrderV2 .select-1 { width: 85% !important; } .PaymentOrderV2 .inputwrapper { width: 92% !important; } .PaymentOrderV2 .checkbox-toggle { width: 44% !important; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-1 { width: 89% !important; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-1 { width: 100% !important; } } @media only screen and (max-height: 768px) { .mCustomScrollBox { height: 90%; } } @media only screen and (max-height: 600px) { .login .s-page .LoginBackground .login-welcome-col .inner { top: 48%; } .login .s-page .LoginBackground .login-welcome-col .inner p { padding-top: 19px !important; } .mCustomScrollBox { height: 80%; } } @media only screen and (max-height: 480px) { .mCustomScrollBox { height: 70%; } } @media only screen and (max-width: 480px) { .preapproved-blocks-inner span { display: block; } .login .s-page .LoginBackground .img-wrap { min-height: 72vh; } #page-header { height: 60px !important; } .lang-wrapper { height: 36px; } .mobile-btn { padding-top: 10px !important; } .UserInfo .header-icons-wrapper { padding-top: 2px; } .login .s-page .LoginBackground .s-widget-body { height: 72vh; } .login .s-page .LoginBackground .s-widget-body .login-welcome-col .inner { max-width: 520px; top: 51%; left: 11px; bottom: auto; } .LoginRetail .activation-form-col .inner .input-wrapper.with-tooltip { padding-right: 33px; } .LoginRetail .activation-form-col .inner .input-wrapper.with-tooltip .tooltip-wrapper { right: -1px; } .LoginRetail .activation-form-col .inner .btn-activation-wrapper { max-width: 300px; padding-top: 46px; padding-right: 20px; } .LoginRetail .activation-form-col .inner .btn-activation-wrapper::after { width: calc(100% - 20px); } .NoticesSlider .slider-wrapper .info-icon-wrapper { padding-top: 16%; } .left-content-wrapper { margin-top: 10px; } .accounts-details .right-state { padding-left: 17px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.col-l { margin-bottom: 16px; width: 100%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.col-l:first-child { margin-right: 0px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper { display: flex; flex-direction: column; align-items: center; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-wrapper .select-1 { width: 92%; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-between-arrow-wrapper { position: unset; top: unset; left: unset; transform: rotate(90deg); margin-bottom: 16px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-between-arrow-wrapper { position: unset; top: unset; left: unset; transform: rotate(90deg); margin-bottom: 16px; width: 100%; height: 12px; margin-top: 40px !important; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-wrapper:first-child { margin-right: 0px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change { flex-wrap: nowrap; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper:not(:last-child) { margin-right: 16px !important; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper.col-xs { max-width: 120px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper.col-s { max-width: 102px; } .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-xs, .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-s, .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-m, .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-l { max-width: unset; width: 100%; margin-right: 0 !important; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.col-l { margin-bottom: 16px; width: 100%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.col-l:first-child { margin-right: 0px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper { display: flex; flex-direction: column; align-items: center; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-wrapper .select-1 { width: 100%; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-grid-wrapper .input-between-arrow-wrapper { position: unset; top: unset; left: unset; transform: rotate(90deg); margin-bottom: 16px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner { display: flex; flex-wrap: wrap; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-between-arrow-wrapper { position: unset; top: unset; left: unset; transform: rotate(90deg); margin-bottom: 16px; width: 100%; height: 12px !important; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .input-wrapper-inner .input-wrapper:first-child { margin-right: 0px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change { flex-wrap: nowrap; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper:not(:last-child) { margin-right: 16px !important; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper.col-xs { max-width: 120px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper.no-change .input-wrapper.col-s { max-width: 102px; } .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-xs, .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-s, .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-m, .dashboard .CurrencyCalculator .currency-calculator-wrapper .currency-calculator-left .input-wrapper .col-l { max-width: unset; width: 100%; margin-right: 0 !important; } .PaymentOrderV2 .input-1 { width: 90% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 88%; } .PaymentOrderV2 .select-1 { width: 84% !important; } .PaymentOrderV2 .input-wrapper .input-wrapper-inner .ui-datepicker-trigger { margin-left: 311px; } .PaymentOrderV2 .input-wrapper .input-wrapper-inner input { width: 94%; } .PaymentOrderV2 .input-wrapper .checkbox-toggle { width: 72% !important; margin-left: 4px; margin-top: 18px; } .PaymentOrderV2 .payments-main-form .payments-main-form-col-2 .input-grid-wrapper { flex-wrap: wrap; } .PaymentOrderV2 .payments-main-form .payments-main-form-col-2 .input-grid-wrapper .col-m { max-width: unset; } .PaymentOrderV2 .payments-main-form .payments-main-form-col-2 .input-grid-wrapper.no-change { flex-wrap: nowrap; } .modal-wrapper { width: 100%; } .modal-wrapper.active { width: 100%; border-radius: 0; } .cardDetailsPopup .modal-content .left-inner-loan-detail, .cardDetailsPopup .modal-content .right-inner-loan-detail { margin-bottom: 10px; } .modal-content .qr-wrapper { flex-direction: column; align-items: center; } .modal-content .qr-wrapper .qr-content { width: 100%; padding: 24px 0 0 0; } .modal-footer .buttons-wrapper { flex-wrap: wrap; } .modal-footer .buttons-wrapper .btn-1 { margin-bottom: 10px; } .modal-footer .buttons-wrapper button:not(:first-child) { margin-left: 0; } .modal-footer .buttons-wrapper div:not(:first-child) { margin-left: 0; } .ui-dialog.details-dialog .ui-dialog-content { width: 100% !important; } .ui-dialog.right-dialog { width: 100% !important; border-radius: 0 !important; } .ui-dialog:not(.no-yes-dialog):not(.support-dialog):not(.before-print-dialog):not(.message-hub-dialog) { padding: 0 !important; } .fXTradingCommissionDialog, .exchangeConfirmationDialog { height: max-content !important; } .CASTransfer .centered-buttons-wrap { justify-content: space-between; } .CASTransfer .centered-buttons-wrap .btn-1 { margin: 0 !important; } .CreditorTemplateManaging { margin-top: 135px; } .CreditorTemplateManaging .paymentTemplates > div { left: 0px !important; } .CreditorTemplateManaging .gridFilterArea { top: -110px !important; } .LoanAnnuityPlan .inner-loan-detail { flex-wrap: wrap; } .LoanAnnuityPlan .inner-loan-detail .left-inner-loan-detail, .LoanAnnuityPlan .inner-loan-detail .right-inner-loan-detail { margin-bottom: 10px; } .PaymentOrderV2 .input-1 { width: 88% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 85% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 85% !important; } } @media only screen and (max-width: 390px) { .PaymentOrderV2 .slick-track { left: 0% !important; } .PaymentOrderV2 .input-1 { width: 88% !important; } .PaymentOrderV2 .input-wrapper-inner.inputwrapper .input-1 { width: 82% !important; } .PaymentOrderV2 .select-1:not(.accountStatementSelect) { width: 85% !important; } } @media only screen and (max-width: 800px) { .side-menu { width: 0px !important; height: 100%; top: 0px !important; left: 0px; padding-top: 15px; z-index: 40 !important; } .side-menu.active { width: 300px !important; } .menu-btn { top: 43px !important; left: 11px !important; display: block !important; } .gvMessageList .gridFilterArea { width: 38%; } .MessageHubNotificationList { margin-left: 0px; } .message-hub-dialog .side-modal { min-height: 148px; max-height: 100vh !important; top: 0px !important; } }