/* =============== * * GENERAL * * =============== */ :root { --tile-background: #005CB9; --tile-corner-top-left: 20px; --tile-corner-top-right: 20px; --tile-corner-bottom-left: 20px; --tile-corner-bottom-right: 20px; --tile-gap: 25px; --tile-padding: 25px; --tile-minheight: 100px; --tile-aspectratio: 2.5/1; --tile-icon-width: 50px; --tile-icon-height: 50px; --tile-icon-position-top: 10px; --tile-icon-position-left: 10px; --tile-title-color: white; --tile-title-size: 16px; --tile-title-weight: bold; --tile-title-decoration: none; --tile-title-transform: none; --tile-title-lineheight: 1.2; } #dashboard{ } #dashboard > hr{ margin-top: var(--tile-gap); margin-bottom: var(--tile-gap); border: none; border-top: 1px solid var(--tile-background); } /* =============== * * MANDATORY * * =============== */ #dashboard #mandatory{ } #dashboard #mandatory .cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); grid-column-gap: var(--tile-gap); grid-row-gap: var(--tile-gap); } #dashboard #mandatory .cells .cell1 { grid-area: 1 / 1 / 2 / 2; } #dashboard #mandatory .cells .cell2 { grid-area: 1 / 2 / 2 / 3; } #dashboard #mandatory .cells .cell3 { grid-area: 1 / 3 / 2 / 4; } #dashboard #mandatory .cells .cell4 { grid-area: 1 / 4 / 2 / 5; } #dashboard #mandatory .cells .cell5 { grid-area: 2 / 1 / 3 / 2; } #dashboard #mandatory .cells .cell6 { grid-area: 2 / 2 / 3 / 3; } #dashboard #mandatory .cells .cell7 { grid-area: 2 / 3 / 3 / 4; } #dashboard #mandatory .cells .cell8 { grid-area: 2 / 4 / 3 / 5; } #dashboard #mandatory .cells .cell9 { grid-area: 3 / 1 / 4 / 2; } #dashboard #mandatory .cells .cell10 { grid-area: 3 / 2 / 4 / 3; } #dashboard #mandatory .cells .cell11 { grid-area: 4 / 1 / 5 / 2; } #dashboard #mandatory .cells .cell12 { grid-area: 4 / 2 / 5 / 3; } #dashboard #mandatory .cells .cell13 { grid-area: 5 / 1 / 6 / 2; } #dashboard #mandatory .cells .cell14 { grid-area: 5 / 2 / 6 / 3; } #dashboard #mandatory .cells .cell15 { grid-area: 6 / 1 / 7 / 2; } #dashboard #mandatory .cells .cell16 { grid-area: 6 / 2 / 7 / 3; } #dashboard #mandatory .cells .cell17 { grid-area: 3 / 3 / 7 / 4; } #dashboard #mandatory .cells .cell18 { grid-area: 3 / 4 / 7 / 5; } #dashboard #mandatory .cells .cell19 { grid-area: 7 / 1 / 8 / 2; } #dashboard #mandatory .cells .cell20 { grid-area: 7 / 2 / 8 / 3; } #dashboard #mandatory .cells .cell21 { grid-area: 7 / 3 / 8 / 4; } #dashboard #mandatory .cells .cell22 { grid-area: 7 / 4 / 8 / 5; } #dashboard #mandatory .cells .cell23 { grid-area: 8 / 1 / 9 / 2; } #dashboard #mandatory .cells .cell24 { grid-area: 8 / 2 / 9 / 3; } #dashboard #mandatory .cells .cell25 { grid-area: 8 / 3 / 9 / 4; } #dashboard #mandatory .cells .cell26 { grid-area: 8 / 4 / 9 / 5; } /* =============== * * OPTIONAL * * =============== */ #dashboard #optional{ } #dashboard #optional .cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: var(--tile-gap); grid-row-gap: var(--tile-gap); } #dashboard #optional .cell1 { grid-area: 1 / 1 / 2 / 2; } #dashboard #optional .cell2 { grid-area: 1 / 2 / 2 / 3; } #dashboard #optional .cell3 { grid-area: 1 / 3 / 2 / 4; } #dashboard #optional .cell4 { grid-area: 1 / 4 / 2 / 5; } #dashboard #optional .tile{margin-bottom: var(--tile-gap);overflow: hidden;} #dashboard #optional .tile span.settings { width: 20px; height: 20px; position: absolute; top: 8px; right: 5px; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' id='Vibrant' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.47 15.47'%3E%3Cdefs%3E%3Cstyle%3E.cls-1-548517268383%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1-548517268383' d='M508.28,603.24h0l-2.53-.43a.24.24,0,0,1-.2-.23l-.1-1.82a5.93,5.93,0,0,1-.66-.41l-1.67.71a.25.25,0,0,1-.3-.08l-1.49-2.09a.26.26,0,0,1,0-.32l1.19-1.32a5.47,5.47,0,0,1-.19-.8l-1.64-.67a.25.25,0,0,1-.16-.27l.43-2.53a.25.25,0,0,1,.23-.21l1.72-.09a7.39,7.39,0,0,1,.47-.76l-.67-1.57a.25.25,0,0,1,.09-.3l2.09-1.49a.24.24,0,0,1,.31,0l1.25,1.12a5.49,5.49,0,0,1,.91-.22l.63-1.55a.26.26,0,0,1,.27-.15l2.53.43a.24.24,0,0,1,.21.23l.09,1.67a6,6,0,0,1,.8.5l1.54-.65a.25.25,0,0,1,.3.09l1.49,2.09a.24.24,0,0,1,0,.31L514,593.72a6.45,6.45,0,0,1,.2.87l1.59.65a.24.24,0,0,1,.15.27l-.42,2.53a.26.26,0,0,1-.24.21l-1.76.09c-.14.24-.29.48-.45.7l.69,1.64a.25.25,0,0,1-.08.3l-2.09,1.48a.25.25,0,0,1-.31,0L510,601.23a6.91,6.91,0,0,1-.76.17l-.68,1.69A.25.25,0,0,1,508.28,603.24Zm-2.3-.89,2.14.36.66-1.63a.24.24,0,0,1,.2-.15,5.23,5.23,0,0,0,.95-.22.25.25,0,0,1,.25,0l1.3,1.18,1.77-1.25-.67-1.59a.23.23,0,0,1,0-.25,5.56,5.56,0,0,0,.55-.87.25.25,0,0,1,.21-.13l1.71-.09.36-2.13-1.55-.63a.24.24,0,0,1-.15-.2,5.67,5.67,0,0,0-.23-1.07.24.24,0,0,1,0-.24l1.1-1.23-1.25-1.76-1.49.63a.27.27,0,0,1-.25,0,5.37,5.37,0,0,0-1-.61.24.24,0,0,1-.14-.21l-.09-1.61-2.13-.36-.61,1.49a.25.25,0,0,1-.2.16,5.16,5.16,0,0,0-1.1.25.23.23,0,0,1-.25-.05l-1.2-1.08-1.77,1.26.64,1.52a.23.23,0,0,1,0,.25,5.38,5.38,0,0,0-.56.92.23.23,0,0,1-.22.14l-1.66.09L501,595.4l1.59.64a.24.24,0,0,1,.15.2,5.5,5.5,0,0,0,.24,1,.25.25,0,0,1-.05.25l-1.16,1.28,1.26,1.76,1.62-.68a.25.25,0,0,1,.25,0,5.5,5.5,0,0,0,.83.52.23.23,0,0,1,.13.21Zm9.31-4.35Z' transform='translate(-500.5 -587.78)'/%3E%3Cpath class='cls-1-548517268383' d='M508.25,598.73a3.39,3.39,0,0,1-.55,0,3.29,3.29,0,1,1,3.79-2.7,3.3,3.3,0,0,1-3.24,2.74Zm0-6.08a2.76,2.76,0,0,0-1.61.52,2.78,2.78,0,0,0,1.15,5,2.73,2.73,0,0,0,2.08-.47,2.79,2.79,0,0,0-1.15-5A3.73,3.73,0,0,0,508.24,592.65Z' transform='translate(-500.5 -587.78)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100%; background-position: center center; z-index: 999 } #dashboard #optional .tile .setting-options {position: absolute;right: 0;padding-right: 30px;padding: 0;border-radius: 0 0 0 10px;top: 0;min-height: 25px;transform: translateX(100%);transition: 0.3s;background: #f49600;z-index: 10;} #dashboard #optional .tile .setting-options.active { transform: translateX(0%);} #dashboard #optional .tile .setting-options button {background: none;border: none;color: white;font-weight: 600;padding: 12px 40px 12px 20px;cursor: pointer;} #dashboard #optional .tile .setting-options button.remove {} /* =============== * * Intranet Sliders * * =============== */ #dashboard #mainslider, #dashboard #secondaryslider{margin-bottom: var(--tile-gap);overflow: hidden;border-radius: 20px;} #dashboard #secondaryslider{ margin-top: var(--tile-gap); } .extslider{display: flex;flex-wrap: wrap;position: relative;background-color: var(--primary-color);border-radius: 20px;} .extslider *{ color: initial; margin: initial; padding: initial; font-size: initial; font-weight: initial; } .extslider > .slide{display: none;position: relative;overflow: hidden;transform: translateX(0%);min-width: 100%;border-bottom-right-radius: 20px;aspect-ratio: 4 / 1;} .extslider > .slide.active{display: flex;animation-name: slideinto; animation-duration: 0.3s; animation-fill-mode: forwards;} /*@keyframes slideinto { from { opacity: 0; } to {opacity: 1;} }*/ @keyframes slideinto { from { transform: translateX(100%); } to {transform: translateX(0%);} } .extslider > .slide picture{position: absolute;margin: 0 auto;width: 100%;object-fit: cover;z-index: -1;height: 100%;} .extslider > .slide picture img{object-fit: cover;max-width: 100.8%;min-height: 100%;height: 100%;width: 100%;} .extslider > .slide > .slide-content{padding: 2em;position: relative;z-index: 2;display: flex;align-items: center;background: rgba(73,39,123,0.85);} .extslider > .slide > .slide-content > div { } .extslider > .slide > .slide-content h1, .extslider > .slide > .slide-content h1 *{font-size: clamp(1.2rem, 1.5vw, 1.5rem);margin-bottom: 0.3em;font-weight: bold;line-height: 1em;color: white;} .extslider > .slide > .slide-content h2, .extslider > .slide > .slide-content h2 *{font-size: clamp(1rem, 1.5vw, 1.3rem);margin-bottom: 0.3em; font-weight: bold; line-height: 1.3em;color: white;} .extslider > .slide > .slide-content h3, .extslider > .slide > .slide-content h3 *{font-size: clamp(1rem, 1.5vw, 1.2rem);margin-bottom: 0.3em; font-weight: bold; line-height: 1.3em;color: white;} .extslider > .slide > .slide-content p, .extslider > .slide > .slide-content p *{font-size: clamp(0.7rem, 1.5vw, 1rem);margin-bottom: 0.3em; line-height: 1.3em;color: white;} .extslider > .slide > .slide-content a.readmorebutton{font-size: clamp(0.7rem, 1.5vw, 1rem);margin-bottom: 0.3em;line-height: 1;display: inline-block;margin-top: 2rem;background: #BD1478 !important;padding: 1rem 2.5rem;text-decoration: none;text-transform: none;color: white !important;border-radius: 20px;font-weight: bold;} .extslider > .slide[layout='1']{ align-items: center;justify-content: center;} .extslider > .slide[layout='1'] > .slide-content{max-width: 100%;width: 100%;height: 100%;background: #43277ba3;} .extslider > .slide[layout='1'] > .slide-content > div{ width: 100%; } .extslider > .slide[layout='1'] > .slide-content a.readmorebutton{ background: white; color: #425564; } .extslider > .slide[layout='2']{align-items: center;justify-content: center;} .extslider > .slide[layout='2'] picture{} .extslider > .slide[layout='2'] img{} .extslider > .slide[layout='2'] > .slide-content{max-width: 50%;width: 100%;justify-content: center;height: 100%;} .extslider > .slide[layout='2'] > .slide-content a.readmorebutton{ background: white; color: #425564; } .extslider > .slide[layout='3']{align-items: center;justify-content: flex-start;} .extslider > .slide[layout='3'] picture{max-width: 50%;min-height: 100%;position: absolute;overflow: hidden;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;right: 0;} .extslider > .slide[layout='3'] img{object-fit: cover;max-width: 100%;max-height: initial;min-width: initial;min-height: initial;} .extslider > .slide[layout='3'] > .slide-content{max-width: 50%;background: #43277b;height: 100%;width: 100%;} .extslider > .slide[layout='4']{ align-items: center;justify-content: flex-end;} .extslider > .slide[layout='4'] picture{max-width: 50%;min-height: 100%;position: absolute;overflow: hidden;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;left: 0;} .extslider > .slide[layout='4'] img{object-fit: cover;max-width: 100%;max-height: initial;min-width: initial;min-height: initial;} .extslider > .slide[layout='4'] > .slide-content{max-width: 50%;flex-grow: 1;background: #43277b;height: 100%;width: 100%;} .extslider > .slide[layout='5']{align-items: center;justify-content: flex-start;} .extslider > .slide[layout='5'] picture{overflow: hidden;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;left: 0;} .extslider > .slide[layout='5'] img{object-fit: cover;max-width: 100%;max-height: initial;min-width: initial;min-height: initial;} .extslider > .slide[layout='5'] > .slide-content{max-width: 50%;flex-grow: 1;height: 100%;width: 100%;} .extslider > .slide[layout='6']{align-items: center;justify-content: flex-end;} .extslider > .slide[layout='6'] picture{overflow: hidden;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;left: 0;} .extslider > .slide[layout='6'] img{object-fit: cover;max-width: 100%;max-height: initial;min-width: initial;min-height: initial;} .extslider > .slide[layout='6'] > .slide-content{max-width: 50%;flex-grow: 1;height: 100%;width: 100%;} .extslider > .slide[layout='7']{align-items: center;justify-content: flex-end;} .extslider > .slide[layout='7'] picture{overflow: hidden;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;left: 0;} .extslider > .slide[layout='7'] img{object-fit: contain;max-width: 100%;max-height: initial;min-width: initial;min-height: initial;} .extslider > .slide[layout='7'] > .slide-content{ display: none; } .extslider .extslider_markers{position: absolute;bottom: 1em;right: 1em;z-index: 999;/* background: #425564; */padding: 10px;border-radius: 10px;opacity: 0.9;display: flex;} .extslider .extslider_markers .extslider_marker{width: 20px;height: 20px;background-color: white;margin-left: 4px;border-radius: 50%;border: none;cursor: pointer;pointer-events: auto;margin-right: 4px;display: inline-block;display: flex;align-items: center;justify-content: center;font-size: 12px;} .extslider .extslider_markers .extslider_marker.active, .extslider .extslider_markers .extslider_marker:hover{background-color: #F49600;} @media only screen and (min-device-width: 375px) and (max-device-width: 812px) { .extslider > .slide[layout='2'] > .slide-content{width: 95%;max-width: 100%;} .secondary-slider{max-height: 307px;} .extslider > .slide[layout='6'] picture{height: 100%;} .extslider > .slide[layout='6'] img{min-height: 100%;} } /* =============== * * TILES * * =============== */ #dashboard .tile{display: flex;min-height: var(--tile-minheight);aspect-ratio: var(--tile-aspectratio);background-color: var(--tile-background);padding: var(--tile-padding);border-top-left-radius: var(--tile-corner-top-left);border-top-right-radius: var(--tile-corner-top-right);border-bottom-left-radius: var(--tile-corner-bottom-left);border-bottom-right-radius: var(--tile-corner-bottom-right);position: relative;text-decoration: none;text-transform: none;} #dashboard .tile .lockicon{ position: absolute;top: var(--tile-padding);left: var(--tile-padding);display: block; z-index: 1; } #dashboard .tile .lockicon svg{width: 20px;height: 20px;} #dashboard .tile .tile-content{display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-between;} #dashboard .tile .tile-content .tile-icon{ position: relative; top: var(--tile-icon-position-top); left: var(--tile-icon-position-left); } #dashboard .tile .tile-content .tile-icon svg{ display: block; width: var(--tile-icon-width); height: var(--tile-icon-height); } #dashboard .tile .tile-content .tile-title{ color: var(--tile-title-color); font-size: var(--tile-title-size); font-weight: var(--tile-title-weight); text-decoration: var(--tile-title-decoration); text-transform: var(--tile-title-transform); line-height: var(--tile-title-lineheight); } #dashboard .tile.add-new-trigger{ background: var(--secondary-color);display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;color: var(--tile-background);font-weight: bold;gap: var(--tile-gap); } #dashboard .tile.add-new-trigger > span:nth-child(1){ font-size: 48px; font-weight: 500; } #dashboard .tile.withheading{flex-direction: column;background: initial;padding: 0;flex-wrap: wrap;} #dashboard .tile.withheading .tile-header{position: relative;height: 65px;background-color: var(--tile-background);padding: var(--tile-padding);border-top-left-radius: var(--tile-corner-top-left);border-top-right-radius: var(--tile-corner-top-right);width: 100%;display: flex;align-items: flex-end;gap: 1rem;padding-bottom: 1.1rem;} #dashboard .tile.withheading .tile-header .tile-icon{ position: relative; top: var(--tile-icon-position-top); left: var(--tile-icon-position-left); } #dashboard .tile.withheading .tile-header .tile-icon svg{ display: block; width: var(--tile-icon-width); height: var(--tile-icon-height); } #dashboard .tile.withheading .tile-header .tile-title{ color: var(--tile-title-color); font-size: var(--tile-title-size); font-weight: var(--tile-title-weight); text-decoration: var(--tile-title-decoration); text-transform: var(--tile-title-transform); line-height: var(--tile-title-lineheight); } #dashboard .tile.withheading .tile-content{padding: var(--tile-padding);border: 1px solid var(--tile-background);border-top: none;border-bottom-left-radius: var(--tile-corner-bottom-left);border-bottom-right-radius: var(--tile-corner-bottom-right);flex: 1;justify-content: flex-start;} #dashboard .tile.withheading .tile-content p{font-size: 14px;line-height: 1.5;margin: 5px 0;} #dashboard .tile.withheading .tile-content .cc-accordion-element .cc-accordion-element-heading:hover, #dashboard .tile.withheading .tile-content .cc-accordion-element > .cc-accordion-element-heading, #dashboard .tile.withheading .tile-content .cc-accordion-element.active > .cc-accordion-element-heading{justify-content: space-between;margin-bottom: 0;} #dashboard .tile.withheading .tile-content .most-visited-list p { line-height: 1.2; border-bottom: 1px solid #dadada; padding: 5px 0 10px; } @media only screen and (min-device-width: 375px) and (max-device-width: 812px) { .extslider > .slide[layout='5'] > .slide-content {max-width: 100%;} .extslider > .slide[layout='5'] picture {} .extslider > .slide picture {} .extslider > .slide {min-height: 250px;} .extslider > .slide[layout='5'] {} }