html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat','Lato', Georgia;
    font-size: 14px;
}

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

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

.RadTabStrip {
    font-size:14px !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: 14px;
}

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

/* 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:14px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
}

.highlightTextBox {
    color: #0077FF !important;
    border-color: #0077FF !important;
    border-width: 1px !important;
    font-size: 18px !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: 24px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    font-weight:600 !important;
    text-align:center !important;
    height:50px !important;
    border-radius:30px !important;
}


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


.display-desktop {
    display:none;
}

.display-desktoptablet {
    display: none;
}

.display-tabletmobile {
    display:normal;
}

.display-mobile {
    display:normal;
}

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

.topbar {
    background-color:#fff;
    color:#555555;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 10px 45px 0 #BCBCBC;
    font-size:16px;
}


.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:22px;
    font-family: 'Montserrat','Lato',Georgia;
    font-weight:900;
}

.pagetoptitlebar_content {
    padding:25px 5px 25px 5px;
    color:#fff;
}

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

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

/* IMAGE */

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

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

.img2 {
    width:120px;
    height:20px;
    vertical-align:middle;
}

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

.img_homebutton {
    width:60px;
    height:60px;
    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 */

.homebuttondiv_outer {
    width:100px;
    height:100px;
    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: 5px 5px 5px 5px;
    font-weight:800;
    vertical-align:middle;
    color:#fff;
    text-align:center;
}


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

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

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

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

.savebuttonround_slim {
    background-color: #6F6F6F !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 14px !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: 14px !important;
    /*padding: 5px 5px 5px 5px !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: 14px !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: 14px !important;
    padding: 5px 5px 5px 5px !important;
    border-radius:30px !important;
}

    .linkbutton_hl {
    font-size: 14px;
}

.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: 14px !important;
    background-color: #E4E4E4 !important;
    border-radius: 15px 15px 15px 15px !important;
    color: #555555;
    border-width: 1px;
    border-color: #555555;
    min-width: 60px;
}

.button_grey_selected {
    margin-top: 5px;
    font-family: 'Montserrat','Lato',Georgia !important;
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    font-size: 14px !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:105px !important;
    height:35px !important;
    font-size: 16px !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:105px !important;
    height:35px !important;
    font-size: 16px !important;
    border-style:solid !important;
    border-width:1px !important;
    border-color:#6F6F6F !important;
     color:#6F6F6F !important;
    background-color:#e8e8e8 !important;
    border-bottom-color:#6F6F6F !important;
    border-bottom-width:3px !important;
}

    .button_appdate_selected:hover {
        cursor: pointer;
    }

.nextbutton {
    font-family: 'Poppins', 'Noto Sans', Verdana !important;
    width: 120px;
    height: 35px;
    font-size: 12pt !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;
}

    .nextbutton:hover {
        font-family: 'Poppins', 'Noto Sans', Verdana !important;
        width: 120px;
        height: 35px;
        font-size: 12pt !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;
    }

.prevbutton {
    font-family: 'Poppins', 'Noto Sans', Verdana !important;
    width: 120px;
    height: 35px;
    font-size: 12pt !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 {
        font-family: 'Poppins', 'Noto Sans', Verdana !important;
        width: 120px;
        height: 35px;
        font-size: 12pt !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: 14px !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: 14px !important;
    font-family: 'Montserrat','Lato',Georgia !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

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

.gridactionbutton {
    font-size:20px;
}

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

.gridimagediv {
    text-align: center;
}

.gridimage {
    width: 109px;
    height: 35px;
    padding:5px 5px 5px 5px;
}

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

.gridimage2_active {
    width: 109px;
    height: 35px;
    padding: 5px 5px 5px 5px;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #555555 !important;
    background-color: #fff1b4 !important;
}

.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:16px;
}

.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:12px;
    padding-top:10px;
    padding-bottom:10px;
}

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

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

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

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

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

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


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

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

.td3 {
    vertical-align:middle;
    width:10%;
    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: 14px !important;
    font-family: 'Montserrat', 'Lato', Georgia !important;
    color: #fff !important;
}

.rpExpandHandle {
    color: #fff !important;
}

.RadPanelBar .rpSlide {
    padding-top: 10px !important;
    padding-bottom: 10px !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: 15px !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: 18px;
    width: 1em;
    height: 1em;
}