.blazor-dimmer {
    z-index: 99999;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.2);
}

.ui.modal {
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ui.modal > .actions {
    background-color: transparent;
    border-top: 0;
    border-color: transparent;
}

.drag-drop-zone {
    border: 3px dashed #eee;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}

.drag-drop-zone:hover {
    background-color: #f5f5f5;
}

.drag-drop-zone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

ul.filelist {
    background-color: #fff;
    padding: 10px;
}

/* These are to prevent the default placeholder of being inside the sport vlaanderen label that moves up on focus */
input[type=date] {
    color: transparent;
}

.has-value input[type=date], input[type=date]:focus {
    color: black;
}

/* 
The colors picked from the SVL CDN

ColorName,colorvalue,hovercolorvalue
blue,#39b4e8,#87d1f1
yellow,#ffd100,#ffe157
green,#009639,#00ed5a
purple,#702f8a,#a14dc2
pink,#c6005b,#ffad57
orange,#ff8200,#ffad57
turquoise,#31b7bc,#6bd5d8
red,#e6332a,#ef7d78
pink-light,#e9a2b2,#fae8ec
green-light,#7c8034,#b3b952
turquoise-dark,#006789,#009092
dark-blue,#006fb7,#0fa0ff
white,#fff,#fff
gray,#808080,#D3D3D3
gray-light,#D3D3D3,#e0e0e0
gray-dark,#696969,#808080

*/

.k-tooltip {
    background: white;
    color: black;
}

.icon-blue {
    color: #39b4e8;
}

.icon-blue:hover {
    color: #87d1f1;
}


.blue-tooltip .k-tooltip .k-callout {
    color: #39b4e8;
}

.blue-tooltip .k-tooltip {
    border: solid 1px #39b4e8;
}

.icon-yellow {
    color: #ffd100;
}

.icon-yellow:hover {
    color: #ffe157;
}


.yellow-tooltip .k-tooltip .k-callout {
    color: #ffd100;
}

.yellow-tooltip .k-tooltip {
    border: solid 1px #ffd100;
}

.icon-green {
    color: #009639;
}

.icon-green:hover {
    color: #00ed5a;
}

.green-tooltip .k-tooltip .k-callout {
    color: #009639;
}

.green-tooltip .k-tooltip {
    border: solid 1px #009639;
}

.icon-purple {
    color: #702f8a;
}

.icon-purple:hover {
    color: #a14dc2;
}


.purple-tooltip .k-tooltip .k-callout {
    color: #702f8a;
}

.purple-tooltip .k-tooltip {
    border: solid 1px #702f8a;
}

.icon-pink {
    color: #c6005b;
}

.icon-pink:hover {
    color: #ffad57;
}


.pink-tooltip .k-tooltip .k-callout {
    color: #c6005b;
}

.pink-tooltip .k-tooltip {
    border: solid 1px #c6005b;
}

.icon-orange {
    color: #ff8200;
}

.icon-orange:hover {
    color: #ffad57;
}


.orange-tooltip .k-tooltip .k-callout {
    color: #ff8200;
}

.orange-tooltip .k-tooltip {
    border: solid 1px #ff8200;
}

.icon-turquoise {
    color: #31b7bc;
}

.icon-turquoise:hover {
    color: #6bd5d8;
}


.turquoise-tooltip .k-tooltip .k-callout {
    color: #31b7bc;
}

.turquoise-tooltip .k-tooltip {
    border: solid 1px #31b7bc;
}

.icon-red {
    color: #e6332a;
}

.icon-red:hover {
    color: #ef7d78;
}


.red-tooltip .k-tooltip .k-callout {
    color: #e6332a;
}

.red-tooltip .k-tooltip {
    border: solid 1px #e6332a;
}

.icon-pink-light {
    color: #e9a2b2;
}

.icon-pink-light:hover {
    color: #fae8ec;
}


.pink-light-tooltip .k-tooltip .k-callout {
    color: #e9a2b2;
}

.pink-light-tooltip .k-tooltip {
    border: solid 1px #e9a2b2;
}

.icon-green-light {
    color: #7c8034;
}

.icon-green-light:hover {
    color: #b3b952;
}


.green-light-tooltip .k-tooltip .k-callout {
    color: #7c8034;
}

.green-light-tooltip .k-tooltip {
    border: solid 1px #7c8034;
}

.icon-turquoise-dark {
    color: #006789;
}

.icon-turquoise-dark:hover {
    color: #009092;
}


.turquoise-dark-tooltip .k-tooltip .k-callout {
    color: #7c8034;
}

.turquoise-dark-tooltip .k-tooltip {
    border: solid 1px #7c8034;
}

.icon-dark-blue {
    color: #006fb7;
}

.icon-dark-blue:hover {
    color: #0fa0ff;
}


.dark-blue-tooltip .k-tooltip .k-callout {
    color: #006fb7;
}

.dark-blue-tooltip .k-tooltip {
    border: solid 1px #006fb7;
}

.icon-white {
    color: #fff;
}

.icon-white:hover {
    color: #fff;
}


.white-tooltip .k-tooltip .k-callout {
    color: #fff;
}

.white-tooltip .k-tooltip {
    border: solid 1px #fff;
}

.icon-gray {
    color: #808080;
}

.icon-gray:hover {
    color: #D3D3D3;
}


.gray-tooltip .k-tooltip .k-callout {
    color: #808080;
}

.gray-tooltip .k-tooltip {
    border: solid 1px #808080;
}

.icon-gray-light {
    color: #D3D3D3;
}

.icon-gray-light:hover {
    color: #e0e0e0;
}


.gray-light-tooltip .k-tooltip .k-callout {
    color: #D3D3D3;
}

.gray-light-tooltip .k-tooltip {
    border: solid 1px #D3D3D3;
}

.icon-gray-dark {
    color: #696969;
}

.icon-gray-dark:hover {
    color: #808080;
}


.gray-dark-tooltip .k-tooltip .k-callout {
    color: #696969;
}

.gray-dark-tooltip .k-tooltip {
    border: solid 1px #696969;
}

/* ===================================== */
/*        SVL css overrides              */
/* ===================================== */

.c-reactloader, .c-loader {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
}

.c-container--full-width>.c-section-wrap {
    width: 85vw;
    max-width: none;
}

/* ===================================== */
/*        Input with button              */
/* ===================================== */

.input-with-button {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.input-with-button .c-input {
    margin-right: 1rem;
    margin-bottom: 0;
}