@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

* {
    margin: 0px;
    padding: 0px;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    background-color: #f2f2f2;
}

.alignright {
    text-align: right;
    padding-right: 10px;
}

.aligncenter {
    text-align: center;
}

.defaultbtn {
    background-color: #25A0DA;
    color: white;
    height: 30px;
    border: 1px solid black;
    padding: 5px;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
}

.defaultbtnSmall {
    background-color: #25A0DA;
    color: white;
    height: 20px;
    border: 1px solid black;
    padding: 0 5px 5px 5px;
    cursor: pointer;
}

.RadComboBoxDropDown .rcbScroll {
    font-size: 8pt;
}

.blockTitle {
    font-size: 16pt;
    font-weight: 500;
}

.overlay {
    display: none;
}

#bxIcon, #bxIconClient {
    font-size: 20px;
}

.bx-tada {
    font-size: 19px;
}

.black {
    color: black !important;
}

.iconOverlay {
    position: relative;
    margin-left: 215px;
}

    .iconOverlay:hover .overlay {
        width: 250px;
        background: #30D46F;
        top: -17px;
        left: 35px;
        display: block;
        position: absolute;
        color: #333;
        padding: 10px;
        border: 1px solid black;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        font-size: 12px;
        z-index: 4;
    }

/* Styling for the validator messages*/
.formValidator {
    font-size: 12px;
}

/* Set the background color to blue for the selected items in a raddropdownlist*/
.rddlItemSelected {
    background-color: #25A0DA !important;
}

/** Styling for confirmWindow **/
#confirmMessage {
    /*    margin-top: 10px;*/
    padding-top: 20px;
}

#confirmButtonsContainer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
}

#confirmPopUp {
    text-align: center;
    /* 
       Fixed height because the height of the generated parent div can't be changed to height:100%,
       and therefore this div doesn't automatically take the full width
    */
    height: 100px;
    position: relative;
}

#confirmButtonsContainer input[type="button"] {
    margin-left: 5px
}

.RadWindow .rwIcon {
    top: 15px !important;
}

    .RadWindow .rwIcon:before {
        content: none !important; /* There was some content displayed, so set explicity to none to not show the weird background  */
    }

/*
    RadGrid filter styling
*/
div.popupFilterWidth {
    width: 300px !important;
}

.popupFilterWidth .RadListBox {
    width: 260px !important;
}

.popupFilterWidth .rgFilterMenu .rmText {
    width: 183px;
}

.rmItem.rmLast.rmTemplate.rgFilterMenu .rmText {
    max-width: 160px;
}

.rmItem.rmTemplate.rgFilterListMenu.rgHCMFilter {
    width: 260px;
}

.GridContextMenu .rgFilterListMenu .RadListBox {
    width: 260px !important;
}

.GridContextMenu .rmTemplate.rgFilterListMenu div.rmText, .GridContextMenu .rmTemplate.rgFilterMenu div.rmText {
    width: 260px;
}

.popupFilterWidth ul li {
    max-width: 300px !important;
}

.rgHCMAnd {
    display: block !important;
}

.rgFilterMenu > .rmContent {
    width: 148px;
}

/* Styling for the width of the filter popup for radgrids*/
[id*='_rghcMenu_detached'] > ul:nth-child(1) {
    width: 300px;
}

.rgMasterTable th.filteredColumn {
    background-color: #25A0DA !important;
}

    .rgMasterTable th.filteredColumn a {
        color: white !important;
    }

.rmContent > .t-button {
    height: 30px !important;
}

.RadMenu {
    font-size: 8pt;
    width: 300px !important;
}

.RadListBox_Bootstrap .rlbGroup, .RadListBox_Bootstrap .rlbTemplateContent {
    width: 250px;
}

/* This is for the "Geldig" column in grdWorkers on default.Aspx */
.rgRow input[type="image"],
.rgAltRow input[type="image"] {
    width: 13px;
}

/* To center the delete images in grdWorkers */
.rgMasterTable input[type="image"] {
    display: block;
    margin: auto;
}

/* To center the checkboxes in grdWorkers */
.rgMasterTable input[type="checkbox"] {
    display: block;
    margin: auto;
}


input.rgOptions:nth-child(1), th.rgHeader:nth-child(10) > input {
    display: none !important; /* hide filter icon in delete and Valid column */
}

.GridContextMenu .rgFilterMenu div.rmContent, .GridContextMenu .rgFilterListMenu div.rmContent {
    max-width: 250px !important;
}

.RadMenu .rmSeparator, .RadMenu .rmSeparator::after {
    display: none;
}

html body .RadInput_Metro .riTextBox, html body .RadInputMgr_Metro {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    border: 1px solid gray !important;
}


/* Show the pwd requirements in a two column list */
.twoColumnList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: disc inside;
    gap: 0rem 0.5rem;
    max-width: 100%;
    color: grey;
    font-size: 0.75em;
}

    .twoColumnList li {
        word-wrap: break-word;
    }

/* Styling for Alert window*/
#alertPopUp {
    text-align: center;
    /* 
       Fixed height because the height of the generated parent div can't be changed to height:100%,
       and therefore this div doesn't automatically take the full width
    */
    height: 100px;
    position: relative;
}

#alertMessage {
    padding-top: 20px;
}

#alertButtonContainer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
}

#alertButton {
    min-width: 65px;
}

.rwStatusBar {
    display: none;
}