/* * Author: Hamza mohamet * URL: https://foxthemes.net */ /* -------------------------------------------------------------- */ /* Default Colors ----------------------------------------------------------------- */ /* -------------------------------------------------------------- */ /* Typography ----------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); /* -------------------------------------------------------------- */ /* Header Settings for Desktop Devices ----------------------------------------------------------------- */ /* -------------------------------------------------------------- */ /* Sidebar ----------------------------------------------------------------- */ /* -------------------------------------------------------------- */ /* tabs ----------------------------------------------------------------- */ /* -------------------------------------------------------------- */ /* 02. Graphic User Interface Elements -----------------------------------------------------------------*/ /* ---------------------------------- */ /* Buttons ------------------------------------- */ button { vertical-align: middle; } a.button, span.button, button.button { background-color: #2a41e8; height: 38px; padding: 0 20px; line-height: 24px; color: #fff; position: relative; font-size: 15px; font-weight: 500; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; overflow: hidden; border: none; border-radius: 7px; } input[type="button"], input[type="submit"] { background-color: #2a41e8; height: 38px; padding: 0 20px; line-height: 24px; color: #fff; position: relative; font-size: 15px; font-weight: 500; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; overflow: hidden; border: none; border-radius: 7px; } /* Icons Aligment*/ .button i[class^="icon-material"], button.button i[class^="icon-material"] { font-size: 18px; height: 0; width: 18px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } input[type="button"] i[class^="icon-material"], input[type="submit"] i[class^="icon-material"] { font-size: 18px; height: 0; width: 18px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } a.button i[class^="icon-material"] { font-size: 18px; height: 0; width: 18px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } .button i[class^="icon-feather"], button.button i[class^="icon-feather"] { font-size: 15px; height: 0; width: 16px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } input[type="button"] i[class^="icon-feather"], input[type="submit"] i[class^="icon-feather"] { font-size: 15px; height: 0; width: 16px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } a.button i[class^="icon-feather"] { font-size: 15px; height: 0; width: 16px; line-height: 0; top: 2px; position: relative; display: inline-block; margin-left: 3px; } /* Dark Style */ button.button.dark { background-color: #333; color: #fff; } input[type="button"].dark, input[type="submit"].dark { background-color: #333; color: #fff; } a.button.dark { background-color: #333; color: #fff; } /* Dark Style */ button.button.gray { background-color: #eaeaea; color: #666; } input[type="button"].gray, input[type="submit"].gray { background-color: #eaeaea; color: #666; } a.button.gray { background-color: #f1f3f4; color: #666; } button.button.gray:hover { background-color: rgba(241, 243, 244, 0.8); } input[type="button"].gray:hover, input[type="submit"].gray:hover { background-color: #f1f3f4; } a.button.gray:hover { background-color: rgba(241, 243, 244, 0.8); } body .button i.icon-material-outline-arrow-right-alt { font-size: 22px; top: 4px; } .button.full-width { max-width: 100%; width: 100%; text-align: center; display: block; } .button.big { font-size: 18px; height: 44px; padding: 0 30px; } .button.small { font-size: 13px; height: 34px; padding: 0 15px; } /* Centered Button */ .centered-button { text-align: center; display: block; } .centered-button .button { margin: 0 auto; } .card { background-color: white; border-radius: 8px; overflow: hidden; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .card .card-media { overflow: hidden; position: relative; width: 100%; } .card .card-media img { height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0px; left: 0px; width: 100%; } .card .card-media-overly { background-color: #f1f3f4; height: 100%; width: 100%; -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .card .card-body { padding: 0.875rem; position: relative; } .card .box-title { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------- */ /* Forms Reset & Styles ------------------------------------- */ select, textarea, input, input[type="text"], input[type="password"], input[type="email"], input[type="number"] { height: 46px; line-height: 46px; padding: 0 20px; outline: none; font-size: 15px; color: #808080; max-width: 100%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; background-color: #fff; font-weight: 400; opacity: 1; border-radius: 7px; border: none; } select { cursor: pointer; } input { -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } input:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus { color: #808080; -webkit-transition: -webkit-box-shadow 0.2s !important; transition: -webkit-box-shadow 0.2s !important; transition: box-shadow 0.2s !important; transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important; opacity: 1; border: none; } textarea:focus { color: #808080; -webkit-transition: -webkit-box-shadow 0.2s !important; transition: -webkit-box-shadow 0.2s !important; transition: box-shadow 0.2s !important; transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important; opacity: 1; border: none; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color: #808080 !important; } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color: #808080 !important; } input.with-border, input[type="text"].with-border, input[type="password"].with-border, input[type="email"].with-border, input[type="number"].with-border { border: 1px solid #e0e0e0; } /* With Border */ textarea.with-border, select.with-border { border: 1px solid #e0e0e0; } input.with-border:focus, input[type="text"].with-border:focus, input[type="password"].with-border:focus, input[type="email"].with-border:focus, input[type="number"].with-border:focus { border: 1px solid #e0e0e0; } textarea.with-border:focus { border: 1px solid #e0e0e0; } input[type="submit"] { border: none; padding: 11px 18px; width: auto; } input[type="checkbox"] { display: inline; } input[type="radio"] { width: 15px; height: 15px; cursor: pointer; -webkit-box-shadow: none; box-shadow: none; } /* Input Placeholder Color */ ::-webkit-input-placeholder { color: #808080; opacity: 1; } :-ms-input-placeholder { color: #808080; opacity: 1; } ::-ms-input-placeholder { color: #808080; opacity: 1; } ::placeholder { color: #808080; opacity: 1; } textarea { height: auto; line-height: 27px; padding: 20px; min-height: 130px; -webkit-transition: none !important; transition: none !important; min-width: 100%; } label, legend { display: block; font-weight: bold; font-size: 15px; font-weight: normal; margin-bottom: 8px; } label span, legend span { font-weight: normal; font-size: 14px; color: #444; } fieldset { padding: 0; border: none; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; cursor: pointer; } button { outline: none !important; } img { max-width: 100%; } /* ---------------------------------- */ /* Input With Icon ------------------------------------- */ .input-with-icon { position: relative; } .input-with-icon input { padding-left: 45px; } .input-with-icon i { position: absolute; top: 0; color: #a0a0a0; text-align: center; line-height: 46px; width: 46px; height: 46px; font-size: 19px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; } .input-with-icon.no-border i { border: none; } /* Input with right icon */ .input-with-icon-right { display: block; position: relative; } .input-with-icon-right input { padding-right: 45px; } .input-with-icon-right i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 15px; font-size: 20px; color: #a0a0a0; font-style: normal; cursor: normal; pointer-events: none; } .input-with-icon-right i.currency { font-size: 14px; } /* ---------------------------------- */ /* Keywords Input ------------------------------------- */ .keywords-container { margin-bottom: -15px; } .keywords-list { display: block; float: left; height: 0; } .keyword { background-color: rgba(42, 65, 232, 0.07); color: #2a41e8; display: inline-block; float: left; padding: 0; border-radius: 7px; cursor: default; margin: 0 7px 7px 0; height: 35px; line-height: 35px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: KeywordIn 0.3s ease-in-out; animation: KeywordIn 0.3s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition: 0.4s; transition: 0.4s; overflow: hidden; max-width: 100%; font-size: 14.7px; } .keyword.keyword-removed { max-width: 0; margin: 0; overflow: hidden; opacity: 0; -webkit-animation: KeywordOut 0.4s ease-in-out; animation: KeywordOut 0.4s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; pointer-events: none; } @-webkit-keyframes KeywordIn { 0% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes KeywordIn { 0% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes KeywordOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; margin-top: -35px; } } @keyframes KeywordOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; margin-top: -35px; } } .keyword-text { padding-right: 12px; } .keyword .keyword-remove:before { display: inline-block; cursor: pointer; font-family: "Feather-Icons"; content: "\ea02"; line-height: 20px; position: relative; top: 2px; margin-right: 4px; margin-left: 10px; font-size: 15px; } .keyword-input-container { position: relative; } .keyword-input-container .keyword-input-button { position: absolute; top: 0; right: 0; height: 36px; width: 36px; padding: 0; color: #fff; background-color: #2a41e8; border-radius: 7px; margin: 6px; font-size: 19px; text-align: center; line-height: 36px; } .keyword-input-container .keyword-input-button i { color: #fff; position: relative; top: 2px; } input.keyword-input { margin: 0 0 15px 0; } /* ---------------------------------- */ /* Input animation placeholder ------------------------------------- */ .line { position: relative; height: 55px; } .line__input { border: 1px solid #dadce0 !important; font-size: 15px; position: absolute; left: 0; top: 0; border-radius: 4px; outline: 0; width: 100%; height: 100%; padding: 0 16px; padding-top: 11px !important; height: 55px !important; } .line__placeholder { position: absolute; z-index: 1; pointer-events: none; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 15px; font-size: 15px; padding: 0 5px; color: #a7a7a7; -webkit-transition: .25s; transition: .25s; } .line__input:focus { -webkit-box-shadow: 0 0 0 1px #2a41e8 inset; box-shadow: 0 0 0 1px #2a41e8 inset; border-color: transparent !important; } .line textarea { padding-top: 22px !important; } .line__input:not([value=""]) + .line__placeholder, .line__input:not([value=""]) + .line__placeholder, .line__input:focus + .line__placeholder { top: 6px; font-size: 12px; -webkit-transform: translateY(0); transform: translateY(0); } .line__input:focus + .line__placeholder { color: #2a41e8; } .line textarea + .line__placeholder { top: 30px; } /* ---------------------------------- */ /* Checkbox ------------------------------------- */ .checkbox { display: inline-block; margin-bottom: 0; } .checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .checkbox label { position: relative; cursor: pointer; padding-left: 30px; line-height: 25px; } .checkbox label span.checkbox-icon { content: ''; -webkit-appearance: none; background-color: transparent; border: 2px solid #b4b4b4; height: 20px; width: 20px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 5px; border-radius: 7px; -webkit-transition: 0.3s; transition: 0.3s; position: absolute; left: 0; top: 1px; } .checkbox input + label span.checkbox-icon:after { position: absolute; top: 2px; left: 0; right: 0; margin: 0 auto; opacity: 0; content: ''; display: block; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: scale(0.5) rotate(45deg); transform: scale(0.5) rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.3, -0.41, 0.19, 2), opacity 0.3s; transition: all 0.35s cubic-bezier(0.3, -0.41, 0.19, 2), opacity 0.3s; } .checkbox input:checked + label span.checkbox-icon { border-color: #2a41e8; background-color: #2a41e8; } .checkbox input:checked + label span.checkbox-icon:after { -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); opacity: 1; } /* ---------------------------------- */ /* Common Styles ------------------------------------- */ body, html { background-color: #f9fafb; } body { color: #666; font-size: 15px; line-height: 27px; background-color: #f9fafb; font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } body.gray { background-color: #fbfbfb; } body p { font-size: 15px; line-height: 27px; } /* Main Font */ h1, h2, h3, h4, h5, h6 { font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } input[type="text"], input[type="password"], input[type="email"] { font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } textarea, select { font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } input[type="button"], input[type="submit"] { font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } button, body .pac-container { font-family: Inter, "Open Sans", sans-serif !important; text-transform: none; } /* Headlines */ h1, h2, h3, h4, h5, h6 { color: #333; font-weight: 500; margin: 0; padding: 0; } h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 22px; } h4 { font-size: 15px; } h5 { font-size: 14px; } h6 { font-size: 12px; } h3.page-title { font-size: 20px; line-height: 32px; } .section { display: block; } .section.white { background: #fff; } .section.gray { background: #f9f9f9; } .section.border-top { border-top: 1px solid #e0e0e0; } .section.border-bottom { border-bottom: 1px solid #e0e0e0; } /* Section Headline */ .section-headline { display: block; position: relative; padding-right: 20%; } .section-headline.centered { text-align: center; padding: 0; } .section-headline span { font-size: 18px; line-height: 26px; font-weight: 300; color: #888; margin-top: 0; display: block; } .section-headline h1, .section-headline h2, .section-headline h3 { font-size: 26px; line-height: 36px; font-weight: 500; color: #333; } .section-headline h4 { font-size: 26px; line-height: 36px; font-weight: 500; color: #333; font-size: 22px; line-height: 34px; } .section-headline.border-top { border-top: 1px solid #e0e0e0; } h1.in-a-box, h2.in-a-box, h3.in-a-box, h5.in-a-box { display: inline-block; font-size: 18px; background-color: #333; color: #fff; border-radius: 7px; padding: 8px 20px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .section-headline h5 { font-size: 15px; font-weight: 600; line-height: 30px; } /* /* Single Task / Job / Profile Headings */ .single-page-section { margin-bottom: 55px; display: block; } .single-page-section p:last-of-type { padding-bottom: 0; margin-bottom: 0; } .single-page-section h3 { margin-bottom: 20px; font-size: 20px; } .single-page-section .job-listing h3.job-listing-title { margin-bottom: 0; } /* Headline Link */ a.headline-link { position: absolute; right: 0; bottom: 0; } a.headline-link.bottom-icon:after { content: "\e957"; top: 3px; } a.headline-link:after { content: "\e995"; font-family: "Material-Icons"; font-size: 21px; line-height: 0; position: relative; top: 4px; margin-left: 5px; } @media (max-width: 768px) { a.headline-link { position: relative; margin-top: 10px; display: inline-block; } } /* Classes for disabling things on mobile devices */ @media (max-width: 992px) { .hide-under-992px { display: none; } } @media (max-width: 768px) { .hide-under-768px { display: none; } } @media (max-width: 480px) { .hide-under-480px { display: none; } } /* Content & Sidebar Offsets */ .content-left-offset { padding-left: 30px; } .content-right-offset { padding-right: 30px; } @media (max-width: 992px) { .content-left-offset { padding-left: 15px; } .content-right-offset { padding-right: 15px; } } /* ---------------------------------- */ /* Icons Cheatsheet Styles ------------------------------------- */ .icon-set-container { display: block; width: calc(100% + 30px); left: -15px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .glyph.fs1 { position: relative; font-size: 20px; background-color: #fff; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 15px 15px; -webkit-transition: 0.3s; transition: 0.3s; color: #666; } .glyph.fs1:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .glyph.fs1 .fs0, .glyph.fs1 fieldset { display: none; } .glyph.fs1 span:not([class*="mls"]) { vertical-align: middle; top: -4px; height: 40px; width: 40px; background: rgba(0, 0, 0, 0.04); display: inline-block; line-height: 40px; text-align: center; border-radius: 7px; font-size: 24px; -webkit-transition: 0.3s; transition: 0.3s; position: relative; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .glyph.fs1 .mls:not([class*="icon-"]) { max-width: 80%; display: inline-block; overflow: hidden; font-size: 14px; line-height: 20px; top: 0; vertical-align: middle; padding-left: 55px; } /* ---------------------------------- */ /* Radio Button ------------------------------------- */ .radio { display: inline-block; vertical-align: top; } .radio label { margin: 3px 0; cursor: pointer; position: relative; padding-left: 29px; line-height: 25px; } .radio input[type="radio"] { position: absolute; opacity: 0; } .radio input[type="radio"] + label .radio-label { content: ''; background: #fff; border-radius: 100%; border: 2px solid #b4b4b4; display: inline-block; width: 18px; height: 18px; position: relative; margin-right: 5px; vertical-align: top; cursor: pointer; text-align: center; -webkit-transition: all 250ms ease; transition: all 250ms ease; background-color: #fff; -webkit-box-shadow: inset 0 0 0 8px #fff; box-shadow: inset 0 0 0 8px #fff; z-index: 100; position: absolute; top: 2px; left: 0; } .radio input[type="radio"] + label .radio-label:after { background-color: #2a41e8; content: ""; top: 3px; left: 0; right: 0; margin: 0 auto; position: absolute; opacity: 1; -webkit-transition: 0.3s; transition: 0.3s; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; z-index: 99; } .radio input[type="radio"]:checked + label .radio-label { background-color: #2a41e8; border-color: #2a41e8; -webkit-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; } .radio-label:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 50%; background-color: transparent; display: block; } .interactive-effect label .radio-label:before { -webkit-animation: radius-shadow 0.4s; animation: radius-shadow 0.4s; } @-webkit-keyframes radius-shadow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.4); box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.4); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } @keyframes radius-shadow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.4); box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.4); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } .small-label { border-radius: 7px; display: inline-block; background: #e0f5d7; color: #449626; padding: 0 8px; line-height: 27px; height: 26px; margin-left: 5px; position: relative; top: -1px; } /* ---------------------------------- */ /* On/Off Switch ------------------------------------- */ .switches-list .switch-container { width: 100%; } .switches-list .switch-container:last-child label { margin-bottom: 0; } .switch-container { display: inline-block; cursor: pointer; } label.switch { position: relative; } .switches-list .switch-container label { cursor: pointer; position: relative; padding-left: 45px; line-height: 26px; } .switch-button { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; background-color: #ccc; border-radius: 50px; -webkit-transition: 0.4s; transition: 0.4s; margin: 0 7px 0 0; top: 4px; position: absolute; top: 2px; left: 0; } .notify-box .switch-button { top: 0; } .notify-box .switch-container { top: 1px; position: relative; } .switch span.switch-text { display: block; padding-left: 48px; font-size: 15px; line-height: 22px; color: #666; } .switch input { display: none; } .switch.interactive-effect input:checked + .switch-button:before { -webkit-animation: switch-shadow-color 0.4s; animation: switch-shadow-color 0.4s; } .switch.interactive-effect .switch-button:before { -webkit-animation: switch-shadow 0.4s; animation: switch-shadow 0.4s; } @-webkit-keyframes switch-shadow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); } 100% { -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); } } @keyframes switch-shadow { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); } 100% { -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); } } @-webkit-keyframes switch-shadow-color { 0% { -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6); box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6); } 100% { -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); } } @keyframes switch-shadow-color { 0% { -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6); box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6); } 100% { -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0); } } .switch-button:before { position: absolute; content: ""; height: 16px; width: 16px; bottom: 2px; left: 2px; background-color: white; -webkit-transition: 0.4s, -webkit-box-shadow 0.3s; transition: 0.4s, -webkit-box-shadow 0.3s; transition: 0.4s, box-shadow 0.3s; transition: 0.4s, box-shadow 0.3s, -webkit-box-shadow 0.3s; border-radius: 50px; } input:checked + .switch-button { background-color: #2a41e8; } input:checked + .switch-button:before { -webkit-transform: translateX(14px); transform: translateX(14px); } /* -------------------------------------------------------------- */ /* 03. Vendor (third party assets styles) ----------------------------------------------------------------- */ /* ---------------------------------- */ /* Tippy.js Tooltips ------------------------------------- */ /* Dark */ .tippy-tooltip.dark-theme { color: #fff; font-weight: 500; font-size: 14px; padding: 6px 12px; } .tippy-tooltip.dark-theme .tippy-backdrop { background-color: #333; } .tippy-popper[x-placement^=top] .tippy-tooltip.dark-theme .tippy-arrow { border-top-color: #333; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.dark-theme .tippy-arrow { border-bottom-color: #333; } .tippy-popper[x-placement^=right] .tippy-tooltip.dark-theme .tippy-arrow { border-right-color: #333; } .tippy-popper[x-placement^=left] .tippy-tooltip.dark-theme .tippy-arrow { border-left-color: #333; } .tippy-tooltip.dark-theme .tippy-arrow { -webkit-transform: scale(0.7); transform: scale(0.7); } .tippy-tooltip.light-theme { color: #333; font-weight: 500; font-size: 14px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); padding: 6px 12px; background-color: #fff; } /* Light */ .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow { border-top-color: #fff; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow { border-bottom-color: #fff; } .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow { border-right-color: #fff; } .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow { border-left-color: #fff; } /* ---------------------------------- */ /* Bootstrap-select ------------------------------------- */ select.bs-select-hidden, select.selectpicker { display: none !important; } .bootstrap-select .btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bootstrap-select > .dropdown-toggle { width: 100%; padding-right: 25px; z-index: 1; } .bootstrap-select > .dropdown-toggle.bs-placeholder { color: #808080; } .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: #808080; } .bootstrap-select > select { position: absolute !important; bottom: 0; left: 50%; display: block !important; width: 0.5px !important; height: 100% !important; padding: 0 !important; opacity: 0 !important; border: none; } .bootstrap-select > select.mobile-device { top: 0; left: 0; display: block !important; width: 100% !important; z-index: 2; } .has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle { border-color: #b94a48; } .bootstrap-select.fit-width { width: auto !important; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .bootstrap-select.form-control { margin-bottom: 0; padding: 0; border: none; } .bootstrap-select.form-control:not([class*="col-"]) { width: 100%; } .bootstrap-select.form-control.input-group-btn { z-index: auto; } .bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] { float: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 0; } .bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right { float: right; } .row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right { float: right; } .form-inline .bootstrap-select.btn-group, .form-horizontal .bootstrap-select.btn-group, .checkbox .bootstrap-select.btn-group { margin-bottom: 0; } .checkbox-lg .bootstrap-select.btn-group.form-control, .checkbox-sm .bootstrap-select.btn-group.form-control { padding: 0; } .checkbox-lg .bootstrap-select.btn-group.form-control .dropdown-toggle, .checkbox-sm .bootstrap-select.btn-group.form-control .dropdown-toggle { height: 100%; font-size: inherit; line-height: inherit; border-radius: inherit; } .form-inline .bootstrap-select.btn-group .form-control { width: 100%; } .bootstrap-select.btn-group.disabled { cursor: not-allowed; } .bootstrap-select.btn-group.disabled:focus { outline: none !important; } .bootstrap-select.btn-group > .disabled { cursor: not-allowed; } .bootstrap-select.btn-group > .disabled:focus { outline: none !important; } .bootstrap-select.btn-group.bs-container { position: absolute; height: 0 !important; padding: 0 !important; } .bootstrap-select.btn-group.bs-container .dropdown-menu { z-index: 1060; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { overflow: hidden; width: 100%; line-height: 46px; text-align: left; white-space: nowrap; text-overflow: ellipsis; max-width: 90%; float: left; height: 46px; display: block; } .bootstrap-select.btn-group .dropdown-menu li.hidden { display: none; } .language-switcher.bootstrap-select.btn-group .dropdown-toggle .filter-option { max-width: 100%; float: left; } .sort-by .bootstrap-select.btn-group .dropdown-toggle .filter-option { max-width: 100%; float: left; line-height: 20px; height: auto; } .bootstrap-select.btn-group .dropdown-toggle .caret { position: absolute; top: 50%; right: 20px; margin-top: -1px; vertical-align: middle; -webkit-transition: 0.35s; transition: 0.35s; } .bootstrap-select.open .dropdown-toggle .caret::before { content: "\e931"; } .bootstrap-select.btn-group[class*="col-"] .dropdown-toggle { width: 100%; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; } .bootstrap-select.btn-group .dropdown-menu.inner { position: static; float: none; border: 0; padding: 0 10px; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .bootstrap-select.btn-group .dropdown-menu li { position: relative; margin-bottom: 1px; } .bootstrap-select.btn-group .dropdown-menu li.disabled { opacity: 0.75; } .bootstrap-select.btn-group .dropdown-menu li.active small { color: #fff; } .bootstrap-select.btn-group .dropdown-menu li.disabled a { cursor: not-allowed; } .bootstrap-select.btn-group .dropdown-menu li a { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bootstrap-select.btn-group .dropdown-menu li a span.text { display: inline-block; } .bootstrap-select.btn-group .dropdown-menu li small { padding-left: 7px; opacity: 0.8; } .bootstrap-select.btn-group .dropdown-menu .notify { position: absolute; bottom: 5px; width: calc(100% - 20px); margin: 0; min-height: 26px; padding: 3px 5px; pointer-events: none; padding: 5px 10px; background: #333; color: #fff; margin: 5px; margin-bottom: 5px; border-radius: 7px; white-space: nowrap; font-size: 14px; border: none; } .bootstrap-select.btn-group .no-results { padding: 5px 10px; background: #f6f6f6; margin: 5px 0; margin-bottom: 0; border-radius: 7px; white-space: nowrap; font-size: 14px; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option { position: static; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .caret { position: static; top: auto; margin-top: -1px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { white-space: normal; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle { z-index: 1061; } .bootstrap-select.show-menu-arrow .dropdown-toggle:before { content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(204, 204, 204, 0.2); position: absolute; bottom: -4px; left: 9px; display: none; } .bootstrap-select.show-menu-arrow .dropdown-toggle:after { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; position: absolute; bottom: -4px; left: 10px; display: none; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before { bottom: auto; top: -3px; border-top: 7px solid rgba(204, 204, 204, 0.2); border-bottom: 0; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after { bottom: auto; top: -3px; border-top: 6px solid white; border-bottom: 0; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before { right: 12px; left: auto; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after { right: 13px; left: auto; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after { display: block; } .bs-searchbox, .bs-actionsbox, .bs-donebutton { padding: 0 5px; } .bs-actionsbox { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 5px; margin-bottom: 10px; margin-top: -5px; } .bs-actionsbox div { display: -webkit-box; display: -ms-flexbox; display: flex; } .bootstrap-select.btn-group .bs-actionsbox div button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: #f6f6f6; -webkit-box-shadow: none; box-shadow: none; padding: 5px; height: 36px; font-size: 14px; color: #777; -webkit-transition: 0.3s; transition: 0.3s; } .bootstrap-select.btn-group .bs-actionsbox div button:first-child { border-radius: 7px 0 0 7px; background-color: #f0f0f0; } .bootstrap-select.btn-group .bs-actionsbox div button:last-child { border-radius: 0 7px 7px 0; } .bootstrap-select.btn-group .bs-actionsbox div button:hover { background: #2a41e8; color: #fff; } .bs-actionsbox .btn-group button { width: 50%; } .bs-donebutton { float: left; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .bs-donebutton .btn-group button { width: 100%; } .bs-searchbox { position: relative; } .bs-searchbox + .bs-actionsbox { padding: 0; } .bs-searchbox .form-control { margin-bottom: 0; width: 100%; float: none; -webkit-box-shadow: none; box-shadow: none; background: #f4f4f4; margin: -5px 0 10px 0; height: 38px; line-height: 38px; padding: 10px; } .bs-searchbox .form-control:focus { margin-bottom: 0; width: 100%; float: none; -webkit-box-shadow: none; box-shadow: none; background: #f4f4f4; margin: -5px 0 10px 0; height: 38px; line-height: 38px; padding: 10px; } .bs-searchbox:after { font-family: "Material-Icons"; content: "\e982"; font-size: 20px; width: 20px; height: 20px; line-height: 0; display: inline-block; position: absolute; margin: 0; color: #a0a0a0; right: 15px; top: 18px; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; } .caret::before { font-size: 20px; width: 1.4em; margin-right: -12px; float: right; font-family: "Feather-Icons"; content: "\e92e"; color: rgba(0, 0, 0, 0.54); } .uk-open > .uk-accordion-title::before { content: "\e931"; } .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; padding: 10px 0; margin: -4px 0 0 0; font-size: 15px; text-align: left; list-style: none; background-color: #fff; border: none; border-radius: 7px; -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12); } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu .divider { display: none; } .dropdown-menu > li > a { display: block; padding: 7px 10px; padding-right: 35px; clear: both; font-weight: normal; line-height: 21px; color: #808080; border-radius: 7px; } .bootstrap-select:before { content: ""; position: absolute; z-index: 2100; bottom: 0px; left: 0; height: 8px; width: 100%; background-color: #fff; display: block; opacity: 0; pointer-events: none; -webkit-transition: 0.4s; transition: 0.4s; } .bootstrap-select.open:before { opacity: 1; } .dropdown-menu > li > a:hover { color: #2a41e8; text-decoration: none; background-color: rgba(42, 65, 232, 0.07); } .dropdown-menu > .active > a { color: #2a41e8; text-decoration: none; background-color: rgba(42, 65, 232, 0.07); } .dropdown-menu > .active > a:hover { color: #2a41e8; text-decoration: none; background-color: rgba(42, 65, 232, 0.07); } .dropdown-menu > .disabled > a { color: #777; } .dropdown-menu > .disabled > a:hover { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; } .dropdown-menu.inner::-webkit-scrollbar { width: 5px; } .dropdown-menu.inner::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0); border-radius: 12px; } .dropdown-menu.inner::-webkit-scrollbar-thumb { border-radius: 12px; background-color: #d8d8d8; } .dropdown-menu.inner::-webkit-scrollbar-thumb:hover { border-radius: 12px; background-color: #c8c8c8; } /* Custom Scrollbar for -wekbit */ .bootstrap-select .dropdown-menu { opacity: 0; -webkit-transition: 0.4s; transition: 0.4s; display: block; pointer-events: none; visibility: hidden; cursor: default; } .bootstrap-select.open .dropdown-menu { opacity: 1; pointer-events: all; visibility: visible; } .open > a { outline: 0; } .dropdown-menu-right { right: 0; left: auto; } .dropdown-menu-left { right: auto; left: 0; } .dropdown-header { display: block; padding: 10px 20px; line-height: 20px; white-space: nowrap; background: #f6f6f6; color: #777; margin: 10px -10px !important; } .dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; } .pull-right > .dropdown-menu { right: 0; left: auto; } .dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px dashed; border-bottom: 4px solid \9; } .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: 100%; bottom: auto; margin-bottom: 2px; } @media (min-width: 767px) { .navbar-right .dropdown-menu { right: 0; left: auto; } .navbar-right .dropdown-menu-left { right: auto; left: 0; } } .bootstrap-select.btn-group { position: relative; } .bootstrap-select.btn-group button { position: relative; display: inline-block; height: 46px; line-height: 0; padding: 0 20px; margin: 0; outline: none; font-size: 15px; color: #808080; max-width: 100%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; background-color: #fff; font-weight: 500; opacity: 1; border-radius: 7px; border: none; } .is-small.bootstrap-select.btn-group button, .is-small.bootstrap-select.btn-group button .filter-option { height: 42px; line-height: 42px; } .is-small.bootstrap-select.btn-group .caret::before { margin-top: -19px; } /* Select Check Icon */ .hide-tick .check-mark { display: none !important; } .bootstrap-select.btn-group .dropdown-menu li a span.check-mark { position: absolute; display: inline-block; right: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0; line-height: 0; width: 20px; height: 20px; text-align: center; } .bootstrap-select.btn-group .dropdown-menu li span.check-mark:before { font-family: "Feather-Icons"; content: "\e92b"; font-size: 18px; -webkit-transition: all 0.3s; transition: all 0.3s; display: inline-block; top: 50%; right: 0; position: absolute; margin: 0; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } .bootstrap-select.btn-group .dropdown-menu li.selected span.check-mark:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s cubic-bezier(0.3, -0.41, 0.19, 2), opacity 0.3s; transition: all 0.35s cubic-bezier(0.3, -0.41, 0.19, 2), opacity 0.3s; } .bootstrap-select .dropdown-menu li.selected a span.check-mark:before, .bootstrap-select .dropdown-menu li.selected:hover a span.check-mark:before { color: #2a41e8; } .bootstrap-select .glyphicon:not(.check-mark) { font-size: 17px; line-height: 0; position: relative; top: 1px; margin-right: 3px; } .bootstrap-select .filter-option .glyphicon { position: relative; top: 1px; } /* Icons*/ /* Styles with border */ .with-border .dropdown-menu { border: 1px solid #e0e0e0; -webkit-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.05); } .with-border.bootstrap-select.btn-group button { border: 1px solid #e0e0e0; -webkit-box-shadow: none; box-shadow: none; } .with-border.bootstrap-select:before { width: calc(100% - 2px); left: 1px; } /**************** Simplebar Styles ****************/ [data-simplebar] { position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; height: 100%; } .simplebar-wrapper { overflow: hidden; width: inherit; height: inherit; max-width: inherit; max-height: inherit; } .simplebar-mask { direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; left: 0; top: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; z-index: 0; } .simplebar-offset { direction: inherit !important; -webkit-box-sizing: inherit !important; box-sizing: inherit !important; resize: none !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; } .simplebar-content { direction: inherit; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; position: relative; display: block; height: 100%; width: auto; visibility: visible; overflow: scroll; max-width: 100%; max-height: 100%; } .simplebar-placeholder { max-height: 100%; max-width: 100%; width: 100%; pointer-events: none; } .simplebar-height-auto-observer-wrapper { -webkit-box-sizing: inherit !important; box-sizing: inherit !important; height: 100%; width: inherit; max-width: 1px; position: relative; float: left; max-height: 1px; overflow: hidden; z-index: -1; padding: 0; margin: 0; pointer-events: none; -webkit-box-flex: inherit; -ms-flex-positive: inherit; flex-grow: inherit; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 0; flex-basis: 0; } .simplebar-height-auto-observer { -webkit-box-sizing: inherit; box-sizing: inherit; display: block; opacity: 0; position: absolute; top: 0; left: 0; height: 1000%; width: 1000%; min-height: 1px; min-width: 1px; overflow: hidden; pointer-events: none; z-index: -1; } .simplebar-track { z-index: 1; position: absolute; right: 0; bottom: 0; pointer-events: none; } .simplebar-scrollbar { position: absolute; right: 5px; width: 5px; min-height: 10px; } .simplebar-scrollbar:before { position: absolute; content: ""; border-radius: 7px; left: 0; right: 0; opacity: 0; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; -webkit-transition: opacity 0.2s, background-color 0.3s; transition: opacity 0.2s, background-color 0.3s; background-color: #545252; } .simplebar-track .simplebar-scrollbar.simplebar-visible:before { opacity: .5; -webkit-transition: opacity 0s linear; transition: opacity 0s linear; } .simplebar-track.simplebar-vertical { top: 0; width: 10px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar:before { top: 2px; bottom: 2px; } .simplebar-track.simplebar-horizontal { left: 0; height: 11px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before { height: 100%; left: 2px; right: 2px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar { right: auto; left: 0; top: 2px; height: 7px; min-height: 0; min-width: 10px; width: auto; } [data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical { right: auto; left: 0; } .hs-dummy-scrollbar-size { direction: rtl; position: fixed; opacity: 0; visibility: hidden; height: 500px; width: 500px; overflow-y: hidden; overflow-x: scroll; } /* ---------------------------------- */ /* Magnific Popup ------------------------------------- */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; overflow: hidden; position: fixed; background: #111; } .mfp-wrap { top: -10px; left: 0; width: 100%; height: 100%; z-index: 2001; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { height: 100%; text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 18px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 505; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #aaa; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 504; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: #fff; } .mfp-s-ready .mfp-preloader, .mfp-s-error .mfp-content, .mfp-s-loading .mfp-arrow { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 506; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: 0px; top: -40px; } /* Close Button */ .og-close, button.mfp-close { position: absolute; width: 45px; height: 45px; top: -20px; display: block; right: -12px; cursor: pointer !important; z-index: 9999; color: #fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 50%; margin: 0px; background-color: transparent; outline: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mfp-iframe-holder .mfp-close { top: -50px; right: -12px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mfp-gallery .mfp-close { top: 20px; right: 10px; } .mfp-gallery .mfp-content .mfp-close { display: none; } .mfp-close::after, .mfp-close::before { top: 0px; } .og-close { margin: 17px; right: 10px; background: transparent; color: #222; } .og-close:before { font-family: "Feather-Icons"; font-size: 20px; top: 2px; left: 0; position: relative; height: 10px; } .mfp-close:before { font-family: "Feather-Icons"; font-size: 20px; top: 2px; left: 0; position: relative; height: 10px; } .og-close:before, .mfp-close:before { content: "\ea02"; } #small-dialog .mfp-close, #small-dialog-1 .mfp-close, #small-dialog-2 .mfp-close, #small-dialog-3 .mfp-close, #small-dialog-4 .mfp-close, #sign-in-dialog { color: #fff; } .mfp-close { color: #fff; } .mfp-close:hover { color: #fff; } /* Popup close button*/ #sign-in-dialog .mfp-close, #small-dialog-1 .mfp-close, #small-dialog-2 .mfp-close, #small-dialog-3 .mfp-close, #small-dialog-4 .mfp-close, #small-dialog .mfp-close { color: #666; background-color: #e4e4e4; border-radius: 7px; top: 28px; right: 40px; width: 40px; height: 40px; } #sign-in-dialog .mfp-close:hover, #small-dialog-1 .mfp-close:hover, #small-dialog-2 .mfp-close:hover, #small-dialog-3 .mfp-close:hover, #small-dialog-4 .mfp-close:hover, #small-dialog .mfp-close:hover { color: #fff; background-color: #2a41e8; } .small-dialog-content input[type=submit] { width: 100%; margin-top: 26px; margin-bottom: 10px; } .small-dialog-content .divider { display: inline-block; width: 100%; margin-top: 15px; padding-bottom: 0; } .small-dialog-header { font-size: 22px; width: calc(100% + 80px); position: relative; left: -40px; top: 0; border-radius: 7px 7px 0 0; display: inline-block; background-color: #f6f6f6; padding: 35px 40px; margin-bottom: 40px; } .small-dialog-header h3 { padding: 0; margin: 0; font-size: 23px; } .mfp-counter { position: absolute; top: 0; right: 0; color: #aaa; font-size: 13px; line-height: 18px; } .mfp-arrow { opacity: 1; margin: 0 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9999; color: #fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; width: 60px; height: 60px; position: absolute; display: block; z-index: 100; overflow: hidden; background: rgba(255, 255, 255, 0.15); border-radius: 50%; outline: none; } .mfp-arrow:hover { background: #2a41e8; color: #fff; } .mfp-arrow.mfp-arrow-left { font-family: "simple-line-icons"; font-size: 20px; } .mfp-arrow.mfp-arrow-right { font-family: "simple-line-icons"; font-size: 20px; right: 15px; } .mfp-arrow.mfp-arrow-left:before { content: "\e605"; left: -1px; top: 0px; position: relative; } .mfp-arrow.mfp-arrow-right:before { content: "\e606"; left: 1px; top: 0px; position: relative; } .mfp-content:hover .mfp-arrow { opacity: 1; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 1180px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 54%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } /* Popup */ #sign-in-dialog, #small-dialog-1, #small-dialog-2, #small-dialog-3, #small-dialog-4, #small-dialog { background: #fff; padding: 40px; padding-top: 0; text-align: left; max-width: 610px; margin: 40px auto; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 7px; max-width: 550px; } #sign-in-dialog-1 span.line, #sign-in-dialog-2 span.line, #sign-in-dialog-3 span.line, #sign-in-dialog-4 span.line, #sign-in-dialog span.line, #small-dialog span.line { padding-top: 0; } /* Animating */ .my-mfp-zoom-in { /* In */ /* Out */ } .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); transform: scale(0.8); } .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .my-mfp-zoom-in.mfp-bg { opacity: 0.001; /* Chrome opacity transition bug */ -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.85; } .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 40px auto; border-radius: 7px; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 18px rgba(11, 11, 11, 0.6); box-shadow: 0 0 18px rgba(11, 11, 11, 0.6); } .mfp-bottom-bar { margin-top: -30px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-break: break-word; padding-right: 36px; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } /* Media Queries for Magnific Popup */ @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } /* The shadow behind the image */ } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.92; background-color: #111; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Feedback Yes No */ .feedback-yes-no { margin-bottom: 15px; } .feedback-yes-no strong { font-size: 15px; font-weight: 600; color: #333; display: block; } .feedback-yes-no .radio { margin-right: 15px; } .feedback-yes-no .leave-rating { -webkit-transform: scale(1.1); transform: scale(1.1); margin: 3px 0 10px 3px; } /* ---------------------------------- */ /* Popup tabs ------------------------------------- */ .popup-tabs-nav { list-style: none; margin: 0; padding: 0; width: 100%; display: block; height: 62px; background: #f8f8f8; border-radius: 7px 7px 0 0; border-bottom: 1px solid #e0e0e0; } .popup-tabs-nav li { float: left; line-height: 62px; height: 62px; padding: 0; margin-right: 0; position: relative; } .popup-tabs-nav li:first-child a { border-radius: 4px 0 0 0; } .popup-tabs-nav li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .popup-tab-reviews { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .popup-tabs-nav li a { border: none; color: #777; display: inline-block; outline: none; padding: 0; text-decoration: none; font-size: 15px; z-index: 10; position: relative; height: 100%; padding: 0 30px; border-right: 1px solid transparent; border-left: 1px solid transparent; -webkit-transition: all 0.3s, font-weight 0s; transition: all 0.3s, font-weight 0s; border-right: 1px solid #e0e0e0; } .popup-tabs-nav li.active { background-color: #fff; position: relative; } .popup-tabs-nav li a:hover { background-color: #f3f3f3; height: calc(100% - 1px); color: #333; } .popup-tabs-nav li:last-child a:hover { border-right: 1px solid #e0e0e0; } .popup-tabs-nav li.active { background-color: #fff; } .popup-tabs-nav li.active a { color: #2a41e8; font-weight: 600; } .popup-tabs-nav li.active a:hover { background-color: #fff; } .popup-tabs-nav li.active:after { content: ""; position: absolute; display: block; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; z-index: 111; } .popup-tabs-nav li:first-child.active { border-left: none; border-radius: 4px 0 0 0; } .popup-tab-content { padding: 50px 35px; position: relative; z-index: 10; display: inline-block; width: 100%; } .popup-tabs-container { overflow: hidden; width: 100%; } .popup-tab-content p:last-child { margin-bottom: 0; } .dialog-with-tabs#sign-in-dialog, .dialog-with-tabs#small-dialog-1, .dialog-with-tabs#small-dialog-2, .dialog-with-tabs#small-dialog-3, .dialog-with-tabs#small-dialog-4, .dialog-with-tabs#small-dialog { padding: 0; color: #666; max-width: 540px; -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); } /* Close Button Adjustments*/ #sign-in-dialog.dialog-with-tabs .mfp-close, #small-dialog.dialog-with-tabs .mfp-close, #small-dialog-1.dialog-with-tabs .mfp-close, #small-dialog-2.dialog-with-tabs .mfp-close, #small-dialog-3.dialog-with-tabs .mfp-close, #small-dialog-4.dialog-with-tabs .mfp-close { color: #888; background-color: #f8f8f8; border-left: 1px solid #e0e0e0; border-radius: 0 4px 0 0; top: 0; right: 0; width: 62px; height: 61px; } #sign-in-dialog.dialog-with-tabs .mfp-close:hover, #small-dialog-1.dialog-with-tabs .mfp-close:hover, #small-dialog-2.dialog-with-tabs .mfp-close:hover, #small-dialog-3.dialog-with-tabs .mfp-close:hover, #small-dialog-4.dialog-with-tabs .mfp-close:hover, #small-dialog.dialog-with-tabs .mfp-close:hover { color: #333; background-color: #f2f2f2; } .dialog-with-tabs { /* Chrome autocomplete highlight reset */ /* Forgot Password Link */ /* Submit Button Adjustments */ } .dialog-with-tabs .mfp-close:before { font-size: 24px; } .dialog-with-tabs input { margin-bottom: 22px; } .dialog-with-tabs input:-webkit-autofill, .dialog-with-tabs input:focus:-webkit-autofill { border: 1px solid #e0e0e0; -webkit-box-shadow: inset 0 0 0px 9999px white, 0 1px 4px rgba(0, 0, 0, 0.07); } .dialog-with-tabs .forgot-password { font-size: 14px; color: #888; margin-top: -12px; display: block; } .dialog-with-tabs .forgot-password:hover { color: #2a41e8; } .dialog-with-tabs .button { height: 48px; width: 100% !important; margin-top: 25px; -webkit-box-shadow: 0 4px 12px rgba(42, 65, 232, 0.15); box-shadow: 0 4px 12px rgba(42, 65, 232, 0.15); } /* Welcome Text */ .welcome-text { display: block; text-align: center; color: #808080; margin-bottom: 33px; } .welcome-text h3 { display: block; font-weight: 700; color: #333; font-size: 24px; } .welcome-text span { display: block; margin-top: 4px; } .welcome-text span a { font-weight: 500; } /* Social Login Separator */ .social-login-separator { width: 100%; display: block; text-align: center; position: relative; width: 100%; margin: 38px 0 15px 0; height: 1px; } .social-login-separator:before { width: 100%; content: ""; height: 1px; display: block; background-color: #e0e0e0; position: absolute; top: 0; } .social-login-separator span { background-color: #fff; top: 0; position: absolute; line-height: 10px; top: -5px; margin-left: -15px; padding: 0px 10px; color: #808080; } /* Social Login Buttons */ .social-login-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 20px); } .social-login-buttons button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; border: 1px solid #333; color: #333; border-radius: 7px; margin-top: 10px; margin-right: 20px; font-size: 14px; padding: 9px 5px; max-width: 50%; -webkit-transition: 0.3s; transition: 0.3s; } .social-login-buttons button:hover { background-color: #333; color: #fff; } .social-login-buttons button i { position: relative; top: 1px; margin-right: 7px; font-size: 15px; } .social-login-buttons .facebook-login { border-color: #3b5998; color: #3b5998; } .social-login-buttons .facebook-login:hover { background-color: #3b5998; color: #fff; } .social-login-buttons .google-login { border-color: #dd4b39; color: #dd4b39; } .social-login-buttons .google-login:hover { background-color: #dd4b39; color: #fff; } @media (max-width: 768px) { .social-login-separator { margin-bottom: 25px; } .social-login-buttons { width: 100%; display: block; max-width: 100%; } .social-login-buttons a { width: 100%; display: block; max-width: 100%; } } /* Account Type */ .account-type { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% + 20px); margin: 0 0 20px 0; } .account-type div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 20px; } .account-type label { border-radius: 3px; border: none; background-color: #f2f2f2; width: 100%; } .account-type input.account-type-radio:empty { display: none; } .account-type label i { position: relative; font-size: 18px; top: 2px; margin-right: 2px; } .account-type input.account-type-radio:empty ~ label { position: relative; float: left; padding: 10px; text-align: center; padding-bottom: 11px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 7px; color: #888; -webkit-transition: 0.4s; transition: 0.4s; height: 48px; line-height: 28px; overflow: hidden; } .account-type input.account-type-radio ~ label:hover { color: #289c41; background-color: #e4f6e9; } .account-type input.account-type-radio:checked ~ label { color: #fff; background-color: #47bb67; } .account-type input.account-type-radio:empty ~ label:after, .account-type input.account-type-radio:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 100%; height: 100%; text-align: center; line-height: 48px; border-radius: 7px; font-size: 22px; background: transparent; z-index: 100; opacity: 0; } .account-type .ripple-effect-dark span.ripple-overlay { -webkit-animation: ripple 1.2s; animation: ripple 1.2s; opacity: 0.03; } /* hide input */ /* style label */ /* Standard syntax */ @-webkit-keyframes typeCheck { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes typeCheck { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes typeBG { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes typeBG { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Popups Media Queries */ @media (max-width: 480px) { .popup-tabs-nav { padding-top: 50px; height: 50px; } .mfp-container { padding: 0 10px; } .popup-tabs-nav li { border-bottom: 1px solid #e0e0e0; width: 100%; text-align: center; height: 50px; line-height: 50px; } .popup-tabs-nav li:first-child { border-top: 1px solid #e0e0e0; } .popup-tabs-nav li a { width: 100%; text-align: center; height: 50px; line-height: 50px; } .popup-tabs-nav li a:hover { background-color: transparent; } #sign-in-dialog.dialog-with-tabs .mfp-close, #small-dialog.dialog-with-tabs .mfp-close, #small-dialog-1.dialog-with-tabs .mfp-close, #small-dialog-2.dialog-with-tabs .mfp-close, #small-dialog-3.dialog-with-tabs .mfp-close, #small-dialog-4.dialog-with-tabs .mfp-close { height: 50px; width: 50px; } .account-type { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .social-login-buttons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .social-login-buttons button { max-width: 100%; width: 100%; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .uploadButton { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .uploadButton .uploadButton-file-name { padding: 0; margin: 15px 0 0 0; } } .aks-file-upload { width: auto; display: block; margin: 0 auto; height: auto; font-size: 16px; line-height: normal; border-radius: 6px; position: relative; z-index: 1; border: 2px white dashed; } .aks-file-upload.drop-active { border: 2px #0072ff dashed; } .aks-file-upload-content { width: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .aks-file-upload-label { text-align: center; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; font-weight: bold; color: #002c7b; padding: 60px 15px 20px; border-width: 2px; border-style: dashed; border-radius: 0.375rem; background-color: #f9fafb; } .aks-file-upload-label::after { font-family: "Feather-Icons"; content: '\e9f0'; position: absolute; margin-top: -55px; line-height: 13px; color: #949494; opacity: 1; font-size: 32px; } .aks-file-upload-preview { width: 100%; height: auto; position: relative; -webkit-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .aks-file-upload-preview:last-child { margin-bottom: 0rem; } .aks-file-upload-p-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; padding: 4px; left: 0; right: 0; top: -10px; line-height: normal; background: -webkit-gradient(linear, left top, left bottom, from(#0e0e0e), to(#00000003)); background: linear-gradient(#0e0e0e, #00000003); color: white; z-index: 1; border: 0; border-radius: 100px 100px 0 0; } .aks-file-upload-p-header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-left: 7px; padding-top: 5px; padding-right: 10px; width: 70%; } .aks-file-upload-title { font-size: 13px; margin-bottom: 2px; font-weight: 400; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 100%; } .aks-file-upload-size { font-size: 10px; color: #c3c3c3; } .aks-file-upload-delete { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); border-radius: 9999px; -webkit-transition: -webkit-box-shadow 0.25s ease-in; transition: -webkit-box-shadow 0.25s ease-in; transition: box-shadow 0.25s ease-in; transition: box-shadow 0.25s ease-in, -webkit-box-shadow 0.25s ease-in; cursor: pointer; position: absolute; right: 12px; } .aks-file-upload-delete:hover { -webkit-box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9); background-color: rgba(0, 0, 0, 0.8); } .aks-file-upload-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); border-radius: 9999px; -webkit-transition: -webkit-box-shadow 0.25s ease-in; transition: -webkit-box-shadow 0.25s ease-in; transition: box-shadow 0.25s ease-in; transition: box-shadow 0.25s ease-in, -webkit-box-shadow 0.25s ease-in; cursor: pointer; position: absolute; right: 12px; color: white; } .aks-file-upload-btn:hover { -webkit-box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9); background-color: rgba(0, 0, 0, 0.8); } .aks-file-upload-p-main { background: #0e0e0e; position: relative; width: 100%; height: auto; -webkit-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .aks-file-upload-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .aks-file-upload-image img { width: 100%; height: 0px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; position: relative; } .aks-file-upload-image img.png { background: url("background.png"); background-size: cover; background-repeat: no-repeat; background-position: center; } .aks-file-upload-preview.aks-no-preview { background: #171717; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .aks-file-upload-preview.aks-no-preview .aks-file-upload-p-header { position: relative; width: 100%; background: transparent; } .aks-file-upload-preview.aks-no-preview .aks-file-upload-p-header-content { padding-top: 0; } .aks-file-upload-preview.aks-no-preview .aks-file-upload-delete { background-color: rgba(74, 74, 74, 0.5); } .aks-file-upload-p-header-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 350ms ease; transition: all 350ms ease; position: relative; } .aks-file-upload-p-header-icon svg { width: 22px; height: 22px; } .aks-file-upload-error { color: red; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; width: 90%; font-weight: 600; font-size: 14px; margin: 0 auto; margin-bottom: 0.5rem; line-height: 1.3; } .aks-uplaod-bar { position: absolute; top: 0; width: 0; height: 5px; background: #00ab3c; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; -webkit-transition: all 350ms ease-in; transition: all 350ms ease-in; z-index: 5; } /* -------------------------------------------------------------- */ /* 04. Layouts ----------------------------------------------------------------- */ /*! * Bootstrap Grid v4.0.0 (https://getbootstrap.com) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @-ms-viewport { width: device-width; } html { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-overflow-style: scrollbar; } * { -webkit-box-sizing: inherit; box-sizing: inherit; } *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; } .container, .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1240px) { .container { max-width: 1090px; } } @media (min-width: 1367px) { .container { max-width: 1210px; } } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-1 { margin-left: 8.333333%; } .offset-2 { margin-left: 16.666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.333333%; } .offset-5 { margin-left: 41.666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.333333%; } .offset-8 { margin-left: 66.666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.333333%; } .offset-11 { margin-left: 91.666667%; } @media (min-width: 576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-sm-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sm-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sm-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sm-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sm-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sm-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sm-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-sm-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-sm-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-sm-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-sm-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-sm-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-sm-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-sm-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-sm-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-sm-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-sm-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-sm-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-sm-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-sm-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-sm-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-sm-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.333333%; } .offset-sm-2 { margin-left: 16.666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.333333%; } .offset-sm-5 { margin-left: 41.666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.333333%; } .offset-sm-8 { margin-left: 66.666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.333333%; } .offset-sm-11 { margin-left: 91.666667%; } } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-md-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-md-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-md-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-md-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-md-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-md-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-md-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-md-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-md-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-md-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-md-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-md-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-md-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-md-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-md-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-md-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-md-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-md-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-md-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.333333%; } .offset-md-2 { margin-left: 16.666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.333333%; } .offset-md-5 { margin-left: 41.666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.333333%; } .offset-md-8 { margin-left: 66.666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.333333%; } .offset-md-11 { margin-left: 91.666667%; } } @media (min-width: 992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-lg-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-lg-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-lg-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-lg-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-lg-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-lg-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-lg-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-lg-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-lg-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-lg-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-lg-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-lg-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-lg-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-lg-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-lg-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-lg-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-lg-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-lg-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-lg-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-lg-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-lg-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.333333%; } .offset-lg-2 { margin-left: 16.666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.333333%; } .offset-lg-5 { margin-left: 41.666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.333333%; } .offset-lg-8 { margin-left: 66.666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.333333%; } .offset-lg-11 { margin-left: 91.666667%; } } @media (min-width: 1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-xl-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xl-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-xl-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-xl-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xl-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xl-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-xl-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-xl-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xl-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-xl-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-xl-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-xl-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-xl-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-xl-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-xl-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-xl-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-xl-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-xl-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-xl-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-xl-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-xl-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-xl-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-xl-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-xl-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.333333%; } .offset-xl-2 { margin-left: 16.666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.333333%; } .offset-xl-5 { margin-left: 41.666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.333333%; } .offset-xl-8 { margin-left: 66.666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.333333%; } .offset-xl-11 { margin-left: 91.666667%; } } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } @media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media print { .d-print-none { display: none !important; } .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-print-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } .flex-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } @media (min-width: 576px) { .flex-sm-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-sm-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 768px) { .flex-md-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-md-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 992px) { .flex-lg-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-lg-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1200px) { .flex-xl-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-xl-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } /*! * Bootstrap Reboot v4.0.0 (https://getbootstrap.com) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; text-align: left; background-color: #fff; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } @-ms-viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } [tabindex="-1"]:focus { outline: 0 !important; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } p { margin-top: 0; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { color: #007bff; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: #0056b3; text-decoration: none; } a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; outline: 0; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg:not(:root) { overflow: hidden; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6c757d; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: .5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } .clearfix:before, .clearfix:after { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; } .dl-horizontal dd:before, .dl-horizontal dd:after { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; } .container:before, .container:after { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; } .container-fluid:before, .container-fluid:after { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; } .row:before, .row:after { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; } .clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after { clear: both; } /* ---------------------------------- */ /* Sidebar Navigation ------------------------------------- */ .sidebar { width: 300px; background-color: white; -webkit-transition: all 300ms 0s ease-in-out; transition: all 300ms 0s ease-in-out; position: fixed; top: 0; left: 0; height: 100%; z-index: 11; padding-bottom: 30px; overflow: hidden; border-right-width: 1px; /* simplebar scrollbar */ /*sidebar Overly for mobi */ } .sidebar .sidebar_inner { padding: 0 12px; height: calc(100% - -30px); padding-top: 72px; /*footer links */ } .sidebar .sidebar_inner ul { list-style: none; border-top-width: 1px; padding: 10px 0; } .sidebar .sidebar_inner ul:first-child { margin: 0; border: 0; } .sidebar .sidebar_inner ul:before { content: attr(data-sub-title); padding: 0 12px; margin-bottom: 8px; display: block; color: #333333; font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; } .sidebar .sidebar_inner ul li { /* active state */ /* hover state */ } .sidebar .sidebar_inner ul li a { border-radius: 10px; font-size: 15px; color: #585757; padding: 10px 12px; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; position: relative; font-weight: 500; margin-bottom: 4px; width: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sidebar .sidebar_inner ul li a i { padding-right: 10px; font-size: 25px; color: #909090; -webkit-transition: 0.3s; transition: 0.3s; position: relative; top: 2px; } .sidebar .sidebar_inner ul li a svg { width: 26px; height: 26px; margin-right: 10px; } .sidebar .sidebar_inner ul li a .side-icon { margin-right: 0.75rem; font-size: 1.3rem; line-height: 2rem; } .sidebar .sidebar_inner ul li span.nav-tag { display: inline-block; font-weight: 700; height: 19px; width: 19px; line-height: 19px; text-align: center; color: #fff; font-size: 11px; background-color: #2a41e8; border-radius: 50%; position: relative; margin: 0 0 0 4px; top: -2px; } .sidebar .sidebar_inner ul li span.soon { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0.5rem; font-size: 0.75rem; line-height: 1.25rem; font-weight: 600; padding: 0.13rem 0.5rem; border-radius: 3rem; color: #11b981; background-color: #d1fae5; } .sidebar .sidebar_inner ul li.active a, .sidebar .sidebar_inner ul li.uk-active a { background-color: rgba(42, 65, 232, 0.07); color: #2a41e8; } .sidebar .sidebar_inner ul li a:hover, .sidebar .sidebar_inner ul li.active-submenu a:hover { background-color: #f3f4f6; } .sidebar .sidebar_inner ul li.active, .sidebar .sidebar_inner ul li.uk-active { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .sidebar .sidebar_inner ul li a:after { font-family: "Feather-Icons"; content: '\e92e'; opacity: 1; font-size: 22px; -webkit-transition: 0.3s; transition: 0.3s; opacity: 1; width: 18px; height: 26px; color: #a8a8a8; position: absolute; right: 12px; top: 4px; } .sidebar .sidebar_inner ul li ul { padding: 0; margin: 0; border: 0; display: none; max-height: 0; opacity: 0; -webkit-transition: 0.3s; transition: 0.3s; } .sidebar .sidebar_inner ul li.active-submenu ul { padding: 0 0 0 35px; opacity: 1; max-height: inherit; pointer-events: all; display: inherit; } .sidebar .sidebar_inner ul li.active-submenu ul:before { display: none; } .sidebar .sidebar_inner ul li.active-submenu ul a { color: #585757; border-radius: 6px; padding: 7px 12px; font-size: 14.5px; margin-bottom: 2px; } .sidebar .sidebar_inner ul li.active-submenu a:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); top: 9px; right: 8px; } .sidebar .sidebar_inner ul li.active-submenu a:after { opacity: 0.8; } .sidebar .sidebar_inner ul li ul:before, .sidebar .sidebar_inner ul li a:only-child:after { content: ''; display: none; } .sidebar .sidebar_inner ul.side_links li a { padding-top: 8px; padding-bottom: 8px; margin-bottom: 3px; border-radius: 7px; } .sidebar .sidebar_inner a.see-mover { display: block; color: #4b5563; height: 2.5rem; font-weight: 500; margin-top: -8px; padding: 5px 8px; margin-bottom: 5px; } .sidebar .sidebar_inner a.see-mover span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .sidebar .sidebar_inner a.see-mover svg { width: 1.75rem; padding: 0.125rem; margin-right: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; border-radius: 9999px; background-color: #f3f4f6; } .sidebar .sidebar_inner ul.side-colored li a { padding: 8px 12px; } .sidebar .sidebar_inner ul.side-colored li a .side-icon { color: rgba(255, 255, 255, 0.8); padding: 0.25rem; border-radius: 0.375rem; background-image: -webkit-gradient(linear, left top, right bottom, from(#6ee7b7), to(#10b981)); background-image: linear-gradient(to bottom right, #6ee7b7, #10b981); } .sidebar .sidebar_inner ul.side-colored li:nth-child(1) a .side-icon, .sidebar .sidebar_inner ul.side-colored li:nth-child(5) a .side-icon { background-image: -webkit-gradient(linear, left top, right bottom, from(#c4b5fd), to(#3b82f6)); background-image: linear-gradient(to bottom right, #c4b5fd, #3b82f6); } .sidebar .sidebar_inner ul.side-colored li:nth-child(2) a .side-icon, .sidebar .sidebar_inner ul.side-colored li:nth-child(6) a .side-icon { background-image: -webkit-gradient(linear, left top, right bottom, from(#fcd34d), to(#ef4444)); background-image: linear-gradient(to bottom right, #fcd34d, #ef4444); } .sidebar .sidebar_inner ul.side-colored li:nth-child(3) a .side-icon, .sidebar .sidebar_inner ul.side-colored li:nth-child(7) a .side-icon { background-image: -webkit-gradient(linear, left top, right bottom, from(#6ee7b7), to(#10b981)); background-image: linear-gradient(to bottom right, #6ee7b7, #10b981); } .sidebar .sidebar_inner ul.side-colored li:nth-child(4) a .side-icon, .sidebar .sidebar_inner ul.side-colored li:nth-child(8) a .side-icon { background-image: -webkit-gradient(linear, left top, right bottom, from(#f9a8d4), to(#ef4444)); background-image: linear-gradient(to bottom right, #f9a8d4, #ef4444); } .sidebar .sidebar_inner .side_foot_links { padding: 8px 5px 20px; } .sidebar .sidebar_inner .side_foot_links a { color: #6f6f6f; line-height: 15px; position: relative; padding: 3px 0; padding-right: 10px; font-size: 13.4px; font-weight: 500; } .sidebar .sidebar_inner .side_foot_links a:hover { color: #000; text-decoration: underline; background-color: transparent; } .sidebar .sidebar_inner .side_foot_links a::after { content: ''; position: absolute; background: #cccccc; margin-left: -6px; margin-top: 12px; left: 0; width: 3px; height: 3px; border-radius: 100%; } .sidebar .sidebar_inner .side_foot_links > :last-child { padding: 0; } .sidebar .sidebar_inner .side_foot_links > :first-child::after { background: transparent; } .sidebar .simplebar-scrollbar { right: 4px !important; width: 5px; } .sidebar .simplebar-scrollbar:before { background-color: #d0d0d0; } .sidebar .side_overly { background-color: rgba(0, 0, 0, 0.1); position: fixed; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; display: none; } .sidebar .sidebar_inner .uk-accordion-content ul:before { display: none !important; } @media (min-width: 1200px) { .is-collapse .sidebar { width: 80px; background-color: white; } .is-collapse .sidebar .sidebar_inner ul { padding: 0; border-top-width: 0; } .is-collapse .sidebar .sidebar_inner ul:first-child { padding-top: 10px; } .is-collapse .sidebar .sidebar_inner ul li > a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 9px 13px; } .is-collapse .sidebar .sidebar_inner ul li > a i, .is-collapse .sidebar .sidebar_inner ul li > a svg { padding: 0; margin: 0; } .is-collapse .sidebar .sidebar_inner ul li > a span { display: none; opacity: 0; -webkit-transition: all 800ms 0s ease-in-out; transition: all 800ms 0s ease-in-out; } .is-collapse .sidebar .sidebar_inner ul li > a svg { width: 29px; height: 29px; } .is-collapse .sidebar .sidebar_inner ul li > a:after { display: none; } .is-collapse .sidebar .sidebar_inner ul .active-submenu ul { display: none; } .is-collapse .sidebar .contact-list { display: inherit !important; } .is-collapse .sidebar .contact-list .contact-avatar { margin: 0px !important; width: 30px !important; height: 30px !important; } .is-collapse .sidebar .sidebar_inner ul::before, .is-collapse .sidebar .side_foot_links, .is-collapse .sidebar .side_links, .is-collapse .sidebar .see-mover, .is-collapse .sidebar .is-title, .is-collapse .sidebar .contact-username, .is-collapse .sidebar .user_status, .is-collapse .sidebar hr { display: none; } .is-collapse .sidebar:hover { background-color: white; width: 300px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); -webkit-transition: all 300ms 0s ease-in-out; transition: all 300ms 0s ease-in-out; } .is-collapse .sidebar:hover .sidebar_inner ul { border-top-width: 1px; padding: 10px 0; } .is-collapse .sidebar:hover .sidebar_inner ul li a > { padding: 11px 15px; } .is-collapse .sidebar:hover .sidebar_inner ul li a > i, .is-collapse .sidebar:hover .sidebar_inner ul li a > svg { margin-right: 10px; } .is-collapse .sidebar:hover .sidebar_inner ul li a > span { display: inline; opacity: 1; -webkit-transition: all 800ms 0s ease-in-out; transition: all 800ms 0s ease-in-out; } .is-collapse .sidebar:hover .sidebar_inner ul li a:after { display: inline-block; } .is-collapse .sidebar:hover .sidebar_inner ul .active-submenu ul { display: inline; } .is-collapse .sidebar:hover .sidebar_inner ul::before, .is-collapse .sidebar:hover .side_links, .is-collapse .sidebar:hover .side_foot_links, .is-collapse .sidebar:hover .see-mover, .is-collapse .sidebar:hover .is-title, .is-collapse .sidebar:hover .contact-username, .is-collapse .sidebar:hover .user_status, .is-collapse .sidebar:hover hr { display: block; } .is-collapse .sidebar:hover .contact-avatar { margin-right: 12px !important; width: 34px !important; height: 34px !important; } .is-collapse .main_content { margin-left: 80px; } .is-small .sidebar { width: 80px; overflow: visible; } .is-small .sidebar .sidebar_inner ul { padding: 0; border-top-width: 0; } .is-small .sidebar .sidebar_inner ul li > a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px 15px; } .is-small .sidebar .sidebar_inner ul li > a svg { width: 35px; height: 35px; } .is-small .sidebar .sidebar_inner ul li > a i, .is-small .sidebar .sidebar_inner ul li > a svg { padding: 0; margin: 0; } .is-small .sidebar .sidebar_inner ul li > a:after { display: none; } .is-small .sidebar .sidebar_inner ul .active-submenu ul { display: none; } .is-small .sidebar .sidebar_inner ul li a span, .is-small .sidebar .contact-list .contact-username { position: absolute; left: 88%; top: 20%; display: inline-block; line-height: 26px; margin-left: 10px; background: rgba(57, 62, 65, 0.95); color: #fff; white-space: nowrap; opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: left center; transform-origin: left center; pointer-events: none; transition: opacity .2s, transform .2s, -webkit-transform .2s; font-weight: 600; font-size: 13px; letter-spacing: -0.24px; border-radius: 4px; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22); line-height: 1.3; padding: 7px 15px; } .is-small .sidebar .sidebar_inner ul li a span:before, .is-small .sidebar .contact-list .contact-username:before { position: absolute; top: 11.5px; left: -5px; margin-top: -3px; content: ""; display: inline-block; border-top: 5px solid transparent; border-right: 5px solid #3e416d; border-bottom: 5px solid transparent; } .is-small .sidebar .sidebar_inner ul::before, .is-small .sidebar .side_foot_links, .is-small .sidebar .side_links, .is-small .sidebar .see-mover, .is-small .sidebar .is-title, .is-small .sidebar .contact-username, .is-small .sidebar .user_status, .is-small .sidebar hr { display: none; } .is-small .sidebar .contact-list { display: inherit !important; } .is-small .sidebar .contact-list .contact-avatar { width: 30px !important; height: 30px !important; margin: 0 -3px !important; } .is-small .sidebar .sidebar_inner ul li:hover a span, .is-small .contact-list a:hover .contact-username { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .is-small .main_content { margin-left: 80px; } } @media (max-width: 1200px) { .sidebar { margin-left: -300px; padding: 0; z-index: 1099; background: transparent; } .sidebar .sidebar_inner { width: 300px; padding-top: 0 !important; background-color: white; height: 100vh; position: relative; z-index: 3; } .is-active .sidebar { width: 100%; margin-left: 0; } .is-active .sidebar .btn-mobile::before { display: block; } .is-active .sidebar .side_overly { display: inherit; } } header { background-color: white; border-bottom: 1px solid #E5E9EF; position: fixed; left: 0; right: 0; top: 0; z-index: 99; height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .header_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; width: 100%; padding: 0 20px; } header .header_inner .left-side { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .header_inner .left-side #logo { display: inline-block; margin-right: 20px; font-size: 21px; letter-spacing: .9px; } header .header_inner .left-side #logo img { max-width: none; height: 32px; } header .header_inner .left-side #logo img.logo_inverse, header .header_inner .left-side #logo img.logo_mobile { display: none; } header .header_inner .left-side .triger { position: relative; padding: 10px; width: 40px; height: 40px; margin-left: 10px; display: none; } header .header_inner .left-side .triger::before { font-family: "Feather-Icons"; font-size: 22px; content: '\e98f'; line-height: 30px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } header .header_inner .right-side { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: auto; } header .header_inner .right-side .header_widgets { -webkit-transition: all 300ms 0s ease-in-out; transition: all 300ms 0s ease-in-out; padding: 8px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 2rem; margin-left: 5px; } header .header_inner .right-side .header_widgets .is-icon { font-size: 1.5rem; line-height: 2rem; } header .header_inner .right-side .header_widgets svg { width: 25px; height: 25px; color: #676666; } header .header_inner .right-side .header_widgets span { position: absolute !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -10px; font-weight: 700; height: 16px; width: 16px; color: #fff; font-size: 10px; background-color: #ec5252; border-radius: 50%; right: 3px; top: 3px; } header .header_inner .right-side .header_widgets:hover { background-color: #f1f3f4; } header .header_inner .right-side .header_widgets_avatar { width: 32px; height: 32px; border-radius: 100%; margin-left: 15px; } /* header is fixed */ header.is_fixed { -webkit-transition: all 0.8s; transition: all 0.8s; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.02); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.02); background-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(50%) blur(6px); backdrop-filter: saturate(50%) blur(6px); border: 0; } .is-verticle header .right-side > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* dropdown notification */ .header_dropdown { width: 330px; margin-top: 50px; padding: 0 !important; } .header_dropdown .drop_headline { padding: 10px 15px; padding-right: 10px; margin: 0; border-bottom-width: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header_dropdown .drop_headline h4 { display: inline-block; font-size: 15px; font-weight: 600; color: #666 !important; margin-left: 2px; } .header_dropdown .drop_headline .btn_action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header_dropdown .drop_headline .btn_action a { font-size: 1.25rem; position: relative; border-radius: 50px; color: #888 !important; -webkit-transition: 0.25s; transition: 0.25s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 5px; height: 31px; width: 31px; } .header_dropdown .drop_headline .btn_action a:hover { background-color: #f1f3f4; } .header_dropdown ul { padding: 0; margin: 0px; } .header_dropdown ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; text-decoration: none; color: #808080; position: relative; padding: 10px 20px; font-weight: 500; margin-bottom: -2px; } .header_dropdown ul li a:hover { background: #f7f7f7; } .header_dropdown ul li a .drop_avatar img { width: 35px; height: 35px; border-radius: 100%; margin-right: 15px; } .header_dropdown ul li a .drop_content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-radius: 5px; } .header_dropdown ul li a .drop_content p { margin: 0; font-size: 14px; line-height: 22px; } .header_dropdown ul li a .drop_content span.time-ago { font-size: 12.7px; color: #a0a0a0; } .header_dropdown ul li a .drop_content span.text-link { color: #5833fd; } .header_dropdown ul li a .drop_content strong, .header_dropdown ul li a .drop_content span.time-ago { font-weight: 500; } .header_dropdown ul li a .drop_content strong { font-size: 14px; } .header_dropdown ul li a .drop_content span.time { font-size: 12px; position: absolute; right: 10px; } .header_dropdown a.see-all { text-align: center; display: block; padding: 10px 0; font-size: 14px; font-weight: 500; border-top: 1px solid #e2e8f0; color: #7d61fd; } .header_dropdown .simplebar-scrollbar { right: 3px; } /*profile dropdown */ .header_dropdown.profile_dropdown { width: 270px !important; padding: 0; } .header_dropdown.profile_dropdown ul { margin: 0 !important; /* profile avatar */ } .header_dropdown.profile_dropdown ul a { padding: 10px 18px !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; margin-bottom: 0 !important; font-weight: 500; border-radius: 0; color: #616161; } .header_dropdown.profile_dropdown ul a:hover { background-color: #f1f3f4; color: black; } .header_dropdown.profile_dropdown ul a svg { width: 21px; height: 21px; margin-right: 10px; } .header_dropdown.profile_dropdown ul a .is-icon { font-size: 22px; margin-right: 10px; } .header_dropdown.profile_dropdown ul .user { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px !important; margin-bottom: -3px !important; background: transparent !important; } .header_dropdown.profile_dropdown ul .user .user_avatar { border-radius: 50%; width: 45px; height: 45px; margin-right: 17px; position: relative; } .header_dropdown.profile_dropdown ul .user .user_avatar img { border-radius: 50%; } .header_dropdown.profile_dropdown ul .user .user_name { line-height: 20px; font-weight: 600; color: #333; font-size: 16px; margin-top: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .header_dropdown.profile_dropdown ul .user .user_name span { display: block; font-size: 12.5px; font-weight: normal; margin-top: 2px; color: #959595; } .header_dropdown.profile_dropdown ul a.is-link { color: #2a41e8; padding: 7px 15px !important; } .header_dropdown.profile_dropdown ul hr { margin: 6px 0px; border-color: #f2f2f2; } .category-dropdown, .menu-dropdown, .dropdown_cart, .header_dropdown, .header_search_dropdown { background: white; border-radius: 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px -5px, rgba(0, 0, 0, 0.04) 0px 13px 10px -5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px -5px, rgba(0, 0, 0, 0.04) 0px 13px 10px -5px; padding: 10px; border: 1px solid #f1f3f4; display: none; } .category-dropdown { width: 330px; } .category-dropdown ul { padding: 2px; padding-left: 36px; } .category-dropdown ul li { margin-top: -1px; } .category-dropdown ul li:last-child { border: 0; } .category-dropdown ul li a { padding: 10px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 7px; position: relative; margin-left: -35px; width: calc(100% + 35px); border-radius: 0.375rem; font-weight: 500; } .category-dropdown ul li a:hover { background-color: #f1f3f4; } .category-dropdown ul li a .is-icon { font-size: 16px; margin-right: 10px; } .category-dropdown ul li a::before { font-family: "Feather-Icons"; content: '\e92e'; font-size: 19px; -webkit-transition: 0.3s; transition: 0.3s; line-height: 17px; width: 17px; height: 17px; color: #a8a8a8; display: inline-block; border-radius: 3px; text-indent: 0; position: absolute; top: 17px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); right: 8px; font-size: 20px; } .menu-dropdown { width: 250px; } .menu-dropdown ul li { margin: 0; margin-bottom: -1px; } .menu-dropdown ul li a { display: block !important; padding: 8px 13px !important; position: relative; font-weight: 500; } .menu-dropdown ul li a:hover { border-radius: 0.375rem; background-color: #f1f3f4; } .dropdown_scrollbar { max-height: 395px; } .dropdown_cart { width: 385px; padding: 0; left: auto !important; } .dropdown_cart .cart-headline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 20px 15px; border-bottom-width: 1px; font-size: 16.5px; font-weight: 600; } .dropdown_cart .cart-headline a.checkout { padding: 0.25rem 0.5rem; display: inline-block; font-size: 12.5px; border-radius: 9999px; margin-right: -11px; } .dropdown_cart .cart-headline a.checkout:hover { background-color: #f3f4f6; } .dropdown_cart ul { padding: 0; } .dropdown_cart ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 10px 15px; } .dropdown_cart ul li:hover { background: #f7f7f7; } .dropdown_cart ul li .cart_avatar { margin-top: 6px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%; max-height: 100%; overflow: hidden; position: relative; width: 80px; height: 50px; border-radius: 5px; } .dropdown_cart ul li .cart_avatar img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .dropdown_cart ul li .cart_text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 15px; } .dropdown_cart ul li .cart_text h4 { line-height: 25px; font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; } .dropdown_cart ul li .cart_price { text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .dropdown_cart ul li .cart_price span { font-size: 16px; color: #3d3e40; } .dropdown_cart ul li .cart_price button { color: red; font-size: 12px; margin-top: 3px; } .dropdown_cart ul li .cart_price button:hover { text-decoration: underline; } .dropdown_cart .cart_footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 15px 25px; border-top: 1px solid #e2e8f0; } .dropdown_cart .cart_footer p { margin-bottom: 5px; } .dropdown_cart .cart_footer h1 { font-size: 23px; font-weight: 500; margin-bottom: -5px; } .dropdown_cart .dropdown_cart_scrollbar { max-height: 380px; } .header_search { position: relative; border-radius: 6px; margin-left: -10px; } .header_search input { height: 44px; color: #393939; padding: 0 30px 0 40px; outline: 0; background: transparent; border: 1px solid transparent; border-radius: 2rem; min-width: 550px; font-size: 15px; } .header_search i { position: absolute; pointer-events: none; top: 50%; left: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #737373; } .header_search .header_search_dropdown { width: 550px; padding: 10px; margin-top: 0px; border-radius: 0 0 8px 8px; } .header_search .header_search_dropdown .search_title { padding-left: 0.625rem; padding-right: 0.625rem; margin-top: 0.5rem; margin-bottom: 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; } .header_search .header_search_dropdown ul { list-style: none; } .header_search .header_search_dropdown ul a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px 0; border-radius: 8px; padding-left: 6px; } .header_search .header_search_dropdown ul a:hover { background: #f1f3f4; } .header_search .header_search_dropdown ul .list-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 15px; -o-object-fit: cover; object-fit: cover; } .header_search .header_search_dropdown ul .list-name { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; font-size: 15px; font-weight: 500; color: #2d2d2d; } .uk-drop, .uk-dropdown, .category-dropdown, .menu-dropdown, .header_search_dropdown { display: none; } header.uk-sticky-fixed { z-index: 990; } .shadow-none { -webkit-box-shadow: none !important; box-shadow: none !important; } /* header menu */ .header_menu > ul { padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; } .header_menu > ul > li > a { color: #9c9c9c; font-size: 15px; padding: 1.5rem 0.9rem; text-transform: capitalize; font-weight: 500; margin: 0 4px; padding: 6px 8px; letter-spacing: -.01em; -webkit-transition: .2s color; transition: .2s color; border-radius: 4px; -webkit-transition-duration: .3s; transition-duration: .3s; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1.2; } .header_menu > ul > a.active, .header_menu > ul > a:hover { color: #2a41e8; } /* Indicator Arrow */ .header_menu ul li a:after, .header_menu ul ul li a:after { font-family: "Feather-Icons"; opacity: 0.5; font-size: 11px; } .header_menu ul li a:after { content: '\e92e'; padding-left: 2px; margin-top: 2px; line-height: 13px; color: #585858; opacity: 1; font-size: 16px; } .header_menu ul li a:only-child:after, .header_menu ul ul li a:only-child:after { content: ''; display: none; } /* if the #navigation ul ul has .uk-light */ .header_menu ul ul.uk-light li a:after { color: rgba(255, 255, 255, 0.72); } .uk-light .header_menu li a:after { opacity: 1; } .header_menu ul ul li a:after { content: '\e930'; position: absolute; right: 5px; font-size: 20px; top: 10px; } header .uk-dropdown { display: none; -webkit-box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } header .header_inner, .horizontal .container { max-width: 1160px; } @media (min-width: 768px) { .is-dark { background-color: #2d3748; } .is-dark #logo img { display: none; } .is-dark #logo img.logo_inverse { display: block !important; } .is-dark .header_menu > ul > li > a, .is-dark .header_menu > ul > li > a:after { color: rgba(255, 255, 255, 0.7) !important; } .is-dark .header_search input, .is-dark .header_search input::-webkit-input-placeholder, .is-dark .header_search i, .is-dark .header_widgets .is-icon, .is-dark .header_widgets > svg, .is-dark .header_menu > ul > li > a:hover, .is-dark .header_menu > ul > li > a.active { color: white !important; } .is-dark .header_search input, .is-dark .header_search input:-ms-input-placeholder, .is-dark .header_search i, .is-dark .header_widgets .is-icon, .is-dark .header_widgets > svg, .is-dark .header_menu > ul > li > a:hover, .is-dark .header_menu > ul > li > a.active { color: white !important; } .is-dark .header_search input, .is-dark .header_search input::-ms-input-placeholder, .is-dark .header_search i, .is-dark .header_widgets .is-icon, .is-dark .header_widgets > svg, .is-dark .header_menu > ul > li > a:hover, .is-dark .header_menu > ul > li > a.active { color: white !important; } .is-dark .header_search input, .is-dark .header_search input::placeholder, .is-dark .header_search i, .is-dark .header_widgets .is-icon, .is-dark .header_widgets > svg, .is-dark .header_menu > ul > li > a:hover, .is-dark .header_menu > ul > li > a.active { color: white !important; } .is-dark .header_widgets:hover { background-color: rgba(255, 255, 255, 0.3) !important; } .is-transparent { background-color: transparent; border-color: rgba(255, 255, 255, 0.3) !important; } .is-transparent .header_inner .right-side { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0; } .has-bg { background-color: #2a41e8 !important; } .has-bg .header_inner .left-side, .has-bg .header_inner .right-side { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0; } .border-none { border: 0; } .border-none .header_inner .right-side { border: 0; } } @media (max-width: 1200px) { header { min-height: 60px !important; height: auto; } header .header_inner { padding: 0; } header .header_inner .left-side #logo img { display: none; } header .header_inner .left-side #logo img.logo_mobile { display: block !important; height: 25px; } header .header_inner .right-side { position: absolute; right: 15px; top: 10px; } header .header_inner .right-side .header_widgets { padding: 7px; margin-left: 0px; } header .header_inner .right-side .header_widgets svg { width: 20px; height: 20px; } header .header_inner .right-side .header_widgets_avatar { margin-left: 10px; } header .header_menu ul li a:after, header .header_menu ul ul li a:after { content: '\e930'; margin-top: 7px; line-height: 13px; position: absolute; right: 20px; color: #585858; font-size: 20px; } .is-verticle header .header_inner { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .header_menu > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: normal; -ms-flex-align: normal; align-items: normal; } .header_menu { display: none; } .header_menu li { display: block !important; margin: 0 !important; } .header_menu li a { display: block !important; padding: 15px 26px !important; line-height: inherit !important; margin: 0 !important; font-size: 17px !important; } .header_menu li a ul li a { padding: 0px !important; } .header_menu .uk-drop, .header_menu .uk-dropdown, .header_menu .category-dropdown, .header_menu .menu-dropdown { position: relative; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; border-radius: 4px; width: 100%; margin-top: 10px; padding: 10px; } .header_menu .category-dropdown ul { padding-left: 0; } .header_menu.is-visible { display: block !important; position: fixed; background: white; width: 50%; left: 0; top: 0; z-index: 2; height: 100vh; overflow: hidden; } .header_menu.is-visible li a.uk-open { background-color: #edf2f7; position: absolute; color: #a2a2a2 !important; top: 0; width: 101%; border-radius: 0; margin-bottom: 0 !important; padding: 13px !important; padding-left: 16% !important; z-index: 1; } .header_menu.is-visible li li a.uk-open { top: -53px; left: -5px; position: absolute; z-index: 2; display: block !important; } .header_menu.is-visible li li .uk-drop.uk-open { background: white; position: fixed; width: 50% !important; left: -20px !important; height: 100vh; } .header_menu.is-visible li .uk-drop.uk-open { background-color: white; position: absolute; border-radius: 0; margin-top: 0; height: 100%; width: 101% !important; top: 0px !important; } .header_menu.is-visible ~ .overly { background-color: rgba(0, 0, 0, 0.5); position: fixed; width: 100%; height: 100vh; right: 0; top: 0; z-index: 1; display: inline; } .header_dropdown, .dropdown_cart { left: auto !important; right: -20px !important; width: 100vw; max-width: 400px !important; } .header_search { position: absolute; width: 85%; display: none !important; } .header_search input { width: 100%; min-width: 100%; } .header-search-icon { display: block !important; } .show-searchbox .header_search { display: block; } .show-searchbox .header-search-icon { right: 8px; } .show-searchbox .header-search-icon::before { content: '\ea02'; } } @media (max-width: 560px) { .header_menu.is-visible, .header_menu.is-visible li li .uk-drop.uk-open { width: 85% !important; } } @media (min-width: 1200px) { .is-verticle header { background-color: transparent; border: 0; } .is-verticle header .header_inner { max-width: 100% !important; padding: 0; } .is-verticle header .header_inner .left-side, .is-verticle header .header_inner .right-side { -webkit-backdrop-filter: saturate(176%) blur(20px); backdrop-filter: saturate(176%) blur(20px); } .is-verticle header .header_inner .left-side { height: 72px; width: 300px; background-color: rgba(255, 255, 255, 0.6); border-bottom-width: 1px; border-right-width: 1px; border-bottom-color: #f0f0f0; padding: 0 20px; } .is-verticle header .header_inner .right-side { height: 72px; width: calc(100% - 300px); max-width: 1160px; padding: 0 30px; border-bottom-width: 1px; background-color: rgba(249, 250, 251, 0.9); color: #1d1929; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .is-verticle header .header_inner .right-side > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .is-verticle header .header_inner .header_search { margin-left: -20px; } .is-verticle header.is-transparent .header_inner .right-side { background-color: transparent !important; } .is-verticle header.is-dark #logo img.logo_inverse, .is-verticle header.is-dark #logo img.logo_mobile { display: none !important; } .is-verticle header.is-dark #logo img { display: block !important; } } @media (max-width: 1200px) { header .header_inner { padding-left: 0; } header .left-side #logo { margin-left: 5px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } header .left-side .triger { display: block !important; } header .right-side { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } header .header_search { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } header .header_search input { background: #f2f2f2; min-width: 100%; } } /* ---------------------------------- */ /* Dashboard Messages ------------------------------------- */ .is_message { overflow: hidden; } .is_message header { border-bottom: 1px solid #eaeaea; -webkit-box-shadow: none; box-shadow: none; } .is_message .sidebar { border-right: 1px solid #eaeaea; -webkit-box-shadow: none; box-shadow: none; } .is_message .header_search { visibility: hidden; } .is_message .main_content { margin-bottom: 0 !important; } @media (max-width: 1024px) { .is_message header .header_inner { height: 64px; } .is_message header .header_inner .right_side { display: none; } } .messages-container { margin: 0; -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06); border-radius: 7px; background-color: #fff; } /* Scrollbar Hide - End */ .messages-headline { max-height: 77px; font-size: 15px; margin: 0; padding: 17px 30px; color: #333; background-color: #fff; display: block; border-bottom: 1px solid #eaeaea; border-radius: 7px 7px 0 0; position: relative; } .messages-headline input { background-color: #f6f6f6; -webkit-box-shadow: none; box-shadow: none; height: 38px; padding: 14px; font-size: 14px; margin: 0; } .messages-headline input:focus { -webkit-box-shadow: none; box-shadow: none; } .messages-headline .input-with-icon i { font-size: 18px; right: 14px; } .messages-headline h4 { font-size: 15px; color: #333; padding: 6px 0; margin: 0; font-weight: 600; display: inline-block; } .message-action { border-radius: 50px; font-size: 13px; color: #666; font-weight: 500; display: inline-block; -webkit-transition: 0.3s; transition: 0.3s; color: #666; padding: 0; position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .message-action i { font-size: 14px; position: relative; top: 1px; margin-right: 1px; } .message-action:hover { color: #ee3535; } /* List */ .messages-inbox ul { list-style: none; padding: 0; margin: 0; } .message-avatar img { display: inline-block; width: 54px; height: 54px; border-radius: 50%; } .messages-inbox ul li { -webkit-transition: 0.2s; transition: 0.2s; position: relative; } .messages-inbox ul li a { position: relative; display: block; padding: 30px; } .messages-inbox ul li:last-child { border-bottom: none; } .messages-inbox ul li:hover, .messages-inbox ul li.active-message { background-color: #fafafa; } .messages-inbox .message-avatar { position: absolute; left: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .messages-inbox .message-by { margin-left: 85px; font-size: 15px; color: #666; } .messages-inbox .message-by p { margin: 0; padding: 0; line-height: 25px; font-size: 15px; } .message-by h5 i { background-color: #2a41e8; border-radius: 7px; line-height: 20px; font-size: 12px; color: #fff; font-style: normal; padding: 3px 8px; margin-left: 3px; } /* Single Message */ .messages-container-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .messages-container-inner .messages-inbox, .messages-container-inner .message-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .messages-container-inner .message-content-inner { padding: 30px; padding-bottom: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .messages-container-inner .message-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .messages-container-inner .messages-inbox { max-width: 340px; border-right: 1px solid #eaeaea; } .messages-container-inner .messages-inbox ul li a { padding: 12px 22px; } .messages-container-inner .messages-inbox .message-by p { height: 26px; max-width: 212px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 14px; color: #888; } .messages-container-inner .message-avatar img { width: 40px; height: 40px; } .messages-container-inner .messages-inbox .message-avatar { left: 25px; } .messages-container-inner .messages-inbox .message-by { margin-left: 60px; } .messages-container-inner .message-by-headline h5 { font-size: 15px; margin-bottom: 0px; max-width: 160px; font-weight: 600; line-height: 23px; } .messages-container-inner .message-by-headline span { font-size: 13px; position: absolute; top: 13px; right: 22px; } /* Message Bubbles */ .message-bubble { display: block; position: relative; margin-bottom: 25px; /* Message Bubble "me" */ } .message-bubble .message-avatar { position: absolute; left: 0; top: 0; } .message-bubble .message-avatar img { width: 50px; height: 50px; } .message-bubble .message-text { margin-left: 70px; background-color: #f4f4f4; border-radius: 7px; padding: 12px 18px; position: relative; display: inline-block; float: left; line-height: 25px; } .message-bubble.me .message-text { float: right; } .message-bubble .message-text p { font-size: 15px; padding: 0; margin: 0; line-height: 25px; } .message-bubble.me .message-avatar { left: auto; right: 0; } .message-bubble.me .message-text { margin-left: 0; margin-right: 70px; background-color: #2a41e8; color: #fff; position: relative; } .message-bubble .message-text:before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #f4f4f4; left: -6px; right: auto; top: 19px; position: absolute; } .message-bubble.me .message-text:before { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #2a41e8; border-right: none; right: -6px; left: auto; } .is_group .message-bubble .message-avatar img { width: 45px; height: 45px; } .is_group .message-bubble .message-text { margin-left: 50px; background-color: transparent; padding-top: 0; padding-bottom: 0; } .is_group .message-bubble .message-text .message-metadata { line-height: 1; margin-bottom: 5px; } .is_group .message-bubble .message-text .message-metadata strong { font-size: 14px; color: #122B46; letter-spacing: -0.2px; line-height: 1.21; } .is_group .message-bubble .message-text .message-metadata time { color: #A3A5A9; font-size: 12px; padding-left: 4px; } .is_group .message-bubble .message-text::before { display: none; } .messages-inbox-inner, .message-content-scrolbar { height: calc(100vh - 150px); } /* Message Time Sign */ .message-time-sign { text-align: center; display: block; position: relative; margin-bottom: 25px; } .message-time-sign:before { content: ""; height: 1px; background-color: #eaeaea; display: block; max-width: 30%; margin: 0 auto; position: relative; top: 14px; z-index: 10; } .message-time-sign span { background-color: #fff; font-size: 14px; color: #888; z-index: 11; position: relative; padding: 0 10px; } /* Reply */ .message-reply { border-top: 1px solid #eaeaea; padding: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 15px; } .message-reply textarea { min-width: auto; height: 48px; min-height: 48px; padding: 10px 0; margin: 0 15px 0 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 15px; font-weight: 400; line-height: 26px; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; resize: none; } .message-reply button { border-radius: 7px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; height: 44px; text-align: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; padding: 0 25px; } .message-reply i { padding: 0; margin: 0; } /* Typing Indicastor */ .typing-indicator { width: auto; height: 24px; padding-top: 8px; } .typing-indicator span { height: 8px; width: 8px; float: left; margin: 0 1px; background-color: #a0a0a0; display: block; border-radius: 50%; opacity: 0.4; } .typing-indicator span:nth-of-type(1) { -webkit-animation: 1s blink infinite 0.33333s; animation: 1s blink infinite 0.33333s; } .typing-indicator span:nth-of-type(2) { -webkit-animation: 1s blink infinite 0.66666s; animation: 1s blink infinite 0.66666s; } .typing-indicator span:nth-of-type(3) { -webkit-animation: 1s blink infinite 0.99999s; animation: 1s blink infinite 0.99999s; } @-webkit-keyframes blink { 50% { opacity: 1; } } @keyframes blink { 50% { opacity: 1; } } /* Messages Media Queries */ @media (max-width: 992px) { .messages-container-inner .messages-inbox { max-width: 300px; } .messages-inbox-inner, .message-content-scrolbar { width: 100vw; } .messages-container-inner .message-content { position: absolute; background-color: white; bottom: -50px; left: 0; height: 98vh; } } @media (max-width: 768px) { .messages-container-inner { display: block; } .messages-container-inner .messages-inbox { max-width: 100%; border-bottom: 1px solid #e4e4e4; border-right: none; } .messages-container-inner .message-content-inner { padding: 20px; padding-bottom: 0; } .messages-inbox ul { max-height: 500px; } .messages-inbox ul li a { padding: 17px !important; } .messages-container-inner .message-by-headline span { position: relative; top: 0; right: 0; display: block; float: none; padding: 0; margin: -4px 0 0 0; } .message-action { display: block; position: relative; right: 0; top: 0; -webkit-transform: none; transform: none; margin-top: -5px; } .messages-headline { max-height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 27px; } .message-bubble { margin-bottom: 15px; } .message-bubble .message-avatar img { width: 35px; height: 35px; } .message-bubble .message-text { margin-left: 50px; } .message-bubble .message-text:before { top: 10px; } .message-bubble.me .message-text { margin-right: 50px; } .message-reply { border-top: 1px solid #eaeaea; padding: 15px; } .messages-inbox-inner, .message-content-scrolbar { height: calc(100vh - 120px); } } @media (min-width: 1200px) { .main_content { margin-left: 300px; margin-top: 0; } .main_content .container { max-width: 1024px; padding: 30px 60px; margin-left: auto; margin-right: auto; } .horizontal .container { padding-top: 20px; } .page-spacer { margin-top: 60px; } } @media (max-width: 1200px) { .main_content .container, .horizontal .container { padding: 20px; max-width: 100%; } } @media (max-width: 767px) { .main_content .container.p-0, .horizontal .container.p-0 { padding: 0; } } .container.pb-0 { padding-bottom: 0px !important; } @media (min-width: 1024px) { .admin-panel header #logo img { display: none; } .admin-panel header #logo img.logo_inverse { display: block !important; } .admin-panel header .header_inner .left-side { background-color: #252525; border-bottom-width: 1px; border-right-width: 1px; border-bottom-color: #2f2f2ffa; } .admin-panel header .header_inner .right-side { background-color: rgba(255, 255, 251, 0.7); } .admin-panel .sidebar { background-color: #252525 !important; } .admin-panel .sidebar .sidebar_inner ul li a, .admin-panel .sidebar .sidebar_inner ul:before, .admin-panel .sidebar .sidebar_inner ul li.active-submenu ul a { color: #d6d6d6; } .admin-panel .sidebar .sidebar_inner ul li a:hover, .admin-panel .sidebar .sidebar_inner ul li.active-submenu a:hover { background-color: #f3f4f617 !important; } .admin-panel .sidebar .sidebar_inner ul li.active a, .admin-panel .sidebar .sidebar_inner ul li.uk-active a { background-color: #f3f4f617; color: #ffffff; } .admin-panel .sidebar .sidebar_inner ul { border-color: #3c3a3a; } } /* -------------------------------------------------------------- */ /* 04. Features ----------------------------------------------------------------- */ .cd-secondary-nav { position: relative; z-index: 1; clear: both; width: 100%; height: 50px; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } .cd-secondary-nav::afterr { /* gradient on the right - to indicate it's possible to scroll */ content: ''; position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: 35px; background: transparent; background: -webkit-gradient(linear, right top, left top, from(#25283D), to(rgba(37, 40, 61, 0))); background: linear-gradient(to left, #25283D, rgba(37, 40, 61, 0)); pointer-events: none; -webkit-transition: opacity .2s; transition: opacity .2s; } .cd-secondary-nav.nav-end::after { opacity: 0; } .cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a { height: 100%; } .cd-secondary-nav ul { /* enables a flex context for all its direct children */ display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cd-secondary-nav ul::after { clear: both; content: ""; display: block; } .cd-secondary-nav li { display: inline-block; float: left; /* do not shrink - elements float on the right of the element */ -ms-flex-negative: 0; flex-shrink: 0; } .cd-secondary-nav li:last-of-type { padding-right: 20px; } .cd-secondary-nav li.active a, .cd-secondary-nav li.uk-active a { border-bottom: 3px solid #2a41e8 !important; } .cd-secondary-nav li.active a, .cd-secondary-nav li.uk-active a, .cd-secondary-nav li:hover a { color: #2a41e8 !important; } .cd-secondary-nav a { display: block; line-height: 50px; font-weight: 500; color: #8c8d90; font-size: 15px; } .cd-secondary-nav a span { padding: 5px 9px; background: rgba(42, 65, 232, 0.08); border-radius: 30px; font-weight: 500; font-size: 12px; margin-left: 3px; color: #2a41e8; line-height: .75rem; } .cd-secondary-nav.is_light li a { color: #ffffff9c; } .cd-secondary-nav.is_light li.active a, .cd-secondary-nav.is_light li.uk-active a, .cd-secondary-nav.is_light li:hover a { color: white; } .cd-secondary-nav.is_light li.active a, .cd-secondary-nav.is_light li.uk-active a { border-bottom: 3px solid white; } .cd-secondary-nav.extanded ul { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; } .cd-secondary-nav.extanded ul li { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; padding: 0 !important; } .cd-secondary-nav.extanded ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cd-secondary-nav.nav-small { height: 57px !important; } .cd-secondary-nav.nav-small li a { line-height: 55px !important; } @media only screen and (min-width: 1024px) { .cd-secondary-nav { height: 68px; overflow: visible; } .cd-secondary-nav ul { /* reset mobile style */ display: block; padding: 0; } .cd-secondary-nav li { /* reset mobile style */ float: none; -ms-flex-negative: 1; flex-shrink: 1; } .cd-secondary-nav a { line-height: 68px; font-size: 15px; } } .cd-secondary-nav ul li:not(:last-child) { padding-right: 10px; } .course-watch .sidebar { padding: 1rem; } .course-watch .sidebar .sidebar_inner { height: calc(100% - 145px); padding: 15px 15px; } .course-watch .sidebar .sidebar_inner ul { list-style: none; border-top-width: 1px; padding: 10px 0; } .course-watch .sidebar .sidebar_inner ul:first-child { padding-top: 0 !important; } .course-watch .sidebar .sidebar_inner.is-watch-2 { height: calc(100% - 75px); } .course-watch .sidebar .simplebar-scrollbar { right: 3px !important; width: 7px !important; } .course-watch .sidebar .btn-close-mobi { position: relative; border-radius: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 10px; width: 40px; height: 40px; right: -5px; display: none; } .course-watch .sidebar .btn-close-mobi::before { font-family: "Feather-Icons"; font-size: 22px; content: '\e98f'; line-height: 30px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } @media (min-width: 1024px) { .course-watch .sidebar { width: 360px; -webkit-box-shadow: inset -36px 0 40px -32px rgba(0, 0, 0, 0.05); box-shadow: inset -36px 0 40px -32px rgba(0, 0, 0, 0.05); margin: 0; z-index: 10020; } .course-watch .sidebar .sidebar_inner { margin: 0 -1rem; } .course-watch .sidebar ul.course-curriculum-list li > a { padding-left: 45px; } .course-watch .sidebar ul.course-curriculum-list li > a span { margin-left: auto; font-size: 0.875rem; line-height: 1.25rem; } .course-watch .sidebar ul.course-curriculum-list li > a::before { content: ""; left: 8px; text-align: center; width: 23px; height: 23px; top: 20%; line-height: 26px; z-index: 2; position: absolute; background: url(../images/icon-play.svg); background-color: #585757; border-radius: 100%; } .course-watch .main_content { margin-left: 360px; } } @media (max-width: 1024px) { .course-watch .sidebar { height: auto; width: 100%; margin: 0; padding: 10px 15px; position: fixed; overflow: visible; background: white; -webkit-box-shadow: 0 1px 0 0 rgba(139, 141, 157, 0.05), 10px 1px 7px 0 rgba(65, 71, 108, 0.15); box-shadow: 0 1px 0 0 rgba(139, 141, 157, 0.05), 10px 1px 7px 0 rgba(65, 71, 108, 0.15); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .course-watch .sidebar .sidebar_inner { width: 350px; height: 100% !important; position: fixed; top: 0; left: 0; margin-left: -350px; } .course-watch.is-active .sidebar_inner { margin-left: 0px; } .course-watch .btn-close-mobi { display: block !important; } .course-watch.is-active .btn-close-mobi { z-index: 6; top: 10px; left: 332px; position: fixed !important; color: white; background: #1438ff; } .course-watch.is-active .btn-close-mobi::before { content: '\ea02'; } } @media (max-width: 400px) { .course-watch .main_content { padding-top: 97px; } } .tabcontent:not(.tab-default-open) { display: none !important; } html, body { background-color: #f9fafb; } button.button.dark1, a.button.dark1 { background-color: palevioletred; color: #fff; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } input[type="button"].dark1, input[type="submit"].dark1 { background-color: palevioletred; color: #fff; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* ---------------------------------- */ /* line clamps ------------------------------------- */ .line-clamp-1, .line-clamp-2, .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } .line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } /* ---------------------------------- */ /* user status icon ------------------------------------- */ .user_status { position: absolute; content: ""; height: 14px; width: 14px; background-color: #c0c0c0; bottom: 0; right: 0; display: block; border: 2.5px solid #fff; border-radius: 50%; visibility: hidden; } .user_status.status_online { background-color: #38b653; visibility: visible; } /* ---------------------------------- */ /* start-chat button ------------------------------------- */ .start-chat { background-color: #2563eb; color: white; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; width: 50px; bottom: 25px; right: 25px; height: 50px; z-index: 1000; cursor: pointer; } @media (max-width: 1024px) { .start-chat { top: 12px; bottom: auto; width: 40px; right: 16px; height: 40px; background: transparent; color: #8a8989; } .start-chat svg { width: 24px; height: 24px; } } /* ---------------------------------- */ /* embed video responsive ------------------------------------- */ .embed-video { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; } .embed-video iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; /* padding: 20px */ } .tube-card { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); border-radius: .5rem; border-width: 1px; } /* play button on hover course card image*/ .icon-play { left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: url(../images/icon-play.svg) no-repeat; background-size: auto 50%; background-position: center; visibility: hidden; opacity: 0; -webkit-transition: opacity 150ms ease-in-out; transition: opacity 150ms ease-in-out; -webkit-transition: -webkit-transform 150ms ease-in-out; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; -webkit-transform: scale(0); transform: scale(0); } .card:hover .icon-play, .icon-play.show { visibility: visible; opacity: 1; -webkit-transform: scale(0.6); transform: scale(0.6); } .delimiter-bottom, .delimiter-top { position: relative; } .delimiter-top:before { position: absolute; top: 0; left: 50%; display: block; width: 80%; height: 1px; margin-left: -40%; content: ''; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%); } .delimiter-bottom:after { position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; margin-left: -40%; content: ''; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%); } .docs-list a { color: #999; padding: 7px 0; display: block; text-transform: capitalize; } .docs-list a:hover, .docs-list a:active, .docs-list a:focus { color: #000 !important; } .tab1 { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.25rem; } .tab1 a { background: #e5e7eb; padding: 5px 15px; color: #616161; border-radius: 2rem; margin-right: 7px; font-size: 16px; } .tab1 .uk-active a, .tab1 .active a { background: #c9deff; color: #3b82f6; } .fliter-tab a.uk-active, .fliter-tab a.active { background-color: white; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .breadcrumb-area { position: relative; padding: 25px 0; } .breadcrumb-area .breadcrumb ul li a { line-height: initial; } .breadcrumb-area h2 { margin-top: 0.375rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; } .breadcrumb { padding: 0; margin: 0; } .breadcrumb ul { width: 100%; } .breadcrumb ul li { display: inline-block; } .breadcrumb ul li:after { content: '\e930'; color: #434343; padding: 0 2px; display: inline-block; font-size: 14px; font-family: "Feather-Icons"; } .breadcrumb ul li a { font-weight: 500; font-size: 14px; line-height: 70px; color: #434343; } .breadcrumb ul li:last-child:after { display: none; } .breadcrumb ul li.active a { color: #889999; } .breadcrumb.text-white a, .breadcrumb.text-white li::after { color: rgba(255, 255, 255, 0.7); } .breadcrumb.text-white .active a { color: white; } /* -------------------------------------------------------------- */ /* 04. Responsive ----------------------------------------------------------------- */ .btn-night-mode .btn-night-mode-switch { display: inline-block; height: 17.5px; width: 36px; top: 35%; right: 13px; position: absolute; } .btn-night-mode .uk-switch-button { background-color: rgba(0, 0, 0, 0.09); position: absolute; top: 0; left: 0; right: 0; border-radius: 500px; bottom: 0; cursor: pointer; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); } .btn-night-mode .uk-switch-button:before { content: ''; background-color: #a9a9a9; position: absolute; width: 20px; height: 20px; left: 0px; bottom: -1px; border-radius: 50%; -webkit-transition-property: -webkit-transform, -webkit-box-shadow; transition-property: -webkit-transform, -webkit-box-shadow; transition-property: transform, box-shadow; transition-property: transform, box-shadow, -webkit-transform, -webkit-box-shadow; -webkit-transition-duration: .2s; transition-duration: .2s; } .night-mode .btn-night-mode .uk-switch-button { background-color: #4e4e4e !important; } .night-mode .btn-night-mode .uk-switch-button::before { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); -webkit-transform: translateX(17px); transform: translateX(17px); background: #62d76b; } /* -------------------------------------------------------------- */ /* 05. Add your custom classes ----------------------------------------------------------------- */ /*# sourceMappingURL=style.css.map */