html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat','Lato',Georgia;
    font-size: 18px;
    color: #555555;
}

hr {
    border-color: #EBEBEB; /*DEDDDD*/
}

a {
    text-decoration: none;
    color: #555555;
}

.RadTabStrip {
    font-size: 18px !important;
}

html, body, div, a, input, text, label, button, span, p, h1, h2, h3, h4, h5, h6, table, tr, td, ul, ol, li, b, fieldset, legend, textarea, dl, dt, em {
    font-family: 'Montserrat', 'Lato', Georgia !important
}

    html body .RadInput_MetroTouch .riEmpty, .RadComboBox .rcbEmptyMessage {
        color: #bbb !important;
    }

/*SCROLLING*/

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #DEDDDD;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* RADIO BUTTON LIST */

.RadRadioButtonList button {
    font-size: 18px;
}

.RadRadioButtonList button .rbIcon:before {
        font-size: 24px;
 }

/* COMBO BOX */
.RadComboBox_MetroTouch .rcbReadOnly .rcbInputCell {
    background-color: #fff!important;
}

.RadComboBox_MetroTouch .rcbFocused .rcbReadOnly .rcbInput {
    color: #000!important;
}


/* TEXTBOX */
.riTextBox {
    color: #555555 !important;
    border-color: #555555 !important;
    border-width: 1px !important;
    font-size: 18px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
}

.highlightTextBox {
    color: #0077FF !important;
    border-color: #0077FF !important; /*#0077FF*/
    border-width: 1px !important;
    font-size: 22px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    font-weight:600 !important;
}

.highlightTextBox_2 {
    color: #0077FF !important;
    border-color: #0077FF !important; /*#0077FF*/
    border-width: 1px !important;
    font-size: 30px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    font-weight:600 !important;
    text-align:center !important;
    height:60px !important;
    border-radius:30px !important;
}



div.RadRating {
    font-size: 30px !important;
}


.display-desktop {
    display: normal;
}

.display-desktoptablet {
    display: normal;
}

.display-tabletmobile {
    display: none;
}

.display-mobile {
    display:none;
}

.mobile-center {
    text-align:left;
}

.topbar {
    background-color: #fff;
    color: #555555;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 10px 45px 0 #BCBCBC;
    font-size: 20px;
    font-family: 'Montserrat','Lato',Georgia;
}


.topbar_pagetitle::before, .topbar_pagetitle::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: #ee4b2b;
  margin: 10px;
}

.pagetoptitlebar {
    background-image: linear-gradient(to right, #9A76FF,#0077FF);
    text-align: center;
    margin-top: 10px;
    font-size: 30px;
    font-family: 'Montserrat','Lato',Georgia;
    font-weight: 900;
}

.pagetoptitlebar_content {
    padding: 15px 10px 15px 10px;
    color: #fff;
}



#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
    padding-bottom: 35px;
}

/* IMAGE */

.imgdiv {
    width: 100%;
    display: block;
    text-align: center;
}

.img {
    max-width: 100%;
    vertical-align: middle;
}

.img2 {
    max-width: 100%;
    vertical-align:middle;
}

.img_topicon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}


/* FIELDSET */

.fieldset {
    border-color: #B4B4B4;
    border-width: 2px;
    box-shadow: 0 5px 5px 0 #B4B4B4;
}


.fieldsetlegend {
    font-weight: 600;
    color: #555555;
    border-radius: 15px;
    text-align: center;
    padding: 5px 5px 5px 5px;
    width: 97%;
    border-color: #B4B4B4;
    border-style: solid;
    border-width: 2px;
    box-shadow: 5px 5px 0 0 #B4B4B4;
    background-color: #eaf3f5 !important;
}

.fieldsetcontent {
    padding-left: 10px;
    padding-right: 10px;
}


/* BUTTON */

.img_homebutton {
    width: 115px;
    height: 115px;
    vertical-align: middle;
}

.homebuttondiv_outer {
    width: 175px;
    height: 175px;
    background-color: #6F6F6F;
    margin: 10px 10px 10px 10px;
    box-shadow: 5px 5px 5px 0 #B4B4B4;
     cursor: pointer;
}

    .homebuttondiv_outer:hover {
        background-color: #323232;
        transition-duration: 0.4s;
    }

.homebuttondiv_inner {
    padding: 10px 10px 10px 10px;
    font-weight: 800;
    vertical-align: middle;
    color: #fff;
    text-align: center;
}


.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    font-weight: 600;
    margin-top: 10px;
}

    .chip img {
        float: left;
        margin: 0 10px 0 -25px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }

.savebutton {
    background-color: #6F6F6F !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 18px !important;
    padding: 10px 10px 10px 10px !important;
    box-shadow: 5px 5px 5px 0 #B4B4B4 !important;
}

    .savebutton:hover {
       opacity: 0.7 !important;
    }

    .savebuttonround_slim {
    background-color: #6F6F6F !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 18px !important;
    padding: 5px 10px 5px 10px !important;
    box-shadow: 5px 5px 5px 0 #B4B4B4 !important;
    border-radius:35px !important;
}

    .savebuttonround_slim:hover {
         opacity: 0.7 !important;
    }

.searchbutton {
    background-color: #0077FF !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 18px !important; 
    padding: 5px 10px 5px 10px !important;
    border-radius: 25px !important;
}

    .searchbutton:hover {
        opacity: 0.7 !important;
    }

    .selectionbutton {
    background-color: #fff !important;
    font-weight: 600 !important;
    color: #0077FF !important;
    font-size: 18px !important;
    padding: 5px 5px 5px 5px !important;
    border-radius:30px !important;
    border-color:#0077FF !important;
    border-width:2px !important;
}

    .selectionbutton:hover {
      background-color: #0077FF !important;
      color: #fff !important;
    }

.selectionbutton_active {
    background-color: #0077FF !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 18px !important;
    padding: 5px 5px 5px 5px !important;
    border-radius: 30px !important;
}



    .linkbutton_hl {
    font-size: 18px;
}

.linkbutton_hl:hover {
    background-color:#FDFFE1;
}

.button_grey {
    margin-top: 5px;
    font-family: 'Montserrat','Lato',Georgia !important;
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    font-size: 18px !important;
    background-color: #E4E4E4 !important;
    border-radius: 15px 15px 15px 15px !important;
    color: #555555;
    border-width: 1px;
    border-color: #555555;
    min-width: 60px;
    cursor: pointer;
}

.button_grey_selected {
    margin-top: 5px;
    font-family: 'Montserrat','Lato',Georgia !important;
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    font-size: 18px !important;
    background-color: #FFD365 !important;
    border-radius: 15px 15px 15px 15px !important;
    color: #555555;
    border-width: 1px;
    border-color: #555555;
    min-width: 60px;
    cursor: pointer;
}

.button_appdate {
    background-color:#fff !important;
     width:165px !important;
    height:55px !important;
    font-size: 24px !important;
    border-style:solid !important;
    border-width:1px !important;
    border-color:#e8e8e8 !important;
    color:#6F6F6F !important;
    background-color:#fff !important;
}

.button_appdate:hover {
   cursor:pointer;
}

.button_appdate_selected {
    background-color:#fff !important;
    width:165px !important;
    height:55px !important;
    font-size: 24px !important;
    border-style:solid !important;
    border-width:1px !important;
    border-color:#e8e8e8 !important;
    color:#6F6F6F !important;
    background-color:#e8e8e8 !important;
    border-bottom-color:#6F6F6F !important;
    border-bottom-width:5px !important;
    white-space:normal !important;
}

    .button_appdate_selected:hover {
        cursor: pointer;
    }

.nextbutton { 
    width: 135px;
    height: 35px;
    font-size: 14pt !important;
    font-weight: 600 !important;
    border: none !important;
    background-color: #0077FF !important;
    border-bottom-right-radius: 15px !important;
    border-top-right-radius: 15px !important;
    color: #ffffff !important;
    text-align: right !important;
}

    .nextbutton:hover { 
        width: 135px;
        height: 35px;
        font-size: 14pt !important;
        font-weight: 600 !important;
        border: none !important;
        background-color: #323232 !important;
        border-bottom-right-radius: 15px !important;
        border-top-right-radius: 15px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        text-align: right !important;
    }

.prevbutton { 
    width: 135px;
    height: 35px;
    font-size: 14pt !important;
    font-weight: 600 !important;
    border: none !important;
    background-color: #E2394A !important;
    border-bottom-left-radius: 15px !important;
    border-top-left-radius: 15px !important;
    color: #ffffff !important;
}

    .prevbutton:hover { 
        width: 135px;
        height: 35px;
        font-size: 14pt !important;
        font-weight: 600 !important;
        border: none !important;
        background-color: #323232 !important;
        border-bottom-left-radius: 15px !important;
        border-top-left-radius: 15px !important;
        color: #ffffff !important;
        cursor: pointer !important;
    }

/*GRID*/

th.rgHeader {
    font-size: 18px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background-color: #6F6F6F !important;
    color: #fff !important;
    font-weight: 200 !important;
}

.rgRow, .rgAltRow, .rgEditRow {
    font-size: 18px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.gridnorecordfield:after {
    color: #0077FF;
    font-size: 18px;
    content: "\24CD\00a0No record found.";
    padding-left: 15px;
}

.gridactionbutton {
    font-size: 20px;
}


.gridcolumntitle {
    font-weight: 600;
    color: #0077FF;
}

.gridimagediv {
    text-align: center;
}

.gridimage {
    width: 156px;
    height: 50px;
    padding: 5px 5px 5px 5px;
}

.gridimage2 {
    width: 156px;
    height: 50px;
    padding: 5px 5px 5px 5px;
    border-style:solid !important;
    border-width:2px !important; 
    border-color:#555555 !important;
}

.gridimage2_active {
    width: 156px;
    height: 50px;
    padding: 5px 5px 5px 5px;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #555555 !important;
    background-color: #fff1b4 !important; /*EBEBEB*/
    
}

.gridimage2:hover {
     background-color:#fff1b4 !important;
}


/* OTHERS */
.menu {
    box-shadow: 0 5px 15px 0 #BCBCBC;
}

.star:after {
    color: #FF1616;
    content: "\00a0\273D";
    font-weight: normal;
}

.dashed:after {
    content: "\00a0\268A\00a0";
}

.columntitle {
    font-weight: 600;
}

.columnfield {
    padding-top: 5px;
    padding-bottom: 5px;
}

.titlebar {
    text-align: center;
    font-weight: 600;
    background-color: #EBEBEB;
    color: #555555;
    padding: 7px 5px 7px 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-shadow: 5px 5px 0 0 #6F6F6F;
    font-size: 20px;
}

.titlebar2 {
    text-align: left;
    font-weight: 600;
    /*background-color: #FDFFE1;*/
    color: #555555;
    padding: 7px 5px 7px 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    box-shadow: 5px 5px 0 0 #6F6F6F;
    border-style:solid;
    border-width:1px;
    border-color:#6F6F6F;
}

.remarkfield {
    color: #FF1616;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.separatoritem {
    background-color: #555555 !important;
    color: #ffffff !important;
}

.bordertable {
    border: 1px solid #555555;
    border-collapse: collapse;
    width: 100%;
}

.bordertablecolumn {
    border: 1px solid #555555;
    border-collapse: collapse;
    text-align: center;
}

.checkbox input {
    width: 18px;
    height: 18px;
}

.divback {
    padding-top:10px;
    font-size:14px;
}


.vertical_line {
    width: 0.1em;
    background-color: #6F6F6F;
}

.td1 {
    vertical-align:middle;
    width:5%;
    text-align:center;
    padding-left:2px;
    padding-right:2px;
}

.td2 {
    vertical-align:middle;
    width:90%;
    padding-left:2px;
    padding-right:2px;
}

.td3 {
    vertical-align:middle;
    width:5%;
    text-align:center;
    padding-left:2px;
    padding-right:2px;
}

.divpanel_WarningMessage {
    background-color: #ffffe6;
    border: solid;
    border-width: 1px;
    border-color: #ffcc00;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
    font-size: medium;
    color: black;
}

.RadGrid_MetroTouch .rgRow > td, .RadGrid_MetroTouch .rgAltRow > td {
    padding-bottom: 5px;
}

.columnfield .RadComboBox_MetroTouch {
    padding-top: 1px;
}

.RadGrid_MetroTouch .rgMasterTable {
    line-height: 28px !important;
}

/*RadPanelBar*/

.RadPanelBar_MetroTouch .rpRootLink .rpText {
    cursor: pointer;
    padding: 10px !important;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px !important;
    font-family: 'Montserrat', 'Lato', Georgia !important;
    color: #fff !important;
}

.rpExpandHandle {
    color: #fff !important;
}

.RadPanelBar .rpSlide {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background-color: #f1f1f1 !important;
}

.RadPanelBar_MetroTouch .rpTemplate {
    padding: 0 10px !important;
    background-color: #f1f1f1 !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-family: 'Montserrat', 'Lato', Georgia !important;
    font-size: 18px !important;
    color: #555555 !important;
    width: auto!important;
}

.RadPanelBar .rpRootLink.rpExpanded, .RadPanelBar_MetroTouch .rpLink.rpHovered, .RadPanelBar .rpSelected .rpExpanded, .RadPanelBar .rpFocused .rpSelected .rpExpanded {
    background-color: #323232 !important;
    border-color: #323232 !important;
}

.RadPanelBar_MetroTouch .rpLink.rpFocused {
    box-shadow: none !important;
}

.RadPanelBar_MetroTouch .rpRootLink {
    background-color: #6F6F6F !important;
    border-color: #6F6F6F !important;
}

.RadPanelBar_MetroTouch .rpExpandHandle {
    background-position: -111px -61px!important;
}

.RadPanelBar_MetroTouch .rpExpanded .rpExpandHandle {
    background-position: -111px -11px !important;
}

/*RAD WINDOW*/
.RadWindow .rwIcon {
    top: 7px !important;
}

/*REQUIRED FIELDS*/
.rlRequiredMark {
    color: red;
}

html body .RadInput_MetroTouch .riError, html body .RadInput_Error_MetroTouch {
    border-color: #de3914 !important;
    color: #de3914 !important;
}

.RadInputError:after {
    font: 20px / 1 "WebComponentsIcons";
    content: "\e403";
    position: absolute;
    top: 35%;
    margin-top: .5em;
    margin-left: -1.1em;
    color: red;
}

/*CHECKBOX*/
.RadButton.RadCheckBox .rbIcon,
.RadButton.RadCheckBox .rbIcon::before {
    font-size: 28px;
    width: 1em;
    height: 1em;
}