*/
.row-pill,
.row-pill > img,
.row-pill > .bg-cover {
border-radius: 50rem !important;
}
/**
- Radius .rounded-xl, .rounded-xxl,
.rounded-top-0, .rounded-bottom-0, .rounded-left-0, .rounded-right-0
.rounded-start-0, .rounded-end-0
**/
.rounded-xl {
border-radius: 0.8rem !important;
}
.rounded-xxl {
border-radius: 1.3rem !important;
}
.rounded-top-0 {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
.rounded-bottom-0 {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.rounded-left-0 {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.rounded-right-0 {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.rounded-start-0 {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.rounded-end-0 {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/**
- Font Size .fs--*, .font-weight-medium
**/
.fs--10 {
font-size: 10px !important;
}
.fs--11 {
font-size: 11px !important;
}
.fs--12 {
font-size: 12px !important;
}
.fs--13 {
font-size: 13px !important;
}
.fs--14 {
font-size: 14px !important;
}
.fs--15 {
font-size: 15px !important;
}
.fs--16 {
font-size: 16px !important;
}
.fs--17 {
font-size: 17px !important;
}
.fs--18 {
font-size: 18px !important;
}
.fs--19 {
font-size: 19px !important;
}
.fs--20 {
font-size: 20px !important;
}
.fs--25 {
font-size: 25px !important;
}
.fs--30 {
font-size: 30px !important;
}
.fs--35 {
font-size: 35px !important;
}
.fs--40 {
font-size: 40px !important;
}
.fs--45 {
font-size: 45px !important;
}
.fs--50 {
font-size: 50px !important;
}
.fs--60 {
font-size: 60px !important;
}
.font-weight-medium {
font-weight: 500;
}
/**
- Box Shadows .shadow (default) , .shadow-*, .shadow-*-hover,
[[.shadow-*-hover can be used in combination with .transition-all-ease-*]]
**/
.shadow-none {
-ms-box-shadow: none !important;
-o-box-shadow: none !important;
box-shadow: none !important;
}
.shadow-hover:hover {
-ms-box-shadow: 0 1px 3px 0 rgba(50, 50, 93, 0.15), 0 4px 6px 0 rgba(112, 157, 199, 0.15) !important;
-o-box-shadow: 0 1px 3px 0 rgba(50, 50, 93, 0.15), 0 4px 6px 0 rgba(112, 157, 199, 0.15) !important;
box-shadow: 0 1px 3px 0 rgba(50, 50, 93, 0.15), 0 4px 6px 0 rgba(112, 157, 199, 0.15) !important;
}
.shadow-xs,
.shadow-xs-hover:hover {
-ms-box-shadow: 0 0 25px rgba(140, 152, 164, 0.1) !important;
-o-box-shadow: 0 0 25px rgba(140, 152, 164, 0.1) !important;
box-shadow: 0 0 25px rgba(140, 152, 164, 0.1) !important;
}
.shadow-sm-hover:hover {
-ms-box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
-o-box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
}
.shadow-md,
.shadow-md-hover:hover {
-ms-box-shadow: 0 0 35px rgba(140, 152, 164, 0.15) !important;
-o-box-shadow: 0 0 35px rgba(140, 152, 164, 0.15) !important;
box-shadow: 0 0 35px rgba(140, 152, 164, 0.15) !important;
}
.shadow-lg-hover:hover {
-ms-box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175) !important;
-o-box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175) !important;
box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175) !important;
}
.shadow-xlg,
.shadow-xlg-hover:hover {
-ms-box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.3) !important;
-o-box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.3) !important;
box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.3) !important;
}
.shadow-3d-up,
.shadow-3d-up-hover:hover {
box-shadow: 0rem -2rem 3.5rem rgba(22, 28, 45, 0.1) !important;
}
.shadow-3d-down,
.shadow-3d-down-hover:hover,
.shadow-3d,
.shadow-3d-hover:hover {
box-shadow: 0 2.5rem 4rem rgba(22, 28, 45, 0.1) !important;
}
/*
.shadow-primary-*
.shadow-secondary-*
.....
.shadow-*-*
*/
.shadow-primary-xs,
.shadow-primary-xs-hover:hover {
box-shadow: 0 0 25px rgba(66, 133, 244, 0.1) !important;
}
.shadow-primary-sm,
.shadow-primary-sm-hover:hover {
box-shadow: 0 0 35px rgba(66, 133, 244, 0.125) !important;
}
.shadow-primary-md,
.shadow-primary-md-hover:hover {
box-shadow: 0 0 35px rgba(66, 133, 244, 0.15) !important;
}
.shadow-primary-lg,
.shadow-primary-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(66, 133, 244, 0.175) !important;
}
.shadow-primary-xlg,
.shadow-primary-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(66, 133, 244, 0.3) !important;
}
.shadow-secondary-xs,
.shadow-secondary-xs-hover:hover {
box-shadow: 0 0 25px rgba(108, 117, 125, 0.1) !important;
}
.shadow-secondary-sm,
.shadow-secondary-sm-hover:hover {
box-shadow: 0 0 35px rgba(108, 117, 125, 0.125) !important;
}
.shadow-secondary-md,
.shadow-secondary-md-hover:hover {
box-shadow: 0 0 35px rgba(108, 117, 125, 0.15) !important;
}
.shadow-secondary-lg,
.shadow-secondary-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(108, 117, 125, 0.175) !important;
}
.shadow-secondary-xlg,
.shadow-secondary-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(108, 117, 125, 0.3) !important;
}
.shadow-success-xs,
.shadow-success-xs-hover:hover {
box-shadow: 0 0 25px rgba(109, 187, 48, 0.1) !important;
}
.shadow-success-sm,
.shadow-success-sm-hover:hover {
box-shadow: 0 0 35px rgba(109, 187, 48, 0.125) !important;
}
.shadow-success-md,
.shadow-success-md-hover:hover {
box-shadow: 0 0 35px rgba(109, 187, 48, 0.15) !important;
}
.shadow-success-lg,
.shadow-success-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(109, 187, 48, 0.175) !important;
}
.shadow-success-xlg,
.shadow-success-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(109, 187, 48, 0.3) !important;
}
.shadow-info-xs,
.shadow-info-xs-hover:hover {
box-shadow: 0 0 25px rgba(115, 231, 247, 0.1) !important;
}
.shadow-info-sm,
.shadow-info-sm-hover:hover {
box-shadow: 0 0 35px rgba(115, 231, 247, 0.125) !important;
}
.shadow-info-md,
.shadow-info-md-hover:hover {
box-shadow: 0 0 35px rgba(115, 231, 247, 0.15) !important;
}
.shadow-info-lg,
.shadow-info-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(115, 231, 247, 0.175) !important;
}
.shadow-info-xlg,
.shadow-info-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(115, 231, 247, 0.3) !important;
}
.shadow-warning-xs,
.shadow-warning-xs-hover:hover {
box-shadow: 0 0 25px rgba(250, 215, 118, 0.1) !important;
}
.shadow-warning-sm,
.shadow-warning-sm-hover:hover {
box-shadow: 0 0 35px rgba(250, 215, 118, 0.125) !important;
}
.shadow-warning-md,
.shadow-warning-md-hover:hover {
box-shadow: 0 0 35px rgba(250, 215, 118, 0.15) !important;
}
.shadow-warning-lg,
.shadow-warning-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(250, 215, 118, 0.175) !important;
}
.shadow-warning-xlg,
.shadow-warning-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(250, 215, 118, 0.3) !important;
}
.shadow-danger-xs,
.shadow-danger-xs-hover:hover {
box-shadow: 0 0 25px rgba(246, 78, 96, 0.1) !important;
}
.shadow-danger-sm,
.shadow-danger-sm-hover:hover {
box-shadow: 0 0 35px rgba(246, 78, 96, 0.125) !important;
}
.shadow-danger-md,
.shadow-danger-md-hover:hover {
box-shadow: 0 0 35px rgba(246, 78, 96, 0.15) !important;
}
.shadow-danger-lg,
.shadow-danger-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(246, 78, 96, 0.175) !important;
}
.shadow-danger-xlg,
.shadow-danger-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(246, 78, 96, 0.3) !important;
}
.shadow-light-xs,
.shadow-light-xs-hover:hover {
box-shadow: 0 0 25px rgba(248, 249, 250, 0.1) !important;
}
.shadow-light-sm,
.shadow-light-sm-hover:hover {
box-shadow: 0 0 35px rgba(248, 249, 250, 0.125) !important;
}
.shadow-light-md,
.shadow-light-md-hover:hover {
box-shadow: 0 0 35px rgba(248, 249, 250, 0.15) !important;
}
.shadow-light-lg,
.shadow-light-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(248, 249, 250, 0.175) !important;
}
.shadow-light-xlg,
.shadow-light-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(248, 249, 250, 0.3) !important;
}
.shadow-dark-xs,
.shadow-dark-xs-hover:hover {
box-shadow: 0 0 25px rgba(46, 46, 46, 0.1) !important;
}
.shadow-dark-sm,
.shadow-dark-sm-hover:hover {
box-shadow: 0 0 35px rgba(46, 46, 46, 0.125) !important;
}
.shadow-dark-md,
.shadow-dark-md-hover:hover {
box-shadow: 0 0 35px rgba(46, 46, 46, 0.15) !important;
}
.shadow-dark-lg,
.shadow-dark-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(46, 46, 46, 0.175) !important;
}
.shadow-dark-xlg,
.shadow-dark-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(46, 46, 46, 0.3) !important;
}
.shadow-indigo-xs,
.shadow-indigo-xs-hover:hover {
box-shadow: 0 0 25px rgba(83, 59, 226, 0.1) !important;
}
.shadow-indigo-sm,
.shadow-indigo-sm-hover:hover {
box-shadow: 0 0 35px rgba(83, 59, 226, 0.125) !important;
}
.shadow-indigo-md,
.shadow-indigo-md-hover:hover {
box-shadow: 0 0 35px rgba(83, 59, 226, 0.15) !important;
}
.shadow-indigo-lg,
.shadow-indigo-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(83, 59, 226, 0.175) !important;
}
.shadow-indigo-xlg,
.shadow-indigo-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(83, 59, 226, 0.3) !important;
}
.shadow-purple-xs,
.shadow-purple-xs-hover:hover {
box-shadow: 0 0 25px rgba(76, 44, 146, 0.1) !important;
}
.shadow-purple-sm,
.shadow-purple-sm-hover:hover {
box-shadow: 0 0 35px rgba(76, 44, 146, 0.125) !important;
}
.shadow-purple-md,
.shadow-purple-md-hover:hover {
box-shadow: 0 0 35px rgba(76, 44, 146, 0.15) !important;
}
.shadow-purple-lg,
.shadow-purple-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(76, 44, 146, 0.175) !important;
}
.shadow-purple-xlg,
.shadow-purple-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(76, 44, 146, 0.3) !important;
}
.shadow-pink-xs,
.shadow-pink-xs-hover:hover {
box-shadow: 0 0 25px rgba(249, 32, 132, 0.1) !important;
}
.shadow-pink-sm,
.shadow-pink-sm-hover:hover {
box-shadow: 0 0 35px rgba(249, 32, 132, 0.125) !important;
}
.shadow-pink-md,
.shadow-pink-md-hover:hover {
box-shadow: 0 0 35px rgba(249, 32, 132, 0.15) !important;
}
.shadow-pink-lg,
.shadow-pink-lg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(249, 32, 132, 0.175) !important;
}
.shadow-pink-xlg,
.shadow-pink-xlg-hover:hover {
box-shadow: 0 10px 40px 10px rgba(249, 32, 132, 0.3) !important;
}
/**
- Transitions .transition-all-ease-*, .transition-bg-ease-*
- Hover Transitions .transition-hover-top, .transition-hover-right, .transition-hover-bottom, .transition-hover-left
.transition-hover-zoom
.transition-none
**/
/**
Transitions
.transition-all-ease-*
.transition-bg-ease-*
Bug Fixes
Chrome known bug: will fire transitons on page load if
**/
.transition-all-ease-150 {
transition: all 150ms ease, transform 150ms ease;
}
.transition-all-ease-200 {
transition: all 200ms ease, transform 250ms ease;
}
.transition-all-ease-250 {
transition: all 250ms ease, transform 250ms ease;
}
.transition-all-ease-500 {
transition: all 500ms ease, transform 500ms ease;
}
.transition-bg-ease-150 {
transition: background-color 150ms linear;
}
.transition-bg-ease-200 {
transition: background-color 200ms linear;
}
.transition-bg-ease-250 {
transition: background-color 250ms linear;
}
.transition-bg-ease-500 {
transition: background-color 500ms linear;
}
/**
Hover Transitions
.transition-hover-top, .transition-hover-right, .transition-hover-bottom, .transition-hover-left
**/
.transition-hover-top,
.transition-hover-right,
.transition-hover-bottom,
.transition-hover-left {
transform: translateX(0);
transform: translateY(0);
transform: translateZ(0);
}
.transition-hover-top:hover,
.transition-hover-top:focus {
transform: translateY(-3px);
}
.transition-hover-right:hover,
.transition-hover-right:focus {
transform: translateX(3px);
}
.transition-hover-bottom:hover,
.transition-hover-bottom:focus {
transform: translateY(3px);
}
.transition-hover-left:hover,
.transition-hover-left:focus {
transform: translateX(-3px);
}
.transition-hover-start:hover,
.transition-hover-start:focus {
transform: translateX(-3px);
}
.transition-hover-end:hover,
.transition-hover-end:focus {
transform: translateX(3px);
}
.transition-none {
transition: none !important;
}
/* transition hover zoom */
.transition-hover-zoom-img img,
.transition-hover-zoom {
transition: all 0.3s ease-in-out;
}
.transition-hover-zoom-img:hover img,
.transition-hover-zoom:hover {
transform: scale(1.1);
}
/**
- Transform 3D .transform-3d-left, .transform-3d-right
**/
.transform-3d-right,
.transform-3d-left {
perspective-origin: center;
transform-style: preserve-3d;
perspective: 1024px;
}
.transform-3d-left > img,
.transform-3d-left > figure,
.transform-3d-left > div {
transform: rotateY(35deg) rotateX(15deg) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.transform-3d-right > img,
.transform-3d-right > figure,
.transform-3d-right > div {
transform: rotateY(-35deg) rotateX(15deg) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*
Block
*/
.block-over-start-top {
transform: translate(25px, -25px);
}
.block-over-start-bottom {
transform: translate(25px, 25px);
}
.block-over-end-top {
transform: translate(-25px, -25px);
}
.block-over-end-bottom {
transform: translate(-25px, 25px);
}
/**
- Rotate .rotate-90 (rotate text)
@Rewrite needed!
**/
.text-rotate {
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
/**
Text Rotate 90, 180
++ A fixed container is required (width, height)
**/
.text-rotate-180,
.text-rotate-90 {
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: auto;
position: absolute;
margin: 0;
}
.text-rotate-180 {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
left: auto;
right: -100%;
top: auto;
bottom: -100%;
}
/**
Right in the center
**/
.transform-center-fixed {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 100;
}
/**
- Positions .absolute-full, .fixed-full
.top-0, .right-0, .bottom-0, .left-0
**/
.absolute-full {
position: absolute !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.fixed-full {
position: fixed !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.top-0 {
top: 0 !important;
}
.bottom-0 {
bottom: 0 !important;
}
.left-0 {
left: 0 !important;
right: auto;
}
.right-0 {
right: 0 !important;
left: auto;
}
.start-0 {
left: 0 !important;
right: auto !important;
}
.end-0 {
right: 0 !important;
left: auto !important;
}
.start-auto {
left: auto !important;
}
.end-auto {
right: auto !important;
}
/* out of viewport */
.viewport-out {
position: fixed !important;
left: -9999px !important;
top: -9999px !important;
}
/* vertical align to middle */
.valign-middle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* better than .valign-middle */
.d-middle {
display: flex;
justify-content: center;
align-items: center;
}
/**
- Overlays & Opacity .overlay-light, .overlay-dark, .overlay-opacity-* [0-9]
.opacity-* [0-9], .opacity-none
**/
/* default overlay used on various places (mostly on admin) */
#overlay-default,
.overlay-default,
.overlay-light-hover:after,
.overlay-dark-hover:after,
.overlay-light,
.overlay-dark {
transition: all 0.2s ease;
}
#overlay-default,
.overlay-default {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay-light-hover,
.overlay-dark-hover,
.overlay-light,
.overlay-dark {
position: relative;
}
.overlay-light-hover > *,
.overlay-dark-hover > * {
z-index: 0;
position: relative;
}
.overlay-light > *,
.overlay-dark > * {
z-index: 1;
position: relative;
}
/* used in few situations, like refreshing ajax content */
.overlay-over:after {
z-index: 10 !important;
}
.overlay-light-hover:after,
.overlay-dark-hover:after {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.rounded.overlay-light-hover:hover,
.rounded.overlay-dark-hover:hover,
.rounded.overlay-light:after,
.rounded.overlay-dark:after {
border-radius: 0.25rem;
}
.overlay-light-hover:after,
.overlay-dark-hover:after,
.overlay-light:after,
.overlay-dark:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
}
.overlay-light-hover:hover:after,
.overlay-light:after {
background-color: #ffffff;
}
.overlay-dark-hover:hover:after,
.overlay-dark:after {
background-color: #000000;
}
/* overlay|opacity [0-9] */
.opacity-0,
.overlay-opacity-0:after {
opacity: 0;
}
.opacity-1,
.overlay-opacity-1:after {
opacity: 0.1;
}
.opacity-2,
.overlay-opacity-2:after {
opacity: 0.2;
}
.opacity-3,
.overlay-opacity-3:after {
opacity: 0.3;
}
.opacity-4,
.overlay-opacity-4:after {
opacity: 0.4;
}
.opacity-5,
.overlay-opacity-5:after {
opacity: 0.5;
}
.opacity-6,
.overlay-opacity-6:after {
opacity: 0.6;
}
.opacity-7,
.overlay-opacity-7:after {
opacity: 0.7;
}
.opacity-8,
.overlay-opacity-8:after {
opacity: 0.8;
}
.opacity-9,
.overlay-opacity-9:after {
opacity: 0.9;
}
.opacity-none {
opacity: 1 !important;
}
.opacity-99 {
opacity: 0.99;
}
/**
- Misc
- Gradients .bg-gradient-light-top, .bg-gradient-light-bottom
.bg-gradient-light-left, .bg-gradient-light-right
.bg-gradient-* (primary, danger, etc)
- Backgrounds .bg-gray-* [100-900], .bg-darkblue .bg-diff,
.bg-light-hover, .bg-light-active
.bg-theme-color-light
**/
/**
Misc
**/
.bg-cover {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
}
.bg-fixed {
background-attachment: fixed !important;
}
.bg-blur {
filter: blur(5px);
}
.bg-suprime {
/* Used on image to remove background. IE is not responding */
mix-blend-mode: multiply;
}
.bg-inherit {
background: inherit !important;
}
.bg-gradient-default {
background: linear-gradient(180deg, #2f2e80 0, #4c4bb5);
}
/**
Gradients
Note: can be used together with any .bg-*
**/
.bg-gradient-fake:after {
/* applied toraw color, to slightly look like a gradient - is actualy a white gradient! */
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0) -25%, rgba(255, 255, 255, 0.19) 100%) !important;
}
.bg-gradient-light-top {
background-image: linear-gradient(0deg, rgba(66, 133, 244, 0.05) 0%, transparent 100%);
}
.bg-gradient-light-bottom {
background-image: linear-gradient(0deg, #fff 0, rgba(66, 133, 244, 0.05));
}
.bg-gradient-light-left {
background-image: linear-gradient(90deg, rgba(66, 133, 244, 0.05) 0, #fff);
}
.bg-gradient-light-right {
background-image: linear-gradient(270deg, #fff 0, rgba(66, 133, 244, 0.05));
}
.bg-gradient-dark {
color: #ffffff;
background: #313131 !important;
background: linear-gradient(to bottom, #454545 0%, #313131 100%) !important;
}
.bg-gradient-dark p {
color: #adb5bd;
}
.bg-gradient-primary {
background: #4285F4;
background: linear-gradient(to bottom, #699ef6 0%, #4285F4 100%) !important;
}
.bg-gradient-secondary {
background: #6c757d;
background: linear-gradient(to bottom, #808992 0%, #6c757d 100%) !important;
}
.bg-gradient-success {
background: #6dbb30;
background: linear-gradient(to bottom, #81cf45 0%, #6dbb30 100%) !important;
}
.bg-gradient-info {
background: #73e7f7;
background: linear-gradient(to bottom, #9aeef9 0%, #73e7f7 100%) !important;
}
.bg-gradient-warning {
background: #fad776;
background: linear-gradient(to bottom, #fbe29d 0%, #fad776 100%) !important;
}
.bg-gradient-danger {
background: #f64e60;
background: linear-gradient(to bottom, #f87583 0%, #f64e60 100%) !important;
}
.bg-gradient-light {
background: #f8f9fa;
background: linear-gradient(to bottom, white 0%, #f8f9fa 100%) !important;
}
.bg-gradient-indigo {
background: #533be2;
background: linear-gradient(to bottom, #725fe7 0%, #533be2 100%) !important;
}
.bg-gradient-purple {
background: #4c2c92;
background: linear-gradient(to bottom, #5c35b1 0%, #4c2c92 100%) !important;
}
.bg-gradient-pink {
background: #f92084;
background: linear-gradient(to bottom, #fa489a 0%, #f92084 100%) !important;
}
/**
Backgrounds
.bg-*
**/
.bg-light-active,
.bg-light-hover:hover {
background: #f8f9fa;
}
.bg-theme-color-light {
background-color: rgba(66, 133, 244, 0.04) !important;
}
.bg-gray-100 {
background-color: #f8f9fa !important;
}
.bg-gray-200 {
background-color: #e9ecef !important;
}
.bg-gray-300 {
background-color: #dee2e6 !important;
}
.bg-gray-400 {
background-color: #ced4da !important;
}
.bg-gray-500 {
color: #ffffff;
background-color: #adb5bd !important;
}
.bg-gray-600 {
color: #ffffff;
background-color: #6c757d !important;
}
.bg-gray-700 {
color: #ffffff;
background-color: #495057 !important;
}
.bg-gray-800 {
color: #ffffff;
background-color: #343a40 !important;
}
.bg-gray-900 {
color: #ffffff;
background-color: #212529 !important;
}
.bg-darkblue {
color: #ffffff;
background: #2b354f !important;
}
.bg-diff {
background-color: rgba(0, 0, 0, 0.07);
}
input.bg-diff:focus,
textarea.bg-diff:focus {
background-color: rgba(0, 0, 0, 0.11);
}
/*
Soft backgrounds
.bg-*-soft
*/
.active.bg-primary-active-soft,
.bg-primary-soft {
color: #093d94 !important;
background-color: #ebf2fe !important;
}
.bg-primary-soft-hover:hover {
background-color: #ebf2fe !important;
}
.active.bg-secondary-active-soft,
.bg-secondary-soft {
color: #25282b !important;
background-color: #f0f2f2 !important;
}
.bg-secondary-soft-hover:hover {
background-color: #f0f2f2 !important;
}
.active.bg-success-active-soft,
.bg-success-soft {
color: #264111 !important;
background-color: #def3cf !important;
}
.bg-success-soft-hover:hover {
background-color: #def3cf !important;
}
.active.bg-info-active-soft,
.bg-info-soft {
color: #0bafc6 !important;
background-color: #bbf3fb !important;
}
.bg-info-soft-hover:hover {
background-color: #bbf3fb !important;
}
.active.bg-warning-active-soft,
.bg-warning-soft {
color: #cf9a08 !important;
background-color: #fdedc0 !important;
}
.bg-warning-soft-hover:hover {
background-color: #fdedc0 !important;
}
.active.bg-danger-active-soft,
.bg-danger-soft {
color: #a30819 !important;
background-color: #fee4e7 !important;
}
.bg-danger-soft-hover:hover {
background-color: #fee4e7 !important;
}
.active.bg-light-active-soft,
.bg-light-soft {
color: #9fadba !important;
background-color: white !important;
}
.bg-light-soft-hover:hover {
background-color: white !important;
}
.active.bg-dark-active-soft,
.bg-dark-soft {
color: black !important;
background-color: #c4c4c4 !important;
}
.bg-dark-soft-hover:hover {
background-color: #c4c4c4 !important;
}
.active.bg-indigo-active-soft,
.bg-indigo-soft {
color: #1f1173 !important;
background-color: #efedfc !important;
}
.bg-indigo-soft-hover:hover {
background-color: #efedfc !important;
}
.active.bg-purple-active-soft,
.bg-purple-soft {
color: #0f091c !important;
background-color: #b6a2e3 !important;
}
.bg-purple-soft-hover:hover {
background-color: #b6a2e3 !important;
}
.active.bg-pink-active-soft,
.bg-pink-soft {
color: #7d033b !important;
background-color: #fdabd1 !important;
}
.bg-pink-soft-hover:hover {
background-color: #fdabd1 !important;
}
/*
Active backgrounds
.active.bg-*-active
*/
.active.bg-primary-active {
color: #ffffff !important;
background-color: #4285F4 !important;
}
.active.bg-secondary-active {
color: #ffffff !important;
background-color: #6c757d !important;
}
.active.bg-success-active {
color: #ffffff !important;
background-color: #6dbb30 !important;
}
.active.bg-info-active {
color: #ffffff !important;
background-color: #73e7f7 !important;
}
.active.bg-warning-active {
color: #ffffff !important;
background-color: #fad776 !important;
}
.active.bg-danger-active {
color: #ffffff !important;
background-color: #f64e60 !important;
}
.active.bg-light-active {
color: #ffffff !important;
background-color: #f8f9fa !important;
}
.active.bg-dark-active {
color: #ffffff !important;
background-color: #2E2E2E !important;
}
.active.bg-indigo-active {
color: #ffffff !important;
background-color: #533be2 !important;
}
.active.bg-purple-active {
color: #ffffff !important;
background-color: #4c2c92 !important;
}
.active.bg-pink-active {
color: #ffffff !important;
background-color: #f92084 !important;
}
/*
Hover backgrounds
.bg-*-hover
*/
.bg-primary-hover:hover {
color: #fff !important;
background-color: #4285F4 !important;
}
.bg-primary-hover:hover p {
color: #fff !important;
}
.bg-secondary-hover:hover {
color: #fff !important;
background-color: #6c757d !important;
}
.bg-secondary-hover:hover p {
color: #fff !important;
}
.bg-success-hover:hover {
color: #fff !important;
background-color: #6dbb30 !important;
}
.bg-success-hover:hover p {
color: #fff !important;
}
.bg-info-hover:hover {
color: #fff !important;
background-color: #73e7f7 !important;
}
.bg-info-hover:hover p {
color: #fff !important;
}
.bg-warning-hover:hover {
color: #fff !important;
background-color: #fad776 !important;
}
.bg-warning-hover:hover p {
color: #fff !important;
}
.bg-danger-hover:hover {
color: #fff !important;
background-color: #f64e60 !important;
}
.bg-danger-hover:hover p {
color: #fff !important;
}
.bg-light-hover:hover {
background-color: #f8f9fa !important;
}
.bg-dark-hover:hover {
color: #fff !important;
background-color: #2E2E2E !important;
}
.bg-dark-hover:hover p {
color: #fff !important;
}
.bg-indigo-hover:hover {
color: #fff !important;
background-color: #533be2 !important;
}
.bg-indigo-hover:hover p {
color: #fff !important;
}
.bg-purple-hover:hover {
color: #fff !important;
background-color: #4c2c92 !important;
}
.bg-purple-hover:hover p {
color: #fff !important;
}
.bg-pink-hover:hover {
color: #fff !important;
background-color: #f92084 !important;
}
.bg-pink-hover:hover p {
color: #fff !important;
}
.text-white-hover:hover {
color: #fff !important;
}
.text-dark-hover:hover {
color: #000 !important;
}
/*
Radial backgrounds
*/
.bg-light-radial {
background: radial-gradient(#ffffff, #f8f9fa) !important;
}
/**
- Social backgrounds
**/
.bg-facebook {
background-color: #3B5998 !important;
color: #fff;
}
.bg-pinterest {
background-color: #C8232C !important;
color: #fff;
}
.bg-paypal {
background-color: #00588B !important;
color: #fff;
}
.bg-linkedin {
background-color: #0E76A8 !important;
color: #fff;
}
.bg-skype {
background-color: #00AFF0 !important;
color: #fff;
}
.bg-twitter {
background-color: #00ACEE !important;
color: #fff;
}
.bg-youtube {
background-color: #C4302B !important;
color: #fff;
}
.bg-vimeo {
background-color: #86C9EF !important;
color: #fff;
}
.bg-googleplay {
background-color: #DD4B39 !important;
color: #fff;
}
.bg-snapchat {
background-color: #FFFC00 !important;
color: #111 !important;
}
.bg-instagram {
background-color: #3F729B !important;
color: #fff;
}
/*
.bg-delicious { background-color: #205CC0!important; color: #fff; }
.bg-flattr { background-color: #F67C1A!important; color: #fff; }
.bg-android { background-color: #A4C639!important; color: #fff; }
.bg-smashmag { background-color: #E53B2C!important; color: #fff; }
.bg-gplus, .bg-googleplus { background-color: #DD4B39!important; color: #fff; }
.bg-wikipedia { background-color: #333!important; color: #fff; }
.bg-stumbleupon { background-color: #F74425!important; color: #fff; }
.bg-foursquare { background-color: #25A0CA!important; color: #fff; }
.bg-call { background-color: #444!important; color: #fff; }
.bg-ninetyninedesigns { background-color: #F26739!important; color: #fff; }
.bg-forrst { background-color: #5B9A68!important; color: #fff; }
.bg-digg { background-color: #191919!important; color: #fff; }
.bg-spotify { background-color: #81B71A!important; color: #fff; }
.bg-reddit { background-color: #C6C6C6!important; color: #fff; }
.bg-blogger { background-color: #FC4F08!important; color: #fff; }
.bg-cc { background-color: #688527!important; color:#fff; }
.bg-dribbble { background-color: #EA4C89!important; color:#fff; }
.bg-evernote { background-color: #5BA525!important; color:#fff; }
.bg-flickr { background-color: #FF0084!important; color:#fff; }
.bg-google { background-color: #DD4B39!important; color:#fff; }
.bg-instapaper { background-color: #333!important; color:#fff; }
.bg-klout { background-color: #FF5F52!important; color:#fff; }
.bg-vk { background-color: #2B587A!important; color:#fff; }
.bg-rss { background-color: #EE802F!important; color:#fff; }
.bg-aim { background-color: #FCD20B!important; color:#fff; }
.bg-yahoo { background-color: #720E9E!important; color:#fff; }
.bg-email3 { background-color: #6567A5!important; color:#fff; }
.bg-macstore { background-color: #333333!important; color:#fff; }
.bg-myspace { background-color: #666666!important; color:#fff; }
.bg-podcast { background-color: #E4B21B!important; color:#fff; }
.bg-cloudapp { background-color: #525557!important; color:#fff; }
.bg-dropbox { background-color: #3D9AE8!important; color:#fff; }
.bg-ebay { background-color: #89C507!important; color:#fff; }
.bg-github { background-color: #171515!important; color:#fff; }
.bg-itunes { background-color: #222!important; color:#fff; }
.bg-plurk { background-color: #CF5A00!important; color:#fff; }
.bg-pinboard { background-color: #0000E6!important; color:#fff; }
.bg-soundcloud { background-color: #FF7700!important; color:#fff; }
.bg-tumblr { background-color: #34526F!important; color:#fff; }
.bg-wordpress { background-color: #1E8CBE!important; color:#fff; }
.bg-yelp { background-color: #C41200!important; color:#fff; }
.bg-intensedebate { background-color: #009EE4!important; color:#fff; }
.bg-eventbrite { background-color: #F16924!important; color:#fff; }
.bg-scribd { background-color: #666666!important; color:#fff; }
.bg-stripe { background-color: #008CDD!important; color:#fff; }
.bg-print { background-color: #111!important; color:#fff; }
.bg-dwolla { background-color: #FF5C03!important; color:#fff; }
.bg-statusnet { background-color: #131A30!important; color:#fff; }
.bg-acrobat { background-color: #D3222A!important; color:#fff; }
.bg-drupal { background-color: #27537A!important; color:#fff; }
.bg-buffer { background-color: #333333!important; color:#fff; }
.bg-pocket { background-color: #EE4056!important; color:#fff; }
.bg-bitbucket { background-color: #0E4984!important; color:#fff; }
.bg-stackoverflow { background-color: #EF8236!important; color:#fff; }
.bg-hackernews { background-color: #FF6600!important; color:#fff; }
.bg-xing { background-color: #126567!important; color:#fff; }
.bg-quora { background-color: #A82400!important; color:#fff; }
.bg-openid { background-color: #E16309!important; color:#fff; }
.bg-steam { background-color: #111!important; color:#fff; }
.bg-amazon { background-color: #E47911!important; color:#fff; }
.bg-disqus { background-color: #E4E7EE!important; color:#fff; }
.bg-plancast { background-color: #222!important; color:#fff; }
.bg-appstore { background-color: #000!important; color:#fff; }
*/
/**
- SVG Fills
.fill-primary, .fill-secondary, etc
.fill-gray-*
**/
.fill-primary {
fill: #4285F4 !important;
}
.bg-primary-soft .fill-primary {
fill: #5a95f5 !important;
}
.fill-secondary {
fill: #6c757d !important;
}
.bg-secondary-soft .fill-secondary {
fill: #78828a !important;
}
.fill-success {
fill: #6dbb30 !important;
}
.bg-success-soft .fill-success {
fill: #79cc38 !important;
}
.fill-info {
fill: #73e7f7 !important;
}
.bg-info-soft .fill-info {
fill: #8bebf8 !important;
}
.fill-warning {
fill: #fad776 !important;
}
.bg-warning-soft .fill-warning {
fill: #f8c945 !important;
}
.fill-danger {
fill: #f64e60 !important;
}
.bg-danger-soft .fill-danger {
fill: #f76676 !important;
}
.fill-light {
fill: #f8f9fa !important;
}
.bg-light-soft .fill-light {
fill: white !important;
}
.fill-dark {
fill: #2E2E2E !important;
}
.bg-dark-soft .fill-dark {
fill: #3b3b3b !important;
}
.fill-indigo {
fill: #533be2 !important;
}
.bg-indigo-soft .fill-indigo {
fill: #6651e5 !important;
}
.fill-purple {
fill: #4c2c92 !important;
}
.bg-purple-soft .fill-purple {
fill: #5632a6 !important;
}
.fill-pink {
fill: #f92084 !important;
}
.bg-pink-soft .fill-pink {
fill: #fa3992 !important;
}
.fill-gray-100 {
fill: #f8f9fa !important;
}
.fill-gray-200 {
fill: #e9ecef !important;
}
.fill-gray-300 {
fill: #dee2e6 !important;
}
.fill-gray-400 {
fill: #ced4da !important;
}
.fill-gray-500 {
fill: #adb5bd !important;
}
.fill-gray-600 {
fill: #6c757d !important;
}
.fill-gray-700 {
fill: #495057 !important;
}
.fill-gray-800 {
fill: #343a40 !important;
}
.fill-gray-900 {
fill: #212529 !important;
}
/**
- Scroll .scrollable-vertical
.scrollable-horizontal
**/
.scrollable-vertical,
.scrollable-horizontal {
-ms-scroll-chaining: none;
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-overscroll-behavior: contain;
overscroll-behavior: contain;
}
/* scrollable vertical */
.scrollable-vertical {
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
/* mobile smooth scroll */
height: auto;
max-height: 100%;
}
/*
scrollable horizontal
Do not use dropdowns inside
@Dependencies: _responsive.scss
scroll styling : desktop only
*/
.scrollable-horizontal {
/*overflow: hidden;*/
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: block;
width: auto;
white-space: nowrap;
position: relative;
z-index: 100;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollable-horizontal::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
background: transparent !important;
}
.scrollable-horizontal::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background: transparent !important;
}
.scrollable-horizontal::-webkit-scrollbar-thumb {
-webkit-box-shadow: none !important;
background: transparent !important;
width: 0px !important;
height: 0px !important;
outline: none !important;
}
.scrollable-horizontal::-webkit-scrollbar-button {
background: transparent !important;
width: 0px !important;
height: 0px !important;
outline: none !important;
}
@media only screen and (min-width: 768px) {
/* webkit scrollbar style */
.scrollable-vertical {
scrollbar-color: #121212 #eeeeee;
scrollbar-width: thin;
}
.scrollable-vertical::-webkit-scrollbar-track,
.scrollable-vertical::-webkit-scrollbar,
.scrollable-vertical::-webkit-scrollbar-thumb,
.scrollable-styled-dark::-webkit-scrollbar-track,
.scrollable-styled-light::-webkit-scrollbar-track,
.scrollable-styled-dark::-webkit-scrollbar,
.scrollable-styled-light::-webkit-scrollbar,
.scrollable-styled-dark::-webkit-scrollbar-thumb,
.scrollable-styled-light::-webkit-scrollbar-thumb {
margin: 3px 0;
border-radius: 0.25rem;
}
.scrollable-vertical::-webkit-scrollbar,
.scrollable-styled-dark::-webkit-scrollbar,
.scrollable-styled-light::-webkit-scrollbar {
width: 3px;
}
/* hidden, shown on mouse over */
.scrollable-styled-light::-webkit-scrollbar,
.scrollable-styled-light::-webkit-scrollbar-thumb,
.scrollable-styled-light::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
.scrollable-styled-dark::-webkit-scrollbar-track,
.scrollable-styled-light::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0);
}
/* dark vertical : default */
.scrollable-vertical:hover::-webkit-scrollbar {
background-color: rgba(255, 255, 255, 0.1);
}
.scrollable-vertical:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
.scrollable-vertical:hover::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.1);
}
/* light */
.scrollable-styled-light:hover::-webkit-scrollbar {
background-color: rgba(0, 0, 0, 0.1);
}
.scrollable-styled-light:hover::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.4);
}
.scrollable-styled-light:hover::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.1);
}
/* dark */
.scrollable-styled-dark:hover::-webkit-scrollbar {
background-color: rgba(255, 255, 255, 0.1);
}
.scrollable-styled-dark:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
.scrollable-styled-dark:hover::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.1);
}
}
/**
- Hide
**/
.hide {
display: none;
}
.hide-force {
display: none !important;
}
/* autohide element if empty (no spaces, nothing) */
.hide-empty:empty {
display: none !important;
}
/*
Items are hidden but visible on mouse over.
Example: seful to hide "delete" button but visible on hover
** Always visible on mobile!
*/
@media only screen and (min-width: 992px) {
.show-hover-container:not(:hover) .show-hover-item {
visibility: hidden;
transition: box-shadow 250ms ease, transform 250ms ease;
}
.show-hover-container:hover .show-hover-item {
visibility: visible !important;
}
}
/* all devices */
.show-hover-container-all:not(:hover) .show-hover-item-all {
visibility: hidden;
transition: box-shadow 250ms ease, transform 250ms ease;
}
.show-hover-container-all:hover .show-hover-item-all {
visibility: visible !important;
}
/*
VIZIBILITY CLASSES, EASIER|INTUITIVE (old bootstrap)
INSTEAD OF .d-*
https://getbootstrap.com/docs/4.3/utilities/display/
MIXIN USED
*/
.hidden-xs-up {
display: none !important;
}
@media (max-width: 575.98px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 576px) {
.hidden-sm-up {
display: none !important;
}
}
@media (max-width: 767.98px) {
.hidden-sm-down {
display: none !important;
}
}
@media (min-width: 768px) {
.hidden-md-up {
display: none !important;
}
}
@media (max-width: 991.98px) {
.hidden-md-down {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important;
}
}
@media (max-width: 1199.98px) {
.hidden-lg-down {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important;
}
}
.hidden-xl-down {
display: none !important;
}
/**
- Cursors
**/
.cursor-pointer {
cursor: pointer;
}
.cursor-text {
cursor: text;
}
.sortable-handle,
.cursor-move {
cursor: move;
cursor: -webkit-grabbing;
}
/**
- Flex
**/
.flex-none {
flex: none !important;
}
.d-flex-align-middle {
display: flex;
align-items: center;
justify-content: center;
}
.d-flex-1-0-auto {
flex: 1 0 auto;
}
.d-flex-1-1-auto {
flex: 1 1 auto !important;
}
.d-flex-inherit {
flex: inherit !important;
}
.justify-content-inherit {
justify-content: inherit !important;
}
/**
:: WORKING : DISABLED|NOT NEEDED ::
Squared Grid
:: Chrome, FF, Opera, Safari (IE not tested)
.row-squared {
display: flex;
flex-wrap: wrap;
}
.col-squared {
width: 100%;
}
@media (min-width: map-get($grid-breakpoints, "lg")) {
.col-squared {
width: 50%;
}
}
@media (max-width: map-get($grid-breakpoints, "lg") - 1) { // xl: 1200px, lg: 992px, md: 768px
.col-squared {
width: 25%;
}
}
.col-squared:before {
content: "";
float: left;
padding-top: 100%;
}
**/
/**
- Bordered Grid .row-grid
**/
/* bordered grid */
.ul-grid,
.row-grid {
border-top: 1px solid #e9ecef;
border-left: 1px solid #e9ecef;
}
.ul-grid > li,
.row-grid > div {
border-bottom: 1px solid #e9ecef;
padding: 0;
border-right: 1px solid #e9ecef;
}
/*
Expanded bootstrap : grid 5 columns
*/
.col-5th,
.col-sm-5th,
.col-md-5th,
.col-lg-5th,
.col-xl-5th {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-5th {
flex: 0 0 20%;
max-width: 20%;
}
@media only screen and (min-width: 576px) {
.col-sm-5th {
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (min-width: 768px) {
.col-md-5th {
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 960px) {
.col-lg-5th {
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 1200px) {
.col-xl-5th {
flex: 0 0 20%;
max-width: 20%;
}
}
/*
Grid Gutters
*/
.gutters-xxs {
margin-right: -0.125rem;
margin-left: -0.125rem;
}
.gutters-xxs > [class*=col-] {
padding-right: 0.125rem;
padding-left: 0.125rem;
}
.gutters-xs {
margin-right: -0.25rem;
margin-left: -0.25rem;
}
.gutters-xs > [class*=col-] {
padding-right: 0.25rem;
padding-left: 0.25rem;
}
.gutters-sm {
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.gutters-sm > [class*=col-] {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.gutters-md {
margin-right: -0.75rem;
margin-left: -0.75rem;
}
.gutters-md > [class*=col-] {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.gutters-lg {
margin-right: -1.5rem;
margin-left: -1.5rem;
}
.gutters-lg > [class*=col-] {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.gutters-xl {
margin-right: -3rem;
margin-left: -3rem;
}
.gutters-xl > [class*=col-] {
padding-right: 3rem;
padding-left: 3rem;
}
/*
Bordered columns
old: rgba(0,0,0,.1)
*/
.row.col-border > div:not(:first-child) {
border-left: #dde4ea 1px solid;
}
@media only screen and (min-width: 576px) {
.row.col-border-sm > div:not(:first-child) {
border-left: #dde4ea 1px solid;
}
}
@media only screen and (min-width: 768px) {
.row.col-border-md > div:not(:first-child) {
border-left: #dde4ea 1px solid;
}
}
@media only screen and (min-width: 992px) {
.row.col-border-lg > div:not(:first-child) {
border-left: #dde4ea 1px solid;
}
}
/*
Grid notes-like
*/
.grid-notebook {
display: block;
font-size: 1.0625rem;
line-height: 2.125rem;
line-height: 200%;
padding: 0.455rem 1.5625rem 0 1.5625rem;
background-image: -webkit-linear-gradient(top, transparent, transparent 2.0625rem, #E7EFF8 0);
background-size: 100% 2.125rem;
background-attachment: local;
}
.grid-notebook p,
.grid-notebook ul,
.grid-notebook ol {
margin-bottom: 0 !important;
}
.grid-notebook h1,
.grid-notebook h2,
.grid-notebook h3,
.grid-notebook h4,
.grid-notebook h5,
.grid-notebook h6 {
line-height: 2.125rem !important;
margin-bottom: 0 !important;
}
.grid-notebook h1,
.grid-notebook h2 {
font-size: 1.5625rem !important;
}
.grid-notebook h3 {
font-size: 1.25rem !important;
}
.grid-notebook h4,
.grid-notebook h5,
.grid-notebook h6 {
font-size: 1.125rem !important;
}
/**
- Line Height
**/
.line-height-0 {
line-height: 0 !important;
}
.line-height-1 {
line-height: 1 !important;
}
.line-height-inherit {
line-height: inherit !important;
}
/**
- Table
**/
/* bootstrap fix */
.d-table {
position: relative;
width: 100%;
height: 100%;
}
/* slightly text shadow */
.text-shadow-dark {
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 0;
}
.text-monospace {
-webkit-font-smoothing: initial;
}
/* text color missing from botostrap */
.text-gray-100 {
color: #f8f9fa !important;
}
.text-gray-200 {
color: #e9ecef !important;
}
.text-gray-300 {
color: #dee2e6 !important;
}
.text-gray-400 {
color: #ced4da !important;
}
.text-gray-500 {
color: #adb5bd !important;
}
.text-gray-600 {
color: #6c757d !important;
}
.text-gray-700 {
color: #495057 !important;
}
.text-gray-800 {
color: #343a40 !important;
}
.text-gray-900 {
color: #212529 !important;
}
/**
- Text and Link
**/
.link-muted {
color: #6c757d;
border-bottom: #97a4af 1px dashed;
text-decoration: none !important;
transition: all 0.2s ease-in-out;
}
/*
Links
.text-
.text-*-hover
*/
.text-primary-hover {
transition: all 0.2s ease-in-out;
}
a.text-primary-hover:focus,
a.text-primary-hover:hover {
color: #4285F4 !important;
}
.text-secondary-hover {
transition: all 0.2s ease-in-out;
}
a.text-secondary-hover:focus,
a.text-secondary-hover:hover {
color: #6c757d !important;
}
.text-success-hover {
transition: all 0.2s ease-in-out;
}
a.text-success-hover:focus,
a.text-success-hover:hover {
color: #6dbb30 !important;
}
.text-info-hover {
transition: all 0.2s ease-in-out;
}
a.text-info-hover:focus,
a.text-info-hover:hover {
color: #73e7f7 !important;
}
.text-warning-hover {
transition: all 0.2s ease-in-out;
}
a.text-warning-hover:focus,
a.text-warning-hover:hover {
color: #fad776 !important;
}
.text-danger-hover {
transition: all 0.2s ease-in-out;
}
a.text-danger-hover:focus,
a.text-danger-hover:hover {
color: #f64e60 !important;
}
.text-light-hover {
transition: all 0.2s ease-in-out;
}
a.text-light-hover:focus,
a.text-light-hover:hover {
color: #f8f9fa !important;
}
.text-dark-hover {
transition: all 0.2s ease-in-out;
}
a.text-dark-hover:focus,
a.text-dark-hover:hover {
color: #2E2E2E !important;
}
.text-indigo-hover {
transition: all 0.2s ease-in-out;
}
a.text-indigo-hover:focus,
a.text-indigo-hover:hover {
color: #533be2 !important;
}
.text-purple-hover {
transition: all 0.2s ease-in-out;
}
a.text-purple-hover:focus,
a.text-purple-hover:hover {
color: #4c2c92 !important;
}
.text-pink-hover {
transition: all 0.2s ease-in-out;
}
a.text-pink-hover:focus,
a.text-pink-hover:hover {
color: #f92084 !important;
}
/**
- Z Index
**/
/* z-index */
.z-index-n1 {
z-index: -1 !important;
}
.z-index-0 {
z-index: 0 !important;
}
.z-index-1 {
z-index: 1 !important;
}
.z-index-2 {
z-index: 2 !important;
}
.z-index-3 {
z-index: 3 !important;
}
.z-index-4 {
z-index: 4 !important;
}
.z-index-5 {
z-index: 5 !important;
}
.z-index-10 {
z-index: 10 !important;
}
.z-index-99 {
z-index: 99 !important;
}
.z-index-100 {
z-index: 100 !important;
}
.z-index-1000 {
z-index: 1000 !important;
}
.z-index-9999 {
z-index: 9999 !important;
}
.z-index-11 {
z-index: 11 !important;
}
/**
- Rtl Utils .text-align-start, .text-align-end, .float-start, .float-end
.p--0-start, .p--0-end, .m--0-start, .m--0-end
.b--0-start, .b--0-end, .b--0-start, .b--0-end
.m-auto-start, .m-auto-end
**/
.text-align-start {
text-align: left !important;
}
.text-align-end {
text-align: right !important;
}
.float-start {
float: left !important;
margin-right: 10px;
}
.float-end {
float: right !important;
margin-left: 10px;
}
.p--0-start {
padding-left: 0 !important;
}
.p--0-end {
padding-right: 0 !important;
}
.m--0-start {
margin-left: 0 !important;
}
.m--0-end {
margin-right: 0 !important;
}
.m-auto-start {
margin-left: auto !important;
}
.m-auto-end {
margin-right: auto !important;
}
.b--0-start {
border-left: 0 !important;
}
.b--0-end {
border-right: 0 !important;
}
.hide-ltr {
display: none !important;
}
/**
- Generic Animations .animate-fadein CSS: animation: __utilFadeIn .25s ease-out forwards;
.animate-fadeinSlow CSS: animation: __utilFadeInSlow 2s ease;
.animate-bouncein CSS: animation: __utilBounceIn .25s ease-out forwards;
.animate-bounceinup CSS: animation: __utilBounceInUp .25s ease-out forwards;
.animate-shine CSS: animation: __utilShine 6s infinite ease-in-out;
.animate-pulse CSS: animation: __utilPulse 2s infinite;
.animate-reveal-up (50px)
.animate-reveal-down (50px)
**/
.animate-none {
-webkit-animation: none !important;
animation: none !important;
}
/*
Animate Reveal
*/
.animate-reveal-up-item > .reveal-item,
.animate-reveal-up {
transform: translateZ(0);
transition: all 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
}
.animate-reveal-up-item:hover > .reveal-item,
.animate-reveal-up:hover {
transform: translate3d(0, -50px, 0);
}
.animate-reveal-down-item > .reveal-item,
.animate-reveal-down {
transform: translateZ(0);
transition: all 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
}
.animate-reveal-down-item:hover > .reveal-item,
.animate-reveal-down:hover {
transform: translate3d(0, 50px, 0);
}
@-webkit-keyframes __utilFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes __utilFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fadein {
-webkit-animation: __utilFadeIn 0.3s ease;
/* Safari, Chrome and Opera > 12.1 */
animation: __utilFadeIn 0.3s ease;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*
Fade In
animation: __utilFadeIn .25s ease-out forwards;
*/
@-webkit-keyframes __utilFadeInSlow {
0% {
opacity: 0;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes __utilFadeInSlow {
0% {
opacity: 0;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.animate-fadein__slow {
-webkit-animation: __utilFadeInSlow 2s ease;
/* Safari, Chrome and Opera > 12.1 */
animation: __utilFadeInSlow 2s ease;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*
Bounce In
animation: __utilBounceIn .25s ease-out forwards;
*/
@-webkit-keyframes __utilBounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
@keyframes __utilBounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.animate-bouncein {
-webkit-animation: __utilBounceIn 0.25s ease-out forwards;
animation: __utilBounceIn 0.25s ease-out forwards;
}
/*
Bounce In Up
animation: __utilBounceInUp .25s ease-out forwards;
*/
@-webkit-keyframes __utilBounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(600px);
}
25% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
50% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes __utilBounceInUp {
0% {
opacity: 0;
transform: translateY(600px);
}
25% {
opacity: 1;
transform: translateY(-30px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.animate-bounceinup {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: __utilBounceInUp;
animation-name: __utilBounceInUp;
}
@-webkit-keyframes __utilShine {
1% {
opacity: 0;
transition-property: opacity;
transition-duration: 0.1s;
}
25% {
opacity: 0.1;
transform: rotate(180deg);
transition-duration: 0.1s;
}
50% {
opacity: 1;
transform: rotate(-90deg);
transition-duration: 0.1s;
}
75% {
opacity: 0.1;
transform: rotate(30deg);
transition-duration: 0.1s;
}
100% {
opacity: 0;
transform: rotate(180deg);
transition-duration: 0.1s;
}
}
@keyframes __utilShine {
1% {
opacity: 0;
transition-property: opacity;
transition-duration: 0.1s;
}
25% {
opacity: 0.1;
transform: rotate(180deg);
transition-duration: 0.1s;
}
50% {
opacity: 1;
transform: rotate(-90deg);
transition-duration: 0.1s;
}
75% {
opacity: 0.1;
transform: rotate(30deg);
transition-duration: 0.1s;
}
100% {
opacity: 0;
transform: rotate(180deg);
transition-duration: 0.1s;
}
}
.animate-shine:after {
-webkit-animation: __utilShine 6s infinite ease-in-out;
animation: __utilShine 6s infinite ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
animation-delay: 1s;
content: "";
position: absolute;
top: -10%;
left: 0%;
width: 120%;
height: 120%;
opacity: 0;
z-index: 0;
border-radius: 50%;
transform: rotate(40deg);
background: rgba(248, 249, 250, 0.3);
background: linear-gradient(to right, rgba(248, 249, 250, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(248, 249, 250, 0) 100%);
}
.animate-pulse {
-webkit-animation: __utilPulse 2s infinite;
animation: __utilPulse 2s infinite;
}
@-webkit-keyframes __utilPulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.8);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
}
@keyframes __utilPulse {
0% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
}
/*
Smooth Zoom
https://w3bits.com/labs/css-image-hover-zoom/
*/
.img-hover-zoom {
background: #222f3e;
height: 300px;
overflow: hidden;
border-radius: 0.5em;
border: 5px solid rgba(255, 255, 255, 0.05);
}
.img-hover-zoom--empty {
background-color: rgba(255, 255, 255, 0.1);
border-width: 0;
}
.img-hover-zoom:not(.img-hover-zoom--empty):hover {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}
.img-hover-zoom--basic img {
transition: transform 0.5s ease;
}
.img-hover-zoom--basic:hover img {
transform: scale(1.5);
}
.img-hover-zoom--quick-zoom img {
transform-origin: 0 0;
transition: transform 0.25s, visibility 0.25s ease-in;
}
.img-hover-zoom--quick-zoom:hover img {
transform: scale(2);
}
.img-hover-zoom--point-zoom img {
transform-origin: 65% 75%;
transition: transform 1s, filter 0.5s ease-out;
}
.img-hover-zoom--point-zoom:hover img {
transform: scale(5);
}
.img-hover-zoom--zoom-n-rotate img {
transition: transform 0.5s ease-in-out;
}
.img-hover-zoom--zoom-n-rotate:hover img {
transform: scale(2) rotate(25deg);
}
.img-hover-zoom--slowmo img {
transform-origin: 50% 65%;
transition: transform 5s, filter 3s ease-in-out;
filter: brightness(150%);
}
.img-hover-zoom--slowmo:hover img {
filter: brightness(100%);
transform: scale(3);
}
.img-hover-zoom--brightness img {
transition: transform 2s, filter 1.5s ease-in-out;
transform-origin: center center;
filter: brightness(50%);
}
.img-hover-zoom--brightness:hover img {
filter: brightness(100%);
transform: scale(1.3);
}
.img-hover-zoom--zoom-n-pan-h img {
transition: transform 0.5s ease-in-out;
transform: scale(1.4);
transform-origin: 100% 0;
}
.img-hover-zoom--zoom-n-pan-h:hover img {
transform: scale(1.5) translateX(30%);
}
.img-hover-zoom--zoom-n-pan-v img {
transition: transform 0.5s ease-in-out;
transform: scale(1.4);
transform-origin: 0 0;
}
.img-hover-zoom--zoom-n-pan-v:hover img {
transform: scale(1.25) translateY(-30%);
}
.img-hover-zoom--blur img {
transition: transform 1s, filter 2s ease-in-out;
filter: blur(2px);
transform: scale(1.2);
}
.img-hover-zoom--blur:hover img {
filter: blur(0);
transform: scale(1);
}
.img-hover-zoom--colorize img {
transition: transform 0.5s, filter 1.5s ease-in-out;
filter: grayscale(100%);
}
.img-hover-zoom--colorize:hover img {
filter: grayscale(0);
transform: scale(1.1);
}
/**
- Responsive (mobile) .text-center-xs, .float-none-xs, .d-block-xs
.m--0-xs, .m*--0-xs,
.p--0-xs, .p*--0-xs,
.b--0-xs, .b*--0-xs,
**/
@media only screen and (min-width: 991px) {
.float-none-lg {
float: none !important;
}
.b-0-lg,
.b--0-lg {
border: 0 !important;
}
.border-bottom-lg {
border-bottom: #dde4ea 1px solid;
}
.border-top-lg {
border-top: #dde4ea 1px solid;
}
.m-0-lg,
.m--0-lg {
border: 0 !important;
}
.p-0-lg,
.p--0-lg {
border: 0 !important;
}
}
@media only screen and (max-width: 991px) and (min-width: 768px) {
.text-center-md {
text-align: center !important;
}
.text-start-md {
text-align: left !important;
}
.float-none-md {
float: none !important;
}
.d-block-md {
display: block !important;
}
/* button fix */
.btn.d-block-md {
margin-left: 0 !important;
margin-right: 0 !important;
}
.position-absolute-md {
position: absolute !important;
}
.position-relative-md {
position: relative !important;
}
.position-fixed-md {
position: fixed !important;
}
.shadow-none-md {
box-shadow: none !important;
}
.m-0-md,
.m--0-md {
margin: 0 !important;
}
.mt-0-md,
.mt--0-md {
margin-top: 0 !important;
}
.ml-0-md,
.ml--0-md {
margin-left: 0 !important;
}
.mr-0-md,
.mr--0-md {
margin-right: 0 !important;
}
.mb-0-md,
.mb--0-md {
margin-bottom: 0 !important;
}
.m-15-md,
.m--15-md {
margin: 15px !important;
}
.p-0-md,
.p--0-md {
padding: 0 !important;
}
.pt-0-md,
.pt--0-md {
padding-top: 0 !important;
}
.pl-0-md,
.pl--0-md {
padding-left: 0 !important;
}
.pr-0-md,
.pr--0-md {
padding-right: 0 !important;
}
.pb-0-md,
.pb--0-md {
padding-bottom: 0 !important;
}
.p-15-md,
.p--15-md {
padding: 15px !important;
}
.b-0-md,
.b--0-md {
border: 0 !important;
}
.bt-0-md,
.bt--0-md {
border-top: 0 !important;
}
.bl-0-md,
.bl--0-md {
border-left: 0 !important;
}
.br-0-md,
.br--0-md {
border-right: 0 !important;
}
.bb-0-md,
.bb--0-md {
border-bottom: 0 !important;
}
.border-bottom-md {
border-bottom: #dde4ea 1px solid;
}
.border-top-md {
border-top: #dde4ea 1px solid;
}
.rounded-0-md,
.round-0-md,
.r-0-md,
.r--0-md {
border-radius: 0 !important;
}
.w-100-md {
max-width: 100% !important;
min-width: 0% !important;
width: 100% !important;
}
.w-100vh-md {
max-width: 100% !important;
width: 100vh !important;
}
.w-auto-md {
width: auto !important;
}
.h-100-md {
height: auto;
min-height: 100% !important;
}
.h-100vh-md {
height: auto;
min-height: 100vh !important;
}
.h-auto-md {
height: auto !important;
min-height: auto !important;
max-height: auto !important;
}
.rounded-circle-md {
border-radius: 50% !important;
}
.overlay-none-md:after {
display: none !important;
}
.h1-md {
font-size: 2.65625rem !important;
}
.h2-md {
font-size: 2.125rem !important;
}
.h3-md {
font-size: 1.859375rem !important;
}
.h4-md {
font-size: 1.59375rem !important;
}
.h5-md {
font-size: 1.328125rem !important;
}
.h6-md {
font-size: 1.0625rem !important;
}
}
@media only screen and (max-width: 768px) {
.text-center-xs {
text-align: center !important;
}
.text-start-xs {
text-align: left !important;
}
.float-none-xs {
float: none !important;
}
.d-block-xs {
display: block !important;
}
/* button fix */
.btn.d-block-xs {
margin-left: 0 !important;
margin-right: 0 !important;
}
.position-absolute-xs {
position: absolute !important;
}
.position-relative-xs {
position: relative !important;
}
.position-fixed-xs {
position: fixed !important;
}
.shadow-none-xs {
box-shadow: none !important;
}
.m-0-xs,
.m--0-xs {
margin: 0 !important;
}
.mt-0-xs,
.mt--0-xs {
margin-top: 0 !important;
}
.ml-0-xs,
.ml--0-xs {
margin-left: 0 !important;
}
.mr-0-xs,
.mr--0-xs {
margin-right: 0 !important;
}
.mb-0-xs,
.mb--0-xs {
margin-bottom: 0 !important;
}
.m-15-xs,
.m--15-xs {
margin: 15px !important;
}
.p-0-xs,
.p--0-xs {
padding: 0 !important;
}
.pt-0-xs,
.pt--0-xs {
padding-top: 0 !important;
}
.pl-0-xs,
.pl--0-xs {
padding-left: 0 !important;
}
.pr-0-xs,
.pr--0-xs {
padding-right: 0 !important;
}
.pb-0-xs,
.pb--0-xs {
padding-bottom: 0 !important;
}
.p-15-xs,
.p--15-xs {
padding: 15px !important;
}
.b-0-xs,
.b--0-xs {
border: 0 !important;
}
.bt-0-xs,
.bt--0-xs {
border-top: 0 !important;
}
.bl-0-xs,
.bl--0-xs {
border-left: 0 !important;
}
.br-0-xs,
.br--0-xs {
border-right: 0 !important;
}
.bb-0-xs,
.bb--0-xs {
border-bottom: 0 !important;
}
.border-bottom-xs {
border-bottom: #dde4ea 1px solid;
}
.border-top-xs {
border-top: #dde4ea 1px solid;
}
.rounded-0-xs,
.round-0-xs,
.r-0-xs,
.r--0-xs {
border-radius: 0 !important;
}
.w-100-xs {
max-width: 100% !important;
min-width: 0% !important;
width: 100% !important;
}
.w-100vh-xs {
max-width: 100% !important;
width: 100vh !important;
}
.w-auto-xs {
width: auto !important;
}
.h-100-xs {
height: auto;
min-height: 100% !important;
}
.h-100vh-xs {
height: auto;
min-height: 100vh !important;
}
.h-auto-xs {
height: auto !important;
min-height: auto !important;
max-height: auto !important;
}
.rounded-circle-xs {
border-radius: 50% !important;
}
.overlay-none-xs:after {
display: none !important;
}
.h1-xs {
font-size: 2.65625rem !important;
}
.h2-xs {
font-size: 2.125rem !important;
}
.h3-xs {
font-size: 1.859375rem !important;
}
.h4-xs {
font-size: 1.59375rem !important;
}
.h5-xs {
font-size: 1.328125rem !important;
}
.h6-xs {
font-size: 1.0625rem !important;
}
/*
Grid Gutters
*/
.gutters-xxs--xs {
margin-right: -0.125rem !important;
margin-left: -0.125rem !important;
}
.gutters-xxs--xs > [class*=col-] {
padding-right: 0.125rem !important;
padding-left: 0.125rem !important;
}
.gutters-xs--xs {
margin-right: -0.25rem !important;
margin-left: -0.25rem !important;
}
.gutters-xs--xs > [class*=col-] {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important;
}
.gutters-sm--xs {
margin-right: -0.5rem !important;
margin-left: -0.5rem !important;
}
.gutters-sm--xs > [class*=col-] {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
.gutters-md--xs {
margin-right: -0.75rem !important;
margin-left: -0.75rem !important;
}
.gutters-md--xs > [class*=col-] {
padding-right: 0.75rem !important;
padding-left: 0.75rem !important;
}
.m-1-xs {
margin: 0.25rem !important;
}
.m-2-xs {
margin: 0.5rem !important;
}
.m-3-xs {
margin: 1rem !important;
}
.m-4-xs {
margin: 1.5rem !important;
}
.m-5-xs {
margin: 3rem !important;
}
.mt-1-xs {
margin-top: 0.25rem !important;
}
.mt-2-xs {
margin-top: 0.5rem !important;
}
.mt-3-xs {
margin-top: 1rem !important;
}
.mt-4-xs {
margin-top: 1.5rem !important;
}
.mt-5-xs {
margin-top: 3rem !important;
}
.mb-1-xs {
margin-bottom: 0.25rem !important;
}
.mb-2-xs {
margin-bottom: 0.5rem !important;
}
.mb-3-xs {
margin-bottom: 1rem !important;
}
.mb-4-xs {
margin-bottom: 1.5rem !important;
}
.mb-5-xs {
margin-bottom: 3rem !important;
}
.p-1-xs {
padding: 0.25rem !important;
}
.p-2-xs {
padding: 0.5rem !important;
}
.p-3-xs {
padding: 1rem !important;
}
.p-4-xs {
padding: 1.5rem !important;
}
.p-5-xs {
padding: 3rem !important;
}
}
.text-red-100 {
color: #ffcdd2 !important;
}
.text-red-200 {
color: #ef9a9a !important;
}
.text-red-300 {
color: #e57373 !important;
}
.text-red-400 {
color: #ef5350 !important;
}
.text-red-500 {
color: #f44336 !important;
}
.text-red-600 {
color: #e53935 !important;
}
.text-red-700 {
color: #d32f2f !important;
}
.text-red-800 {
color: #c62828 !important;
}
.text-red-900 {
color: #b71c1c !important;
}
.text-pink-100 {
color: #f8bbd0 !important;
}
.text-pink-200 {
color: #f48fb1 !important;
}
.text-pink-300 {
color: #f06292 !important;
}
.text-pink-400 {
color: #ec407a !important;
}
.text-pink-500 {
color: #e91e63 !important;
}
.text-pink-600 {
color: #d81b60 !important;
}
.text-pink-700 {
color: #c2185b !important;
}
.text-pink-800 {
color: #ad1457 !important;
}
.text-pink-900 {
color: #880e4f !important;
}
.text-purple-100 {
color: #e1bee7 !important;
}
.text-purple-200 {
color: #ce93d8 !important;
}
.text-purple-300 {
color: #ba68c8 !important;
}
.text-purple-400 {
color: #ab47bc !important;
}
.text-purple-500 {
color: #9c27b0 !important;
}
.text-purple-600 {
color: #8e24aa !important;
}
.text-purple-700 {
color: #7b1fa2 !important;
}
.text-purple-800 {
color: #6a1b9a !important;
}
.text-purple-900 {
color: #4a148c !important;
}
.text-deep-purple-100 {
color: #d1c4e9 !important;
}
.text-deep-purple-200 {
color: #b39ddb !important;
}
.text-deep-purple-300 {
color: #9575cd !important;
}
.text-deep-purple-400 {
color: #7e57c2 !important;
}
.text-deep-purple-500 {
color: #673ab7 !important;
}
.text-deep-purple-600 {
color: #5e35b1 !important;
}
.text-deep-purple-700 {
color: #512da8 !important;
}
.text-deep-purple-800 {
color: #4527a0 !important;
}
.text-deep-purple-900 {
color: #311b92 !important;
}
.text-indigo-100 {
color: #c5cae9 !important;
}
.text-indigo-200 {
color: #9fa8da !important;
}
.text-indigo-300 {
color: #7986cb !important;
}
.text-indigo-400 {
color: #5c6bc0 !important;
}
.text-indigo-500 {
color: #3f51b5 !important;
}
.text-indigo-600 {
color: #3949ab !important;
}
.text-indigo-700 {
color: #303f9f !important;
}
.text-indigo-800 {
color: #283593 !important;
}
.text-indigo-900 {
color: #1a237e !important;
}
.text-blue-100 {
color: #bbdefb !important;
}
.text-blue-200 {
color: #90caf9 !important;
}
.text-blue-300 {
color: #64b5f6 !important;
}
.text-blue-400 {
color: #42a5f5 !important;
}
.text-blue-500 {
color: #2196f3 !important;
}
.text-blue-600 {
color: #1e88e5 !important;
}
.text-blue-700 {
color: #1976d2 !important;
}
.text-blue-800 {
color: #1565c0 !important;
}
.text-blue-900 {
color: #0d47a1 !important;
}
.text-light-blue-100 {
color: #b3e5fc !important;
}
.text-light-blue-200 {
color: #81d4fa !important;
}
.text-light-blue-300 {
color: #4fc3f7 !important;
}
.text-light-blue-400 {
color: #29b6f6 !important;
}
.text-light-blue-500 {
color: #03a9f4 !important;
}
.text-light-blue-600 {
color: #039be5 !important;
}
.text-light-blue-700 {
color: #0288d1 !important;
}
.text-light-blue-800 {
color: #0277bd !important;
}
.text-light-blue-900 {
color: #01579b !important;
}
.text-cyan-100 {
color: #b2ebf2 !important;
}
.text-cyan-200 {
color: #80deea !important;
}
.text-cyan-300 {
color: #4dd0e1 !important;
}
.text-cyan-400 {
color: #26c6da !important;
}
.text-cyan-500 {
color: #00bcd4 !important;
}
.text-cyan-600 {
color: #00acc1 !important;
}
.text-cyan-700 {
color: #0097a7 !important;
}
.text-cyan-800 {
color: #00838f !important;
}
.text-cyan-900 {
color: #006064 !important;
}
.text-teal-100 {
color: #b2dfdb !important;
}
.text-teal-200 {
color: #80cbc4 !important;
}
.text-teal-300 {
color: #4db6ac !important;
}
.text-teal-400 {
color: #26a69a !important;
}
.text-teal-500 {
color: #009688 !important;
}
.text-teal-600 {
color: #00897b !important;
}
.text-teal-700 {
color: #00796b !important;
}
.text-teal-800 {
color: #00695c !important;
}
.text-teal-900 {
color: #004d40 !important;
}
.text-green-100 {
color: #c8e6c9 !important;
}
.text-green-200 {
color: #a5d6a7 !important;
}
.text-green-300 {
color: #81c784 !important;
}
.text-green-400 {
color: #66bb6a !important;
}
.text-green-500 {
color: #4caf50 !important;
}
.text-green-600 {
color: #43a047 !important;
}
.text-green-700 {
color: #388e3c !important;
}
.text-green-800 {
color: #2e7d32 !important;
}
.text-green-900 {
color: #1b5e20 !important;
}
.text-light-green-100 {
color: #dcedc8 !important;
}
.text-light-green-200 {
color: #c5e1a5 !important;
}
.text-light-green-300 {
color: #aed581 !important;
}
.text-light-green-400 {
color: #9ccc65 !important;
}
.text-light-green-500 {
color: #8bc34a !important;
}
.text-light-green-600 {
color: #7cb342 !important;
}
.text-light-green-700 {
color: #689f38 !important;
}
.text-light-green-800 {
color: #558b2f !important;
}
.text-light-green-900 {
color: #33691e !important;
}
.text-lime-100 {
color: #f0f4c3 !important;
}
.text-lime-200 {
color: #e6ee9c !important;
}
.text-lime-300 {
color: #dce775 !important;
}
.text-lime-400 {
color: #d4e157 !important;
}
.text-lime-500 {
color: #cddc39 !important;
}
.text-lime-600 {
color: #c0ca33 !important;
}
.text-lime-700 {
color: #afb42b !important;
}
.text-lime-800 {
color: #9e9d24 !important;
}
.text-lime-900 {
color: #827717 !important;
}
.text-yellow-100 {
color: #fff9c4 !important;
}
.text-yellow-200 {
color: #fff59d !important;
}
.text-yellow-300 {
color: #fff176 !important;
}
.text-yellow-400 {
color: #ffee58 !important;
}
.text-yellow-500 {
color: #ffeb3b !important;
}
.text-yellow-600 {
color: #fdd835 !important;
}
.text-yellow-700 {
color: #fbc02d !important;
}
.text-yellow-800 {
color: #f9a825 !important;
}
.text-yellow-900 {
color: #f57f17 !important;
}
.text-amber-100 {
color: #ffecb3 !important;
}
.text-amber-200 {
color: #ffe082 !important;
}
.text-amber-300 {
color: #ffd54f !important;
}
.text-amber-400 {
color: #ffca28 !important;
}
.text-amber-500 {
color: #ffc107 !important;
}
.text-amber-600 {
color: #ffb300 !important;
}
.text-amber-700 {
color: #ffa000 !important;
}
.text-amber-800 {
color: #ff8f00 !important;
}
.text-amber-900 {
color: #ff6f00 !important;
}
.text-orange-100 {
color: #ffe0b2 !important;
}
.text-orange-200 {
color: #ffcc80 !important;
}
.text-orange-300 {
color: #ffb74d !important;
}
.text-orange-400 {
color: #ffa726 !important;
}
.text-orange-500 {
color: #ff9800 !important;
}
.text-orange-600 {
color: #fb8c00 !important;
}
.text-orange-700 {
color: #f57c00 !important;
}
.text-orange-800 {
color: #ef6c00 !important;
}
.text-orange-900 {
color: #e65100 !important;
}
.text-deep-orange-100 {
color: #ffccbc !important;
}
.text-deep-orange-200 {
color: #ffab91 !important;
}
.text-deep-orange-300 {
color: #ff8a65 !important;
}
.text-deep-orange-400 {
color: #ff7043 !important;
}
.text-deep-orange-500 {
color: #ff5722 !important;
}
.text-deep-orange-600 {
color: #f4511e !important;
}
.text-deep-orange-700 {
color: #e64a19 !important;
}
.text-deep-orange-800 {
color: #d84315 !important;
}
.text-deep-orange-900 {
color: #bf360c !important;
}
.text-brown-100 {
color: #d7ccc8 !important;
}
.text-brown-200 {
color: #bcaaa4 !important;
}
.text-brown-300 {
color: #a1887f !important;
}
.text-brown-400 {
color: #8d6e63 !important;
}
.text-brown-500 {
color: #795548 !important;
}
.text-brown-600 {
color: #6d4c41 !important;
}
.text-brown-700 {
color: #5d4037 !important;
}
.text-brown-800 {
color: #4e342e !important;
}
.text-brown-900 {
color: #3e2723 !important;
}
.text-blue-gray-100 {
color: #cfd8dc !important;
}
.text-blue-gray-200 {
color: #b0bec5 !important;
}
.text-blue-gray-300 {
color: #90a4ae !important;
}
.text-blue-gray-400 {
color: #78909c !important;
}
.text-blue-gray-500 {
color: #607d8b !important;
}
.text-blue-gray-600 {
color: #546e7a !important;
}
.text-blue-gray-700 {
color: #455a64 !important;
}
.text-blue-gray-800 {
color: #37474f !important;
}
.text-blue-gray-900 {
color: #263238 !important;
}
/**
BOOTSTRAP RTL FIXES
various positioning
**/
.arrow {
display: inline-block;
position: absolute;
top: 0;
width: 0;
height: 0;
border: 17px solid transparent;
}
.arrow-start {
border-right: solid 10px #f8f9fa;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -30px;
margin-left: 3px;
}
.arrow-left {
border-right: solid 10px #f8f9fa;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -30px;
margin-left: 3px;
}
.arrow-end {
border-left: solid 10px #f8f9fa;
border-right-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
right: -30px;
margin-right: 3px;
}
.arrow-right {
border-left: solid 10px #f8f9fa;
border-right-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
right: -30px;
margin-right: 3px;
}
.arrow-top {
border-bottom: solid 10px #f8f9fa;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
bottom: auto !important;
top: -27px;
}
.arrow-bottom {
border-top: solid 10px #f8f9fa;
border-left-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
top: auto !important;
bottom: -27px;
}
/* arrow-lg */
.arrow-lg {
border: 34px solid transparent;
}
.arrow-lg.arrow-start {
border-right: solid 20px #f8f9fa;
left: -60px;
margin-left: 6px;
}
.arrow-lg.arrow-left {
border-right: solid 20px #f8f9fa;
left: -60px;
margin-left: 6px;
}
.arrow-lg.arrow-end {
border-left: solid 20px #f8f9fa;
right: -60px;
margin-right: 6px;
}
.arrow-lg.arrow-right {
border-left: solid 20px #f8f9fa;
right: -60px;
margin-right: 6px;
}
.arrow-lg.arrow-top {
border-bottom: solid 20px #f8f9fa;
top: -54px;
}
.arrow-lg.arrow-bottom {
border-top: solid 20px #f8f9fa;
bottom: -54px;
}
/* center positioning */
.arrow-center.arrow-top,
.arrow-center.arrow-bottom {
left: 50% !important;
margin-left: -17px !important;
}
.arrow-center.arrow-start,
.arrow-center.arrow-left,
.arrow-center.arrow-end,
.arrow-center.arrow-right {
top: 50% !important;
margin-top: -17px !important;
}
/* center positioning -lg */
.arrow-lg.arrow-center.arrow-top,
.arrow-lg.arrow-center.arrow-bottom {
margin-left: -34px !important;
}
.arrow-lg.arrow-center.arrow-start,
.arrow-lg.arrow-center.arrow-left,
.arrow-lg.arrow-center.arrow-end,
.arrow-lg.arrow-center.arrow-right {
margin-top: -34px !important;
}
/**
Various Blocks
**/
/*
Image stretch
Desktop only!
*/
@media only screen and (min-width: 992px) {
.stretch-end {
border-radius: 0.25rem;
overflow: hidden;
margin-right: -19.6vw !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.stretch-start {
border-radius: 0.25rem;
overflow: hidden;
margin-left: -19.6vw !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
/*
Images Block
*/
.block-img-start .block-img,
.block-img-end .block-img {
position: relative;
overflow: hidden;
border-radius: 0.25rem;
}
@media only screen and (min-width: 992px) {
.block-img-start .block-img-2,
.block-img-end .block-img-2 {
margin-top: -400px;
}
.block-img-start .block-img-1 {
top: -80px;
left: -78%;
}
.block-img-start .block-img-2 {
left: -10%;
}
.block-img-start .block-img-3 {
margin-top: -300px;
left: -78%;
}
.block-img-end .block-img-1 {
top: -80px;
right: -78%;
}
.block-img-end .block-img-2 {
right: -10%;
}
.block-img-end .block-img-3 {
margin-top: -300px;
right: -78%;
}
}
@media only screen and (max-width: 1199px) {
.block-img-start .block-img,
.block-img-end .block-img {
display: inline-block;
position: relative;
width: 50%;
top: 0;
left: 0;
}
.block-img-start .block-img-1,
.block-img-end .block-img-1 {
left: 0;
}
.block-img-start .block-img-2,
.block-img-end .block-img-2 {
left: 25%;
margin-top: -100%;
}
.block-img-start .block-img-3,
.block-img-end .block-img-3 {
left: 50%;
margin-top: -100%;
}
}
/*
Images Block 2
All devices
*/
.block-img-card {
display: block;
position: relative;
}
.block-img-card .block-img {
display: inline-block;
width: 50%;
left: 0;
border-radius: 0.25rem;
}
.block-img-card .block-img-1 {
left: 0;
top: 0;
position: relative;
}
.block-img-card .block-img-2 {
left: 25%;
top: 5%;
position: absolute;
}
.block-img-card .block-img-3 {
left: 50%;
top: 10%;
position: absolute;
}
@media only screen and (min-width: 768px) {
body:not(.layout-admin) section {
padding: 100px 0;
}
}
@media only screen and (max-width: 768px) {
body:not(.layout-admin) section {
padding: 80px 0;
}
}
.btn {
position: relative;
}
.btn:not(.bg-transparent):not(.btn-ghost):not(.bg-nogradient):after {
content: "";
background-image: linear-gradient(-315deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08));
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.btn.rounded-circle:after {
border-radius: 50%;
}
.btn.btn-pill:after {
border-radius: 50rem;
}
.btn.rounded-xl:after {
border-radius: 0.8rem;
}
/**
BUTTONS
Soft buttons : based on bootstrap scheme
Shadowed buttons : shadow on hover;
Vendor buttons
Pill buttons
Icon buttons
* cancel hover shadow by adding .btn-noshadow
**/
/*
Icon Spacing|Correction
Usage - span is required only if icon is present
Button Text
Button Text
*/
ul.list-icons > li > i,
.btn:not(.rounded-circle) > i {
display: inline-block;
margin-right: 10px;
}
/*
using .group-icon
or icon is placed last one
*/
.btn > span + .group-icon,
.btn > .group-icon + span,
.btn:not(.rounded-circle) > span + i {
display: inline-block;
margin-left: 10px;
margin-right: 0;
}
.btn + .btn {
margin-left: 0.5rem;
}
/*
Modal & Alert Close Buttons
*/
button.close .fi {
font-size: 18px;
}
/*
Soft buttons
.btn-soft - transition to original button color
.btn-soft-static - no transition, keep same color
*/
.btn-soft-static.btn-primary:not([aria-expanded=true]):not(.active),
.btn-soft.btn-primary:not(:hover):not([aria-expanded=true]):not(.active) {
color: #0d5bdd;
border-color: #ebf2fe;
background-color: #ebf2fe;
}
.btn-soft-static.btn-secondary:not([aria-expanded=true]):not(.active),
.btn-soft.btn-secondary:not(:hover):not([aria-expanded=true]):not(.active) {
color: #494f54;
border-color: #f0f2f2;
background-color: #f0f2f2;
}
.btn-soft-static.btn-success:not([aria-expanded=true]):not(.active),
.btn-soft.btn-success:not(:hover):not([aria-expanded=true]):not(.active) {
color: #4a7e20;
border-color: #def3cf;
background-color: #def3cf;
}
.btn-soft-static.btn-info:not([aria-expanded=true]):not(.active),
.btn-soft.btn-info:not(:hover):not([aria-expanded=true]):not(.active) {
color: #2bdbf3;
border-color: #bbf3fb;
background-color: #bbf3fb;
}
.btn-soft-static.btn-warning:not([aria-expanded=true]):not(.active),
.btn-soft.btn-warning:not(:hover):not([aria-expanded=true]):not(.active) {
color: #f7c12c;
border-color: #fdedc0;
background-color: #fdedc0;
}
.btn-soft-static.btn-danger:not([aria-expanded=true]):not(.active),
.btn-soft.btn-danger:not(:hover):not([aria-expanded=true]):not(.active) {
color: #ec0c24;
border-color: #fee4e7;
background-color: #fee4e7;
}
.btn-soft-static.btn-light:not([aria-expanded=true]):not(.active),
.btn-soft.btn-light:not(:hover):not([aria-expanded=true]):not(.active) {
color: #cbd3da;
border-color: white;
background-color: white;
}
.btn-soft-static.btn-dark:not([aria-expanded=true]):not(.active),
.btn-soft.btn-dark:not(:hover):not([aria-expanded=true]):not(.active) {
color: #080808;
border-color: #c4c4c4;
background-color: #c4c4c4;
}
.btn-soft-static.btn-indigo:not([aria-expanded=true]):not(.active),
.btn-soft.btn-indigo:not(:hover):not([aria-expanded=true]):not(.active) {
color: #311bb6;
border-color: #efedfc;
background-color: #efedfc;
}
.btn-soft-static.btn-purple:not([aria-expanded=true]):not(.active),
.btn-soft.btn-purple:not(:hover):not([aria-expanded=true]):not(.active) {
color: #2d1a57;
border-color: #b6a2e3;
background-color: #b6a2e3;
}
.btn-soft-static.btn-pink:not([aria-expanded=true]):not(.active),
.btn-soft.btn-pink:not(:hover):not([aria-expanded=true]):not(.active) {
color: #c7055f;
border-color: #fdabd1;
background-color: #fdabd1;
}
/*
Shadowed buttons
* cancel hover shadow by adding .btn-noshadow -or- .shadow-none
*/
.btn-primary:not(.btn-noshadow):hover,
.btn-primary:not(.btn-noshadow):not(.btn-soft):focus,
.btn-primary:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(66, 133, 244, 0.35);
}
.btn-secondary:not(.btn-noshadow):hover,
.btn-secondary:not(.btn-noshadow):not(.btn-soft):focus,
.btn-secondary:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(108, 117, 125, 0.35);
}
.btn-success:not(.btn-noshadow):hover,
.btn-success:not(.btn-noshadow):not(.btn-soft):focus,
.btn-success:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(109, 187, 48, 0.35);
}
.btn-info:not(.btn-noshadow):hover,
.btn-info:not(.btn-noshadow):not(.btn-soft):focus,
.btn-info:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(115, 231, 247, 0.35);
}
.btn-warning:not(.btn-noshadow):hover,
.btn-warning:not(.btn-noshadow):not(.btn-soft):focus,
.btn-warning:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(250, 215, 118, 0.35);
}
.btn-danger:not(.btn-noshadow):hover,
.btn-danger:not(.btn-noshadow):not(.btn-soft):focus,
.btn-danger:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(246, 78, 96, 0.35);
}
.btn-light:not(.btn-noshadow):hover,
.btn-light:not(.btn-noshadow):not(.btn-soft):focus,
.btn-light:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(248, 249, 250, 0.35);
}
.btn-dark:not(.btn-noshadow):hover,
.btn-dark:not(.btn-noshadow):not(.btn-soft):focus,
.btn-dark:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(46, 46, 46, 0.35);
}
.btn-indigo:not(.btn-noshadow):hover,
.btn-indigo:not(.btn-noshadow):not(.btn-soft):focus,
.btn-indigo:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(83, 59, 226, 0.35);
}
.btn-purple:not(.btn-noshadow):hover,
.btn-purple:not(.btn-noshadow):not(.btn-soft):focus,
.btn-purple:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(76, 44, 146, 0.35);
}
.btn-pink:not(.btn-noshadow):hover,
.btn-pink:not(.btn-noshadow):not(.btn-soft):focus,
.btn-pink:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(249, 32, 132, 0.35);
}
/*
Vendor buttons
* cancel hover shadow by adding .btn-noshadow
*/
.btn-facebook,
.btn-facebook:hover {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active {
box-shadow: 0 4px 11px rgba(59, 89, 152, 0.35);
}
.btn-twitter,
.btn-twitter:hover {
color: #fff;
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active {
box-shadow: 0 4px 11px rgba(29, 161, 242, 0.35);
}
.btn-gplus,
.btn-gplus:hover {
color: #fff;
background-color: #dd4b39;
border-color: #dd4b39;
}
.btn-gplus:hover,
.btn-gplus:focus,
.btn-gplus:active {
box-shadow: 0 4px 11px rgba(221, 75, 57, 0.35);
}
.btn-instagram,
.btn-instagram:hover {
color: #fff;
background-color: #3f729b;
border-color: #3f729b;
}
.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
box-shadow: 0 4px 11px rgba(63, 114, 155, 0.35);
}
.btn-linkedin,
.btn-linkedin:hover {
color: #fff;
background-color: #007bb6;
border-color: #007bb6;
}
.btn-linkedin:hover,
.btn-linkedin:focus,
.btn-linkedin:active {
box-shadow: 0 4px 11px rgba(0, 123, 182, 0.35);
}
.btn-vimeo,
.btn-vimeo:hover {
color: #fff;
background-color: #aad450;
border-color: #aad450;
}
.btn-vimeo:hover,
.btn-vimeo:focus,
.btn-vimeo:active {
box-shadow: 0 4px 11px rgba(170, 212, 80, 0.35);
}
.btn-youtube,
.btn-youtube:hover {
color: #fff;
background-color: #bb0000;
border-color: #bb0000;
}
.btn-youtube:hover,
.btn-youtube:focus,
.btn-youtube:active {
box-shadow: 0 4px 11px rgba(187, 0, 0, 0.35);
}
.btn-github,
.btn-github:hover {
color: #fff;
background-color: #24292e;
border-color: #24292e;
}
.btn-github:hover,
.btn-github:focus,
.btn-github:active {
box-shadow: 0 4px 11px rgba(36, 41, 46, 0.35);
}
.btn-snapchat,
.btn-snapchat:hover {
color: #fff;
background-color: #FFFC00;
border-color: #FFFC00;
}
.btn-snapchat:hover,
.btn-snapchat:focus,
.btn-snapchat:active {
box-shadow: 0 4px 11px rgba(255, 252, 0, 0.35);
}
.btn-email,
.btn-email:hover {
color: #fff;
background-color: #049fb3;
border-color: #049fb3;
}
.btn-email:hover,
.btn-email:focus,
.btn-email:active {
box-shadow: 0 4px 11px rgba(4, 159, 179, 0.35);
}
/*
Pill buttons
Also, we have .rounded-bill in bootstrap
*/
.btn-pill {
border-radius: 50rem;
}
/*
Icon buttons
*/
/* no rounded - fixed paddings */
.btn.btn-icon {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* rounded */
.btn.rounded-circle {
position: relative;
line-height: 1.6;
padding: 1.53rem 1.53rem;
font-size: 1.0625rem;
text-align: center;
}
.btn.btn-sm.rounded-circle,
.btn-group-sm > .btn.rounded-circle {
padding: 1.22rem 1.22rem;
font-size: 1.0625rem;
width: 1.94rem;
height: 1.94rem;
}
.btn.btn-lg.rounded-circle,
.btn-group-lg > .btn.rounded-circle {
padding: 1.83rem 1.83rem;
font-size: 1.0625rem;
width: 3.125rem;
height: 3.125rem;
}
.btn.rounded-circle > span:not(.badge),
.btn.rounded-circle > i {
font-size: 1rem !important;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%);
}
@media only screen and (max-width: 991px) {
/*
Example usage case
Projects
*/
.btn.rounded-circle-xs {
position: relative;
line-height: 1.6;
padding: 1.53rem 1.53rem;
font-size: 1.0625rem;
text-align: center;
}
.btn.btn-sm.rounded-circle-xs,
.btn-group-sm > .btn.rounded-circle-xs {
padding: 1.22rem 1.22rem;
font-size: 1.0625rem;
width: 1.94rem;
height: 1.94rem;
}
.btn.btn-lg.rounded-circle-xs,
.btn-group-lg > .btn.rounded-circle-xs {
padding: 1.83rem 1.83rem;
font-size: 1.0625rem;
width: 3.125rem;
height: 3.125rem;
}
.btn.rounded-circle-xs > span,
.btn.rounded-circle-xs > i {
font-size: 1rem !important;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%);
}
/* hide button text, keep the icon only (or group icon) */
.btn.rounded-circle-xs > .group-icon {
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.btn.rounded-circle-xs > span + span,
.btn.rounded-circle-xs > i + span {
display: none;
}
}
/*
Toggle Button
*/
.group-icon > span,
.group-icon > i {
font-style: normal;
}
/* by javascript */
.group-icon > span:last-child,
.group-icon > i:last-child {
display: none;
}
.group-icon > span:first-child,
.group-icon > i:first-child {
display: inline-block;
}
/* active */
.active > a > .group-icon > span:last-child,
.active > a > .group-icon > i:last-child,
.active > .group-icon > span:last-child,
.active > .group-icon > i:last-child {
display: inline-block;
}
.active > a > .group-icon > span:first-child,
.active > a > .group-icon > i:first-child,
.active > .group-icon > span:first-child,
.active > .group-icon > i:first-child {
display: none;
}
/* by bootstrap (dropdowns, collapse, etc) */
[aria-expanded=true] .group-icon > span:first-child,
[aria-expanded=true] .group-icon > i:first-child {
display: none;
}
[aria-expanded=true] .group-icon > span:last-child,
[aria-expanded=true] .group-icon > i:last-child {
display: inline-block;
}
/*
Burger menu button
*/
.burger-menu {
display: block;
border-top: #343a40 2px solid;
position: relative;
width: 100%;
height: 100%;
transition: all 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
}
.burger-menu:before {
content: "";
display: block;
position: absolute;
width: 75%;
top: 50%;
margin-top: -2px;
height: 1px;
border-top: #343a40 2px solid;
transition: all 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
}
.burger-menu:after {
content: "";
display: block;
position: absolute;
width: 25%;
bottom: 0;
height: 1px;
border-bottom: #343a40 2px solid;
transition: all 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
}
.start-0 .burger-menu:before,
.start-0 .burger-menu:after {
left: 0;
}
.end-0 .burger-menu:before,
.end-0 .burger-menu:after {
right: 0;
}
a.btn-burger-menu:not(.bg-white) .burger-menu,
a.btn-burger-menu:not(.bg-white) .burger-menu:before,
a.btn-burger-menu:not(.bg-white) .burger-menu:after {
border-color: #fff;
}
a.btn-burger-menu:hover .burger-menu:before,
a.btn-burger-menu:hover .burger-menu:after,
a.btn-burger-menu[aria-expanded=true] .burger-menu:before,
a.btn-burger-menu[aria-expanded=true] .burger-menu:after,
a.btn-burger-menu.active:hover .burger-menu:before,
a.btn-burger-menu.active:hover .burger-menu:after {
width: 100%;
}
.breadcrumb-sublime a {
color: #b2b6c3;
text-decoration: none;
transition: all 0.3s;
}
.breadcrumb-sublime a:hover {
color: inherit;
}
.breadcrumb-sublime .breadcrumb-item.active {
color: #b2b6c3;
}
@media (max-width: 575.98px) {
.card-columns {
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.card-columns {
-moz-column-count: 3;
column-count: 3;
}
}
@media (min-width: 1200px) {
.card-columns {
-moz-column-count: 4;
column-count: 4;
}
}
/*
Soft badges
.badge-soft
*/
.badge-soft.badge-primary {
color: #0d5bdd;
background-color: #ebf2fe;
}
.bg-primary-soft .badge-soft.badge-primary {
background-color: #d3e2fc;
}
.badge-soft.badge-secondary {
color: #494f54;
background-color: #f0f2f2;
}
.bg-secondary-soft .badge-soft.badge-secondary {
background-color: #e3e5e7;
}
.badge-soft.badge-success {
color: #4a7e20;
background-color: #def3cf;
}
.bg-success-soft .badge-soft.badge-success {
background-color: #d1edba;
}
.badge-soft.badge-info {
color: #2bdbf3;
background-color: #bbf3fb;
}
.bg-info-soft .badge-soft.badge-info {
background-color: #a3effa;
}
.badge-soft.badge-warning {
color: #f7c12c;
background-color: #fdedc0;
}
.bg-warning-soft .badge-soft.badge-warning {
background-color: #fce5a7;
}
.badge-soft.badge-danger {
color: #ec0c24;
background-color: #fee4e7;
}
.bg-danger-soft .badge-soft.badge-danger {
background-color: #fcccd1;
}
.badge-soft.badge-light {
color: #cbd3da;
background-color: white;
}
.bg-light-soft .badge-soft.badge-light {
background-color: white;
}
.badge-soft.badge-dark {
color: #080808;
background-color: #c4c4c4;
}
.bg-dark-soft .badge-soft.badge-dark {
background-color: #b8b8b8;
}
.badge-soft.badge-indigo {
color: #311bb6;
background-color: #efedfc;
}
.bg-indigo-soft .badge-soft.badge-indigo {
background-color: #dbd6f9;
}
.badge-soft.badge-purple {
color: #2d1a57;
background-color: #b6a2e3;
}
.bg-purple-soft .badge-soft.badge-purple {
background-color: #a78edd;
}
.badge-soft.badge-pink {
color: #c7055f;
background-color: #fdabd1;
}
.bg-pink-soft .badge-soft.badge-pink {
background-color: #fc92c3;
}
.badge-ico,
.badge-ico-sm,
.badge-ico-md {
display: flex;
align-items: center;
justify-content: center;
}
.badge-ico-sm {
width: 25px;
height: 25px;
}
.badge-ico,
.badge-ico-md {
width: 35px;
height: 35px;
font-size: 16px;
}
/* icon fix */
.badge-ico-sm > i,
.badge-ico-md > i {
display: inline-block;
}
.badge-ico-sm > i:before {
padding-top: 0;
}
/*
DROPDOWN : GENERAL SETUP
--
Bootstrap is "missing" nested|multilevel dropdowns and opening them on mouse over!
So, instead of developing new plugins reinventing the weel (more code, more issues),
we use dropdowns for almost everything!
++++++++++++++++++++++
NOTE: many rules are splitted on desktop/mobile for specific functions/fixes
So also check the bottom @media before making changes!
++++++++++++++++++++++
*/
/* animation on hover, also on mobile (collapsing) */
.dropdown-menu {
-webkit-animation: fadeIn 0.6s;
animation: fadeIn 0.6s;
font-size: 16px;
text-align: left;
}
/* box shadow */
/*.dropdown-menu:not(.shadow-none) {*/
.dropdown-menu {
box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175);
}
/* force disabled link */
.dropdown-link.disabled {
color: #6c757d !important;
pointer-events: none;
}
/*
default dropdown link
hovers : see @media on bottom
*/
.dropdown-link {
color: #212529;
}
.active > .dropdown-link,
.dropdown-link.active {
color: #4285F4;
background-color: #f8f9fa;
}
/* dropdown header */
.dropdown-header {
font-size: 1.0625rem;
}
/* dropdown footer */
.dropdown-footer {
padding: 10px 15px;
position: relative;
display: block;
}
a.dropdown-footer,
.dropdown-footer {
text-decoration: none;
}
a.dropdown-footer:not(:hover),
.dropdown-footer > a:not(:hover) {
color: #212529;
}
/* dropdown item */
.dropdown-menu .dropdown-item {
padding: 0;
margin: 0;
}
/* keep icons in place */
a.dropdown-item {
position: relative;
}
/*
highlighted/active color
hovers : see @media
*/
.dropdown-menu .dropdown-item.show > a {
color: #4285F4;
}
.dropdown-menu li:not(.dropdown-item) > a,
.dropdown-menu a.dropdown-item,
.dropdown-menu .dropdown-item > a {
display: block;
position: relative;
padding: 8px 40px 8px 25px;
transition: all 0.3s ease;
}
.dropdown-menu a:not([data-toggle=dropdown]) {
padding-right: 15px;
}
.dropdown-item .row ul:not(.prefix-link-icon) .dropdown-link {
padding-left: 8px;
padding-right: 8px;
}
/* icons positioning for a nice default look */
.dropdown-menu a.dropdown-item > i,
.dropdown-menu li:not(.dropdown-item) > a > i,
.dropdown-menu .dropdown-item > a > i {
margin-right: 15px;
}
/*
DROPDOWN : UPPERCASE FORCED
also font scaled down to avoid too large looking
*/
.dropdown-menu.dropdown-menu-uppercase a {
text-transform: uppercase;
font-size: 13px;
}
/*
DROPDOWN : CLEAN
no background color on hover
*/
.dropdown-menu-clean li.active > a:not(.btn),
.dropdown-menu-clean li.active,
.dropdown-menu-clean a:not(.btn).active,
.dropdown-menu-clean li:focus,
.dropdown-menu-clean li:hover,
.dropdown-menu-clean a:not(.btn):focus,
.dropdown-menu-clean a:not(.btn):hover {
background-color: transparent !important;
text-decoration: none;
}
.dropdown-menu-clean:not(.prefix-link-icon) a:not(.btn):hover {
color: #4285F4;
}
/*
DROPDOWN : INVERT
open in oposite direction
*/
.dropdown-menu.dropdown-menu-invert {
left: auto;
right: 0;
}
/*
DROPDOWN : NESTED POSITIONING
again, bootstrap was not developed for this
*/
.dropdown-menu li > .dropdown-menu {
top: 0 !important;
left: 100% !important;
right: auto !important;
}
/* deep level icon indicator */
.dropdown-menu:not(.dropdown-menu-invert) li > a[data-toggle=dropdown]:after {
font-family: "Flaticon";
opacity: 0.35;
opacity: all 0.3s ease;
transition: all 0.2s ease;
top: 50%;
margin-top: -6px;
font-size: 12px;
line-height: 1;
position: absolute;
content: "\F1AE";
right: 15px;
}
.dropdown-menu:not(.dropdown-menu-invert) .dropdown-item.show > a:after,
.dropdown-menu:not(.dropdown-menu-invert) .dropdown-item:hover > a:after {
opacity: 1;
}
/* turn down icon */
@media only screen and (max-width: 991px) {
/*
deep links indicator
turn icon down on active
*/
.dropdown-menu:not(.dropdown-menu-invert) .dropdown-item.show > a:after {
transform: rotate(90deg);
}
}
/*
DROPDOWN : MEGA
Dropdown links inside mega menu
Links are formatted for dropdown.
We make them fit inside mega menu
NOTE: Use
instead of for mega dropdowns
REASON: avoiding grid collisions
*/
.dropdown-mega .row ul:not(.dropdown-menu) {
padding: 0;
margin-left: 0px;
margin-right: 0;
}
.dropdown-mega .row ul:not(.dropdown-menu) .dropdown-divider {
margin-top: 1px;
margin-bottom: 1px;
margin-left: 0px;
}
/*
PREFIX ICON|INDICATOR
Add to .dropdown-menu following classes:
.prefix-link-icon .prefix-icon-dot - link prefix
.prefix-link-icon .prefix-icon-line - link prefix
.prefix-link-icon .prefix-icon-ico - link prefix
.prefix-link-icon .prefix-icon-arrow - link prefix
.prefix-icon-ignore - ignore, do not use on a specific link
*/
/* dropdown header */
.prefix-link-icon .dropdown-header {
padding: 10px 15px;
}
a.prefix-link-icon:not(.prefix-icon-ico):not(.prefix-icon-ignore),
.prefix-link-icon:not(.prefix-icon-ico) a:not(.prefix-icon-ignore) {
padding-left: 40px !important;
padding-right: 25px !important;
}
/* setup */
a.prefix-link-icon:not(.prefix-icon-ignore):before,
.prefix-link-icon a:not(.prefix-icon-ignore):before {
content: "";
color: #e9ecef;
background-color: #e9ecef;
transition: all 0.2s ease;
position: absolute;
top: 50%;
left: 20px;
}
/* dot */
a.prefix-icon-dot:not(.prefix-icon-ignore):before,
.prefix-icon-dot a:not(.prefix-icon-ignore):before {
border-radius: 100%;
width: 4px;
height: 4px;
margin-top: -2px;
left: 22px;
}
/* line */
a.prefix-icon-line:not(.prefix-icon-ignore):before,
.prefix-icon-line a:not(.prefix-icon-ignore):before {
width: 10px;
height: 1px;
margin-top: -1px;
left: 19px;
}
/* square */
a.prefix-icon-square:not(.prefix-icon-ignore):before,
.prefix-icon-square a:not(.prefix-icon-ignore):before {
width: 4px;
height: 4px;
margin-top: -3px;
left: 21px;
}
/* arrow */
a.prefix-icon-arrow:not(.prefix-icon-ignore):before,
.prefix-icon-arrow a:not(.prefix-icon-ignore):before {
width: 12px;
height: 12px;
font-size: 12px;
margin-top: -6px;
line-height: 1;
font-family: "Flaticon";
background-color: transparent;
content: "\F1AE";
left: 19px;
}
/* hover color */
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item.show:not(.prefix-icon-ignore):before,
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item.show > a:not(.prefix-icon-ignore):before,
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item.active:not(.prefix-icon-ignore):before,
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item.active > a:not(.prefix-icon-ignore):before,
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item:hover:not(.prefix-icon-ignore):before,
.prefix-link-icon:not(.prefix-icon-arrow) .dropdown-item:hover > a:not(.prefix-icon-ignore):before {
background-color: #4285F4 !important;
}
.prefix-link-icon.prefix-icon-arrow .dropdown-item.show:not(.prefix-icon-ignore):before,
.prefix-link-icon.prefix-icon-arrow .dropdown-item.show > a:not(.prefix-icon-ignore):before,
.prefix-link-icon.prefix-icon-arrow .dropdown-item.active:not(.prefix-icon-ignore):before,
.prefix-link-icon.prefix-icon-arrow .dropdown-item.active > a:not(.prefix-icon-ignore):before,
.prefix-link-icon.prefix-icon-arrow .dropdown-item:hover:not(.prefix-icon-ignore):before,
.prefix-link-icon.prefix-icon-arrow .dropdown-item:hover > a:not(.prefix-icon-ignore):before {
color: #4285F4 !important;
}
/* desktop only */
@media only screen and (min-width: 991px) {
/* keep link highlighted on hover */
.dropdown-menu .dropdown-item:hover > a {
color: #4285F4;
text-decoration: none;
}
.dropdown-link:hover {
color: #4285F4;
background-color: #f8f9fa;
}
/* show on mouse over */
[data-toggle=dropdown] + .dropdown-menu-hover {
margin-top: 0 !important;
/* the margin will cause the dropdown close on mouse over the "space" area */
}
[data-toggle=dropdown]:hover + .dropdown-menu-hover,
[data-toggle=dropdown]:hover ~ .dropdown-menu-hover,
.dropdown-menu-hover:hover,
.dropdown-menu-hover + .dropdown-menu:hover,
.dropdown-menu-hover:hover + .dropdown-menu {
display: block;
}
/*
Dropdown mega menu / full width
*/
.dropdown-mega > .dropdown-menu {
/* first level only */
width: 100%;
max-width: 100%;
left: 0;
right: 0;
padding: 25px;
}
/*
DROPDOWN : DARK
*/
.dropdown-menu-dark,
.dropdown-menu-dark .dropdown-menu {
color: #fff;
background-color: #333333;
}
/* links */
.dropdown-menu-dark a {
color: #cccccc !important;
}
.dropdown-menu-dark a.dropdown-item:hover,
.dropdown-menu-dark a.dropdown-item.active,
.dropdown-menu-dark .dropdown-item:hover > a,
.dropdown-menu-dark .dropdown-item.active > a,
.dropdown-menu-dark .dropdown-item > a.active,
.dropdown-menu-dark a:hover {
color: #fff !important;
}
/* grid */
.dropdown-menu-dark .dropdown-divider,
.dropdown-menu-dark .row.col-border > div,
.dropdown-menu-dark .row.col-border-sm > div,
.dropdown-menu-dark .row.col-border-md > div,
.dropdown-menu-dark .row.col-border-lg > div {
border-color: #4d4d4d;
}
/* multilevel dropdown inside content : multilevel click issue : [hack|overwriting popper.js] */
.dropdown-menu-block-md .dropdown-item > .dropdown-menu {
transform: none !important;
}
}
/* mobile only */
@media only screen and (max-width: 991px) {
/*
default dropdown link
do not keep it active on second click
*/
a.dropdown-link:hover {
color: inherit;
}
/*
Dropdown mega menu / full width
*/
/* links inside mega menu */
.dropdown-mega .row {
margin-left: 0;
}
.dropdown-mega .row > div:not(:last-child) {
margin-bottom: 30px;
}
/* multilevel dropdown inside content */
.dropdown-menu-block-md .dropdown-item > .dropdown-menu {
position: relative !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
/* parent fit */
background-color: rgba(0, 0, 0, 0.02) !important;
box-shadow: none !important;
border-radius: 0;
}
/* fix position of dropdown on navbar */
.dropdown-menu-navbar-autopos {
position: fixed;
bottom: auto;
top: auto;
margin-left: 8px;
margin-right: 8px;
}
}
table.table-align-middle td,
table.table-align-middle th {
vertical-align: middle;
}
/* checkbox */
table label.form-checkbox,
table label.form-radio {
width: 20px !important;
height: 20px !important;
margin: 0;
padding: 0;
}
table label.form-checkbox > i,
table label.form-radio > i {
margin-right: 0;
margin-left: 0;
}
table thead th label.form-checkbox,
table thead th label.form-radio,
table tfoot th label.form-checkbox,
table tfoot th label.form-radio {
margin-top: 3px;
}
/* setup */
.table:not(.table-framed):not(.table-bordered) thead > tr > th {
border-top-width: 0;
}
.table thead > tr > th {
border-bottom-width: 1px;
}
.table-framed tfoot th {
border-bottom: #eaf0f5 1px solid;
}
/* large */
.table-lg tr > th,
.table-lg tr > td {
padding: 1.5rem 2rem;
}
/* stripped table */
table.table-striped th,
table.table-striped td {
border: 0;
}
/*
Tabs : bordered;
*/
.nav-tabs-border-top,
.nav-tabs-border-bottom {
border: 0;
}
.nav-tabs-border-top .nav-item:not(:last-child),
.nav-tabs-border-bottom .nav-item:not(:last-child) {
margin-right: 15px;
}
.nav-tabs-border-top .nav-link,
.nav-tabs-border-bottom .nav-link {
border: 0;
border-radius: 0;
padding-left: 3px;
padding-right: 3px;
}
.nav-tabs-border-top .nav-link.active {
border-top: #4285F4 1px solid !important;
}
.nav-tabs-border-bottom .nav-link.active {
border-bottom: #4285F4 1px solid !important;
}
.nav-pills .nav-link.btn:not(.active) {
background: #fff !important;
color: #6c757d !important;
}
/**
SIDEBAR
Dropped .aside-left & .aside-right
.aside-start = left on LTR
.aside-start = right on RTL
.aside-end = right on LTR
.aside-end = left on RTL
Header : match sidebar background color
#header.header-match-aside-primary
#header.header-match-aside-secondary
**/
aside {
font-size: 16px;
position: relative;
flex-shrink: 0;
/** DO NOT SET z-index HERE : MOBILE ONLY * ASIDE STICKY **/
}
aside.aside-start,
aside.aside-end {
transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
height: 100%;
}
.aside-width,
body:not(.aside-compact) aside.aside-start,
body:not(.aside-compact) aside.aside-end {
width: 260px;
}
body.aside-compact aside.aside-start,
body.aside-compact aside.aside-end {
width: 140px;
}
aside.aside-start {
left: 0;
right: auto;
}
aside.aside-end {
left: auto;
right: 0;
}
/* sidebar (also used by admin) */
.aside-secondary {
color: #121212;
background-color: #ffffff;
}
.aside-secondary .text-aside {
color: #4285F4;
}
.aside-primary {
color: #dddddd;
background: #1e1e2d;
background: linear-gradient(to bottom, #2e2e45 0%, #1e1e2d 100%) !important;
}
.aside-primary .text-aside {
color: #ffffff;
}
.bg-aside {
background-color: #1e1e2d;
}
/*
Nav Item
Paddings
orig: .5rem 1rem
*/
aside .nav-deep > ul > li.nav-title,
aside .nav-deep > ul > li > a.nav-link {
padding: 0.8rem 1rem;
}
aside .nav-deep.nav-deep-lg > ul > li.nav-title,
aside .nav-deep.nav-deep-lg > ul > li > a.nav-link {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
aside .nav-deep.nav-deep-lg > ul > li li.nav-title,
aside .nav-deep.nav-deep-lg > ul > li ul > li > a {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
aside .nav-deep.nav-deep-sm > ul > li.nav-title,
aside .nav-deep.nav-deep-sm > ul > li > a.nav-link {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
aside .nav-deep.nav-deep-sm > ul > li li.nav-title,
aside .nav-deep.nav-deep-sm > ul > li ul > li > a {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
aside .nav-deep.nav-deep-xs > ul > li.nav-title,
aside .nav-deep.nav-deep-xs > ul > li > a.nav-link {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
aside .nav-deep.nav-deep-xs > ul > li li.nav-title,
aside .nav-deep.nav-deep-xs > ul > li ul > li > a {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
/*
hover & active background color
overwrite _navigations.scss
*/
.aside-secondary nav.nav-deep-hover > ul > li.nav-item:hover,
.aside-secondary nav.nav-deep-hover > ul > li.nav-item.active {
background-color: #f5f6fc !important;
}
.aside-primary nav.nav-deep-hover > ul > li.nav-item:hover,
.aside-primary nav.nav-deep-hover > ul > li.nav-item.active {
background-color: #31314a !important;
}
/*
disabled links
*/
.aside-secondary a.disabled {
color: #929292 !important;
}
.aside-primary a.disabled {
color: #919191 !important;
}
/*
spacings
*/
/*
EXTENDED NAV
Like a secondary sidebar
*/
aside .nav-item.nav-item-extended > div.aside-item {
position: fixed;
top: 95px;
bottom: 15px;
font-size: 1.0625rem;
overflow: hidden;
color: #121212;
min-width: 260px;
max-width: calc(100vw - 15px - 260px);
background-color: rgba(0, 0, 0, 0.05);
border-radius: 0.25rem;
left: 260px;
border-left: 0;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* hide : is inactive */
aside .nav-item.nav-item-extended:not(.active) > div.aside-item {
display: none !important;
}
/* overlay */
aside .nav-item.nav-item-extended:not(.active).overlay-light:after,
aside .nav-item.nav-item-extended:not(.active).overlay-dark:after {
display: none !important;
}
aside .nav-item.nav-item-extended.active.overlay-light:after,
aside .nav-item.nav-item-extended.active.overlay-dark:after {
position: fixed;
z-index: -1;
left: 260px;
right: 0;
}
/* fade in animation */
aside .nav-item.nav-item-extended.active > .aside-item {
-webkit-animation: __utilFadeIn 0.25s ease-out forwards;
animation: __utilFadeIn 0.25s ease-out forwards;
}
/*
Header : match sidebar
background color
*/
#header.header-match-aside-primary {
background: #1e1e2d;
background: linear-gradient(to bottom, #2e2e45 0%, #1e1e2d 100%) !important;
}
#header.header-match-aside-secondary {
background-color: #ffffff;
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/*
ASIDE : FOCUS
Push header
*/
body.aside-sticky aside {
position: fixed;
top: 0;
bottom: 0;
z-index: 11;
}
body:not(.aside-compact).layout-admin #footer {
padding-left: 260px;
}
body.aside-sticky:not(.aside-compact) #wrapper_content,
body.aside-sticky:not(.aside-compact) #header,
body.aside-sticky:not(.aside-compact) #js_header_spacer {
margin-left: 260px;
}
body.layout-admin.aside-compact #footer {
padding-left: 140px;
}
body.aside-sticky.aside-compact #wrapper_content,
body.aside-sticky.aside-compact #header,
body.aside-sticky.aside-compact #js_header_spacer {
margin-left: 140px;
}
/**
FRONTEND DEDICATED
**/
body.aside-start:not(.layout-boxed) #wrapper {
margin-left: 260px;
}
body.aside-end:not(.layout-boxed) #wrapper {
margin-right: 260px;
}
body.aside-start.header-fixed:not(.layout-boxed) #header,
body.aside-end.header-fixed:not(.layout-boxed) #header {
max-width: 100% !important;
width: auto !important;
}
/**
ASIDE FLOAT
**/
body.aside-float aside {
z-index: 11;
position: fixed;
top: 0;
bottom: 0;
}
body.aside-start.aside-sticky:not(.header-sticky) #header,
body.aside-float #header {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.aside-float:not(.aside-show) .aside-start:not(.js-aside-show) {
margin-left: -100%;
}
body.aside-float:not(.aside-show) .aside-end:not(.js-aside-show) {
margin-right: -100%;
}
}
@media only screen and (max-width: 991px) {
aside {
z-index: 11;
position: fixed !important;
top: 0;
bottom: 0;
}
/*
HIDE|SHOW
*/
aside:not(.js-aside-show).aside-start {
margin-left: -260px;
}
aside:not(.js-aside-show).aside-end {
margin-right: -260px;
}
/* extended */
aside:not(.js-aside-show).aside-start .nav-item-extended > div.aside-item {
left: -100%;
}
aside:not(.js-aside-show).aside-end .nav-item-extended > div.aside-item {
right: -100%;
}
/* extended - position forced */
aside .nav-item.nav-item-extended > div.aside-item {
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
border-radius: 0.25rem;
z-index: 9999;
}
}
/**
Fullscreen Element
**/
.fullscreen {
position: fixed !important;
left: 15px !important;
right: 15px !important;
top: 15px !important;
bottom: 15px !important;
margin: 0 !important;
background-color: #fff !important;
z-index: 1039 !important;
/* scrollable */
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: auto;
max-height: 100%;
-ms-box-shadow: 0px 0px 35px 19px rgba(0, 0, 0, 0.75) !important;
-o-box-shadow: 0px 0px 35px 19px rgba(0, 0, 0, 0.75) !important;
box-shadow: 0px 0px 35px 19px rgba(0, 0, 0, 0.75) !important;
}
/* show element on fullscreen only */
.fullscreen .fullscreen-show {
display: block !important;
}
/* hidden element on fullscreen only */
.fullscreen .fullscreen-hide {
display: hidden !important;
}
/**
Modals
**/
.modal-full {
max-width: 100%;
margin: 15px;
}
/**
PAGINATION : PILL
**/
.pagination-pill > .page-item:first-child > .page-link {
border-top-left-radius: 50rem;
border-bottom-left-radius: 50rem;
}
.pagination-pill > .page-item:last-child > .page-link {
border-top-right-radius: 50rem;
border-bottom-right-radius: 50rem;
}
/*
Thumbnail : Shadow drop
*/
.thumbnail-shadow-drop {
position: relative;
}
.thumbnail-shadow-drop:after {
position: absolute;
width: 56%;
height: 26%;
left: 20%;
border-radius: 50%;
z-index: 1;
bottom: 128px;
margin-bottom: 13%;
content: "";
box-shadow: 0 210px 60px rgba(0, 0, 0, 0.2);
transform: rotate(-10deg);
opacity: 0;
-webkit-animation: __utilFadeInSlow 2s ease;
animation: __utilFadeInSlow 2s ease;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.thumbnail-shadow-drop:before {
position: absolute;
width: 41%;
height: 25%;
left: 23%;
border-radius: 50%;
z-index: 0;
bottom: 25%;
margin-bottom: 0%;
content: "";
box-shadow: 0 194px 50px rgba(0, 0, 0, 0.3);
transform: rotate(-17deg);
opacity: 0;
-webkit-animation: __utilFadeInSlow 2s ease;
animation: __utilFadeInSlow 2s ease;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
@media only screen and (max-width: 768px) {
.thumbnail-shadow-drop:before {
bottom: 45%;
left: 18%;
}
}
/*
Timeline
*/
.timeline-container > div,
.timeline-container {
position: relative;
}
.timeline-container:before {
content: "";
position: absolute;
width: 4px;
top: 7px;
bottom: 7px;
height: calc(100% - (4px + 3));
background-color: #e9ecef;
left: 100px;
}
.timeline-container i.badge {
width: 17px;
height: 17px;
border: transparent 4px solid;
display: inline-block;
position: absolute;
padding: 0;
top: 7px;
left: 93.5px;
}
.timeline-container i.badge:after {
content: "";
width: 25px;
height: 25px;
border: #fff 4px solid;
position: absolute;
z-index: 0;
border-radius: 50rem;
top: -8px;
left: -8px;
}
.timeline-container .timeline-content,
.timeline-container .timeline-title {
position: relative;
display: block;
padding-left: 24px;
margin-left: 100px;
border-left: transparent 4px solid;
}
/* invert */
.timeline-container.timeline-invert {
text-align: right;
}
.timeline-container.timeline-invert:before {
left: auto;
right: 100px;
}
.timeline-container.timeline-invert i.badge {
left: auto;
right: 93.5px;
}
.timeline-container.timeline-invert i.badge:after {
left: auto;
right: -8px;
}
.timeline-container.timeline-invert .timeline-content,
.timeline-container.timeline-invert .timeline-title {
padding-left: 0;
padding-right: 24px;
margin-left: 0;
margin-right: 100px;
border-left: 0;
border-right: transparent 4px solid;
}
/**
Shape : V
**/
.shape-v {
position: absolute;
height: 0px;
width: 100%;
left: 0;
right: 0;
z-index: 1;
}
.shape-v + section,
.shape-v + div {
z-index: 9;
}
.shape-v:after,
.shape-v:before {
position: absolute;
content: "";
background-color: #fff;
bottom: 0;
height: 100px;
margin-bottom: -100px;
z-index: 2;
}
.shape-v.bg-light:after,
.shape-v.bg-light:before {
background-color: #f8f9fa;
}
.shape-v:before {
left: 0;
width: 40%;
transform-origin: 100% 0;
transform: scaleX(2) scaleY(5) rotate(6deg);
}
.shape-v:after {
right: 0;
width: 60%;
transform-origin: 0 0;
transform: scaleX(2) scaleY(5) rotate(-8deg);
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/* Shape : V */
.shape-v.shape-xs:before {
transform: scaleX(2) scaleY(5) rotate(2deg);
}
.shape-v.shape-xs:after {
transform: scaleX(2) scaleY(5) rotate(-3deg);
}
}
/**
FORMS
1. Pill inputs/selects/textarea
2. Link over input/textarea
3. Switch
4. Radio
5. Checkbox
6. Select
7. Material Design Style
8. File Upload
9. Selectors
**/
/*
1. Pill Form
.form-tontrol-pill - used for each element or for the entire form
.input-group-pill - input group
*/
.form-control-pill,
.input-group-pill .input-group-append > span,
.input-group-pill .input-group-prepend > span,
.input-group-pill input,
.form-control-pill input,
.form-control-pill select,
.input-group-pill select,
.input-group-pill textarea,
.form-control-pill textarea,
.input-group-pill .btn,
.form-control-pill .btn {
border-radius: 50rem;
}
.input-group select {
border-radius: 0 !important;
}
/*
2. Link over input/textarea
*/
.input-group-over--absolute {
position: absolute;
top: 0;
right: 0;
}
.input-group-over {
position: relative;
}
.input-group-over > input,
.input-group-over > textarea {
padding-right: 60px;
}
.input-group-over > a,
.input-group-over > button,
.input-group-over > span {
font-size: 15px;
font-weight: 400;
text-decoration: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
/* a div, button, etc */
.el-over-input {
position: absolute !important;
top: 0;
z-index: 5 !important;
right: 0;
}
/*
3. Switch
*/
/* @toggle switch elements
-------------------------------------------------- */
.form-switch {
cursor: pointer;
position: relative;
display: inline-block;
min-height: 26px;
clear: both;
padding-left: 73px;
margin-right: 10px;
}
.m-0.form-switch,
.m--0.form-switch {
padding-left: 58px;
}
.form-switch > i {
cursor: pointer;
display: inline-block;
position: relative;
font-style: normal;
position: absolute;
left: 0;
float: left;
height: 25px;
width: 58px;
color: #fff;
font-size: 11px;
text-align: center;
background: #B5C1C7;
border: 0 solid #B5C1C7;
transition: 0.3s ease-out;
border-radius: 2px;
}
.form-switch > i:before {
content: attr(data-off);
position: absolute;
top: 3px;
width: 32px;
height: 19px;
line-height: 19px;
right: 3px;
}
.form-switch > i:after {
content: "";
margin: 3px;
width: 19px;
height: 19px;
display: block;
background: #fff;
border-radius: 2px;
}
.form-switch > input {
display: none !important;
}
.form-switch > input:focus + i {
color: #fff;
border-color: #a1a6a9;
background: #a1a6a9;
}
.form-switch > input:focus + i:after {
background: #fff;
}
/* @toggle switch normal state
--------------------------------------------------------------- */
.form-switch > input:checked + i {
border-color: #333;
background: #333;
color: #fff;
padding-left: 33px;
}
.form-switch.form-switch-primary > input:checked + i {
border-color: #4285F4;
background: #4285F4;
}
.form-switch.form-switch-secondary > input:checked + i {
border-color: #6c757d;
background: #6c757d;
}
.form-switch.form-switch-success > input:checked + i {
border-color: #6dbb30;
background: #6dbb30;
}
.form-switch.form-switch-info > input:checked + i {
border-color: #73e7f7;
background: #73e7f7;
}
.form-switch.form-switch-warning > input:checked + i {
border-color: #fad776;
background: #fad776;
}
.form-switch.form-switch-danger > input:checked + i {
border-color: #f64e60;
background: #f64e60;
}
.form-switch.form-switch-light > input:checked + i {
border-color: #f8f9fa;
background: #f8f9fa;
}
.form-switch.form-switch-dark > input:checked + i {
border-color: #2E2E2E;
background: #2E2E2E;
}
.form-switch.form-switch-indigo > input:checked + i {
border-color: #533be2;
background: #533be2;
}
.form-switch.form-switch-purple > input:checked + i {
border-color: #4c2c92;
background: #4c2c92;
}
.form-switch.form-switch-pink > input:checked + i {
border-color: #f92084;
background: #f92084;
}
.form-switch > input:checked + i:before {
content: attr(data-on);
top: 3px;
height: 19px;
line-height: 19px;
color: #fff;
font-family: "Zapf Dingbats", "font-regular", sans-serif;
/* mobile fix - because some characters like "✔" are emoji rewritten by vedors (apple/android/etc) */
left: 1px;
}
/* @toggle switch normal state focus
--------------------------------------------------------------------------------- */
.form-switch-pill > i {
border-radius: 13px;
}
.form-switch-pill > i:before {
width: 29px;
}
.form-switch-pill > i:after {
width: 19px;
height: 19px;
color: #B5C1C7;
content: "\2022";
font: 20px/20px Times, Serif;
border-radius: 13px;
line-height: 19px;
}
.form-switch-pill > input:checked + i {
padding-left: 33px;
}
.form-switch-pill > input:checked + i:after {
color: #333;
}
/* disabled */
.form-switch input[disabled] + i {
border-color: #e9ecef !important;
background: #e9ecef !important;
}
/*
4. Radio
*/
.form-radio {
position: relative;
cursor: pointer;
line-height: 1.3;
padding-left: 30px;
padding-right: 15px;
}
a.form-radio {
text-decoration: none;
color: #212529;
}
.form-radio > input[type=radio] {
display: none;
}
.form-radio > i {
position: absolute;
display: inline-block;
left: 0;
margin-right: 10px;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid rgba(0, 0, 0, 0.35);
cursor: pointer;
transition: background 0.3s;
border-radius: 50%;
}
.form-radio-inset {
margin: 2px 0 0 0;
padding: 0;
display: block;
width: 20px;
height: 20px;
overflow: hidden;
}
a.form-radio.active > i,
.form-radio > input[type=radio]:checked + i,
.form-radio.form-radio-dark > input[type=radio]:checked + i {
border: none;
background: #121212;
}
.form-radio-bordered > i,
.form-radio-bordered.form-radio-dark > i {
border: 2px solid #121212;
}
a.form-radio.form-radio-primary.active > i,
.form-radio.form-radio-primary > input[type=radio]:checked + i {
background: #4285F4;
}
.form-radio-bordered.form-radio-primary > i {
border: 2px solid #4285F4;
}
a.form-radio.form-radio-secondary.active > i,
.form-radio.form-radio-secondary > input[type=radio]:checked + i {
background: #6c757d;
}
.form-radio-bordered.form-radio-secondary > i {
border: 2px solid #6c757d;
}
a.form-radio.form-radio-success.active > i,
.form-radio.form-radio-success > input[type=radio]:checked + i {
background: #6dbb30;
}
.form-radio-bordered.form-radio-success > i {
border: 2px solid #6dbb30;
}
a.form-radio.form-radio-info.active > i,
.form-radio.form-radio-info > input[type=radio]:checked + i {
background: #73e7f7;
}
.form-radio-bordered.form-radio-info > i {
border: 2px solid #73e7f7;
}
a.form-radio.form-radio-warning.active > i,
.form-radio.form-radio-warning > input[type=radio]:checked + i {
background: #fad776;
}
.form-radio-bordered.form-radio-warning > i {
border: 2px solid #fad776;
}
a.form-radio.form-radio-danger.active > i,
.form-radio.form-radio-danger > input[type=radio]:checked + i {
background: #f64e60;
}
.form-radio-bordered.form-radio-danger > i {
border: 2px solid #f64e60;
}
a.form-radio.form-radio-light.active > i,
.form-radio.form-radio-light > input[type=radio]:checked + i {
background: #f8f9fa;
}
.form-radio-bordered.form-radio-light > i {
border: 2px solid #f8f9fa;
}
a.form-radio.form-radio-dark.active > i,
.form-radio.form-radio-dark > input[type=radio]:checked + i {
background: #2E2E2E;
}
.form-radio-bordered.form-radio-dark > i {
border: 2px solid #2E2E2E;
}
a.form-radio.form-radio-indigo.active > i,
.form-radio.form-radio-indigo > input[type=radio]:checked + i {
background: #533be2;
}
.form-radio-bordered.form-radio-indigo > i {
border: 2px solid #533be2;
}
a.form-radio.form-radio-purple.active > i,
.form-radio.form-radio-purple > input[type=radio]:checked + i {
background: #4c2c92;
}
.form-radio-bordered.form-radio-purple > i {
border: 2px solid #4c2c92;
}
a.form-radio.form-radio-pink.active > i,
.form-radio.form-radio-pink > input[type=radio]:checked + i {
background: #f92084;
}
.form-radio-bordered.form-radio-pink > i {
border: 2px solid #f92084;
}
.was-validated .form-radio > input[type=radio]:invalid ~ span,
.form-radio > input[type=radio].is-invalid ~ span {
color: #f64e60 !important;
}
a.form-radio.active > i:after,
.form-radio > input[type=radio]:checked + i:after {
position: absolute;
content: "";
width: 6px;
height: 6px;
top: calc(50% - 3px);
left: calc(50% - 3px);
background-color: #fff;
border-radius: 50%;
}
/* disabled */
a.form-radio.disabled > i,
.form-radio input[disabled] + i {
border-color: #e9ecef !important;
background: #e9ecef !important;
}
/*
5. Checkbox
*/
.form-checkbox {
position: relative;
cursor: pointer;
line-height: 1.3;
padding-left: 30px;
padding-right: 15px;
}
a.form-checkbox {
text-decoration: none;
color: #212529;
}
.form-checkbox > input[type=checkbox] {
display: none;
}
.form-checkbox > i {
position: absolute;
display: inline-block;
border-radius: 3px;
transition: 0.3s;
left: 0;
margin-right: 10px;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid rgba(0, 0, 0, 0.35);
cursor: pointer;
}
.was-validated .form-checkbox > input[type=checkbox]:invalid ~ span,
.form-checkbox > input[type=checkbox].is-invalid ~ span {
color: #f64e60 !important;
}
a.form-checkbox.active > i,
.form-checkbox > input[type=checkbox]:checked + i {
background: #4285F4;
border: none;
}
.form-checkbox-inset {
margin: 0;
padding: 0;
display: block;
width: 20px;
height: 20px;
overflow: hidden;
}
a.form-checkbox.active > i,
.form-checkbox > input[type=checkbox]:checked + i,
.form-checkbox.form-checkbox-dark > input[type=checkbox]:checked + i {
border: none;
background: #121212;
}
.form-checkbox-bordered > i,
.form-checkbox-bordered.form-checkbox-dark > i {
border: 2px solid #121212;
}
a.form-checkbox.form-checkbox-primary.active > i,
.form-checkbox.form-checkbox-primary > input[type=checkbox]:checked + i {
background: #4285F4;
}
.form-checkbox-bordered.form-checkbox-primary > i {
border: 2px solid #4285F4;
}
a.form-checkbox.form-checkbox-secondary.active > i,
.form-checkbox.form-checkbox-secondary > input[type=checkbox]:checked + i {
background: #6c757d;
}
.form-checkbox-bordered.form-checkbox-secondary > i {
border: 2px solid #6c757d;
}
a.form-checkbox.form-checkbox-success.active > i,
.form-checkbox.form-checkbox-success > input[type=checkbox]:checked + i {
background: #6dbb30;
}
.form-checkbox-bordered.form-checkbox-success > i {
border: 2px solid #6dbb30;
}
a.form-checkbox.form-checkbox-info.active > i,
.form-checkbox.form-checkbox-info > input[type=checkbox]:checked + i {
background: #73e7f7;
}
.form-checkbox-bordered.form-checkbox-info > i {
border: 2px solid #73e7f7;
}
a.form-checkbox.form-checkbox-warning.active > i,
.form-checkbox.form-checkbox-warning > input[type=checkbox]:checked + i {
background: #fad776;
}
.form-checkbox-bordered.form-checkbox-warning > i {
border: 2px solid #fad776;
}
a.form-checkbox.form-checkbox-danger.active > i,
.form-checkbox.form-checkbox-danger > input[type=checkbox]:checked + i {
background: #f64e60;
}
.form-checkbox-bordered.form-checkbox-danger > i {
border: 2px solid #f64e60;
}
a.form-checkbox.form-checkbox-light.active > i,
.form-checkbox.form-checkbox-light > input[type=checkbox]:checked + i {
background: #f8f9fa;
}
.form-checkbox-bordered.form-checkbox-light > i {
border: 2px solid #f8f9fa;
}
a.form-checkbox.form-checkbox-dark.active > i,
.form-checkbox.form-checkbox-dark > input[type=checkbox]:checked + i {
background: #2E2E2E;
}
.form-checkbox-bordered.form-checkbox-dark > i {
border: 2px solid #2E2E2E;
}
a.form-checkbox.form-checkbox-indigo.active > i,
.form-checkbox.form-checkbox-indigo > input[type=checkbox]:checked + i {
background: #533be2;
}
.form-checkbox-bordered.form-checkbox-indigo > i {
border: 2px solid #533be2;
}
a.form-checkbox.form-checkbox-purple.active > i,
.form-checkbox.form-checkbox-purple > input[type=checkbox]:checked + i {
background: #4c2c92;
}
.form-checkbox-bordered.form-checkbox-purple > i {
border: 2px solid #4c2c92;
}
a.form-checkbox.form-checkbox-pink.active > i,
.form-checkbox.form-checkbox-pink > input[type=checkbox]:checked + i {
background: #f92084;
}
.form-checkbox-bordered.form-checkbox-pink > i {
border: 2px solid #f92084;
}
a.form-checkbox.active > i:after,
.form-checkbox > input[type=checkbox]:checked + i:after {
position: absolute;
content: "";
top: 5px;
width: 12px;
height: 6px;
border: 2px solid #fff;
border-top-style: none;
border-right-style: none;
transform: rotate(-45deg);
left: 4px;
}
/* disabled */
a.form-checkbox.disabled > i,
.form-checkbox input[disabled] + i {
border-color: #e9ecef !important;
background: #e9ecef !important;
}
/*
6. Select
*/
.select-form-control,
select.form-control:not([size]):not([multiple]) {
background: url('data:image/svg+xml;utf8,
') no-repeat;
background-color: #fff;
-moz-appearance: none;
background-position: center right 15px;
}
select.form-control:not([size]):not([multiple]) {
padding-right: 40px;
}
/*
7. Material Design Style
*/
.form-control-clean {
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none !important;
}
.form-label-group {
position: relative;
}
.form-label-group > .form-control + label {
position: absolute;
top: 0;
left: 0;
padding: 0.88rem 1rem;
margin-bottom: 0;
color: #95a4af;
pointer-events: none;
cursor: text;
transition: all 0.2s ease-in-out;
}
.form-label-group > .form-control-sm + label {
padding: 0.56rem 1rem;
}
.form-label-group > .form-control::-moz-placeholder {
color: transparent !important;
}
.form-label-group > .form-control:-ms-input-placeholder {
color: transparent !important;
}
.form-label-group > .form-control::placeholder {
color: transparent !important;
}
.form-label-group > .form-control:not(:-moz-placeholder-shown) {
padding-top: 19px;
padding-bottom: 6px;
}
.form-label-group > .form-control:not(:-ms-input-placeholder) {
padding-top: 19px;
padding-bottom: 6px;
}
.form-label-group > .form-control:not(:placeholder-shown) {
padding-top: 19px;
padding-bottom: 6px;
}
.form-label-group > .form-control:not(:-moz-placeholder-shown) ~ label {
padding-top: 3px;
padding-bottom: 0;
font-size: 12px;
}
.form-label-group > .form-control:not(:-ms-input-placeholder) ~ label {
padding-top: 3px;
padding-bottom: 0;
font-size: 12px;
}
.form-label-group > .form-control:not(:placeholder-shown) ~ label {
padding-top: 3px;
padding-bottom: 0;
font-size: 12px;
}
/* select */
.form-label-group > select.form-control:not(:-moz-placeholder-shown) {
font-weight: 200;
}
.form-label-group > select.form-control:not(:-ms-input-placeholder) {
font-weight: 200;
}
.form-label-group > select.form-control:not(:placeholder-shown) {
font-weight: 200;
}
.form-label-group > select.form-control:valid:not(:-moz-placeholder-shown) {
color: #495057;
font-weight: inherit;
}
.form-label-group > select.form-control:valid:not(:-ms-input-placeholder) {
color: #495057;
font-weight: inherit;
}
.form-label-group > select.form-control:valid:not(:placeholder-shown) {
color: #495057;
font-weight: inherit;
}
.form-label-group > select:invalid.form-control-lg {
font-size: 16px;
font-weight: inherit;
color: #95a4af;
padding-top: 18px;
height: 48px;
}
.form-label-group > select:valid.form-control-lg {
padding-top: 16px;
font-size: 1.25rem;
padding-bottom: 0;
}
@supports (-ms-ime-align: auto) {
.form-label-group > label {
display: none;
}
.form-label-group .form-control::-moz-placeholder {
color: #95a4af;
}
.form-label-group .form-control:-ms-input-placeholder {
color: #95a4af;
}
.form-label-group .form-control::placeholder {
color: #95a4af;
}
}
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
.form-label-group > label {
display: none;
}
.form-label-group .form-control::-moz-placeholder {
color: #95a4af;
}
.form-label-group .form-control:-ms-input-placeholder {
color: #95a4af;
}
.form-label-group .form-control::placeholder {
color: #95a4af;
}
}
/*
8. File Upload
Bootstrap extended - colors & custom-file-lg
*/
.custom-file-primary .custom-file-label::after {
color: #fff;
background-color: #4285F4;
}
.custom-file-secondary .custom-file-label::after {
color: #fff;
background-color: #6c757d;
}
.custom-file-success .custom-file-label::after {
color: #fff;
background-color: #6dbb30;
}
.custom-file-info .custom-file-label::after {
color: #fff;
background-color: #73e7f7;
}
.custom-file-warning .custom-file-label::after {
color: #fff;
background-color: #fad776;
}
.custom-file-danger .custom-file-label::after {
color: #fff;
background-color: #f64e60;
}
.custom-file-light .custom-file-label::after {
color: #fff;
background-color: #f8f9fa;
}
.custom-file-dark .custom-file-label::after {
color: #fff;
background-color: #2E2E2E;
}
.custom-file-indigo .custom-file-label::after {
color: #fff;
background-color: #533be2;
}
.custom-file-purple .custom-file-label::after {
color: #fff;
background-color: #4c2c92;
}
.custom-file-pink .custom-file-label::after {
color: #fff;
background-color: #f92084;
}
/* large */
.custom-file-lg.custom-file-lg,
.custom-file-lg .custom-file-input,
.custom-file-lg .custom-file-label,
.custom-file-lg .custom-file-label::after {
height: calc(1.5em + 2.18rem + 2px);
font-size: 1.0625rem;
}
.custom-file-lg .custom-file-label {
line-height: 1.5;
padding: 1.09rem 1rem;
overflow: hidden;
}
.custom-file-lg .custom-file-input,
.custom-file-lg .custom-file-label::after {
line-height: 1.5;
padding: 1.09rem 1rem;
}
/* small */
.custom-file-sm.custom-file-sm,
.custom-file-sm .custom-file-input,
.custom-file-sm .custom-file-label,
.custom-file-sm .custom-file-label::after {
height: calc(1.5em + 0.92rem + 2px);
font-size: 1.0625rem;
}
.custom-file-sm .custom-file-label {
line-height: 1.5;
padding: 0.46rem 1rem;
overflow: hidden;
}
.custom-file-sm .custom-file-input,
.custom-file-sm .custom-file-label::after {
line-height: 1.5;
padding: 0.46rem 1rem;
}
/*
9. Selectors
color/size/etc
*/
.form-selector {
position: relative;
border: #e9ecef 1px solid;
cursor: pointer;
min-width: 35px;
height: 35px;
border-radius: 0.25rem;
overflow: hidden;
margin-bottom: 0.25rem;
margin-right: 0.25rem;
}
.form-selector-lg {
border-radius: 4px;
min-width: 46px;
height: 46px;
}
.form-selector-xl {
border-radius: 4px;
min-width: 66px;
height: 66px;
}
a.form-selector {
color: #212529;
text-decoration: none;
}
.form-selector.rounded-circle {
border-radius: 50rem;
}
.form-selector > input {
position: absolute;
width: 0;
height: 0;
opacity: 0.0001;
z-index: -1;
}
.form-selector > span {
min-width: 35px;
min-height: 35px;
display: inline-block;
padding: 0.56rem 0.5rem;
line-height: 1;
border-radius: 0.25rem;
font-size: 16px;
text-align: center;
background-color: #ffffff;
}
.form-selector-lg > span {
padding: 0.89rem 0;
line-height: 1;
border-radius: 4px;
min-width: 46px;
min-height: 46px;
}
.form-selector.rounded-circle > span {
width: 35px;
height: 35px;
display: block;
border-radius: 50rem;
}
.form-selector > i {
display: inline-block;
position: absolute;
border-radius: 0.25rem;
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
}
.form-selector > span:before {
content: "";
position: absolute;
border-radius: 0.25rem;
border: transparent 1px solid;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.form-selector.form-selector-lg > span:before,
.form-selector.form-selector-xl > span:before {
border-radius: 4px;
}
.form-selector.rounded-circle > span:before {
border-radius: 50rem;
}
.form-selector > i:before {
content: "";
border: transparent 1px solid;
border-radius: 0.25rem;
position: absolute;
left: -4px;
right: -4px;
top: -4px;
bottom: -4px;
}
.form-selector.rounded-circle > i:before,
.form-selector.rounded-circle > i {
border-radius: 50rem;
}
a.form-selector.active > span,
.form-selector input:checked + span {
color: #fff;
background-color: #343a40;
}
.form-selector:not(.rounded-circle) input:checked + span {
border-color: #343a40;
}
.form-selector > input:checked + i:before,
.form-selector.rounded-circle input:checked + i {
border-color: #343a40;
}
a.form-selector.active > i:not(.bg-cover):after,
.form-selector input:checked + i:not(.bg-cover):after {
content: "\F117";
font-family: "Flaticon";
position: absolute;
font-size: 12px;
color: #fff;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -9px;
}
.was-validated .form-selector > input:invalid + span:before,
.was-validated .form-selector > input:invalid + i:before {
border-color: #f64e60 !important;
}
.form-selector input[disabled] + span,
.form-selector input[disabled] + i {
background-color: #e9ecef !important;
opacity: 0.6;
cursor: initial;
}
.form-selector input[disabled] + i:before {
background-color: #fff;
opacity: 0.5 !important;
}
/**
DEFAULT BOOTSTRAP NAVIGATION
**/
/*:not(nav.navbar-dark) a.nav-link:not(.active):not(:hover) {*/
nav.navbar-light a.nav-link:not(.active):not(:hover) {
color: #212529;
}
/* -- -- -- */
/**
DEEP NAVIGATION
1. Inside content (mobile collasible)
2. Sidebar (including admin)
**/
/* group icon indicatorn */
nav.nav-deep .nav-item .group-icon {
font-size: 12px;
margin-top: 3px;
}
nav.nav-deep-dark .nav-item .group-icon {
color: #dddddd !important;
}
nav.nav-deep-dark-contrast .nav-item .group-icon {
color: #ffffff !important;
}
nav.nav-deep-light .nav-item .group-icon {
color: #121212 !important;
}
/* light */
nav.nav-deep-light .nav-item > a.nav-link {
color: #121212;
}
nav.nav-deep-light .nav-item:hover > .nav-link,
nav.nav-deep-light .nav-item.active > .nav-link {
color: #4285F4;
}
/* hover background color */
nav.nav-deep-light.nav-deep-hover > ul > li.nav-item:hover,
nav.nav-deep-light.nav-deep-hover > ul > li.nav-item.active {
background-color: rgba(0, 0, 0, 0.05);
}
/* hover & active background color */
nav.nav-deep-dark .nav-item > a.nav-link {
color: #dddddd;
}
nav.nav-deep-dark-contrast .nav-item > a.nav-link {
color: #ffffff;
}
nav.nav-deep-dark .nav-item:hover > .nav-link,
nav.nav-deep-dark .nav-item.active > .nav-link {
color: #ffffff;
}
nav.nav-deep-light .nav-item.active > .nav-link,
nav.nav-deep-dark .nav-item.active > .nav-link {
font-weight: 500;
}
/* hover background color */
nav.nav-deep-dark.nav-deep-hover > ul > li.nav-item:hover,
nav.nav-deep-dark.nav-deep-hover > ul > li.nav-item.active {
background-color: rgba(0, 0, 0, 0.05);
}
/*
Dot indicator
!sidebar only!
*/
aside nav.nav-deep-indicator-dot ul li .nav-item.active > .nav-link {
position: relative;
}
aside nav.nav-deep-light.nav-deep-indicator-dot ul li .nav-item.active > .nav-link:before,
aside nav.nav-deep-dark.nav-deep-indicator-dot ul li .nav-item.active > .nav-link:before {
content: "";
position: absolute;
top: 50%;
margin-top: -2px;
border-radius: 100%;
width: 4px;
height: 4px;
background-color: #ffffff;
left: 0;
}
aside nav.nav-deep-light.nav-deep-indicator-dot ul li .nav-item.active > .nav-link:before {
background-color: #121212;
}
/*
Bordered nav
*/
.nav-deep-bordered > ul > li {
border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
}
/*
Icons
*/
/* main link icon */
nav.nav-deep > ul > li > a.nav-link > i.nav-icon {
width: 20px;
/* bigger than font-size to set a nice looking on bigger webfonts */
font-size: 16px;
margin-top: -0.2rem;
float: left;
margin-right: 10px;
text-align: left;
}
/* childs main link icon (and no main icon, but there is an icon) */
nav.nav-deep > ul > li > a.nav-link > i:not(.nav-icon),
nav.nav-deep > ul ul > li > a.nav-link > i {
margin-right: 10px;
}
/* childs */
.nav-deep ul > li:not(.active) > ul {
display: none;
}
/* all childs setup */
.nav-deep > ul ul {
display: block;
/*font-weight: 300;*/
}
/* 1. first level childs */
.nav-deep > ul > li > ul {
padding-left: 30px;
}
/* icons alignment */
.nav-deep > ul > li > ul > li > a > i {
margin-right: 8px;
margin-left: -27px;
}
/* 2. all other deep level childs */
.nav-deep > ul > li > ul ul {
padding-left: 15px;
}
/**
Simple quick default navigation
Nav : Default
For any list
**/
.nav-default a {
display: flex;
flex-grow: 1;
align-items: center;
padding: 0.54rem 1rem;
cursor: pointer;
transition: all 0.33s;
text-decoration: none;
}
.nav-default li.active > a span,
.nav-default a.active span,
.nav-default a:hover span,
.nav-default li.active > a,
.nav-default a.active,
.nav-default a:hover {
color: #4285F4 !important;
}
.nav-default li.active > a,
.nav-default a.active,
.nav-default a:hover {
background-color: #f8f9fa;
}
.nav-default a > i,
.nav-default a > span.group-icon {
flex: 0 0 36px;
font-size: 1.25rem;
line-height: 0;
color: #6c757d;
}
.nav-default a > span:not(.group-icon) {
flex-grow: 1;
font-size: 1rem;
color: #495057;
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/* nav.nav-deep-light .nav-item a,
nav.nav-deep-dark .nav-item a,
nav.nav-deep-light .nav-item,
nav.nav-deep-dark .nav-item {
@include vendors-generate(transition, all .2s ease);
}
*/
}
/** STAR (STAR)
*************************************************** **/
.rating-0_0,
.rating-0,
.rating-0_5,
.rating-1,
.rating-1_0,
.rating-1_5,
.rating-2,
.rating-2_0,
.rating-2_5,
.rating-3,
.rating-3_0,
.rating-3_5,
.rating-4,
.rating-4_0,
.rating-4_5,
.rating-5,
.rating-5_0 {
font: normal normal normal 18px/1 "Flaticon";
letter-spacing: 3px;
}
.rating-0_0:before,
.rating-0:before {
content: "\F173\F173\F173\F173\F173";
display: inline-block;
}
.rating-0_5:before {
content: "\F191\F173\F173\F173\F173";
display: inline-block;
}
.rating-1:before,
.rating-1_0:before {
content: "\F190\F173\F173\F173\F173";
display: inline-block;
}
.rating-1_5:before {
content: "\F190\F191\F173\F173\F173";
display: inline-block;
}
.rating-2:before,
.rating-2_0:before {
content: "\F190\F190\F173\F173\F173";
display: inline-block;
}
.rating-2_5:before {
content: "\F190\F190\F191\F173\F173";
display: inline-block;
}
.rating-3:before,
.rating-3_0:before {
content: "\F190\F190\F190\F173\F173";
display: inline-block;
}
.rating-3_5:before {
content: "\F190\F190\F190\F191\F173";
display: inline-block;
}
.rating-4:before,
.rating-4_0:before {
content: "\F190\F190\F190\F190\F173";
display: inline-block;
}
.rating-4_5:before {
content: "\F190\F190\F190\F190\F191";
display: inline-block;
}
.rating-5:before,
.rating-5_0:before {
content: "\F190\F190\F190\F190\F190";
display: inline-block;
}
/** FLAGS
https://www.flag-sprites.com/
*************************************************** **/
.flag {
width: 16px;
height: 11px;
background: url(/images/flags.png?4cffa1faa6e251765029241079140669) no-repeat;
display: inline-block;
}
/* fixes */
.bootstrap-select button .flag,
.bootstrap-select .dropdown-menu .flag {
margin-right: 10px;
}
.flag.flag-ad {
background-position: -16px 0;
}
.flag.flag-ae {
background-position: -32px 0;
}
.flag.flag-af {
background-position: -48px 0;
}
.flag.flag-ag {
background-position: -64px 0;
}
.flag.flag-ai {
background-position: -80px 0;
}
.flag.flag-al {
background-position: -96px 0;
}
.flag.flag-am {
background-position: -112px 0;
}
.flag.flag-an {
background-position: -128px 0;
}
.flag.flag-ao {
background-position: -144px 0;
}
.flag.flag-ar {
background-position: -160px 0;
}
.flag.flag-as {
background-position: -176px 0;
}
.flag.flag-at {
background-position: -192px 0;
}
.flag.flag-au {
background-position: -208px 0;
}
.flag.flag-aw {
background-position: -224px 0;
}
.flag.flag-az {
background-position: -240px 0;
}
.flag.flag-ba {
background-position: 0 -11px;
}
.flag.flag-bb {
background-position: -16px -11px;
}
.flag.flag-bd {
background-position: -32px -11px;
}
.flag.flag-be {
background-position: -48px -11px;
}
.flag.flag-bf {
background-position: -64px -11px;
}
.flag.flag-bg {
background-position: -80px -11px;
}
.flag.flag-bh {
background-position: -96px -11px;
}
.flag.flag-bi {
background-position: -112px -11px;
}
.flag.flag-bj {
background-position: -128px -11px;
}
.flag.flag-bm {
background-position: -144px -11px;
}
.flag.flag-bn {
background-position: -160px -11px;
}
.flag.flag-bo {
background-position: -176px -11px;
}
.flag.flag-br {
background-position: -192px -11px;
}
.flag.flag-bs {
background-position: -208px -11px;
}
.flag.flag-bt {
background-position: -224px -11px;
}
.flag.flag-bv {
background-position: -240px -11px;
}
.flag.flag-bw {
background-position: 0 -22px;
}
.flag.flag-by {
background-position: -16px -22px;
}
.flag.flag-bz {
background-position: -32px -22px;
}
.flag.flag-ca {
background-position: -48px -22px;
}
.flag.flag-catalonia {
background-position: -64px -22px;
}
.flag.flag-cd {
background-position: -80px -22px;
}
.flag.flag-cf {
background-position: -96px -22px;
}
.flag.flag-cg {
background-position: -112px -22px;
}
.flag.flag-ch {
background-position: -128px -22px;
}
.flag.flag-ci {
background-position: -144px -22px;
}
.flag.flag-ck {
background-position: -160px -22px;
}
.flag.flag-cl {
background-position: -176px -22px;
}
.flag.flag-cm {
background-position: -192px -22px;
}
.flag.flag-cn {
background-position: -208px -22px;
}
.flag.flag-co {
background-position: -224px -22px;
}
.flag.flag-cr {
background-position: -240px -22px;
}
.flag.flag-cu {
background-position: 0 -33px;
}
.flag.flag-cv {
background-position: -16px -33px;
}
.flag.flag-cw {
background-position: -32px -33px;
}
.flag.flag-cy {
background-position: -48px -33px;
}
.flag.flag-cz {
background-position: -64px -33px;
}
.flag.flag-de {
background-position: -80px -33px;
}
.flag.flag-dj {
background-position: -96px -33px;
}
.flag.flag-dk {
background-position: -112px -33px;
}
.flag.flag-dm {
background-position: -128px -33px;
}
.flag.flag-do {
background-position: -144px -33px;
}
.flag.flag-dz {
background-position: -160px -33px;
}
.flag.flag-ec {
background-position: -176px -33px;
}
.flag.flag-ee {
background-position: -192px -33px;
}
.flag.flag-eg {
background-position: -208px -33px;
}
.flag.flag-eh {
background-position: -224px -33px;
}
.flag.flag-england {
background-position: -240px -33px;
}
.flag.flag-er {
background-position: 0 -44px;
}
.flag.flag-es {
background-position: -16px -44px;
}
.flag.flag-et {
background-position: -32px -44px;
}
.flag.flag-eu {
background-position: -48px -44px;
}
.flag.flag-fi {
background-position: -64px -44px;
}
.flag.flag-fj {
background-position: -80px -44px;
}
.flag.flag-fk {
background-position: -96px -44px;
}
.flag.flag-fm {
background-position: -112px -44px;
}
.flag.flag-fo {
background-position: -128px -44px;
}
.flag.flag-fr {
background-position: -144px -44px;
}
.flag.flag-ga {
background-position: -160px -44px;
}
.flag.flag-gb {
background-position: -176px -44px;
}
.flag.flag-gd {
background-position: -192px -44px;
}
.flag.flag-ge {
background-position: -208px -44px;
}
.flag.flag-gf {
background-position: -224px -44px;
}
.flag.flag-gg {
background-position: -240px -44px;
}
.flag.flag-gh {
background-position: 0 -55px;
}
.flag.flag-gi {
background-position: -16px -55px;
}
.flag.flag-gl {
background-position: -32px -55px;
}
.flag.flag-gm {
background-position: -48px -55px;
}
.flag.flag-gn {
background-position: -64px -55px;
}
.flag.flag-gp {
background-position: -80px -55px;
}
.flag.flag-gq {
background-position: -96px -55px;
}
.flag.flag-gr {
background-position: -112px -55px;
}
.flag.flag-gs {
background-position: -128px -55px;
}
.flag.flag-gt {
background-position: -144px -55px;
}
.flag.flag-gu {
background-position: -160px -55px;
}
.flag.flag-gw {
background-position: -176px -55px;
}
.flag.flag-gy {
background-position: -192px -55px;
}
.flag.flag-hk {
background-position: -208px -55px;
}
.flag.flag-hm {
background-position: -224px -55px;
}
.flag.flag-hn {
background-position: -240px -55px;
}
.flag.flag-hr {
background-position: 0 -66px;
}
.flag.flag-ht {
background-position: -16px -66px;
}
.flag.flag-hu {
background-position: -32px -66px;
}
.flag.flag-ic {
background-position: -48px -66px;
}
.flag.flag-id {
background-position: -64px -66px;
}
.flag.flag-ie {
background-position: -80px -66px;
}
.flag.flag-il {
background-position: -96px -66px;
}
.flag.flag-im {
background-position: -112px -66px;
}
.flag.flag-in {
background-position: -128px -66px;
}
.flag.flag-io {
background-position: -144px -66px;
}
.flag.flag-iq {
background-position: -160px -66px;
}
.flag.flag-ir {
background-position: -176px -66px;
}
.flag.flag-is {
background-position: -192px -66px;
}
.flag.flag-it {
background-position: -208px -66px;
}
.flag.flag-je {
background-position: -224px -66px;
}
.flag.flag-jm {
background-position: -240px -66px;
}
.flag.flag-jo {
background-position: 0 -77px;
}
.flag.flag-jp {
background-position: -16px -77px;
}
.flag.flag-ke {
background-position: -32px -77px;
}
.flag.flag-kg {
background-position: -48px -77px;
}
.flag.flag-kh {
background-position: -64px -77px;
}
.flag.flag-ki {
background-position: -80px -77px;
}
.flag.flag-km {
background-position: -96px -77px;
}
.flag.flag-kn {
background-position: -112px -77px;
}
.flag.flag-kp {
background-position: -128px -77px;
}
.flag.flag-kr {
background-position: -144px -77px;
}
.flag.flag-kurdistan {
background-position: -160px -77px;
}
.flag.flag-kw {
background-position: -176px -77px;
}
.flag.flag-ky {
background-position: -192px -77px;
}
.flag.flag-kz {
background-position: -208px -77px;
}
.flag.flag-la {
background-position: -224px -77px;
}
.flag.flag-lb {
background-position: -240px -77px;
}
.flag.flag-lc {
background-position: 0 -88px;
}
.flag.flag-li {
background-position: -16px -88px;
}
.flag.flag-lk {
background-position: -32px -88px;
}
.flag.flag-lr {
background-position: -48px -88px;
}
.flag.flag-ls {
background-position: -64px -88px;
}
.flag.flag-lt {
background-position: -80px -88px;
}
.flag.flag-lu {
background-position: -96px -88px;
}
.flag.flag-lv {
background-position: -112px -88px;
}
.flag.flag-ly {
background-position: -128px -88px;
}
.flag.flag-ma {
background-position: -144px -88px;
}
.flag.flag-mc {
background-position: -160px -88px;
}
.flag.flag-md {
background-position: -176px -88px;
}
.flag.flag-me {
background-position: -192px -88px;
}
.flag.flag-mg {
background-position: -208px -88px;
}
.flag.flag-mh {
background-position: -224px -88px;
}
.flag.flag-mk {
background-position: -240px -88px;
}
.flag.flag-ml {
background-position: 0 -99px;
}
.flag.flag-mm {
background-position: -16px -99px;
}
.flag.flag-mn {
background-position: -32px -99px;
}
.flag.flag-mo {
background-position: -48px -99px;
}
.flag.flag-mp {
background-position: -64px -99px;
}
.flag.flag-mq {
background-position: -80px -99px;
}
.flag.flag-mr {
background-position: -96px -99px;
}
.flag.flag-ms {
background-position: -112px -99px;
}
.flag.flag-mt {
background-position: -128px -99px;
}
.flag.flag-mu {
background-position: -144px -99px;
}
.flag.flag-mv {
background-position: -160px -99px;
}
.flag.flag-mw {
background-position: -176px -99px;
}
.flag.flag-mx {
background-position: -192px -99px;
}
.flag.flag-my {
background-position: -208px -99px;
}
.flag.flag-mz {
background-position: -224px -99px;
}
.flag.flag-na {
background-position: -240px -99px;
}
.flag.flag-nc {
background-position: 0 -110px;
}
.flag.flag-ne {
background-position: -16px -110px;
}
.flag.flag-nf {
background-position: -32px -110px;
}
.flag.flag-ng {
background-position: -48px -110px;
}
.flag.flag-ni {
background-position: -64px -110px;
}
.flag.flag-nl {
background-position: -80px -110px;
}
.flag.flag-no {
background-position: -96px -110px;
}
.flag.flag-np {
background-position: -112px -110px;
}
.flag.flag-nr {
background-position: -128px -110px;
}
.flag.flag-nu {
background-position: -144px -110px;
}
.flag.flag-nz {
background-position: -160px -110px;
}
.flag.flag-om {
background-position: -176px -110px;
}
.flag.flag-pa {
background-position: -192px -110px;
}
.flag.flag-pe {
background-position: -208px -110px;
}
.flag.flag-pf {
background-position: -224px -110px;
}
.flag.flag-pg {
background-position: -240px -110px;
}
.flag.flag-ph {
background-position: 0 -121px;
}
.flag.flag-pk {
background-position: -16px -121px;
}
.flag.flag-pl {
background-position: -32px -121px;
}
.flag.flag-pm {
background-position: -48px -121px;
}
.flag.flag-pn {
background-position: -64px -121px;
}
.flag.flag-pr {
background-position: -80px -121px;
}
.flag.flag-ps {
background-position: -96px -121px;
}
.flag.flag-pt {
background-position: -112px -121px;
}
.flag.flag-pw {
background-position: -128px -121px;
}
.flag.flag-py {
background-position: -144px -121px;
}
.flag.flag-qa {
background-position: -160px -121px;
}
.flag.flag-re {
background-position: -176px -121px;
}
.flag.flag-ro {
background-position: -192px -121px;
}
.flag.flag-rs {
background-position: -208px -121px;
}
.flag.flag-ru {
background-position: -224px -121px;
}
.flag.flag-rw {
background-position: -240px -121px;
}
.flag.flag-sa {
background-position: 0 -132px;
}
.flag.flag-sb {
background-position: -16px -132px;
}
.flag.flag-sc {
background-position: -32px -132px;
}
.flag.flag-scotland {
background-position: -48px -132px;
}
.flag.flag-sd {
background-position: -64px -132px;
}
.flag.flag-se {
background-position: -80px -132px;
}
.flag.flag-sg {
background-position: -96px -132px;
}
.flag.flag-sh {
background-position: -112px -132px;
}
.flag.flag-si {
background-position: -128px -132px;
}
.flag.flag-sk {
background-position: -144px -132px;
}
.flag.flag-sl {
background-position: -160px -132px;
}
.flag.flag-sm {
background-position: -176px -132px;
}
.flag.flag-sn {
background-position: -192px -132px;
}
.flag.flag-so {
background-position: -208px -132px;
}
.flag.flag-somaliland {
background-position: -224px -132px;
}
.flag.flag-sr {
background-position: -240px -132px;
}
.flag.flag-ss {
background-position: 0 -143px;
}
.flag.flag-st {
background-position: -16px -143px;
}
.flag.flag-sv {
background-position: -32px -143px;
}
.flag.flag-sx {
background-position: -48px -143px;
}
.flag.flag-sy {
background-position: -64px -143px;
}
.flag.flag-sz {
background-position: -80px -143px;
}
.flag.flag-tc {
background-position: -96px -143px;
}
.flag.flag-td {
background-position: -112px -143px;
}
.flag.flag-tf {
background-position: -128px -143px;
}
.flag.flag-tg {
background-position: -144px -143px;
}
.flag.flag-th {
background-position: -160px -143px;
}
.flag.flag-tibet {
background-position: -176px -143px;
}
.flag.flag-tj {
background-position: -192px -143px;
}
.flag.flag-tk {
background-position: -208px -143px;
}
.flag.flag-tl {
background-position: -224px -143px;
}
.flag.flag-tm {
background-position: -240px -143px;
}
.flag.flag-tn {
background-position: 0 -154px;
}
.flag.flag-to {
background-position: -16px -154px;
}
.flag.flag-tr {
background-position: -32px -154px;
}
.flag.flag-tt {
background-position: -48px -154px;
}
.flag.flag-tv {
background-position: -64px -154px;
}
.flag.flag-tw {
background-position: -80px -154px;
}
.flag.flag-tz {
background-position: -96px -154px;
}
.flag.flag-ua {
background-position: -112px -154px;
}
.flag.flag-ug {
background-position: -128px -154px;
}
.flag.flag-um {
background-position: -144px -154px;
}
.flag.flag-us {
background-position: -160px -154px;
}
.flag.flag-uy {
background-position: -176px -154px;
}
.flag.flag-uz {
background-position: -192px -154px;
}
.flag.flag-va {
background-position: -208px -154px;
}
.flag.flag-vc {
background-position: -224px -154px;
}
.flag.flag-ve {
background-position: -240px -154px;
}
.flag.flag-vg {
background-position: 0 -165px;
}
.flag.flag-vi {
background-position: -16px -165px;
}
.flag.flag-vn {
background-position: -32px -165px;
}
.flag.flag-vu {
background-position: -48px -165px;
}
.flag.flag-wales {
background-position: -64px -165px;
}
.flag.flag-wf {
background-position: -80px -165px;
}
.flag.flag-ws {
background-position: -96px -165px;
}
.flag.flag-xk {
background-position: -112px -165px;
}
.flag.flag-ye {
background-position: -128px -165px;
}
.flag.flag-yt {
background-position: -144px -165px;
}
.flag.flag-za {
background-position: -160px -165px;
}
.flag.flag-zanzibar {
background-position: -176px -165px;
}
.flag.flag-zm {
background-position: -192px -165px;
}
.flag.flag-zw {
background-position: -208px -165px;
}
@font-face {
font-family: "Flaticon";
src: local("Flaticon"), url(/fonts/Flaticon.woff2?ae2dd4b29a7c28b5cc6e9364c7a69983) format("woff2"), url(/fonts/Flaticon.woff?bcb3a37364d7c8bb91e1b44e05707e51) format("woff"), url(/fonts/Flaticon.ttf?39cfb1bbb57589a9ca5314d08c10dcf1) format("truetype"), url(/fonts/Flaticon.eot?ff97119bdf54cbff593c33e82c949bcb) format("embedded-opentype"), url(/fonts/Flaticon.eot?ff97119bdf54cbff593c33e82c949bcb) format("embedded-opentype"), url(/fonts/Flaticon.svg?24b998aee397aeca2868c52615215cb1) format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "Flaticon";
src: url(/fonts/Flaticon.svg?24b998aee397aeca2868c52615215cb1) format("svg");
}
}
.fi:before {
font-family: "Flaticon" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1.5;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.fi.d-middle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.fi.d-middle:before {
margin: 0 !important;
padding: 0 !important;
}
.iconsPreview a {
color: #666;
padding-left: 8px;
padding-right: 8px;
border-radius: 0.25rem;
transition: all 0.15s ease-in-out;
}
.iconsPreview a:hover {
color: #000000;
background-color: #f8f9fa;
}
.iconsPreview a .preview-copy-clipboard {
padding-top: 5px;
}
/* fixes */
.btn:not(.rounded-circle):not(.btn-sm) i.fi {
font-size: 15px;
}
.btn-sm:not(.rounded-circle) i.fi,
.btn-group-sm > .btn:not(.rounded-circle) i.fi {
font-size: 13px;
}
.fi {
vertical-align: middle;
display: inline-block;
}
h1 .fi:before,
h2 .fi:before,
h3 .fi:before,
h4 .fi:before,
h5 .fi:before,
h6 .fi:before {
line-height: 1.18;
}
button.close {
font-size: 1.0625rem;
}
.fi-spin:before {
display: inline-block;
-webkit-animation: spin 1.3s infinite linear;
animation: spin 1.3s infinite linear;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.mdi-close:before {
content: "\E900";
}
.mdi-format_align_center:before {
content: "\E901";
}
.mdi-format_align_justify:before {
content: "\E902";
}
.mdi-format_align_left:before {
content: "\E903";
}
.mdi-format_align_right:before {
content: "\E904";
}
.mdi-format_bold:before {
content: "\E905";
}
.mdi-format_clear:before {
content: "\E906";
}
.mdi-format_color_fill:before {
content: "\E907";
}
.mdi-format_color_reset:before {
content: "\E908";
}
.mdi-format_color_text:before {
content: "\E909";
}
.mdi-format_indent_decrease:before {
content: "\E90A";
}
.mdi-format_indent_increase:before {
content: "\E90B";
}
.mdi-format_italic:before {
content: "\E90C";
}
.mdi-format_line_spacing:before {
content: "\E90D";
}
.mdi-format_list_bulleted:before {
content: "\E90E";
}
.mdi-format_list_numbered:before {
content: "\E90F";
}
.mdi-filter_1:before {
content: "\E910";
}
.mdi-filter_2:before {
content: "\E911";
}
.mdi-filter_3:before {
content: "\E912";
}
.mdi-filter_4:before {
content: "\E913";
}
.mdi-filter_5:before {
content: "\E914";
}
.mdi-filter_6:before {
content: "\E915";
}
.mdi-filter_7:before {
content: "\E916";
}
.mdi-filter_8:before {
content: "\E917";
}
.mdi-filter_9:before {
content: "\E918";
}
.mdi-check:before {
content: "\E91A";
}
.fi-user-female:before {
content: "\F1AD";
}
.fi-eq-vertical:before {
content: "\F16B";
}
.fi-arrow-down:before {
content: "\F1C4";
}
.fi-heart-full:before {
content: "\F18D";
}
.fi-eye:before {
content: "\F18B";
}
.fi-shape-hexa:before {
content: "\F143";
}
.fi-layers:before {
content: "\F16D";
}
.fi-start-half:before {
content: "\F191";
}
.fi-drop:before {
content: "\F11C";
}
.fi-colors:before {
content: "\F105";
}
.fi-menu-dots:before {
content: "\F1E2";
}
.fi-percent:before {
content: "\F139";
}
.fi-mic-disabled:before {
content: "\F14E";
}
.fi-thrash:before {
content: "\F1BA";
}
.fi-eye-disabled:before {
content: "\F18A";
}
.fi-round-close:before {
content: "\F1A8";
}
.fi-brand-apple:before {
content: "\F1E1";
}
.fi-mollecules:before {
content: "\F17C";
}
.fi-minus:before {
content: "\F196";
}
.fi-support-1:before {
content: "\F123";
}
.fi-arrow-up:before {
content: "\F19B";
}
.fi-shield-ok:before {
content: "\F12D";
}
.fi-task-list:before {
content: "\F15B";
}
.fi-print:before {
content: "\F102";
}
.fi-heart-half:before {
content: "\F18E";
}
.fi-chat:before {
content: "\F11F";
}
.fi-dots-vertical:before {
content: "\F152";
/* corrections */
display: inherit;
margin-top: -2px;
}
.fi-arrow-upload:before {
content: "\F1DA";
}
.fi-direction:before {
content: "\F14B";
}
.fi-cart-1:before {
content: "\F1A1";
}
.fi-layers-middle:before {
content: "\F1E3";
}
.fi-circle-spin:before {
content: "\F1E0";
}
.fi-play-empty:before {
content: "\F188";
}
.fi-search:before {
content: "\F1B6";
}
.fi-envelope:before {
content: "\F1A0";
}
.fi-arrow-up-slim:before {
content: "\F197";
}
.fi-expand:before {
content: "\F19F";
}
.fi-arrow-right-full:before {
content: "\F1BC";
}
.fi-cog-full:before {
content: "\F13B";
}
.fi-pencil:before {
content: "\F1B2";
}
.fi-graduate:before {
content: "\F1C6";
}
.fi-smartphone:before {
content: "\F159";
}
.fi-like:before {
content: "\F1B7";
}
.fi-arrow-left-full:before {
content: "\F1BD";
}
.fi-folder-full:before {
content: "\F15D";
}
.fi-smartphone-chat:before {
content: "\F122";
}
.fi-squared-info:before {
content: "\F125";
}
.fi-eco:before {
content: "\F11A";
}
.fi-cog:before {
content: "\F1B8";
}
.fi-heart-empty:before {
content: "\F18F";
}
.fi-round-target:before {
content: "\F16F";
}
.fi-bell:before {
content: "\F163";
}
.fi-squared-minus:before {
content: "\F194";
}
.fi-share:before {
content: "\F17E";
}
.fi-recycle:before {
content: "\F11B";
}
.fi-hourglass:before {
content: "\F16E";
}
.fi-power:before {
content: "\F133";
}
.fi-phone-24:before {
content: "\F128";
}
.fi-plus:before {
content: "\F195";
}
.fi-shape-abstract-cube:before {
content: "\F106";
}
.fi-round-info-full:before {
content: "\F13E";
}
.fi-layerstore:before {
content: "\F11E";
}
.fi-envelope-2:before {
content: "\F1CF";
}
.fi-database:before {
content: "\F176";
}
.fi-sound-on:before {
content: "\F1CC";
}
.fi-unlink:before {
content: "\F158";
}
.fi-home:before {
content: "\F1A9";
}
.fi-check:before {
content: "\F117";
/* corrections */
font-size: 93%;
display: inline-block;
padding-top: 0.06rem;
}
.fi-users:before {
content: "\F148";
}
.fi-box:before {
content: "\F156";
}
.fi-heart-slim:before {
content: "\F174";
}
.fi-arrow-download:before {
content: "\F1DB";
}
.fi-phone:before {
content: "\F1A3";
}
.fi-orbit:before {
content: "\F1DE";
}
.fi-bell-full-active:before {
content: "\F1D6";
}
.fi-brand-android:before {
content: "\F1D1";
}
.fi-smart-devices:before {
content: "\F100";
}
.fi-pin-2:before {
content: "\F171";
}
.fi-arrow-down-slim:before {
content: "\F198";
}
.fi-box-checked:before {
content: "\F1C9";
}
.fi-atom:before {
content: "\F179";
}
.fi-arrow-right-3:before {
content: "\F1B9";
}
.fi-star-empty:before {
content: "\F1B3";
}
.fi-loading-dots:before {
content: "\F131";
}
.fi-arrow-up-full:before {
content: "\F1BE";
}
.fi-eq-horizontal:before {
content: "\F16A";
}
.fi-round-play:before {
content: "\F187";
}
.fi-list-checked:before {
content: "\F1C7";
}
.fi-star-empty-radius:before {
content: "\F173";
}
.fi-target-simple:before {
content: "\F112";
}
.fi-road:before {
content: "\F12C";
}
.fi-mic:before {
content: "\F14F";
}
.fi-round-list:before {
content: "\F181";
}
.fi-brand-windows:before {
content: "\F1DF";
}
.fi-cart-2:before {
content: "\F1A2";
}
.fi-product-tag:before {
content: "\F155";
}
.fi-globe:before {
content: "\F130";
}
.fi-cart-3:before {
content: "\F129";
}
.fi-colors-2:before {
content: "\F134";
}
.fi-lightbulb:before {
content: "\F109";
}
.fi-round-question-full:before {
content: "\F1D3";
}
.fi-bars-2:before {
content: "\F116";
}
.fi-attachment:before {
content: "\F13D";
}
.fi-checklist-squared:before {
content: "\F1CE";
}
.fi-graph:before {
content: "\F110";
}
.fi-selectable:before {
content: "\F104";
}
.fi-cloud-upload:before {
content: "\F138";
}
.fi-mdeal:before {
content: "\F12B";
}
.fi-24:before {
content: "\F127";
}
.fi-cart-4:before {
content: "\F10C";
}
.fi-list:before {
content: "\F1DD";
}
.fi-user-plus:before {
content: "\F119";
}
.fi-truck-speed:before {
content: "\F12F";
}
.fi-arrow-down-full:before {
content: "\F1BF";
}
.fi-cogs:before {
content: "\F13C";
}
.fi-dashboard:before {
content: "\F140";
}
.fi-arrow-right-slim:before {
content: "\F19A";
}
.fi-lightning:before {
content: "\F11D";
}
.fi-dots-horizontal:before {
content: "\F153";
}
.fi-loading:before {
content: "\F1A5";
}
.fi-exit:before {
content: "\F151";
}
.fi-plus-slim:before {
content: "\F114";
}
.fi-umbrella:before {
content: "\F169";
}
.fi-gps:before {
content: "\F14C";
}
.fi-locked:before {
content: "\F145";
}
.fi-close:before {
content: "\F103";
/* corrections */
font-size: 82%;
padding-left: 1px;
padding-top: 0.156rem;
display: inherit;
}
.btn .fi-close:before {
padding-top: 0 !important;
}
.fi-link:before {
content: "\F15A";
}
.fi-shape-3dots:before {
content: "\F17D";
}
.fi-round-question:before {
content: "\F165";
}
.fi-image:before {
content: "\F18C";
}
.fi-round-plus:before {
content: "\F186";
}
.fi-support:before {
content: "\F10F";
}
.fi-go-back:before {
content: "\F111";
}
.fi-play:before {
content: "\F137";
}
.fi-dislike:before {
content: "\F1A4";
}
.fi-chart-up:before {
content: "\F1C5";
}
.fi-map:before {
content: "\F172";
}
.fi-dots-triangle:before {
content: "\F142";
}
.fi-dots-horizontal-full:before {
content: "\F1D2";
}
.fi-reload:before {
content: "\F113";
}
.fi-bookmark:before {
content: "\F118";
}
.fi-shape-abstract-dots:before {
content: "\F1CD";
}
.fi-arrow-left:before {
content: "\F1AC";
}
.fi-bars:before {
content: "\F17B";
}
.fi-speaker-mute:before {
content: "\F1CB";
}
.fi-send:before {
content: "\F149";
}
.fi-brain:before {
content: "\F13F";
}
.fi-bell-active:before {
content: "\F162";
}
.fi-arrow-left-slim:before {
content: "\F199";
}
.fi-folder-empty:before {
content: "\F15E";
}
.fi-cart-5:before {
content: "\F10B";
}
.fi-shrink:before {
content: "\F19C";
}
.fi-pin:before {
content: "\F124";
}
.fi-squares:before {
content: "\F141";
}
.fi-bell-full:before {
content: "\F1D8";
}
.fi-squared-graph:before {
content: "\F136";
}
.fi-squared-dots:before {
content: "\F154";
}
.fi-gift:before {
content: "\F164";
}
.fi-star:before {
content: "\F192";
}
.fi-time:before {
content: "\F15F";
}
.fi-cloud-download:before {
content: "\F1DC";
}
.fi-shape-star:before {
content: "\F1CA";
}
.fi-loud:before {
content: "\F178";
}
.fi-dots-vertical-full:before {
content: "\F1D0";
/* corrections */
display: inherit;
margin-top: -2px;
}
.fi-user-male:before {
content: "\F147";
}
.fi-star-full:before {
content: "\F190";
}
.fi-help:before {
content: "\F168";
}
.fi-fingerprint:before {
content: "\F167";
}
.fi-plus-squared:before {
content: "\F193";
}
.fi-round-lightning:before {
content: "\F12A";
}
.fi-pie-chart:before {
content: "\F1B1";
}
.fi-arrow-right:before {
content: "\F1AE";
}
.fi-calendar:before {
content: "\F108";
}
.fi-shape-squared-unequal:before {
content: "\F135";
}
.fi-cart-6:before {
content: "\F1D7";
}
.fi-support-headphones:before {
content: "\F120";
}
.fi-code:before {
content: "\F14D";
}
.fi-brand-amazon:before {
content: "\E004";
}
.fi-social-facebook:before {
content: "\E028";
}
.fi-social-linkedin:before {
content: "\E04C";
}
.fi-social-pinterest:before {
content: "\E063";
}
.fi-social-rss:before {
content: "\E071";
}
.fi-social-snapchat:before {
content: "\E076";
}
.fi-social-twitter:before {
content: "\E08D";
}
.fi-social-vimeo:before {
content: "\E093";
}
.fi-social-youtube:before {
content: "\E0A5";
}
.fi-social-unsplash:before {
content: "\E91B";
}
.fi-homeadvisor:before {
content: "\E91C";
}
.fi-movie:before {
content: "\E921";
}
.fi-cart-7:before {
content: "\E93A";
}
.fi-emoji-happy:before {
content: "\E9E0";
}
.fi-emoji-smile:before {
content: "\E9E2";
}
.fi-emoji-tongue:before {
content: "\E9E4";
}
.fi-emoji-sad:before {
content: "\E9E6";
}
.fi-emoji-wink:before {
content: "\E9E8";
}
.fi-emoji-grin:before {
content: "\E9EA";
}
.fi-emoji-cool:before {
content: "\E9EC";
}
.fi-emoji-angry:before {
content: "\E9EE";
}
.fi-emoji-evil:before {
content: "\E9F0";
}
.fi-emoji-shocked:before {
content: "\E9F2";
}
.fi-emoji-baffled:before {
content: "\E9F4";
}
.fi-emoji-confused:before {
content: "\E9F6";
}
.fi-emoji-neutral:before {
content: "\E9F8";
}
.fi-emoji-hipster:before {
content: "\E9FA";
}
.fi-emoji-wondering:before {
content: "\E9FC";
}
.fi-emoji-sleepy:before {
content: "\E9FE";
}
.fi-emoji-frustrated:before {
content: "\EA00";
}
.fi-emoji-crying:before {
content: "\EA02";
}
.fi-brand-paypal:before {
content: "\EAD8";
}
.fi-social-twitch:before {
content: "\E920";
}
.fi-social-spotify:before {
content: "\E91D";
}
.fi-social-instagram:before {
content: "\E91E";
}
.fi-social-github:before {
content: "\E922";
}
.fi-social-soundcloud:before {
content: "\E91F";
}
.fi-arrow-start:before {
content: "\F1AC";
}
.fi-arrow-end:before {
content: "\F1AE";
}
.fi-arrow-start-slim:before {
content: "\F199";
}
.fi-arrow-end-slim:before {
content: "\F19A";
}
.fi-arrow-start-full:before {
content: "\F1BD";
}
.fi-arrow-end-full:before {
content: "\F1BC";
}
/**
LAYOUT :: HEADER
Note: Here are basic settings only!
Most header layouts are achived using helper classes (see Documentation->Utils).
Dropdowns are handled by _core/components/_dropdown.scss
All dropdowns are globally the same, is just a feeling/illusion that looks different on header.
Any header dropdown class can be used on any other dropdown (including deep navigation).
Functions like header reveal/sticky/over are all handled by Stepofweb plugin:
_plugins/sow_header.scss and GULP/src/plugins/sow-header/sow_header.js
**/
header.main-nav,
#header {
position: relative;
background-color: #ffffff;
}
header.main-nav a,
#header a {
text-decoration: none;
}
.nav-item > a {
position: relative;
}
.nav-item .dropdown-menu {
min-width: 200px;
}
.nav-item > .dropdown-menu {
margin: 0;
}
/*
Main Links :: Icon Indicator
*/
.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
font-family: "Flaticon";
content: "\F1C4";
font-size: 12px;
width: 12px;
height: 12px;
margin-top: -6px;
position: absolute;
line-height: 1em;
top: 50%;
border: 0;
right: 8px;
}
/* icon align fix */
.navbar-nav .nav-link > i {
vertical-align: text-top;
}
body.header-scroll-reveal.user-scrolled-down #header:not(.shadow-none) {
box-shadow: 0 0 25px rgba(140, 152, 164, 0.1);
}
/*
Navbar Toggler
*/
.navbar-toggler {
width: 60px;
height: 60px;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
margin-left: -15px;
margin-right: 8px;
}
.navbar-toggler > svg {
display: none;
}
.navbar-toggler[aria-expanded=false] > svg:first-child {
display: inline-block;
}
.navbar-toggler[aria-expanded=true] > svg:last-child {
display: inline-block;
}
/*
HEADER TOGGLE
up|down header
*/
body.header-hide.btn-header-toggle-show .btn-header-toggle {
-webkit-animation: _btnslidedown 0.5s ease-out forwards;
animation: _btnslidedown 0.5s ease-out forwards;
position: fixed !important;
right: 20px !important;
}
@-webkit-keyframes _btnslidedown {
from {
top: -100px;
}
to {
top: 15px;
}
}
@keyframes _btnslidedown {
from {
top: -100px;
}
to {
top: 15px;
}
}
/* hide spacer added by js : .btn-header-toggle */
body.layout-admin #wrapper_content.js-animation-enable {
transition: all 150ms linear;
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
nav.navbar:not(.h-auto) {
min-height: 80px;
}
/*
Dropdown mega menu / full width
*/
.nav-item.dropdown-mega {
position: inherit;
}
/*
Main Navigation Links
*/
.navbar-nav:not(.navbar-sm) {
height: 80px;
/* avoid unwanted margins on wrong text/icon size - dropdown issue on hover */
}
.navbar .navbar-nav .nav-link {
cursor: pointer;
padding: 28px 15px;
}
/* icon spacing */
.navbar-nav .nav-link > i + span {
display: inline-block;
padding-left: 10px;
}
.navbar .navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide) {
padding-right: 30px;
}
/*
.navbar-sm
used under large search
(header-variant-1.html)
*/
.navbar-nav.navbar-sm {
height: 55px;
}
.navbar .navbar-nav.navbar-sm .nav-link {
cursor: pointer;
padding: 15px;
}
.navbar .navbar-nav.navbar-sm .nav-item:first-child .nav-link {
padding-left: 0;
}
.navbar .navbar-nav a.nav-link {
height: 100%;
}
/*
Brand|Logo
Frontend only
*/
body:not(.layout-admin) .navbar-brand {
margin-right: 50px;
}
.navbar .dropdown-menu.dropdown-menu-up {
top: auto !important;
bottom: 0 !important;
}
.navbar .dropdown-menu.dropdown-menu-up-n100 {
top: -100px !important;
bottom: auto !important;
}
.navbar .dropdown-menu.dropdown-menu-up-n150 {
top: -150px !important;
bottom: auto !important;
}
.navbar .dropdown-menu.dropdown-menu-up-n180 {
top: -180px !important;
bottom: auto !important;
}
.navbar .dropdown-menu.dropdown-menu-up-n220 {
top: -220px !important;
bottom: auto !important;
}
.navbar .dropdown-menu.dropdown-menu-up-n250 {
top: -250px !important;
bottom: auto !important;
}
}
@media only screen and (max-width: 991px) {
/*
@FIX
Main Links :: Icon Indicator
*/
.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
top: 20px;
}
/* if max width was set */
.navbar-nav .dropdown-menu {
width: 100% !important;
max-width: 100% !important;
}
/*
Childs padding
*/
.navbar-nav .dropdown-menu > .dropdown-item > .dropdown-menu {
padding-left: 15px !important;
}
/*
Styling
*/
header.main-nav .navbar-collapse.collapsing {
display: none !important;
}
/* appearing animation */
.navbar-collapse.navbar-animate-bouncein {
-webkit-animation: __utilBounceIn 0.35s ease-out forwards;
animation: __utilBounceIn 0.35s ease-out forwards;
}
.navbar-collapse.navbar-animate-fadein {
-webkit-animation: __utilFadeIn 0.35s ease-out forwards;
animation: __utilFadeIn 0.35s ease-out forwards;
}
#header .navbar-collapse.collapsing {
display: none !important;
transition: none !important;
}
.navbar-collapse.show {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f8f9fa;
z-index: 99999;
}
.navbar-collapse.show > .navbar-nav {
padding: 15px;
position: absolute;
background-color: #fff;
top: 85px;
left: 15px;
right: 15px;
bottom: 15px;
box-shadow: 0 10px 40px 10px rgba(140, 152, 164, 0.175);
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: auto;
max-height: 100%;
}
/* dark navbar */
.navbar-dark .navbar-collapse.show > .navbar-nav a {
color: #495057;
}
/* mobile bar (we add logo & toggler button) */
.navbar-xs {
display: block !important;
background-color: #fff;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}
/* styling navbar-toggler */
.navbar-xs > .navbar-toggler {
width: 70px;
height: 70px;
border: 0;
margin: 0;
float: right;
}
/* logo / .navbar-brand */
.navbar-xs > .navbar-brand {
min-height: 70px;
line-height: 70px;
}
.navbar-xs > .navbar-brand > img {
max-height: 70px !important;
}
.navbar-xs > .navbar-brand {
margin: 0 15px;
}
/* styling main links */
.navbar-nav .nav-item.dropdown > .nav-link {
font-weight: 500;
font-size: 19px;
}
/* links with dropdown only */
.navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle {
color: #bec4cb;
}
/* hide dropdown icon indicator */
.navbar-nav .nav-item.dropdown > .nav-link:before {
display: none !important;
}
/* first level open by default */
.navbar-nav .nav-item.dropdown > .dropdown-menu {
display: block !important;
margin-bottom: 30px !important;
margin-top: 8px;
}
/* no shadow deep levels */
.nav-item .dropdown-menu {
box-shadow: none !important;
}
.nav-item .dropdown-menu {
font-size: inherit;
}
}
/**
DEFAULTS
**/
#footer a {
color: #121212;
}
/**
LAYOUT :: FOOTER
**/
#footer.footer-dark {
color: #ffffff;
background: #313131;
background: linear-gradient(to bottom, #454545 0%, #313131 100%);
}
#footer.footer-dark .footer-svg-shape > svg {
fill: #3e3e3e !important;
}
#footer.footer-dark a {
color: #ffffff;
}
#footer.footer-dark .bg-distinct {
background-color: rgba(0, 0, 0, 0.1);
}
#footer.footer-dark hr {
border-color: rgba(108, 117, 125, 0.3);
}
#footer.footer-light {
color: #212529;
background: #ebebeb;
background: linear-gradient(to bottom, white 0%, #ebebeb 100%);
}
#footer.footer-light .footer-svg-shape > svg {
fill: #f8f8f8 !important;
}
#footer.footer-light .bg-distinct {
background-color: rgba(0, 0, 0, 0.03);
}
/**
Responsive
**/
@media only screen and (max-width: 992px) {
#footer .breadcrumb-item {
padding-left: 0;
padding-right: 0;
font-size: 17px;
float: none !important;
display: block;
margin-top: 3px;
width: 100%;
text-align: center;
}
#footer .breadcrumb-item a {
padding: 8px !important;
display: block;
background-color: rgba(255, 255, 255, 0.02);
text-decoration: none;
border-radius: 0.25rem;
}
#footer .breadcrumb .breadcrumb-item:hover a {
background-color: rgba(255, 255, 255, 0.03);
}
#footer:not(.footer-dark) .breadcrumb-item a {
background-color: rgba(0, 0, 0, 0.02);
}
#footer:not(.footer-dark) .breadcrumb-item:hover a {
background-color: rgba(0, 0, 0, 0.03);
}
#footer .breadcrumb-item + .breadcrumb-item::before {
display: none !important;
padding: 0;
}
}
/**
LAYOUT :: SIDEBAR
**/
/**
Responsive
**/
/**
LAYOUT :: GLOBALS
**/
#middle {
position: relative;
max-width: 100% !important;
}
.container-xlg,
.container {
position: relative;
}
.container-xlg {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/**
Ignore Bootstrap breakpoints (< 1200px)
Should be used with (.container) class
**/
@media only screen and (max-width: 1201px) {
.container-ignore-breakpoints {
max-width: 100%;
}
}
/*
.container-xlg container (+200px)
Bootstrap is up to 1200
*/
@media only screen and (min-width: 1400px) {
.container-xlg {
max-width: 1400px;
}
}
@media only screen and (max-width: 1400px) {
.container-xlg {
max-width: 100%;
}
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/**
Boxed Layout
header-* classes not supported at this time!
**/
body:not(.header-over):not(.header-sticky):not(.header-scroll-reveal):not(.layout-admin).layout-boxed {
background-color: #f2f3f8;
}
body:not(.header-over):not(.header-sticky):not(.header-scroll-reveal):not(.layout-admin).layout-boxed #wrapper {
margin: 60px auto;
max-width: 1200px;
background-color: #fff;
-ms-box-shadow: 0 0 35px rgba(140, 152, 164, 0.15);
-o-box-shadow: 0 0 35px rgba(140, 152, 164, 0.15);
box-shadow: 0 0 35px rgba(140, 152, 164, 0.15);
border-radius: 0.25rem;
}
body:not(.header-over):not(.header-sticky):not(.header-scroll-reveal):not(.layout-admin).layout-boxed #header,
body:not(.header-over):not(.header-sticky):not(.header-scroll-reveal):not(.layout-admin).layout-boxed #header > #top_bar {
-moz-border-top-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;
-moz-border-top-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
body:not(.header-over):not(.header-sticky):not(.header-scroll-reveal):not(.layout-admin).layout-boxed #footer {
-moz-border-bottom-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
-moz-border-bottom-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
}
/**
LAYOUT :: MISC
**/
/**
Responsive
**/
/**
Swiper Slider
_vendors/vendor.swiper.scss is dynamically loaded
we need it here to be instantly loaded (because is added to core.min.css)
Flickity - exactly the same!
*/
.flickity-preloader:not(.flickity-enabled) > div:not(:first-child),
.flickity-preloader:not(.flickity-enabled) > img:not(:first-child),
.flickity-preloader:not(.flickity-enabled) > a:not(:first-child),
.swiper-container:not(.swiper-container-initialized) .swiper-slide:not(:first-child) {
display: none;
}
.flickity-preloader:not(.flickity-enabled),
.swiper-container.swiper-preloader:not(.swiper-container-initialized) {
position: relative;
}
.flickity-preloader:not(.flickity-enabled):after,
.swiper-container.swiper-preloader:not(.swiper-container-initialized):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.flickity-preloader:not(.flickity-enabled) > div:first-child,
.flickity-preloader:not(.flickity-enabled) > img:first-child,
.flickity-preloader:not(.flickity-enabled) > a:first-child,
.swiper-container.swiper-preloader:not(.swiper-container-initialized) .swiper-slide:first-child {
opacity: 0.2;
}
.flickity-preloader:not(.flickity-enabled):before,
.swiper-container.swiper-preloader:not(.swiper-container-initialized):before {
content: "\F1E0";
font-family: "Flaticon";
position: absolute;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -15px;
font-size: 30px;
z-index: 2;
color: #ffffff;
-webkit-animation: spin 1.3s infinite linear;
animation: spin 1.3s infinite linear;
}
.slimScrollBar {
z-index: 9 !important;
}
.slimScrollRail {
z-index: 8 !important;
}
section.jarallax {
transition: none !important;
}
.summernote-fix {
border: #f8f9fa 1px solid;
margin-top: 42px;
margin-bottom: 5px;
box-shadow: 0 0 0 0 #fff, 0 -42px 0 0 #f8f9fa, 0 10px 0 1px #f8f9fa;
border-radius: 0.25rem;
color: #fff;
background-color: #fff;
}
.bs-select-fix[multiple] {
max-height: 52.47px;
}
.bs-select-fix.form-control-sm[multiple] {
max-height: 42.72px;
}
/**
LAYOUT :: ADMIN
We set here very few important & general rules to
avoid issues on fixed sidebar/header
**/
body.layout-admin {
background-color: #f9f9fc;
display: flex;
flex-direction: column;
}
body.layout-admin #wrapper {
flex: 1;
}
body.layout-admin #header {
z-index: 10;
}
body.layout-admin #middle {
/* general rules for #middle are added to global.scss */
padding: 30px;
/*min-height: calc(100vh - 80px); */
}
/*
.m--negative
No container margins if #middle has margins!
+ .row margins fix
*/
/*body.layout-admin #middle>section>.row,*/
body.layout-admin #middle > .m--negative {
margin-left: -30px !important;
margin-right: -30px !important;
border-radius: 0 !important;
}
body.layout-admin #middle > section:first-child.m--negative {
margin-top: -30px !important;
}
/* pagetitle, extended options */
body.layout-admin #middle > .page-title {
padding: 3px 15px;
background-color: #ffffff;
margin-top: -30px !important;
margin-bottom: 30px !important;
margin-left: -30px !important;
margin-right: -30px !important;
border-top: #e9ecef 1px solid;
z-index: 2;
}
/* section settings */
body.layout-admin #middle section {
color: #444444;
margin-bottom: 30px;
font-size: 1.0625rem;
border: 0;
min-width: 0;
/* in case .d-flex is used */
flex-direction: column;
}
body.layout-admin #middle section:not(.section-clean) {
padding: 15px;
background-color: #ffffff;
-ms-box-shadow: 0 0 25px rgba(140, 152, 164, 0.1);
-o-box-shadow: 0 0 25px rgba(140, 152, 164, 0.1);
box-shadow: 0 0 25px rgba(140, 152, 164, 0.1);
border-radius: 0.25rem;
}
/* section header */
body.layout-admin #middle section > header,
body.layout-admin #middle .section-header {
position: relative;
word-break: normal;
/* make it full */
margin-top: -15px;
margin-left: -15px;
margin-right: -15px;
/* readjust spacings */
padding: 15px;
margin-bottom: 15px;
/* rounded */
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
body.layout-admin #middle section > header > .ui-options,
body.layout-admin #middle .section-header > .ui-options {
padding-right: 15px;
margin-right: -15px;
margin-left: 15px;
}
body.layout-admin #middle section > header > .ui-options > a,
body.layout-admin #middle header > .ui-options > a,
body.layout-admin #middle .section-header > .ui-options > a {
color: #313131;
text-decoration: none;
margin-left: 10px;
}
body.layout-admin #middle section > header:not(.bg-light):not(.b-0):not(.b--0):not(.border-0):after,
body.layout-admin #middle .section-header:not(.bg-light):not(.b-0):not(.b--0):not(.border-0):after {
content: "";
display: block;
border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
position: absolute;
height: 0;
left: 0;
right: 0;
bottom: 0;
}
body.layout-admin #middle > section:last-child {
margin-bottom: 0;
}
/* body section */
body.layout-admin #middle .section-body {
position: relative;
}
/* footer */
body.layout-admin #footer a {
color: #dddddd;
text-decoration: none;
}
body.layout-admin #footer a.active,
body.layout-admin #footer .active > a {
color: #ffffff;
}
body.layout-admin #header.bg-dark {
background: #454545 !important;
}
body.layout-admin #footer.bg-dark {
background: #313131 !important;
}
/* portlet : flex */
.portlet {
background: #fff;
box-shadow: 0 0 25px rgba(140, 152, 164, 0.1);
font-size: 16px;
color: #495057;
border-radius: 0.25rem;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-direction: column;
height: 100%;
}
.portlet-header {
padding: 1rem;
width: 100%;
align-self: baseline;
}
.portlet-header > span {
display: block;
font-weight: 500;
color: #6c757d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.portlet-body {
padding: 1rem;
height: 100%;
width: 100%;
align-self: baseline;
}
.portlet-footer {
padding: 1rem;
display: flex;
align-self: baseline;
width: 100%;
}
.portlet .border:not(.medium-editor):not(.dropdown-toggle),
.portlet .border-bottom,
.portlet .border-top {
border-color: #eff1f3 !important;
}
/**
Not fully supported by old browsers!
But is ok for admin!
https://caniuse.com/#feat=css-sticky
**/
@supports ((position: -webkit-sticky) or (position: sticky)) {
/* sticky : header */
body.layout-admin.header-sticky:not(.header-fixed):not(.header-hide) #header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* sticky : footer */
body.layout-admin.footer-sticky #footer {
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
}
/*
Fixes
*/
body.layout-admin #header ul.navbar-nav a.nav-link i + span {
padding-left: 10px;
}
body.layout-admin #middle.dropdown-menu {
font-size: 14px;
}
body.layout-admin .dropdown-mega > .dropdown-menu {
max-width: 1200px;
}
aside.overlay-dark:after {
border-radius: 0.25rem;
}
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/* logo width on aside-focus */
body.layout-admin:not(.aside-focus) #header .navbar-brand.aside-width {
width: 260px !important;
margin: 0 !important;
margin-left: -15px !important;
padding-left: 15px !important;
}
/**
LAYOUT : PADDED
**/
body.layout-admin.layout-padded {
padding: 30px;
}
body.layout-admin.layout-padded .aside-start,
body.layout-admin.layout-padded .aside-end {
top: 30px !important;
bottom: 30px !important;
height: auto !important;
border-radius: 0.25rem;
transition: none !important;
}
body.layout-admin.layout-padded .aside-wrapper {
border-radius: 0.25rem;
}
body.layout-admin.layout-padded .aside-start {
left: 30px;
}
body.layout-admin.layout-padded .aside-end {
right: 30px;
}
body.layout-admin.layout-padded #header {
margin-left: 290px !important;
}
body.layout-admin.layout-padded #middle {
padding-right: 0;
}
body.layout-admin.layout-padded #middle > .page-title {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.layout-admin.layout-padded #footer {
padding-left: 290px !important;
}
}
@media only screen and (max-width: 992px) {
body.layout-admin #header {
min-height: 68px;
}
body.layout-admin:not(.aside-sticky) #header .navbar-toggler {
margin-left: 0 !important;
}
body.layout-admin section > .container {
padding-left: 0;
padding-right: 0;
}
body.layout-admin #middle {
padding-left: 15px;
padding-right: 15px;
}
body.layout-admin #middle > .page-title {
margin-left: -15px !important;
margin-right: -15px !important;
padding-left: 0;
padding-right: 0;
}
body.layout-admin #header ul.navbar-nav a.nav-link > span {
background-color: transparent !important;
}
body.layout-admin .navbar-collapse.show li.nav-item {
width: 100%;
}
}
.toast-title {
font-weight: bold;
}
.toast-message {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.toast-message a,
.toast-message label {
color: #ffffff;
}
.toast-message a:hover {
color: #cccccc;
text-decoration: none;
}
.toast-close-button {
position: relative;
right: -0.3em;
top: -0.3em;
float: right;
font-size: 20px;
font-weight: bold;
color: #ffffff;
-webkit-text-shadow: 0 1px 0 #ffffff;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
.toast-close-button:hover,
.toast-close-button:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}
/*Additional properties for button version
iOS requires the button element instead of an anchor tag.
If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-center {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-full-width {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-full-width {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-left {
top: 12px;
left: 12px;
}
.toast-top-right {
top: 12px;
right: 12px;
}
.toast-bottom-right {
right: 12px;
bottom: 12px;
}
.toast-bottom-left {
bottom: 12px;
left: 12px;
}
#toast-container {
position: fixed;
z-index: 999999;
/*overrides*/
}
#toast-container * {
box-sizing: border-box;
}
#toast-container > div {
position: relative;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 12px #999999;
color: #ffffff;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
#toast-container > div:hover {
box-shadow: 0 0 12px #000000;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
cursor: pointer;
}
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.toast {
background-color: #030303;
}
.toast-success {
background-color: #51a351;
}
.toast-error {
background-color: #bd362f;
}
.toast-info {
background-color: #2f96b4;
}
.toast-warning {
background-color: #f89406;
}
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background-color: #000000;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 11em;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}
@media all and (min-width: 241px) and (max-width: 480px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 18em;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}
@media all and (min-width: 481px) and (max-width: 768px) {
#toast-container > div {
padding: 15px 15px 15px 50px;
width: 25em;
}
}
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__clear {
position: relative;
}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px;
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-search--inline {
float: left;
}
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0;
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
.select2-results {
display: block;
}
.select2-results__options {
list-style: none;
margin: 0;
padding: 0;
}
.select2-results__option {
padding: 6px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-results__option[aria-selected] {
cursor: pointer;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-search--dropdown {
display: block;
padding: 4px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px;
padding: 1px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline {
float: right;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
}
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield;
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--default .select2-results__option[role=group] {
padding: 0;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd;
}
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white;
}
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #dde4ea;
border-radius: 0.25rem;
outline: 0;
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
}
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px;
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #dde4ea;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0);
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #dde4ea;
border-radius: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
left: 1px;
right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0);
}
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #dde4ea;
border-radius: 0.25rem;
cursor: text;
outline: 0;
}
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #dde4ea;
border-radius: 0.25rem;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555;
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
float: right;
margin-left: 5px;
margin-right: auto;
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #dde4ea;
outline: 0;
}
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none;
}
.select2-container--classic .select2-dropdown {
background-color: white;
border: 1px solid transparent;
}
.select2-container--classic .select2-dropdown--above {
border-bottom: none;
}
.select2-container--classic .select2-dropdown--below {
border-top: none;
}
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--classic .select2-results__option[role=group] {
padding: 0;
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey;
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white;
}
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb;
}
/**
* We need a clone of bootstrap color-yiq mixin so we can get the same value for color
*/
.select2-container--bootstrap {
display: block;
/*------------------------------------*\
#COMMON STYLES
\*------------------------------------*/
/**
* Search field in the Select2 dropdown.
*/
/**
* No outline for all search fields - in the dropdown
* and inline in multi Select2s.
*/
/**
* Adjust Select2's choices hover and selected styles to match
* Bootstrap 4's default dropdown styles.
*
* @see https://getbootstrap.com/docs/4.0/components/dropdowns/
*/
/**
* Clear the selection.
*/
/**
* Address disabled Select2 styles.
*
* @see https://select2.github.io/examples.html#disabled
* @see hhttps://getbootstrap.com/docs/4.0/components/forms/#disabled-forms
*/
/*------------------------------------*\
#DROPDOWN
\*------------------------------------*/
/**
* Dropdown border color and box-shadow.
*/
/**
* Limit the dropdown height.
*/
/*------------------------------------*\
#SINGLE SELECT2
\*------------------------------------*/
/*------------------------------------*\
#MULTIPLE SELECT2
\*------------------------------------*/
/**
* Address Bootstrap control sizing classes
*
* 1. Reset Bootstrap defaults.
* 2. Adjust the dropdown arrow button icon position.
*
* @see https://getbootstrap.com/docs/4.0/components/forms/#sizing
*/
/* 1 */
/*------------------------------------*\
#RTL SUPPORT
\*------------------------------------*/
}
.select2-container--bootstrap .select2-selection {
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: #fff;
border: 1px solid #dde4ea;
color: #495057;
font-size: 1.0625rem;
outline: 0;
}
@media (prefers-reduced-motion: reduce) {
.select2-container--bootstrap .select2-selection {
transition: none;
}
}
.select2-container--bootstrap .select2-selection.form-control {
border-radius: 0.25rem;
}
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: #fff;
border: 1px solid #dde4ea;
color: #495057;
font-size: 1.0625rem;
}
@media (prefers-reduced-motion: reduce) {
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
transition: none;
}
}
.select2-container--bootstrap .select2-search__field {
outline: 0;
/* Firefox 18- */
/**
* Firefox 19+
*
* @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
*/
}
.select2-container--bootstrap .select2-search__field::-webkit-input-placeholder {
color: #95a4af;
}
.select2-container--bootstrap .select2-search__field:-moz-placeholder {
color: #95a4af;
}
.select2-container--bootstrap .select2-search__field::-moz-placeholder {
color: #95a4af;
opacity: 1;
}
.select2-container--bootstrap .select2-search__field:-ms-input-placeholder {
color: #95a4af;
}
.select2-container--bootstrap .select2-results__option {
padding: 0.78rem 1rem;
/**
* Disabled results.
*
* @see https://select2.github.io/examples.html#disabled-results
*/
/**
* Hover state.
*/
/**
* Selected state.
*/
}
.select2-container--bootstrap .select2-results__option[role=group] {
padding: 0;
}
.select2-container--bootstrap .select2-results__option[aria-disabled=true] {
color: #6c757d;
cursor: not-allowed;
}
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
background-color: #f8f9fa;
color: #16181b;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
background-color: #f8f9fa;
color: #4285F4;
}
.select2-container--bootstrap .select2-results__option .select2-results__option {
padding: 0.78rem 1rem;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1rem;
padding-left: 2rem;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2rem;
padding-left: 3rem;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3rem;
padding-left: 4rem;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4rem;
padding-left: 5rem;
}
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5rem;
padding-left: 6rem;
}
.select2-container--bootstrap .select2-results__group {
color: inherit;
display: block;
padding: 0.78rem 1rem;
font-size: 0.9296875rem;
line-height: 1.5;
white-space: nowrap;
}
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
border-color: rgba(66, 133, 244, 0.5);
box-shadow: 0 0 25px rgba(66, 133, 244, 0.1);
}
.select2-container--bootstrap.select2-container--open {
/**
* Make the dropdown arrow point up while the dropdown is visible.
*/
/**
* Handle border radii of the container when the dropdown is showing.
*/
}
.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b {
border-color: transparent transparent #95a4af transparent;
border-width: 0 0.25rem 0.25rem 0.25rem;
}
.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-color: transparent;
box-shadow: none;
}
.select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-color: transparent;
box-shadow: none;
}
.select2-container--bootstrap .select2-selection__clear {
color: #95a4af;
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px;
}
.select2-container--bootstrap .select2-selection__clear:hover {
color: "#111";
}
.select2-container--bootstrap.select2-container--disabled .select2-selection {
border-color: #dde4ea;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-search__field {
cursor: not-allowed;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
background-color: #e9ecef;
}
.select2-container--bootstrap.select2-container--disabled .select2-selection__clear,
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove {
display: none;
}
.select2-container--bootstrap .select2-dropdown {
border-color: rgba(66, 133, 244, 0.5);
overflow-x: hidden;
margin-top: -1px;
}
.select2-container--bootstrap .select2-dropdown--above {
margin-top: 1px;
}
.select2-container--bootstrap .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--bootstrap .select2-selection--single {
height: calc(1.5em + 1.56rem + 2px);
line-height: 1.5;
padding: 0.78rem 1.75rem 0.78rem 1rem;
/**
* Adjust the single Select2's dropdown arrow button appearance.
*/
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
position: absolute;
bottom: 0;
right: 1rem;
top: 0;
width: 0.25rem;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
border-color: #95a4af transparent transparent transparent;
border-style: solid;
border-width: 0.25rem 0.25rem 0 0.25rem;
height: 0;
left: 0;
margin-left: -0.25rem;
margin-top: -0.125rem;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
color: #495057;
padding: 0;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
color: #95a4af;
}
.select2-container--bootstrap .select2-selection--multiple {
min-height: calc(1.5em + 1.56rem + 2px);
padding: 0;
height: auto;
/**
* Make Multi Select2's choices match Bootstrap 4's default button styles.
*/
/**
* Minus 2px borders.
*/
/**
* Clear the selection.
*/
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
display: block;
line-height: 1.5;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder {
color: #95a4af;
float: left;
margin-top: 5px;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
color: #495057;
background: #e9ecef;
border: 1px solid #6c757d;
border-radius: 0.25rem;
cursor: default;
float: left;
margin: calc(0.78rem - 1px) 0 0 0.5rem;
padding: 0 0.78rem;
}
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
background: transparent;
padding: 0 1rem;
height: calc(1.5em + 1.56rem + 2px);
line-height: 1.5;
margin: -1px 0;
min-width: 5em;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
color: #95a4af;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 0.39rem;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
color: "#111";
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
margin-top: 0.78rem;
}
.select2-container--bootstrap .select2-selection--single.form-control-sm,
.input-group-sm .select2-container--bootstrap .select2-selection--single,
.form-group-sm .select2-container--bootstrap .select2-selection--single {
border-radius: 0.2rem;
font-size: 0.9296875rem;
height: calc(1.5em + 0.92rem + 2px);
line-height: 1.5;
padding: 0.46rem 1.75rem 0.46rem 1rem;
/* 2 */
}
.select2-container--bootstrap .select2-selection--single.form-control-sm .select2-selection__arrow b,
.input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,
.form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
margin-left: -0.46rem;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-sm,
.input-group-sm .select2-container--bootstrap .select2-selection--multiple,
.form-group-sm .select2-container--bootstrap .select2-selection--multiple {
border-radius: 0.2rem;
min-height: calc(1.5em + 0.92rem + 2px);
}
.select2-container--bootstrap .select2-selection--multiple.form-control-sm .select2-selection__choice,
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
font-size: 0.9296875rem;
line-height: 1.5;
margin: calc(0.46rem - 1px) 0 0 0.5rem;
padding: 0 0.46rem;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-sm .select2-search--inline .select2-search__field,
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
padding: 0 1rem;
font-size: 0.9296875rem;
height: calc(1.5em + 0.92rem + 2px);
line-height: 1.5;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-sm .select2-selection__clear,
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
margin-top: 0.46rem;
}
.select2-container--bootstrap .select2-selection--single.form-control-lg,
.input-group-lg .select2-container--bootstrap .select2-selection--single,
.form-group-lg .select2-container--bootstrap .select2-selection--single {
border-radius: 0.3rem;
font-size: 1.328125rem;
height: calc(1.5em + 2.18rem + 2px);
line-height: 1.5;
padding: 1.09rem 1.9375rem 1.09rem 1rem;
/* 1 */
}
.select2-container--bootstrap .select2-selection--single.form-control-lg .select2-selection__arrow,
.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
width: 0.3125rem;
}
.select2-container--bootstrap .select2-selection--single.form-control-lg .select2-selection__arrow b,
.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,
.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
border-width: 0.3125rem 0.3125rem 0 0.3125rem;
margin-left: -0.3125rem;
margin-left: -1.09rem;
margin-top: -0.15625rem;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-lg,
.input-group-lg .select2-container--bootstrap .select2-selection--multiple,
.form-group-lg .select2-container--bootstrap .select2-selection--multiple {
min-height: calc(1.5em + 2.18rem + 2px);
border-radius: 0.3rem;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-lg .select2-selection__choice,
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
font-size: 1.328125rem;
line-height: 1.5;
border-radius: 0.25rem;
margin: calc(1.09rem - 1px) 0 0 0.5rem;
padding: 0 1.09rem;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-lg .select2-search--inline .select2-search__field,
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
padding: 0 1rem;
font-size: 1.328125rem;
height: calc(1.5em + 2.18rem + 2px);
line-height: 1.5;
}
.select2-container--bootstrap .select2-selection--multiple.form-control-lg .select2-selection__clear,
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
margin-top: 1.09rem;
}
.select2-container--bootstrap .select2-selection.form-control-lg.select2-container--open .select2-selection--single {
/**
* Make the dropdown arrow point up while the dropdown is visible.
*/
}
.select2-container--bootstrap .select2-selection.form-control-lg.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #95a4af transparent;
border-width: 0 0.3125rem 0.3125rem 0.3125rem;
}
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single {
/**
* Make the dropdown arrow point up while the dropdown is visible.
*/
}
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #95a4af transparent;
border-width: 0 0.3125rem 0.3125rem 0.3125rem;
}
.select2-container--bootstrap[dir=rtl] {
/**
* Single Select2
*
* 1. Makes sure that .select2-selection__placeholder is positioned
* correctly.
*/
/**
* Multiple Select2
*/
}
.select2-container--bootstrap[dir=rtl] .select2-selection--single {
padding-left: 1.75rem;
padding-right: 1rem;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__rendered {
padding-right: 0;
padding-left: 0;
text-align: right;
/* 1 */
}
.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__arrow {
left: 1rem;
right: auto;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__arrow b {
margin-left: 0;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-search--inline {
float: right;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice {
margin-left: 0;
margin-right: 0.5rem;
}
.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--bootstrap .select2-dropdown[dir=rtl] .select2-results__options {
text-align: right;
}
/*------------------------------------*\
#ADDITIONAL GOODIES
\*------------------------------------*/
/**
* Address Bootstrap's validation states
*
* If a Select2 widget parent has one of Bootstrap's validation state modifier
* classes, adjust Select2's border colors and focus states accordingly.
* You may apply said classes to the Select2 dropdown (body > .select2-container)
* via JavaScript match Bootstraps' to make its styles match.
*
* @see https://getbootstrap.com/docs/4.0/components/forms/#validation
*/
.is-valid .select2-dropdown,
.is-valid .select2-selection {
border-color: #6dbb30;
}
.is-valid .select2-container--focus .select2-selection,
.is-valid .select2-container--open .select2-selection {
border-color: #559226;
}
.is-valid .select2-container--focus .select2-selection:focus,
.is-valid .select2-container--open .select2-selection:focus {
box-shadow: 0 0 0 0.2rem rgba(109, 187, 48, 0.25);
}
.is-valid.select2-drop-active {
border-color: #559226;
}
.is-valid.select2-drop-active.select2-drop.select2-drop-above {
border-top-color: #559226;
}
.is-invalid .select2-dropdown,
.is-invalid .select2-selection {
border-color: #f64e60;
}
.is-invalid .select2-container--focus .select2-selection,
.is-invalid .select2-container--open .select2-selection {
border-color: #f41d34;
}
.is-invalid .select2-container--focus .select2-selection:focus,
.is-invalid .select2-container--open .select2-selection:focus {
box-shadow: 0 0 0 0.2rem rgba(246, 78, 96, 0.25);
}
.is-invalid.select2-drop-active {
border-color: #f41d34;
}
.is-invalid.select2-drop-active.select2-drop.select2-drop-above {
border-top-color: #f41d34;
}
/* Validation classes on parent element. Preserved Bootstrap 3 validation classes */
.has-warning .select2-dropdown,
.has-warning .select2-selection {
border-color: #fad776;
}
.has-warning .select2-container--focus .select2-selection,
.has-warning .select2-container--open .select2-selection {
border-color: #f8c945;
}
.has-warning .select2-container--focus .select2-selection:focus,
.has-warning .select2-container--open .select2-selection:focus {
box-shadow: 0 0 0 0.2rem rgba(250, 215, 118, 0.25);
}
.has-warning.select2-drop-active {
border-color: #f8c945;
}
.has-warning.select2-drop-active.select2-drop.select2-drop-above {
border-top-color: #f8c945;
}
.has-error .select2-dropdown,
.has-error .select2-selection {
border-color: #f64e60;
}
.has-error .select2-container--focus .select2-selection,
.has-error .select2-container--open .select2-selection {
border-color: #f41d34;
}
.has-error .select2-container--focus .select2-selection:focus,
.has-error .select2-container--open .select2-selection:focus {
box-shadow: 0 0 0 0.2rem rgba(246, 78, 96, 0.25);
}
.has-error.select2-drop-active {
border-color: #f41d34;
}
.has-error.select2-drop-active.select2-drop.select2-drop-above {
border-top-color: #f41d34;
}
.has-success .select2-dropdown,
.has-success .select2-selection {
border-color: #6dbb30;
}
.has-success .select2-container--focus .select2-selection,
.has-success .select2-container--open .select2-selection {
border-color: #559226;
}
.has-success .select2-container--focus .select2-selection:focus,
.has-success .select2-container--open .select2-selection:focus {
box-shadow: 0 0 0 0.2rem rgba(109, 187, 48, 0.25);
}
.has-success.select2-drop-active {
border-color: #559226;
}
.has-success.select2-drop-active.select2-drop.select2-drop-above {
border-top-color: #559226;
}
/**
* Select2 widgets in Bootstrap Input Groups
*
* @see https://getbootstrap.com/docs/4.0/components/input-group/
* @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
*/
/**
* Reset rounded corners
*/
.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection,
.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection.form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .select2-container--bootstrap {
flex: 1 1 auto;
position: relative;
z-index: 2;
width: 1%;
margin-bottom: 0;
/**
* Adjust z-index like Bootstrap does to show the focus-box-shadow
* above appended buttons in .input-group and .form-group.
*/
/**
* Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
* Multi Select2's height which - depending on how many elements have been selected -
* may grow taller than its initial size.
*
* @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
*/
}
.input-group > .select2-container--bootstrap > .selection {
display: flex;
flex: 1 1 auto;
}
.input-group > .select2-container--bootstrap > .selection > .select2-selection.form-control {
float: none;
}
.input-group > .select2-container--bootstrap.select2-container--open,
.input-group > .select2-container--bootstrap.select2-container--focus {
z-index: 3;
}
.input-group > .select2-container--bootstrap,
.input-group > .select2-container--bootstrap .input-group-append,
.input-group > .select2-container--bootstrap .input-group-prepend,
.input-group > .select2-container--bootstrap .input-group-append .btn,
.input-group > .select2-container--bootstrap .input-group-prepend .btn {
vertical-align: top;
}
/**
* Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9
*
* Provides `!important` for certain properties of the class applied to the
* original `