body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #F8FAFF;
}

@media print {
    body {
        background-color: white;
    }
}

html * {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================general============*/
.def,
span,
input[type="text"],
input[type="button"],
input[type="image"],
input[type="submit"],
input[type="password"],
input[type="file"],
textarea,
select,
a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    line-height: normal;
    margin: 0px;
    padding: 0px;
}

input[type="radio"],
a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11pt;
    line-height: normal;
    padding: 0px;
}

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    cursor: pointer;
}


.w100 {
    width: 100%;
}

.t10 {
    padding-top: 10px;
}

.t5 {
    padding-top: 5px;
}

.p5 {
    padding-left: 5px;
}

.p10 {
    padding-left: 10px;
}

.vTop {
    vertical-align: top;
}

.vBot {
    vertical-align: bottom;
}

em {
    font-style: italic;
    color: currentColor !important;
}

.n {
    font-weight: normal;
}

.ntinfo {
    font-size: 9pt;
    padding-top: 5px;
}

.htmlLink {
    border: none;
    background-color: transparent;
    text-decoration: underline;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.htmlLinkSmall {
    border: none;
    background-color: transparent;
    font-size: 9pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: underline;
}

.centered {
    margin: 0 auto;
}

.rightaligned {
    margin-right: 0;
    margin-left: auto;
}

.leftaligned {
    margin-left: 0;
    margin-right: auto;
}

.THover {
    color: Red !important;
}

.underline-on-hover:hover {
    text-decoration: underline !important;
}

html body .RadInput_Default .riTextBox {
    height: 23px;
}
/* ========================filter====================*/
.filter {
    padding: 0px 5px 5px 3px !important;
}

.SectionTitle {
    color: darkblue;
    font-weight: bold;
}

.imgRefresh {
    padding-left: 8px;
    padding-top: 5px;
}
/* ===================== popups =====================================*/
.uTitle {
    font-size: 24pt;
    color: #F95D3B;
}

.banner {
    width: 100%;
}

.titlebar {
    background-color: #1F3862;
    width: 100%;
    color: white;
    padding-left: 5px;
    padding-right: 4px;
}

.titlebarLayout {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 1fr;
    grid-template-areas: "title tags buttons";
    column-gap: 5px;
    align-items: start;
    padding: 2px 0px;
}
.titlebarTitle { grid-area: title; }
.titlebarTags {
    grid-area: tags;
    padding-top: 4px;
}
.titlebarButtons {
    grid-area: buttons;
    display: flex;
    flex-flow: row nowrap;
    column-gap: 5px;
    align-items: center;
    padding-top: 4px;
}

.assessbar {
    background-color: LightSkyBlue;
    width: 100%;
    color: black;
}

.RoundedPanel {
    border-radius: 9px;
    border: 2px solid LightBlue;
    padding: 5px;
    margin: 0px;
    background-color: white;
}

.SquarePanel {
    background-color: white;
}

.Shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Rounded {
    border-radius: 9px;
}

.RoundImage {
    border-radius: 50%;
    margin: 1px;
    border: 1px solid Navy;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}

.RadWindow .rwAlertDialog:before {
    content: none !important;
}

/* ====================== button styles ===========*/
.RadButton, .RadButton .rbText {
    font-size: 10pt !important;
    vertical-align: unset !important;
    line-height: normal !important;
}

.btnSmall {
    background-color: white;
    border-radius: 9px;
    border: 1px solid gray;
    color: black;
    padding: 3px 8px 3px 8px !important;
    text-align: center;
    display: inline-block;
    font-size: 10pt !important;
}

    .btnSmall:hover {
        color: white;
        background-color: darkgray;
    }

.btnSmall8 {
    background-color: white;
    border-radius: 4px;
    border: 1px solid gray;
    color: black;
    padding: 1px 8px 1px 8px !important;
    text-align: center;
    display: inline-block;
    font-size: 9pt !important;
}

    .btnSmall8:hover {
        color: white;
        background-color: darkgray;
    }

.btnOrange8 {
    background-color: #F95D3B;
    border-radius: 4px;
    border: none;
    color: white;
    padding: 1px 6px 1px 6px !important;
    text-align: center;
    display: inline-block;
    font-size: 9pt !important;
    text-decoration: none;
}

    .btnOrange8:hover {
        color: black;
        background-color: #FB866C;
    }

.btnOrange {
    background-color: #F95D3B;
    border-radius: 9px;
    border: none;
    color: white;
    padding: 3px 8px 3px 8px !important;
    text-align: center;
    display: inline-block;
    font-size: 10pt !important;
    text-decoration: none;
}

    .btnOrange:hover {
        color: black;
        background-color: #FB866C;
    }

.btnDisabled {
    background-color: gainsboro;
    border-radius: 9px;
    border: none;
    color: whitesmoke;
    padding: 3px 8px 3px 8px !important;
    text-align: center;
    display: inline-block;
    font-size: 10pt !important;
    text-decoration: none;
}

.btnLink {
    text-decoration: none;
}

    .btnLink:hover {
        text-decoration: underline !important;
    }

.btnLink10 {
    text-decoration: none;
    font-size: 10pt;
}

    .btnLink10:hover {
        text-decoration: underline !important;
    }

.btnLink8 {
    text-decoration: none;
    font-size: 8pt;
}

    .btnLink8:hover {
        text-decoration: underline !important;
    }

.btnLink9 {
    text-decoration: none;
    font-size: 9pt;
}

    .btnLink9:hover {
        text-decoration: underline !important;
    }

/* ============================ grids ===================*/
table {
    border-spacing: 0pt;
    padding: 0px !important;
    border-collapse: collapse;
}

.tblSubtitle {
    padding-left: 5px;
    padding-right: 5px;
    background-color: lightgray;
    height: 20px;
}

.lblTitle {
    font-size: 18pt;
    color: White;
    background-color: transparent;
}

.TPop {
    font-weight: bold;
    font-size: 12pt;
}

.TPop3 {
    font-weight: bold;
    font-size: 12pt;
    padding-left: 3px;
}

.lblSubtitle {
    font-size: 12pt;
}

.lblSmall {
    font-size: 8pt;
}

.bold {
    font-weight: bold;
}

.bold10 {
    font-weight: bold;
    font-size: 10pt;
}

.bold8 {
    font-weight: bold;
    font-size: 8pt;
}

.italic {
    font-style: italic;
}

.italic10 {
    font-style: italic;
    font-size: 10pt;
}

.verticalLine {
    border-left: 3px solid darkgray;
}

.txtColumnOverflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.RadGrid.RadGrid_Metro.detailGrid .t-font-icon {
    display: block !important;
}

.RadGrid.RadGrid_Metro.detailGrid td.rgExpandCol {
    background-color: white;
}

.RadGrid.RadGrid_Metro.detailGrid .rgDetailTable {
    margin-bottom: 20px;
    border-right-width: 1px !important;
    border-color: #e4e4e4 !important;
}

.RadGrid.RadGrid_Metro.detailGrid .rgMasterTable > tbody > tr:not([class]) > td:not(.rgExpandCol) {
    /* in the master table, find all data rows with no css class (rgRow or rgAltRow) */
    /* the td in these rows contain detail grids - couldn't find a better way to select them */
    padding-left: 20px;
    padding-right: 20px;
}

.RadGrid.RadGrid_Metro.detailGrid .rgRow > td, .RadGrid.RadGrid_Metro.detailGrid .rgAltRow > td {
    border-bottom-width: 0px !important;
}

.RadGrid.RadGrid_Metro.detailGrid .t-button {
    padding: 0;
}

/* =============== Error message ==========*/
.validate {
    font-style: italic;
    color: red;
}

em {
    color: red;
}

#lblMsg {
    text-align: left;
    padding: 2px !important;
    border: solid 1px #000000;
    display: block;
    margin-bottom: 5px;
/*    width: 100%;
*/}
/* ================================= Printout =============== */
div.only_print {
    display: none;
}

.printOnly {
    display: none;
}
@media print {
    .hide_print {
        display: none !important;
    }

    .printOnly {
        display: block;
    }

    div.only_print {
        display: block;
    }

    .pageBreak {
        page-break-after: always;
    }
}

.k-pdf-export .hide_pdf, .k-pdf-export.hide_pdf {
    display: none;
}

div.only_pdf {
    display: none;
}

.k-pdf-export div.only_pdf, div.k-pdf-export.only_pdf {
    display: block;
}
/* ==============================  checkbox and radio ============== */
.CheckBox8 label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 8pt !important;
    line-height: 14pt;
    vertical-align: top;
}

.CheckBox10 label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt !important;
    line-height: 14pt;
    vertical-align: top;
}

.CheckBox,
.ckBoxList td {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.radio td {
    padding-left: 3px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* ==============================  Radio Button ============= */
.RadioButton input {
    margin-top: 4px;
    border: solid thin white;
    float: left;
}

.RadioButton label {
    padding-left: 2px;
    padding-right: 8px;
    color: black;
    vertical-align: middle;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.RadioButtonSmall input {
    margin-top: 7px;
    border: solid thin white;
    float: left;
}

.RadioButtonSmall label {
    padding-left: 2px;
    padding-right: 8px;
    /*color:red;*/
    vertical-align: middle;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
}

/* ==============modal progress panel  ======================= */

div.TelerikModalOverlay {
    position: fixed !important;
}

/*========================= tooltip ======================*/
.RadToolTip .rtContent {
    font-size: 10pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*=======================Tab Strip ===================*/

.MultiPageBorder {
    border: 3px solid #25a0da;
    /*padding-bottom:3px;*/
    margin-left: -5px;
}
/*======================== Map ======================================*/
.RadMap .k-marker.k-marker-my-custom-shape:before {
    color: green;
    font-size: 25px;
    margin-top: 2px;
}
/*=====================Listbox ======================================*/
.RadListBox,
.RadListBox .rlbDisabled,
.RadListBox .rlbCheckAllItems > label,
.RadListBox .rlbItem > label {
    font-size: 10pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 12px;
}

    .RadListBox .rlbCheckAllItem, .RadListBox .rlbItem {
        padding: 2px 8px 2px 10px !important;
    }

/*====================== Scheduler ======================================*/
.RadScheduler .rsVerticalHeaderTable {
    font-weight: 300 !important;
    font-size: 10pt;
}

/*======================== Grid ======================================*/
.RadGrid .rgPagerCell .rgPagerButton,
.RadGrid .rgPagerCell .rgActionButton {
    padding: 0px !important;
}

.RadGrid .rgPagerCell .rgNumPart a {
    font-size: 10pt !important;
    padding: 2px !important;
}

.RadGrid .rgRow a, .RadGrid .rgRow, .RadGrid .rgAltRow a, .RadGrid .rgAltRow, .RadGrid .rgEditRow a {
    font-size: 10pt;
    height: 24px !important;
}

.RadGrid .rgHeader, .RadGrid .rgHeader a {
    font-size: 10pt;
    padding: 2px 2px 2px 2px !important;
    height: 16px !important;
    border-left-color: gainsboro !important;
    background-color: gainsboro;
    color: Navy !important;
    font-weight: bold !important;
}

.RadGrid_Metro th.rgSorted, .RadGrid th.rgSorted a {
    color: darkred !important;
    font-weight: bold !important;
    background-color: gainsboro !important;
}

/*cells input row*/
.RadGrid .rgRow > td, .RadGrid .rgAltRow > td, .RadGrid .rgEditRow > td, .RadGrid .rgFooter > td, .RadGrid .rgFilterRow > td, .RadGrid .rgResizeCol, .RadGrid .rgGroupHeader td, .RadGrid .rgAltRow > td:first-child, .RadGrid .rgRow > td:first-child {
    padding: 1px 2px 1px 2px !important;
    height: 22px !important;
    background-color: white;
}

/*button columns*/
/*hides the unused icon input button columns*/
.RadGrid .t-font-icon {
    display: none !important;
}

.RadGrid .t-text {
    font-size: 10pt !important;
}

/*border of cell*/
.RadGrid_Metro .rgRow > td,
.RadGrid_Metro .rgAltRow > td,
.RadGrid_Metro .rgEditRow > td {
    border-bottom: 1px solid lightgray !important;
    border-left: none !important;
    border-right: none !important;
    /*border: none !important*/
}

/* labels within template columns */
.RadRowText {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
}
/* button images */
.RB48, .HdrImg48 > img, .RowImg48 > input, .RowImg48 > a > img {
    height: 48px;
    width: 48px;
}

.RB32, .HdrImg32 > img, .RowImg32 > input, .RowImg32 > a > img {
    height: 32px;
    width: 32px;
}

.RB24, .HdrImg24 > img, .RowImg24 > input, .RowImg24 > a > img {
    height: 24px;
    width: 24px;
}

.RB20, .HdrImg20 > img, .RowImg20 > input, .RowImg20 > a > img {
    height: 20px;
    width: 20px;
}

.RB16, .HdrImg16 > img, .RowImg16 > input, .RowImg16 > a > img {
    height: 16px;
    width: 16px;
}

.RB10, .HdrImg10 > img, .RowImg10 > input, .RowImg10 > a > img {
    height: 10px;
    width: 10px;
}

/*======================== RadPivotGrid ======================================*/
.RadPivotGrid .rpgColumnHeader, .RadPivotGrid .rpgColumnHeader a, .RadPivotGrid .rpgRowHeader, .RadPivotGrid .rpgRowHeader a {
    font-size: 10pt;
    height: 16px !important;
    border-left-color: gainsboro !important;
    background-color: gainsboro !important;
    color: Navy !important;
    font-weight: bold !important;
    background-image: none !important;
}

.RadPivotGrid .rpgRowsZone {
    background-color: gainsboro !important;
    background-image: none !important;
}

.RadPivotGrid .rpgDataCell {
    font-size: 10pt;
}

.RadPivotGrid .rpgNoRecords {
    font-size: 11pt;
}

/*======================= checkbox ========================*/
.RadButton .rbCheckBox {
    border-color: red !important;
}

.RadButton .rbText {
    font-size: 11pt;
    vertical-align: middle !important;
}

.RadButton.rbRadioButton .rbText {
    /*color:green !important;*/
    vertical-align: middle !important;
}

.RadRadio {
    padding-bottom: 10px !important;
}
/*======================== Textbox ========================*/
.Font8 {
    font-size: 8pt;
}

.Font9 {
    font-size: 9pt;
}

.Font11 {
    font-size: 11pt !important;
}

.Font10 {
    font-size: 10pt !important;
}

.Font18 {
    font-size: 18pt;
}

.Font24 {
    font-size: 24pt;
}

.txtStd {
    font-size: 11pt;
    height: 27px;
}

.req {
    border-left: 6px solid #1F3862 !important;
}

.racTokenList {
    min-height: inherit;
}

/* ====================== Date Picker ==================================*/
.RadMo {
    height: 26px !important;
}

/* =====================ComboBox =======================================*/
.RadDropDownList_Metro .rddlInner {
    background-color: white;
}

.DDL10 .rddlFakeInput {
    font-size: 10pt !important;
}

/* ===================================== color picker =================*/
.RadColorPicker,
.RadColorPicker .rcpInput {
    background-color: White !important;
    font-size: 11pt !important;
}

/*====================================== RAD FILE PICKER ========*/
.RadUpload .ruFakeInput {
    padding: 0px !important;
    width: 68px !important;
}

.RadUpload .ruBrowse, .RadUpload .ruBrowse .ruButtonHover {
    background-image: none !important;
    background-color: white;
    height: 19px !important;
    width: 60px !important;
    /*top right bottom left*/
    padding: 2px 0px 0px 0px !important;
    margin: 0px;
    font-size: 8pt;
}

/*=============SCHEDULER ==================*/
/*hides the drag bars on the aside of the appointment cell*/
.RadScheduler .rsAptResize {
    visibility: hidden;
}

/*hide the edit dialog on double-click*/
.RadScheduler .rsDialog {
    display: none;
}

.rsTodayCell {
    /*background: lightblue !important;*/
}

/*fixes the height on the days of the week header bar*/
.RadScheduler .rsHorizontalHeaderTable th {
    height: 30px;
}

.RadScheduler .rsHorizontalHeaderWrapper {
    height: 30px !important;
}

/* ******* html chart ===========*/
.sideChart {
    width: 250px !important;
    height: 300px !important;
}

.fadein {
    animation: fadeinKF 4s;
}

@keyframes fadeinKF {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeOut {
    animation: fadeoutKF 4s;
}

@keyframes fadeoutKF {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.pendingChanges {
    /*border: 1px solid #00FFFF;*/
}

/* ============== master page header ======================= */
.headerGrid {
    display: grid;
    /* grid-template-columns: 130px auto max-content max-content;*/
    grid-template-columns: min-content auto min-content min-content;
    grid-template-rows: minmax(54px, auto) auto auto;
    grid-template-areas:
        "logo menu buttons login"
        "trail trail trail trail"
        "alert alert alert alert";
    column-gap: 10px;
    align-items: center;
}
.headerGridLogo { grid-area: logo; }
.headerGridMenu { grid-area: menu; }
.headerGridButtons { grid-area: buttons; }
.headerGridLogin { grid-area: login; }
.headerGridTrail { grid-area: trail; }
.headerGridAlert { grid-area: alert; }

.headerItemLogo {
    display: flex;
    justify-content: center;
}

.headerItemMenu {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.headerItemButtons {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 5px;
}

.headerItemLogin {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 5px;
    font-size: 8pt;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
}

.headerItemMenuSearch {
    display: flex;
    column-gap: 3px;
    flex-flow: row nowrap;
    padding-left: 5px;
    align-items: center;
    font-size: 8pt;
    white-space: nowrap;
}
.headerItemSearchBox {
    display: flex;
    column-gap: 3px;
    flex-flow: row nowrap;
    padding-left: 5px;
    white-space: nowrap;
}

.headerBannerContainer {
    display: flex;
    flex-flow: column nowrap;
}

.headerBanner {
    display: grid;
    grid-template-columns: 1fr 50px;
    padding: 7px 12px;
    margin: 0px 10px 10px 10px;
    border-radius: 9px;
    font-size: 10pt;
    background-color: #A0BCEB;
}

.headerBannerContent {
    grid-column: 1;
}

.headerBannerClose {
    grid-column: 2;
    text-align: right;
    padding-right: 5px;
    align-self: center;
    font-size: 10pt;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

/* ============== master page footage ======================= */
.masterFooter {
    position: static;
    bottom: 0;
    right: auto;
    left: 0;
}

.masterFooter > *:nth-child(n+2) {
    /*border-left: 1px solid gainsboro;*/
    padding-left: 5px;
}

@media (min-width: 1024px) {
    .masterFooter {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        color: gainsboro;
        padding-right: 10px;
        padding-left: 5px;
        column-gap: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: #f8faff;
        border-start-start-radius: 9px;
    }

        .masterFooter > *:nth-child(n+2) {
            /*border-left: 1px solid gainsboro;*/
            padding-left: 5px;
        }
}

/* ============== entity tag banner ======================= */
.eTagLayout {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "toggle tags";
    column-gap: 5px;
    align-items: start;
}

.eTagLayoutTags {
    grid-area: tags;
}

.eTagLayoutToggle {
    grid-area: toggle;
}

.eTagContainer {
    display: flex;
    flex-flow: row wrap;
    column-gap: 8px;
    row-gap: 5px;
    position: relative;
}

.eTag {
    color: black;
    background-color: deepskyblue;
    font-size: 9pt;
    padding: 3px 12px 3px 26px;
    border-radius: 9px;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    width: fit-content;
    width: -moz-fit-content;
}

    .eTag:before {
        content: '';
        background: url('../Images/Icons/tag2.png');
        background-size: cover;
        position: absolute;
        width: 16px;
        height: 16px;
        margin-left: -18px;
    }

.eTagEditor {
    position: absolute;
    top: calc(0% + 30px);
    /*  transform: translateX(-50%);*/
    /*  left: -16px*/
    left: -32px;
    z-index: 550;
}

    .eTagEditor > div {
        box-shadow: 0 0 20px 0 black;
    }

    .eTagEditor:before {
        content: "";
        position: absolute;
        /*left: calc(50% - 16px);*/
        height: 20px;
        width: 20px;
        background: white;
        transform: rotate(45deg) translateY(-10px);
        border-bottom: inherit;
        border-right: inherit;
        box-shadow: inherit;
    }

/* ============== assessment tools ======================= */
.assessToolContainer {
    display: flex;
    flex-flow: row wrap;
    row-gap: 10px;
    column-gap: 10px;
}

/* ============== signature control ======================= */
.RadSignature.RadSignature_Metro canvas {
    width: initial !important;
    height: initial !important;
}

.RadSignature.RadSignature_Metro .k-signature-maximize {
    display: none !important;
}

/* ============== add delete list ======================= */
.adlistContainer {
    display: flex;
    flex-flow: row wrap;
    column-gap: 5px;
    row-gap: 5px;
    align-items: center;
}

    .adlistContainer > a {
        padding-left: 5px;
        border-left: 1px solid gainsboro;
    }

.selList .selListItem.aspNetDisabled:hover {
    text-decoration: none !important;
}

.selListContainer {
    display: grid;
    grid-template-columns: [col-start] 20px auto auto [col-end];
    grid-template-rows: [row-start] auto [bottom-row] auto [row-end];
    grid-template-areas:
        "ck text  right"
        ".  below below";
    align-items: center;
    justify-content: start;
    column-gap: 5px;
}
.selListCk { grid-area: ck; }
.selListText { grid-area: text; }
.selListRight { grid-area: right; }
.selListBelow { grid-area: below; }
.selListBelowFull { grid-area: bottom-start / col-start / row-end / col-end; }


/*****************/
.bxx {
    margin: 15px 10px 10px 10px;
    padding: 5px;
    background-color: white;
    box-shadow: 0 0 2px 1px #1F386240;
    border-radius: 9px;
}

.footer-styling {
    border: solid 2px #63a7ff;
}