html {
    position: relative;
    min-height: 100%;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
}

body {
    margin-bottom: 60px;
}

a {cursor: pointer}
/* #region Navbar styles */
.navbar-header {
    border-bottom: 1px solid rgba(255,255,255, 0.1);
}

.navbar-brand {
    font-size: 2rem;
    font-weight: lighter;
}
/* #endregion */


/* #region Footer styles */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.85em;
}
/* #endregion */

/* #region custom Kendo UI styles */


h1 a {
    color: #fff;
    text-decoration: none;
}

h2 {
    font-weight: lighter;
}

.placeholder img {
    display: inline-block;
}

p .k-button {
    margin: 0 15px 0 0;
}

#configure {
    display: none;
}

p .k-button {
    margin: 0 15px 0 0;
}

.k-state-active .label {
    font-size: 1em;
}

#responsive-panel {
    padding: 0;
    width: 100%;
}

    #responsive-panel .k-menu {
        padding: .5rem;
    }
/* #endregion */

@media (max-width: 767px) {
    #responsive-panel {
        transition: all linear .2s;
    }

    #configure {
        display: block;
        float: right;
    }

    .k-rpanel {
        padding: 0 1rem;
    }

    .k-rpanel-expanded {
        padding: .5rem 1rem;
    }

    .navbar-header {
        width: 100%;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .k-menu .k-item,
    .k-menu .k-link {
        width: 100%;
    }

    .k-widget.k-menu-horizontal > .k-item {
        border: none;
    }

    .k-menu .k-link {
        box-sizing: border-box;
    }

    .k-rpanel-expanded ul {
        flex-direction: column;
    }
}



.fntwhite {color: #ffffff !important}
.customersel { color: #ffffff !important; font-size:18px !important; text-align:center }



/* HTML: <div class="loader"></div> */
/*.loaderSite { position: absolute; width: 70px; height: 70px; border: 5px solid #FFF; border-bottom-color: #FF3D00; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }*/

.loaderSite {
  position: absolute;
  border: 5px solid #FFF; 
  border-bottom-color: #FF3D00;
  box-sizing: border-box; 
  animation: rotation 1s linear infinite;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index:9999;
}


@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* videos -----------------------------*/
.headimg { display: block; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; height: 500px; }

.headimg .headTxt { position: center; vertical-align: middle;  height: 500px; /*add padding-top 150px*/ }




/*Animation Classes*/


.fadeInTop { -webkit-animation: fadeInTop 1.2s both; -moz-animation: fadeInTop 1.2s both; -o-animation: fadeInTop 1.2s both; animation: fadeInTop 1.2s both; }

@-webkit-keyframes fadeInTop {
    0% { opacity: 0; -webkit-transform: translateY(-50px); }

    100% { opacity: 100; -webkit-transform: translateY(0); }
}

@-moz-keyframes fadeInTop {
    0% { opacity: 0; -moz-transform: translateY(-50px); }

    100% { opacity: 100; -moz-transform: translateY(0); }
}

@-o-keyframes fadeInTop {
    0% { opacity: 0; -o-transform: translateY(-50px); }

    100% { opacity: 100; -o-transform: translateY(0); }
}

@keyframes fadeInTop {
    0% { opacity: 0; transform: translateY(-50px); }

    100% { opacity: 100; transform: translateY(0); }
}


.fadeInTopSlow { -webkit-animation: fadeInTopSlow 1.7s both; -moz-animation: fadeInTopSlow 1.7s both; -o-animation: fadeInTopSlow 1.7s both; animation: fadeInTopSlow 1.7s both; }

@-webkit-keyframes fadeInTopSlow {
    0% { opacity: 0; -webkit-transform: translateY(-50px); }

    100% { opacity: 100; -webkit-transform: translateY(0); }
}

@-moz-keyframes fadeInTopSlow {
    0% { opacity: 0; -moz-transform: translateY(-50px); }

    100% { opacity: 100; -moz-transform: translateY(0); }
}

@-o-keyframes fadeInTopSlow {
    0% { opacity: 0; -o-transform: translateY(-50px); }

    100% { opacity: 100; -o-transform: translateY(0); }
}

@keyframes fadeInTopSlow {
    0% { opacity: 0; transform: translateY(-50px); }

    100% { opacity: 100; transform: translateY(0); }
}


.expand { transition: 0.3s; }

.expand:hover { transform: scale(1.05); }


.expandFaster { transition: 0.1s; }

.expandFaster:hover { transform: scale(1.05); }

.hover-bold { transition: 0.1s; }

.hover-bold:hover { font-weight: bold; }


/*End Animations*/


/*for block 1 Index Page*/
.blk1-index { display: flex; flex-wrap: wrap; /* Allow items to wrap to the next line */ justify-content: space-between; padding: 20px 0px 50px 0px; box-sizing: border-box; /* Include padding in the element's total width and height */ vertical-align: top; line-height: 30px; font-family: 'Segoe UI'; }

/* Block Styling */
.blk1-index > div { flex: 1 1 21%; /* Flex-grow, flex-shrink, and flex-basis */ padding: 0px; /* Padding inside the blocks */ margin: 10px; /* Margin between blocks */ box-sizing: border-box; /* Include padding and margin in the element's total width and height */ }

.expand-index { transition: 0.3s; padding: 20px; box-shadow: 0px 3px 11px -1px rgba(191,191,191,0.75); -webkit-box-shadow: 0px 3px 11px -1px rgba(191,191,191,0.75); -moz-box-shadow: 0px 3px 11px -1px rgba(191,191,191,0.75); height: 100%; background-color: #fff /*Ensure expand div takes full height of its container */ }

.expand-index img { height: 50px; display: block; margin: 0 auto; /*Center the image horizontally */ }

.expand-index:hover { transform: scale(1.05); }

/* Responsive Design */
@media (max-width: 768px) {
    .blk1-index > div { flex: 1 1 45%; /* Adjust flex-basis for smaller screens */ margin: 10px 0; /* Adjust margin for better spacing */ }
}

@media (max-width: 480px) {
    .blk1-index > div { flex: 1 1 100%; /* Adjust flex-basis for very small screens */ margin: 10px 0; /* Adjust margin for better spacing */ }
}

.blk1 { display: inline-block; vertical-align: top; line-height: 30px; font-family: 'Segoe UI'; }

.blk-img { display: flex; background-size: cover; background-position: center; background-repeat: no-repeat; line-height: 30px; }

.blk-img-cover { background-color: rgb(0, 0, 0, 0.55); }


.blk-img-cover-dark { background-color: rgb(0, 0, 0, 0.75); /* height: 100%;*/ }


h4 { font-size: 25px; color: rgb(104, 104, 104); font-family: 'Segoe UI'; font-weight: bold; margin: 0; }

h6 { font-size: 25px !important; color: rgb(104, 104, 104); font-family: 'Segoe UI'; font-weight: bold; text-align:center; margin: 0; }

.p3 { font-size: 13px; color:#444444;  display: inline-block; text-align:center; width:100% }


ul.listx li { list-style-type: none; margin-bottom: 10px; vertical-align: top }
ul.listx li i { width: 30px; font-size: 18px; color: #00b9d9 }

ul.listy li { list-style-type: none; margin-bottom: -5px; vertical-align: top; font-size:12px; }
ul.listy li i { width: 20px; font-size: 14px; color: #11C816 }



/*------------symm---------------------------------------*/




/*--------------print to screen formatted (without top and bottom borders)---------------------------*/

@media print {
    @page { margin: 0; }

    body { margin: 1.6cm; }
}





/*-----blink--------------*/

.blink { animation: blinker 1s step-start infinite; /*animation: blinker 1.2s linear infinite;*/ }

@keyframes blinker {
    50% { opacity: 0; }
}


/*----category icon colors-------*/
.iconlead { color: #00b9d9 }
.iconcust { color: #f2d839 }
.iconvendor { color: forestgreen }
.iconrep { color: yellowgreen }
.iconpartner { color: mediumpurple }
.iconcarrier { color: orange }
.iconcompetitor { color: mediumslateblue }
.iconinternal { color: #f24b8d }
.acctlabel { text-transform: uppercase; font-size: 10px; color: black; letter-spacing: 1px }

/*----------flexrow-------------------------------*/
.flexrow { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; box-sizing: border-box }
.flexrow .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; box-sizing: border-box }
.flexrow .column2 { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; box-sizing: border-box }
.flexrow .column3 { display: flex; flex-direction: column; flex-basis: 100%; flex: 3; box-sizing: border-box }
.flexrow .column4 { display: flex; flex-direction: column; flex-basis: 100%; flex: 4; box-sizing: border-box }
.flexrow .column5 { display: flex; flex-direction: column; flex-basis: 100%; flex: 5; box-sizing: border-box }
.flexrow .column6 { display: flex; flex-direction: column; flex-basis: 100%; flex: 6; box-sizing: border-box }
.flexrow .column7 { display: flex; flex-direction: column; flex-basis: 100%; flex: 7; box-sizing: border-box }
.flexrow .column8 { display: flex; flex-direction: column; flex-basis: 100%; flex: 8; box-sizing: border-box }
.flexrow .column9 { display: flex; flex-direction: column; flex-basis: 100%; flex: 9; box-sizing: border-box }


flexrow { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; box-sizing: border-box }
flexrow column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; box-sizing: border-box }
flexrow column2 { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; box-sizing: border-box }
flexrow column3 { display: flex; flex-direction: column; flex-basis: 100%; flex: 3; box-sizing: border-box }
flexrow column4 { display: flex; flex-direction: column; flex-basis: 100%; flex: 4; box-sizing: border-box }
flexrow column5 { display: flex; flex-direction: column; flex-basis: 100%; flex: 5; box-sizing: border-box }
flexrow column6 { display: flex; flex-direction: column; flex-basis: 100%; flex: 6; box-sizing: border-box }
flexrow column7 { display: flex; flex-direction: column; flex-basis: 100%; flex: 7; box-sizing: border-box }
flexrow column8 { display: flex; flex-direction: column; flex-basis: 100%; flex: 8; box-sizing: border-box }
flexrow column9 { display: flex; flex-direction: column; flex-basis: 100%; flex: 9; box-sizing: border-box }

flexrow[data="true"] > column,
flexrow[data="true"] > column2,
flexrow[data="true"] > column3,
flexrow[data="true"] > column4,
flexrow[data="true"] > column5,
flexrow[data="true"] > column6,
flexrow[data="true"] > column7,
flexrow[data="true"] > column8,
flexrow[data="true"] > column9 { padding-right: 30px }

flexrow[data="true"] > column:last-child,
flexrow[data="true"] > column2:last-child,
flexrow[data="true"] > column3:last-child,
flexrow[data="true"] > column4:last-child,
flexrow[data="true"] > column5:last-child,
flexrow[data="true"] > column6:last-child,
flexrow[data="true"] > column7:last-child,
flexrow[data="true"] > column8:last-child,
flexrow[data="true"] > column9:last-child { padding-right: 0px }

.flexend { align-items: flex-end }
.flexcenter { align-items: center }
.noflexwrap { flex-wrap: nowrap }
.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.flex5 { flex: 5; }
.flex6 { flex: 6; }
.flex7 { flex: 7; }
.flex8 { flex: 8; }
.flex9 { flex: 9; }



flexrow.gridcmdbar { margin-top: -40px !important; }
flexrow.gridcmdbar column:first-child { align-items: flex-start; padding-top: 2px; }
flexrow.gridcmdbar column:last-child { align-items: flex-end; padding-top: 6px; }
.flex { display: flex }
.flexcolumn { display: flex; flex-direction: column; flex-wrap: nowrap }




.cmdbarbtn { cursor: pointer; padding: 4px }
.cmdbarbtn:hover { background-color: #14d5f6; color: #ffffff; transition: .3s ease }

/*----------tile-data-----------------------------box-shadow: 0px 2px 7px 0px rgba(250,250,250,0.8);-------*/
tile-data { margin: 0px; padding: 0px; }
tile-data row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; box-sizing: border-box }
tile-data column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; box-sizing: border-box }
tile-data column2 { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; box-sizing: border-box }
tile-data column3 { display: flex; flex-direction: column; flex-basis: 100%; flex: 3; box-sizing: border-box }
tile-data column4 { display: flex; flex-direction: column; flex-basis: 100%; flex: 4; box-sizing: border-box }
tile-data column5 { display: flex; flex-direction: column; flex-basis: 100%; flex: 5; box-sizing: border-box }
tile-data column6 { display: flex; flex-direction: column; flex-basis: 100%; flex: 6; box-sizing: border-box }
tile-data column7 { display: flex; flex-direction: column; flex-basis: 100%; flex: 7; box-sizing: border-box }
tile-data column8 { display: flex; flex-direction: column; flex-basis: 100%; flex: 8; box-sizing: border-box }
tile-data column9 { display: flex; flex-direction: column; flex-basis: 100%; flex: 9; box-sizing: border-box }
tile-data content { border: 1px solid #efefef; margin: 8px; padding: 10px; height: 100%; display: block; white-space: normal; }
tile-data caphead { display: inline-block; font-size: 10px; color: #222222; text-transform: uppercase; letter-spacing: .30em; font-weight: 600; margin-bottom: 10px; width: calc(100% - 30px); }
tile-data capend { display: inline-block; font-size: 10px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; width: 25px; text-align: right; cursor: pointer; }
tile-data content.noborder { border: 0px !important; }
tile-data content.nopad { padding: 1px !important; }
/*tile-data .k-toolbar { padding: 0px 0px 2px 0px !important; }*/
tilestat { display: block; font-size: 30px; text-align: center }



/*---------box-nav------------------------------------------------------------------------------------------*/
box-nav { padding: 0px; }
box-nav rw { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
box-nav clm { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; }
box-nav clm2 { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; }
box-nav clm3 { display: flex; flex-direction: column; flex-basis: 100%; flex: 3; }
box-nav clm4 { display: flex; flex-direction: column; flex-basis: 100%; flex: 4; }
box-nav clm5 { display: flex; flex-direction: column; flex-basis: 100%; flex: 5; }
box-nav clm6 { display: flex; flex-direction: column; flex-basis: 100%; flex: 6; }
box-nav clm7 { display: flex; flex-direction: column; flex-basis: 100%; flex: 7; }
box-nav ctn { display: block; margin: 2px; height: 90px; color: #ffffff; padding: 5px; text-align: center; cursor: pointer; opacity: .85; transition: ease-out .2s }
box-nav ctn:hover { background-color: #695e51 !important; transition: ease-in .2s; }
box-nav ctn span { display: block }
box-nav ctn span:nth-child(1) { padding-top: 5px; font-size: 10px; height: 30px; }
box-nav ctn span:nth-child(2) { font-size: 26px; padding-top: 5px; }
box-nav.boxshadow ctn { box-shadow: 0px 2px 7px 0px rgba(185,185,185,.9); margin: 10px }
box-nav.boxshadowblue ctn { box-shadow: 0px 2px 7px 0px rgba(185,225,225,.9); margin: 10px !important }
box-nav.mgn2 clm { margin: 2px }

box-nav.h80 ctn { height: 80px; }
box-nav.h80 ctn span:nth-child(1) { padding-top: 5px; height: 26px; }
box-nav.h80 ctn span:nth-child(2) { font-size: 24px; }

box-nav.h75 ctn { height: 75px; }
box-nav.h75 ctn span:nth-child(1) { padding-top: 5px; height: 26px; }
box-nav.h75 ctn span:nth-child(2) { font-size: 22px; }

box-nav.h70 ctn { height: 70px; }
box-nav.h70 ctn span:nth-child(1) { padding-top: 0px; height: 20px; }
box-nav.h70 ctn span:nth-child(2) { font-size: 20px; }

box-nav.lg ctn { height: 90px; min-width: 100px }
box-nav.lg ctn span:nth-child(1) { padding-top: 5px; height: 40px; font-size: 12px; }
box-nav.lg ctn span:nth-child(2) { font-size: 11px; }
box-nav ctn { margin: 1px !important; }


/*----btn-----this class used for anything to create a button out of---------*/
.btn { cursor: pointer }

/*---used for X close button on cssPopups---*/
.xbtn { background: none; color: #000000; padding-left: 0px; padding-right: 0px; border: 0px; transition: .15s linear; }
.xbtn .k-icon:hover { color: #14d5f6; cursor: pointer; transition: .15s linear; }
.xbtn .k-icon::before { font-size: 18px; padding-bottom: 3px; }





/*---extend session button------*/
#btnExtendSessionPopup { border: 1px solid #fff !important; background: none !important; color: #fff !important; font-size: 11px !important; padding: 8px !important; transition: .2s ease; }
#btnExtendSessionPopup:hover { background-color: #ff9090 !important; cursor: pointer; }
.btnicononly { border: 0px !important; box-shadow: none !important; outline: none !important; background: none !important; color: #fff !important; }
.btnicononly:hover { color: #000 !important; cursor: pointer; }



/*-------sectiondata--------------*/


labeling { display: block; font-size: 10px; color: #767676; margin: 0px 0px -0px 0px; padding-top: 10px; letter-spacing: -.04em; }

sectiondata { display: flex; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; box-sizing: border-box; margin-top: -10px }
sectiondata column { display: flex; flex-direction: column; flex: none; margin: 0px 40px 10px 0px; box-sizing: border-box; }
sectiondata column:last-child { margin-right: 0px !important; padding-right: 0px !important; }
sectiondata column inline { display: inline-block; padding-right: 0px; }
sectiondata datalabel { display: block; padding: 5px 0px 0px 0px; margin: 0px; font-weight: 700; height: 24px; }
sectiondata reclabel { font-size: 28px; color: #11C816 }
sectiondata .k-invalid-msg { display: inline; margin: 0px; font-style: normal; color: #fe3a89; font-size: 9px !important; }
sectiondata fieldset { margin-top: 15px; }
sectiondata inline { margin-right: 10px; }

sectiondata column1 { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; box-sizing: border-box }
sectiondata column2 { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; box-sizing: border-box }
sectiondata column3 { display: flex; flex-direction: column; flex-basis: 100%; flex: 3; box-sizing: border-box }
sectiondata column4 { display: flex; flex-direction: column; flex-basis: 100%; flex: 4; box-sizing: border-box }
sectiondata column5 { display: flex; flex-direction: column; flex-basis: 100%; flex: 5; box-sizing: border-box }
/*------------------EXTRA-------------------------------------*/


/*  ul.form-fields li inline */
inline { display: inline-block; padding: 0px; margin: 0px 0px 0px 0px; outline: none; vertical-align: top; }
/*inline:nth-child(n+2) { margin-left:15px; }*/

.inline { display: inline-block; padding: 0px; margin: 0px; outline: none; vertical-align: top; }
.block { display: block; }
.cssreq { color: red; font-size: 14px; }
div.form-fields { padding: 0px; margin: 0px; border: 0px; }
div.form-fields label:first-child { display: block; font-size: 10px; letter-spacing: -.04em; color: #797979; margin: 0px 0px -1px 0px; padding: 0; }


/*---search-box----*/
ul.search-box { padding: 10px 5px 10px 5px; margin: 0px; white-space: nowrap; }
ul.search-box li { list-style-type: none; padding: 0px; margin: 0px 5px 0px 0px; white-space: nowrap; font-size: 11px; display: inline-block; }
ul.search-box li input[type=checkbox] { margin-top: 4px !important }
ul.search-box li .k-checkbox-label { display: inline-block !important; font-size: 10px !important; color: #323232 !important; margin-right: 5px; margin-top: 2px !important; }




/*------cssdata (display data only, no input)-----------*/
.cssdata { display: table; }
.cssdata div.caption { display: table-caption; white-space: nowrap; font-size: 11px !important; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3em; padding: 5px 0px 5px 0px !important; color: #111111 !important }
.cssdata > div { display: table-row; }
.cssdata > div > div { display: table-cell; vertical-align: top; height: 18px }
.cssdata > div > div:nth-child(odd) { font-size: 10px; padding-right: 20px; color: #717171; white-space: nowrap; padding-top: 1px }
.cssdata > div > div:nth-child(even) { font-size: 11px; padding-right: 20px; color: #000000; font-weight: 500; }
.cssdata.lighttext > div > div:nth-child(odd) { color: #ffffff !important }
.cssdata.lighttext > div > div:nth-child(even) { color: #e2fafe !important }
.cssdata.sm > div > div { height: 5px !important; }

.cssdata.fnt11 > div > div:nth-child(odd) { font-size: 11px; padding-right: 20px; color: #626262; white-space: nowrap; }
.cssdata.fnt11 > div > div:nth-child(even) { font-size: 11px; padding-right: 20px; color: #000000; font-weight: 500; }

/*----form style--------*/
/*-----table is most likely to use here----*/
table.tableform td:first-child { padding-right: 20px; white-space: nowrap; vertical-align: middle; font-size: 10px; }
table.tableform td { padding-right: 20px; white-space: nowrap; vertical-align: middle }
table.tableform td:first-child:has(+ td .k-input-inner) { padding-top: 4px !important; }



.cssform { display: table; }
.cssform div.caption { display: table-caption; white-space: nowrap; }
.cssform > div { display: table-row; margin-bottom:5px }
.cssform > div > div { display: table-cell; vertical-align: bottom; padding-bottom: 3px; padding-right: 20px; overflow: hidden; white-space: nowrap; height: 15px }
.cssform > div > div:nth-child(odd) {  padding-right: 12px; text-align: left; padding-bottom: 6px; color: #767676 }
.cssform .k-invalid-msg { display: inline; margin: 0px; padding: 0px; font-style: normal; color: #fe3a89;  }

.csstable { display: table; }
.csstable > div { display: table-row; }
.csstable > div > div { display: table-cell; vertical-align: middle; padding-bottom: 0px; padding-right: 10px; }
.csstable .k-invalid-msg { display: inline; margin: 0px; padding: 0px; font-style: normal; color: #fe3a89; }


/*------tooltip table data -----------*/
.tpdata { display: table; }
.tpdata > div { display: table-row; }
.tpdata > div > div { display: table-cell; vertical-align: top; height: 15px }
.tpdata > div > div:nth-child(odd) { font-size: 10px; padding-right: 15px; color: #ffffff; white-space: nowrap; text-align: right }
.tpdata > div > div:nth-child(even) { font-size: 11px; padding-right: 20px; color: #d8f6fb; font-weight: 500; }







/*----------content------------------------------------------------*/

.cssAlert { color: #f3930e }
.navSelected { color: #31afc4 !important; }
.navSelected:hover { color: #ffffff !important; font-weight: 600 }

/*----Page Titles and Description----*/
.page-title { font-size: 13.5px !important; text-align: left; text-transform: uppercase; color: #62ca24; letter-spacing: .10em; font-family: 'Segoe UI', Arial, sans-serif, 'Trebuchet MS'; padding-bottom: 2px; }
.page-desc { font-size: 10px; }




/*--------------------h--------------------------*/
h1-desc { display: block; font-size: 11px; color: #808080; padding-bottom: 15px }
/*
h1 { display: block; font-size: 10px; font-weight: 500; letter-spacing: .25em; color: #232323; text-transform: uppercase; padding: 0px 0px 5px 0px; margin: 0px 0px -5px 0px; }
h1 i { padding-right: 4px }

h2 { font-size: 9px; color: #808080; margin: 0px 0px 3px 0px; padding: 0 }
h3 { font-size: 10px; letter-spacing: .4em; color: #62ca24; text-transform: uppercase; font-weight: normal; margin: 0px 0px 2px 0px; padding: 0 }
h4 { font-family: 'Segoe UI', Arial, sans-serif, Geneva; font-size: 9px; font-weight: 700; letter-spacing: .20em; color: #565656; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px }
h5 { font-size: 10px; letter-spacing: .4em; color: #565656; text-transform: uppercase; font-weight: normal; margin: 0px 0px 2px 0px; padding: 0px 0px 15px 0px; }

*/
hr { border: 0px; height: 4px; background: #dadada; background: -webkit-linear-gradient(to right, #dadada, #f4f4f4); background: -o-linear-gradient(to right, #dadada, #f4f4f4);  background: -moz-linear-gradient(to right, #dadada, #f4f4f4); background: linear-gradient(to right, #dadada, #f4f4f4); }



.separator { border-right: 1px solid #dadada; margin: 0px; padding: 0px; }

.h1desc { display: block; font-size: 9px; color: #808080; padding-bottom: 15px }

/*--------other CSS---------------------*/
.postmod { font-size: 10px; }


/*---------form labels------------------*/
.form-number { font-size: 20px; color: #26d5f4; line-height: 26px; letter-spacing: -.05em; margin-left: -1px; }
.form-number-lg { font-size: 32px; color: #26d5f4; line-height: 26px; letter-spacing: -.05em; margin-left: -1px; }




/*-----------field widths-------------------------------------------------*/
.fw1 { width: 64px; }
.fw2 { width: 90px }
.fw3 { width: 120px; }
.fw4 { width: 150px; }
.fw5 { width: 180px; }
.fw6 { width: 200px; }
.fw7 { width: 224px; }
.fw8 { width: 250px; }
.fw8b {width: 265px; }
.fw9 { width: 280px; }
.fw10 { width: 300px; }
.fw11 { width: 320px; }
.fw12 { width: 350px; }
.fw13 { width: 400px; }
.fw14 { width: 450px; }
.fwdp { width: 84px; }
.fwdtp { width: 150px; }
.pw1 { width: 140px; }



.k-datepicker input, .k-datetimepicker input { width: calc(100% - 23px) !important }

.k-numerictextbox input { width: calc(100% - 23px) !important }

.k-combobox input { width: 100% !important }


/*-----------widths-------------------------------------------------------*/
.w5 { width: 5% !important }
.w10 { width: 10% !important; }
.w14 { width: 14% !important; }
.w15 { width: 15% !important; }
.w16 { width: 16% !important; }
.w17 { width: 17% !important; }
.w18 { width: 18% !important; }
.w19 { width: 19% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
.w30 { width: 30% !important; }
.w31 { width: 31% !important; }
.w32 { width: 32% !important; }
.w33 { width: 33% !important; }
.w34 { width: 34% !important; }
.w35 { width: 35% !important; }
.w40 { width: 40% !important; }
.w45 { width: 45% !important; }
.w50 { width: 50% !important; }
.w55 { width: 55% !important; }
.w60 { width: 60% !important; }
.w65 { width: 65% !important; }
.w66 { width: 66% !important; }
.w67 { width: 67% !important; }
.w70 { width: 70% !important; }
.w75 { width: 75% !important; }
.w80 { width: 80% !important; }
.w85 { width: 85% !important; }
.w90 { width: 90% !important; }
.w95 { width: 95% !important; }
.w100 { width: 100% !important; }


.w33m { width: calc(33% - 4px) !important; }
.w34m { width: calc(34% - 4px) !important; }
.w66m { width: calc(66% - 4px) !important; }
.w67m { width: calc(67% - 4px) !important; }




/*--------height-----------------------*/
.h10 { height: 10px !important; }
.h11 { height: 11px !important; }
.h12 { height: 12px !important; }
.h13 { height: 13px !important; }
.h14 { height: 14px !important; }
.h15 { height: 15px !important; }
.h16 { height: 16px !important; }
.h17 { height: 17px !important; }
.h18 { height: 18px !important; }
.h19 { height: 19px !important; }
.h20 { height: 20px !important; }
.h21 { height: 21px !important; }
.h22 { height: 22px !important; }
.h23 { height: 23px !important; }
.h24 { height: 24px !important; }
.h25 { height: 25px !important; }
.h26 { height: 26px !important; }
.h27 { height: 27px !important; }
.h28 { height: 28px !important; }
.h29 { height: 29px !important; }
.h30 { height: 30px !important; }
.h35 { height: 35px !important; }
.h40 { height: 40px !important; }
.h45 { height: 45px !important; }
.h50 { height: 50px !important; }
.h55 { height: 55px !important; }
.h60 { height: 60px !important; }
.h65 { height: 65px !important; }
.h70 { height: 70px !important; }
.h75 { height: 75px !important; }
.h80 { height: 80px !important; }
.h85 { height: 85px !important; }
.h90 { height: 90px !important; }
.h95 { height: 95px !important; }
.h100 { height: 100px !important; }
.h110 { height: 110px !important; }
.h120 { height: 120px !important; }
.h142 { height: 142px !important; }
.h145 { height: 145px !important; }
.h150 { height: 150px !important; }
.h175 { height: 175px !important; }
.h182 { height: 182px !important; }
.h183 { height: 183px !important; }
.h184 { height: 184px !important; }
.h184 { height: 184px !important; }
.h184 { height: 184px !important; }
.h184 { height: 184px !important; }
.h190 { height: 190px !important; }
.h191 { height: 191px !important; }
.h192 { height: 192px !important; }
.h193 { height: 193px !important; }
.h194 { height: 194px !important; }
.h195 { height: 195px !important; }
.h200 { height: 200px !important; }
.h225 { height: 225px !important; }
.h255 { height: 250px !important; }
.h275 { height: 275px !important; }
.h300 { height: 300px !important; }
.h310 { height: 310px !important; }
.h315 { height: 315px !important; }
.h325 { height: 325px !important; }
.h350 { height: 350px !important; }
.h375 { height: 375px !important; }
.h385 { height: 385px !important; }
.h400 { height: 400px !important; }
.h425 { height: 425px !important; }
.h450 { height: 450px !important; }
.h475 { height: 475px !important; }
.h500 { height: 500px !important; }
.wpx100 { width: 100px !important; }
.wpx125 { width: 120px !important; }
.wpx125 { width: 124px !important; }
.wpx125 { width: 130px !important; }
.wpx125 { width: 140px !important; }
.wpx150 { width: 150px !important; }
.wpx175 { width: 170px !important; }
.wpx200 { width: 200px !important; }
.wpx225 { width: 225px !important; }
.wpx250 { width: 250px !important; }
.wpx300 { width: 300px !important; }





/*--------margin--------------------------*/

.mgnrt1 { margin-right: 1px; }
.mgnrt2 { margin-right: 2px; }
.mgnrt3 { margin-right: 3px; }
.mgnrt4 { margin-right: 4px; }
.mgnrt5 { margin-right: 5px; }
.mgnrt10 { margin-right: 10px; }
.mgnrt15 { margin-right: 15px; }
.mgnrt20 { margin-right: 20px; }
.mgnrt25 { margin-right: 35px; }
.mgnrt30 { margin-right: 30px; }
.mgnrt35 { margin-right: 35px; }
.mgnrt40 { margin-right: 40px; }
.mgnrt45 { margin-right: 40px; }
.mgnrt50 { margin-right: 50px; }

.mgnlf1 { margin-left: 1px; }
.mgnlf2 { margin-left: 2px; }
.mgnlf3 { margin-left: 3px; }
.mgnlf4 { margin-left: 4px; }
.mgnlf5 { margin-left: 5px; }
.mgnlf10 { margin-left: 10px; }
.mgnlf15 { margin-left: 15px; }
.mgnlf20 { margin-left: 20px; }
.mgnlf25 { margin-left: 35px; }
.mgnlf30 { margin-left: 30px; }
.mgnlf35 { margin-left: 35px; }
.mgnlf40 { margin-left: 40px; }
.mgnlf45 { margin-left: 40px; }
.mgnlf50 { margin-left: 50px; }

.mgntp1 { margin-top: 1px !important; }
.mgntp2 { margin-top: 2px !important; }
.mgntp3 { margin-top: 3px !important; }
.mgntp4 { margin-top: 4px !important; }
.mgntp5 { margin-top: 5px !important; }
.mgntp10 { margin-top: 10px !important; }
.mgntp15 { margin-top: 15px !important; }
.mgntp20 { margin-top: 20px !important; }
.mgntp25 { margin-top: 35px !important; }
.mgntp30 { margin-top: 30px !important; }
.mgntp35 { margin-top: 35px !important; }
.mgntp40 { margin-top: 40px !important; }
.mgntp45 { margin-top: 40px !important; }
.mgntp50 { margin-top: 50px !important; }
.mgntp55 { margin-top: 55px !important; }
.mgntp60 { margin-top: 60px !important; }
.mgntp65 { margin-top: 65px !important; }
.mgntp70 { margin-top: 70px !important; }
.mgntp75 { margin-top: 75px !important; }
.mgntp80 { margin-top: 80px !important; }

.mgnbt1 { margin-bottom: 1px !important; }
.mgnbt2 { margin-bottom: 2px !important; }
.mgnbt3 { margin-bottom: 3px !important; }
.mgnbt4 { margin-bottom: 4px !important; }
.mgnbt5 { margin-bottom: 5px !important; }
.mgnbt10 { margin-bottom: 10px !important; }
.mgnbt15 { margin-bottom: 15px !important; }
.mgnbt20 { margin-bottom: 20px !important; }
.mgnbt25 { margin-bottom: 35px !important; }
.mgnbt30 { margin-bottom: 30px !important; }
.mgnbt35 { margin-bottom: 35px !important; }
.mgnbt40 { margin-bottom: 40px !important; }
.mgnbt45 { margin-bottom: 45px !important; }
.mgnbt50 { margin-bottom: 50px !important; }
.mgnbt55 { margin-bottom: 55px !important; }
.mgnbt60 { margin-bottom: 60px !important; }
.mgnbt65 { margin-bottom: 65px !important; }
.mgnbt70 { margin-bottom: 70px !important; }
.mgnbt75 { margin-bottom: 75px !important; }
.mgnbt80 { margin-bottom: 80px !important; }
.mgnup {margin-top:-80px !important;}
/*--------pad all side-----------------------*/
.pad1 { padding: 1px !important; }
.pad2 { padding: 2px !important; }
.pad3 { padding: 3px !important; }
.pad4 { padding: 4px !important; }
.pad5 { padding: 5px !important; }
.pad6 { padding: 6px !important; }
.pad7 { padding: 7px !important; }
.pad8 { padding: 8px !important; }
.pad9 { padding: 9px !important; }
.pad10 { padding: 10px !important; }
.pad15 { padding: 15px !important; }
.pad20 { padding: 20px !important; }
.pad25 { padding: 25px !important; }
.pad30 { padding: 30px !important; }
.pad35 { padding: 35px !important; }
.pad40 { padding: 40px !important; }
.pad45 { padding: 45px !important; }
.pad50 { padding: 50px !important; }

/*--------padright-----------------------*/
.padrt1 { padding-right: 1px !important; }
.padrt2 { padding-right: 2px !important; }
.padrt3 { padding-right: 3px !important; }
.padrt4 { padding-right: 4px !important; }
.padrt5 { padding-right: 5px !important; }
.padrt6 { padding-right: 6px !important; }
.padrt7 { padding-right: 7px !important; }
.padrt8 { padding-right: 8px !important; }
.padrt9 { padding-right: 9px !important; }
.padrt10 { padding-right: 10px !important; }
.padrt15 { padding-right: 15px !important; }
.padrt20 { padding-right: 20px !important; }
.padrt25 { padding-right: 25px !important; }
.padrt30 { padding-right: 30px !important; }
.padrt35 { padding-right: 35px !important; }
.padrt40 { padding-right: 40px !important; }
.padrt45 { padding-right: 45px !important; }
.padrt50 { padding-right: 50px !important; }
.padrt55 { padding-right: 55px !important; }
.padrt60 { padding-right: 60px !important; }
.padrt65 { padding-right: 65px !important; }
.padrt70 { padding-right: 70px !important; }
.padrt75 { padding-right: 75px !important; }
.padrt80 { padding-right: 80px !important; }
.padrt85 { padding-right: 85px !important; }
.padrt90 { padding-right: 90px !important; }
.padrt95 { padding-right: 95px !important; }
.padrt100 { padding-right: 100px !important; }
.padrt110 { padding-right: 110px !important; }
.padrt120 { padding-right: 120px !important; }
.padrt150 { padding-right: 150px !important; }
.padrt170 { padding-right: 170px !important; }
.padrt200 { padding-right: 200px !important; }



/*--------padleft-----------------------*/
.padlf1 { padding-left: 1px !important; }
.padlf2 { padding-left: 2px !important; }
.padlf3 { padding-left: 3px !important; }
.padlf4 { padding-left: 4px !important; }
.padlf5 { padding-left: 5px !important; }
.padlf6 { padding-left: 6px !important; }
.padlf7 { padding-left: 7px !important; }
.padlf8 { padding-left: 8px !important; }
.padlf9 { padding-left: 9px !important; }
.padlf10 { padding-left: 10px !important; }
.padlf15 { padding-left: 15px !important; }
.padlf16 { padding-left: 16px !important; }
.padlf17 { padding-left: 17px !important; }
.padlf18 { padding-left: 18px !important; }
.padlf19 { padding-left: 19px !important; }
.padlf20 { padding-left: 20px !important; }
.padlf25 { padding-left: 25px !important; }
.padlf30 { padding-left: 30px !important; }
.padlf35 { padding-left: 35px !important; }
.padlf40 { padding-left: 40px !important; }
.padlf45 { padding-left: 45px !important; }
.padlf50 { padding-left: 50px !important; }
.padlf55 { padding-left: 55px !important; }
.padlf60 { padding-left: 60px !important; }


/*--------padtop-----------------------*/
.padtp0 { padding-top: 0px !important; }
.padtp1 { padding-top: 1px !important; }
.padtp2 { padding-top: 2px !important; }
.padtp3 { padding-top: 3px !important; }
.padtp4 { padding-top: 4px !important; }
.padtp5 { padding-top: 5px !important; }
.padtp6 { padding-top: 6px !important; }
.padtp7 { padding-top: 7px !important; }
.padtp8 { padding-top: 8px !important; }
.padtp9 { padding-top: 9px !important; }
.padtp10 { padding-top: 10px !important; }
.padtp15 { padding-top: 15px !important; }
.padtp20 { padding-top: 20px !important; }
.padtp25 { padding-top: 25px !important; }
.padtp30 { padding-top: 30px !important; }
.padtp35 { padding-top: 35px !important; }
.padtp40 { padding-top: 40px !important; }
.padtp45 { padding-top: 45px !important; }
.padtp50 { padding-top: 50px !important; }
.padtp55 { padding-top: 55px !important; }
.padtp60 { padding-top: 60px !important; }
.padtp70 { padding-top: 70px !important; }
.padtp80 { padding-top: 80px !important; }
.padtp90 { padding-top: 90px !important; }
.padtp100 { padding-top: 100px !important; }


/*--------padbottom-----------------------*/
.padbt1 { padding-bottom: 1px !important; }
.padbt2 { padding-bottom: 2px !important; }
.padbt3 { padding-bottom: 3px !important; }
.padbt4 { padding-bottom: 4px !important; }
.padbt5 { padding-bottom: 5px !important; }
.padbt6 { padding-bottom: 6px !important; }
.padbt7 { padding-bottom: 7px !important; }
.padbt8 { padding-bottom: 8px !important; }
.padbt9 { padding-bottom: 9px !important; }
.padbt10 { padding-bottom: 10px !important; }
.padbt15 { padding-bottom: 15px !important; }
.padbt20 { padding-bottom: 20px !important; }
.padbt25 { padding-bottom: 25px !important; }
.padbt30 { padding-bottom: 30px !important; }
.padbt35 { padding-bottom: 35px !important; }
.padbt40 { padding-bottom: 40px !important; }
.padbt45 { padding-bottom: 45px !important; }
.padbt50 { padding-bottom: 50px !important; }
.padbt60 { padding-bottom: 60px !important; }
.padbt70 { padding-bottom: 70px !important; }
.padbt80 { padding-bottom: 80px !important; }
.padbt90 { padding-bottom: 90px !important; }
.padbt100 { padding-bottom: 100px !important; }



/*-----font size---------*/
.fnt8 { font-size: 8px !important; }
.fnt9 { font-size: 9px !important; }
.fnt10 { font-size: 10px !important; }
.fnt11 { font-size: 11px !important; }
.fnt12 { font-size: 12px !important; }
.fnt13 { font-size: 13px !important; }
.fnt14 { font-size: 14px !important; }
.fnt15 { font-size: 15px !important; }
.fnt16 { font-size: 16px !important; }
.fnt17 { font-size: 17px !important; }
.fnt18 { font-size: 18px !important; }
.fnt19 { font-size: 19px !important; }
.fnt20 { font-size: 20px !important; }
.fnt21 { font-size: 21px !important; }
.fnt22 { font-size: 22px !important; }
.fnt23 { font-size: 23px !important; }
.fnt24 { font-size: 24px !important; }
.fnt25 { font-size: 25px !important; }
.fnt26 { font-size: 26px !important; }
.fnt27 { font-size: 27px !important; }
.fnt28 { font-size: 28px !important; }
.fnt29 { font-size: 29px !important; }
.fnt30 { font-size: 30px !important; }
.fnt32 { font-size: 32px !important; }
.fnt34 { font-size: 34px !important; }
.fnt36 { font-size: 36px !important; }
.fnt38 { font-size: 38px !important; }
.fnt40 { font-size: 40px !important; }
.fnt42 { font-size: 42px !important; }
.fnt44 { font-size: 44px !important; }
.fnt46 { font-size: 46px !important; }
.fnt48 { font-size: 48px !important; }
.fnt50 { font-size: 50px !important; }
.fnt52 { font-size: 52px !important; }
.fnt54 { font-size: 54px !important; }
.fnt56 { font-size: 56px !important; }
.fnt58 { font-size: 58px !important; }
.fnt60 { font-size: 60px !important; }
.fnt62 { font-size: 62px !important; }
.fnt64 { font-size: 64px !important; }
.fnt70 { font-size: 70px !important; }
.fnt80 { font-size: 80px !important; }


/*-----colors--------------------------------*/
.fntwhite { color: #ffffff !important }
.fntblue { color: #10c3e2 !important }
.fntgreen { color: #11C816 !important }
.fntgreen2 { color: #62ca24 !important }
.fntpurple { color: #a642ff !important }
.fntred { color: red !important }
.fntgray { color: #808080 !important }
.fntorange { color: #ffa400 !important }
.fntyellow { color: #fff79c !important }
.fntgold { color: #f3d907 !important }
.fntblack { color: #000000 !important }


/*--------spacers-----------------------*/
.spacer10 { display: inline-block; margin-bottom: 10px; }
.spacer15 { display: inline-block; margin-bottom: 15px; }
.spacer20 { display: inline-block; margin-bottom: 20px; }
.spacer25 { display: inline-block; margin-bottom: 25px; }
.spacer30 { display: inline-block; margin-bottom: 30px; }
.spacer35 { display: inline-block; margin-bottom: 35px; }
.spacer40 { display: inline-block; margin-bottom: 40px; }
.spacer45 { display: inline-block; margin-bottom: 45px; }
.spacer50 { display: inline-block; margin-bottom: 50px; }


/*-----GLOBAL-------------------------------------------------------------------------------*/
.vtop { vertical-align: top; }
.vmiddle { vertical-align: middle; }
.vbottom { vertical-align: bottom; }
.right { text-align: right !important; }
.center { text-align: center; }
.left { text-align: left; }
.bold { font-weight: bold; }
.bold700 { font-weight: 700; }
.bold600 { font-weight: 600; }
.bold500 { font-weight: 500; }
.bold400 { font-weight: 400; }
.nobold { font-weight: normal; }
.italic { font-style: italic; }
.wrap { white-space: normal; }
.nowrap { white-space: nowrap; }
.nodisplay { display: none; }
.noellipsis { white-space: normal !important; overflow: unset !important; text-overflow: unset !important; }
.crossout { text-decoration-line: line-through; text-decoration-color: #14d5f6 }
.cancelled, .inactive { text-decoration-line: line-through; text-decoration-color: red }


.circle { display: inline-block; line-height: 0px; border-radius: 50%; font-size: 14px; color: white; }
.circle span { display: inline-block; padding-top: 50%; padding-bottom: 50%; padding-left: 10px; padding-right: 10px; }


.circle16golden { display: inline-block; background-color: #f8ce04; border-radius: 50%; height: 16px; width: 16px }
.mytasks { display: inline-block; background-color: #f8ce04; height: 17px; padding: 1px 2px 2px 2px; min-width: 18px; font-size: 10px }


.disabled { cursor: not-allowed; pointer-events: none; outline: 0; box-shadow: none; /*    opacity: 0.90; */ }

.disabledOpac { cursor: not-allowed; pointer-events: none; outline: 0; box-shadow: none; opacity: 0.35 }

.disableEdit { cursor: not-allowed; pointer-events: none; /*opacity: 0.90; */ outline: 0; box-shadow: none; }
.disableselection { pointer-events: none !important; }

.pointer { cursor: pointer; }
.hidedisp { display: none; }
.hovercss:hover { cursor: pointer; color: #00b9d9; background-color: #fafafa; }


/*---backgroundcolor---*/
.bgblue { background-color: #00b9d9 !important; }
.bgblue2, .bgblue2.k-table-td button { background-color: #5ecadd !important; }
.bgblue3, .bgblue3.k-table-td button { background-color: #62daef !important; }
.bgblue4, .bgblue4.k-table-td button { background-color: #1196ad !important; }
.bgblue5, .bgblue5.k-table-td button { background-color: #55a2b0 !important; }
.bgblue6, .bgblue6.k-table-td button { background-color: #19d3f3 !important; }
.bgblue7, .bgblue7.k-table-td button { background-color: #057b8f !important; }
.bgblue8, .bgblue8.k-table-td button { background-color: #11616f !important; }
.bggreen, .bggreen.k-table-td button { background-color: #97dc02 !important; }
.bggreen2 { background-color: #11C815 !important; }
.bggreen3 { background-color: #56b258 !important; }
.bggreen4 { background-color: #9cc14d !important; }
.bggreen5 { background-color: #cfe0ab !important; }
.bggreen6 { background-color: #deeac4 !important; }
.bgred { background-color: red !important; }
.bgred2 { background-color: #e04040 !important; }
.bgred3 { background-color: #a95b5b !important; }
.bgpurple { background-color: #a77ff2 !important; }
.bgpurple2 { background-color: #8f7cb4 !important; }
.bgpurple3 { background-color: #9664f7 !important; }
.bgorange, .bgorange.k-table-td button { background-color: #ff9900 !important; }
.bgorange2 { background-color: #eaa63f !important; }
.bgorange3 { background-color: #d9630b !important; }
.bgbrown { background-color: #d7b179 !important; }
.bgteal, .bgteal.k-table-td button { background-color: #72c6b9 !important; }
.bgteal2, .bgteal2.k-table-td button { background-color: #00838f !important; }
.bgyellow { background-color: #ecc40d !important; }
.bgyellow2 { background-color: #cbae2a !important; }
.bggray { background-color: #e3e5e8 !important; color: #486d65 !important; border: 1px solid #e1e1e1 !important; }
.bgblack { background-color: #000000 !important; }
.bglightgray { background-color: #fbfbfb !important }
.bgblue-p { background-color: #b2e9f7 !important }
.bggreen-p { background-color: #d2edb2 !important }
.bgwhite { background-color: #ffffff !important; }

.databox { background-color: #fbfbfb !important; border: 1px solid #ececec; padding: 15px !important }





/*-------border for grid---------------*/
.bdtop { border-top: 1px solid #ececec; }
.bdright { border-right: 1px solid #ececec; }
.bdleft { border-left: 1px solid #ececec; }
.bdbottom { border-bottom: 1px solid #ececec; }
.borderall { border: 1px solid #ececec; }







/* @group Blink--------------------------------- */

blink { -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */ animation: 2s linear infinite condemned_blink_effect; }

/* for Safari 4.0 - 8.0 */
@-webkit-keyframes condemned_blink_effect {
    0% { visibility: hidden; }

    50% { visibility: hidden; }

    100% { visibility: visible; }
}

@keyframes condemned_blink_effect {
    0% { visibility: hidden; }

    50% { visibility: hidden; }

    100% { visibility: visible; }
}











/*----ticker scroller----------------*/

.tickerscroll { height: 26px; overflow: hidden; position: relative; width: 100%; }

.tickerscroll line { letter-spacing: 0em; text-transform: none; position: absolute; width: 100%; height: 100%; margin: 0; text-align: left; /* Apply animation to this element */ -moz-animation: tickerscroll 25s linear infinite alternate; -webkit-animation: tickerscroll 25s linear infinite alternate; animation: tickerscroll 25s linear infinite alternate; }
/* Move it (define the animation) */
@-moz-keyframes tickerscroll {
    0% { -moz-transform: translateX(100%); }

    100% { -moz-transform: translateX(0%); }
}

@-webkit-keyframes tickerscroll {
    0% { -webkit-transform: translateX(100%); }

    100% { -webkit-transform: translateX(0%); }
}

@keyframes tickerscroll {
    0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); }

    100% { -moz-transform: translateX(0%); /* Firefox bug fix */ -webkit-transform: translateX(0%); /* Firefox bug fix */ transform: translateX(0%); }
}



























/*-----internal button controls----------------------*/
[id^="mbtn"], .mbtn { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background-color: #14d5f6; /*#14d5f6*/ border: 0px; text-transform: uppercase; font-size: 10px; color: #ffffff; padding: 3px 8px 4px 8px; text-align: center; text-decoration: none; display: inline-block; transition: .15s linear; border-radius: 0em; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12); /* 0px 0px 5px 0px rgba(0,0,0,0.12); */ transition: all 0.2s ease; box-sizing: border-box; text-align: center; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; height: 24px !important; }



[id^="mbtn"]:hover, .mbtn:hover { transition: .15s linear; background-color: #00b9d9 !important; color: white; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22); cursor: pointer; }

[id^="mbtn"]:focus, .mbtn:focus { border: 0px; outline: none !important; transition: .15s linear; background-color: #00b9d9; color: white; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22); cursor: pointer; }

[id^="mbtn"] .k-icon::before { font-size: 15px !important; padding-right: 5px; }


[id^="mbtn"].cancel { background-color: #909090 !important; }

[id^="mbtn"].disabled { background-color: #8de3f2 !important; }

[id^="mbtn"].cancel:hover { background-color: #444444 !important; }

[id^="mbtn"].green { background-color: #11C816; }



/*-----icon and text buttons------------------------------------------------------------*/
[id^="ibtn"], [name^="ibtn"] { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background-color: #ffffff; border: 1px solid #e3e3e3; text-transform: uppercase; font-size: 10px; color: #808080; font-weight: 500; padding: 5px 2px 4px 2px; text-align: center; text-decoration: none; display: inline-block; transition: .15s linear; border-radius: 0em; transition: all 0.2s ease; box-sizing: border-box; text-align: center; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; height: 24px !important; margin: 0px 0px 0px 0px !important; min-width: 22px }




[id^="ibtn"] .k-icon::before, [name^="ibtn"] .k-icon::before { font-size: 15px !important; color: #14d5f6; padding: 0px !important; }

[id^="ibtn"] .k-i-arrow-60-right, [name^="ibtn"] .k-i-arrow-60-right { padding-top: 2px !important; }

[id^="ibtn"]:hover .k-icon::before, [name^="ibtn"]:hover .k-icon::before { color: #fff; }

[id^="ibtn"]:focus, [name^="ibtn"]:focus { outline: none !important; }

[id^="ibtn"] .fas, [id^="ibtn"] .far, [name^="ibtn"] .fas, [name^="ibtn"] .far { font-size: 13px !important; color: #14d5f6; padding: 0px 1px 0px 1px; }

[id^="ibtn"]:hover .fas, [id^="ibtn"]:hover .far, [name^="ibtn"]:hover .fas, [name^="ibtn"]:hover .far { color: #fff; }



[id^="ibtn"]:hover, [name^="ibtn"]:hover { transition: .15s linear; background-color: #62daef; border: 1px solid #62daef; color: white; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); cursor: pointer; }

[id^="ibtn"]:focus, [name^="ibtn"]:focus { outline: unset !important; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }

[id^="ibtn"].disabled, [name^="ibtn"].disabled { cursor: not-allowed; pointer-events: none; opacity: 0.50; color: #808080; outline: 0; box-shadow: none; }

/*--------------for buttons with icon and text----------------------*/
[id^="ibtnx"] { padding: 5px 8px 5px 0px !important; }

[id^="ibtnx"] .k-icon { margin: 0px 5px 0px 9px !important; }

/*--------------for buttons with icon and text----------------------*/
[id^="ibtnx"].b2 { padding: 5px 8px 5px 0px !important; }

[id^="ibtnx"].b2 .k-icon { margin: 0px 8px 0px 9px !important; }



/*-----link buttons---------------------------------------------------------*/
[id^="lbtn"], [name^="lbtn"] { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: none; color: #14d5f6; padding-left: 0px; padding-right: 0px; font-size: 11px; border: 0px; transition: .15s linear; display: inline-block; padding-top: 0px !important; }

[id^="lbtn"]:hover, [name^="lbtn"]:hover { color: #000; cursor: pointer; transition: .15s linear; }

[id^="lbtn"]:focus, [name^="lbtn"]:focus { outline: none !important; }

[id^="lbtn"] span.k-icon, [name^="lbtn"] span.k-icon { display: inline-block; margin: 0px 0px 3px 0px; }



[id^="lbtn"] .k-icon::before, [name^="lbtn"] .k-icon::before { font-size: 15px; }

[id^="lbtn"].fntnormal, [name^="lbtn"].fntnormal { color: #565656; }
[id^="lbtn"].fntnormal:hover, [name^="lbtn"].fntnormal:hover { color: #14d5f6 !important; }


/*-----with telerik toolbar--------------------------------*/
.k-toolbar [id^="lbtn"], .k-toolbar [name^="lbtn"] { color: unset !important; padding: 7px 5px 5px 5px !important; }
.k-toolbar [id^="lbtn"]:hover, .k-toolbar [name^="lbtn"]:hover { background-color: #39d7f2 !important; color: #fff !important; }


/*-----equivalent of ToolBar button------------------------*/
[id^="tlbtn"] { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background-color: #ffffff; border: 0px; font-size: 11px; color: #222222; padding: 3px 5px 4px 5px; text-align: center; text-decoration: none; transition: all 0.2s ease; border-radius: 0em; box-sizing: border-box; text-align: center; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; height: 24px !important; margin: 0px 0px 0px 0px !important; min-width: 22px }
[id^="tlbtn"] span.k-icon { margin-right: 3px; }
[id^="tlbtn"]:hover { background-color: #39d7f2 !important; color: #fff !important; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }



/*-----white text link buttons---------------------------------------------------------*/
[id^="wbtn"] { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: none; color: #fff; padding-left: 0px; padding-right: 0px; font-size: 11px; /*.95em*/ border: 0px; transition: .15s linear; /* height: 20px;*/ }

[id^="wbtn"]:hover { color: #000; cursor: pointer; transition: .15s linear; }

[id^="wbtn"] .k-icon::before { font-size: 20px; padding-bottom: 2px; }



/*-----left bar icon buttons Site overall---------------------------------------------------------*/
[id^="jbtn"] { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: unset; border: 0px solid #e3e3e3; text-transform: uppercase; color: #333333; padding: 8px 6px 8px 6px; text-align: center; text-decoration: none; display: inline-block; transition: .15s linear; border-radius: 0em; height: 38px; transition: all 0.2s ease; box-sizing: border-box; text-align: center; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; }

[id^="jbtn"]:hover { transition: .15s linear; color: #62daef; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); cursor: pointer; }

/*    [id^="jbtn"] span.k-icon {
        font-size:16px !important;
    }*/

/*------to the left main bar-------------*/

[id^="lmu"] { display: flex; width: 100%; border: 0px; border-bottom: 1px solid #dadada; cursor: pointer; padding: 5px 3px 3px 3px; font-size: 11px; background: none !important; text-align: left; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #222222; }

[id^="lmu"]:hover { background-color: #cccccc !important; color: #ffffff; transition: ease 0.4s; }

[id^="lmu"] span:nth-child(1) { width: 96%; }

[id^="lmu"] span:nth-child(2) { width: 4%; }

[id^="lmu"] .k-i-arrow-chevron-right { margin-bottom: 3px; font-size: 11px; }



/*------snippet button summary data-------------*/

[id^="sbtn"] { display: flex; width: 100%; border: 0px; border-bottom: 1px solid #ececec; cursor: pointer; padding: 2px 3px 1px 0px; font-size: 11px; background: none !important; text-align: left; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

[id^="sbtn"]:hover { background-color: #e7e7e7 !important; color: #00b9d9; transition: ease 0.4s; }

[id^="sbtn"] span:nth-child(1) { width: 80%; }

[id^="sbtn"] span:nth-child(2) { width: 20%; font-size: 12px; color: #14d5f6; text-align: right; }

[id^="sbtn"] .k-icon { margin-bottom: 3px; font-size: 12px; }


/*---------------------------------------------------------------------------*/

.lbtn { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: none; color: #14d5f6; padding-left: 0px; padding-right: 0px; font-size: 11px; /*.95em*/ border: 0px; transition: .15s linear; /* height: 20px;*/ }

.lbtn:hover { color: #000; cursor: pointer; transition: .15s linear; }

.lbtn .k-icon::before { font-size: 15px; padding-bottom: 2px; }

.lbtnw { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background: none; color: #ffffff; padding-left: 0px; padding-right: 0px; font-size: 11px; /*.95em*/ border: 0px; transition: .15s linear; /* height: 20px;*/ }
.lbtnw:hover { color: #fffdde; cursor: pointer; transition: .15s linear; }
.lbtnw .k-icon::before { font-size: 15px; padding-bottom: 2px; }







/*----------BOX BUTTONS----------------------------------------------*/

button[id^="bxbtn"] { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background-color: #1bc8e6; /*#14d5f6*/ border: 0px; text-transform: none; color: #ffffff; padding: 10px; text-align: center; text-decoration: none; display: inline-block; border-radius: 0em; -webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,.9); -moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,.9); box-shadow: 0px 0px 5px 0px rgba(204,204,204,.9); box-sizing: border-box; overflow: hidden; vertical-align: top; width: 100%; height: 80px; transition: ease 0.4s; /*margin-bottom:3px !important;*/ /*margin-right: 3px;*/ }

button[id^="bxbtn"] span:first-child { font-size: 9.5px; letter-spacing: 0em; display: block; height: 24px; }
button[id^="bxbtn"] span:last-child { display: block; height: 40px; font-size: 22px; }
button[id^="bxbtn"]:hover { background-color: #565656 !important; transition: ease 0.4s; }
button[id^="bxbtn"]:active, [id^="bxbtn"]:focus { border: 0px; outline: none !important; }

.bx160 { width: 163px !important; height: 163px !important; }
.bx160r { width: 163px !important; height: 80px !important; }





/*-------span buttons---------------------------------------------------*/
[id^="spbtn"] { cursor: pointer; transition: ease 0.4s; color: #00b9d9; }

[id^="spbtn"]:hover { color: #000000; background-color: #ececec; }

[id^="spbtn"]:hover .k-icon { /*color: #ffffff !important;*/ }


/*----------CLEAR BUTTONS----------------------------------------------*/

[id^="clrbtn"] { background: none; border: 0px !important; text-transform: none; cursor: pointer; padding: 0; transition: ease 0.4s; margin-right: 0; vertical-align: top; }

[id^="clrbtn"]:hover { background-color: #11C816 !important; }



/*---------bbtn---------------------------*/
[id^="bbtn"], .bbtn { cursor: pointer; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; background-color: rgb(170, 202, 202); /*#14d5f6*/ border: 0px; text-transform: uppercase; font-size: 10px; color: #ffffff; padding: 3px 8px 4px 8px; text-align: center; text-decoration: none; transition: .15s linear; border-radius: 0em; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12); box-sizing: border-box; text-align: center; overflow: hidden; align-items: center; justify-content: center; vertical-align: middle; height: 24px !important; }


[id^="bbtn"]:hover, .bbtn:hover { background-color: #00b9d9 }
[id^="bbtn"]:focus, .bbtn:focus { border: none !important; outline: none !important; box-shadow: 0px 2px 8px rgba(100, 100, 100, 0.40); background-color: rgb(150, 180, 180); }






/*-------------------a.lnklight  (used in Msgs attachments)-----------------------------*/
a.lnk { color: #00b9d9; text-decoration: none; }
a.lnk:hover { color: #000000; }
a.lnk:visited { color: white; }

a.lnklight { color: white; text-decoration: none; }
a.lnklight:hover { color: #000000; }
a.lnklight:visited { color: white; }

.dvlnk:hover { cursor: pointer; color: #11C816 }
/*for clicking div button or link*/


.bottomboxshadow { border-bottom: 1px solid #ececec; box-shadow: 0px -1px 14px -10px rgba(0,0,0,0.75); height: 46px; }


.reqd { color: #f542b0 }
.reqdborder { border-bottom: 1px solid #ffbbe5; }























/*-----custom--------------------------------------*/

.billingsection { min-width: 380px; }

@media only screen and (max-width: 1455px) {
    .billingsection { min-width: 280px; }
}

@media only screen and (max-width: 1257px) {
    .billingsection { min-width: 200px; }
}


/*----order,purchorder,invoice--------------*/
table.stotals { width: 100%; }
table.stotals td { padding-bottom: 5px; }
#ApprovalState .k-svg-i-check-circle { color: #11C816; font-size: 18px }




/*---boxb-small--*/

button.boxb-small { background-color: #00b9d9; padding-top: -40px; vertical-align: top; width: 80px; height: 50px; border: 0px !important; text-transform: none; font-size: 8px; letter-spacing: .1em; color: #ffffff; cursor: pointer; transition: ease 0.4s; -webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.7); -moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.7); box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.7); }

button.boxb-small:hover { background-color: #565656 !important; transition: ease 0.4s; }
button.boxb-small:focus { background-color: palevioletred !important; border: 0px !important; outline: none !important; }
button.boxb-small:active { border: 0px !important; outline: none !important; }
button.boxb-small span:first-child { display: block; height: 16px; font-size: 9px; margin-top: 5px; margin-bottom: 2px }
button.boxb-small span:last-child { display: block; font-size: 18px; }

button.boxb-small.shadow { -webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,1); -moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,1); box-shadow: 0px 0px 5px 0px rgba(204,204,204,1); }

.boxb-small.green { background-color: #62ca24 !important }






/*-------------------------------------------------------------------------*/
.cssNavBottom { display: none; position: absolute !important; background: #fff; z-index: 1000; margin: 0; padding: 5px; border-collapse: collapse; border-top: 1px solid #efefef; border-bottom: 1px solid #e1e1e1; border-left: 0px; border-right: 0px; box-shadow: 0px 2px 7px 0px rgba(240,240,240,1); width: 100%; height: 36px; overflow: hidden; }




/*----------div popup------------------------------------------*/
.cssPopup { position: absolute; background-color: #fff; z-index: 9999; margin: 0; padding: 0; border-collapse: collapse; border: 1px solid #b4f4ed; /*#81e8dd*/ -webkit-box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); -moz-box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); display: none; overflow: hidden; }

.cssPopup > div:first-child { display: inline-block; color: #27d6cc; font-weight: normal; font-size: 15px; font-family:'Segoe UI', sans-serif, Helvetica, sans-serif, Arial; width: calc(100% - 60px); padding: 8px 10px 0px 15px; margin: 0px; text-transform: uppercase; }
.cssPopup > div:nth-child(2) { display: inline-block; width: 60px; margin: 0px -5px 0px 0px; text-align: right; padding: 7px 16px 0px 10px; vertical-align: top; }
.cssPopup > div:nth-child(2) span.k-icon { color: #27d6cc; font-size: 18px; transition: .15s linear; }
.cssPopup > div:nth-child(2) span.k-icon:hover { color: #565656; cursor: pointer; }
.cssPopup .k-toolbar { padding-top: 0px !important; padding-right: 0px !important; }



/*--this is used for red timer and loader in Main ---*/
.cssPopupBasic { position: absolute; background: #fff; z-index: 9; margin: 0; padding: 0; border-collapse: collapse; border: 1px solid #e1e1e1; -webkit-box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); -moz-box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); box-shadow: 2px 4px 8px 0px rgba(138,138,138,0.2); display: none; overflow: hidden; }



/*-----cssPopup bluetransparent---------------*/
.cssPopup.bluetransparent { background-color: #22c9e6; opacity: .92 }
.cssPopup.bluetransparent > div:first-child { color: #fff; /*#ddffc9*/ font-size: 12px; text-transform: uppercase; letter-spacing: 0em; }
.cssPopup.bluetransparent button.xbtn .k-icon { color: #fff !important; }
.cssPopup.bluetransparent button.xbtn:hover .k-icon { color: #000 !important; }
.cssPopup.bluetransparent > div > span.k-icon.k-i-close { color: #000 !important; }

/*----reflect upon any grid-----*/
.cssPopup.bluetransparent .k-grid, .cssPopup.bluetransparent .k-grid tr td { border: 0px; margin: 0px; padding: 0px; background-color: #22c9e6 !important; color: #fff !important; }

.cssPopup.bluetransparent .k-grid tr td { max-height: 18px; font-size: 12px; letter-spacing: -.03em; }
.cssPopup.bluetransparent .k-grid .k-grid-header { display: none; }
.cssPopup.bluetransparent .k-grid .k-icon { margin: 0px; padding: 0px; color: #fff !important; }
.cssPopup.bluetransparent .k-grid .k-pager-wrap { border: 0px !important; }
.cssPopup.bluetransparent .k-grid tr:hover td { color: #000 !important; }


.cssPopup inline { display: inline-block; }
.cssPopup span.k-icon.k-i-close { cursor: pointer; color: #14d5f6 }
.cssPopup span.k-icon.k-i-close:hover { cursor: pointer; color: #000000 }

/*-----cssModal-------------------------*/
.cssModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 8; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: #fafafa; /*blue-ish #ddf3f7*/ opacity: .40 !important; }



/*-----cssPopup searchpop---------------*/
.cssPopup.searchpop { background-color: #1fb8d3; opacity: 1; border: 0; }
.cssPopup.searchpop > div:first-child { color: #fff; /*#ddffc9*/ font-size: 12px; text-transform: uppercase; letter-spacing: 0em; }
/*.cssPopup.searchpop button.xbtn .k-icon { color: #fff !important; }
.cssPopup.searchpop button.xbtn:hover .k-icon { color: #000 !important; }*/
.cssPopup.searchpop > div > span.k-icon.k-i-close { color: #b9fa87 !important; }
.cssPopup.searchpop > div > span.k-icon.k-i-close:hover { color: #000 !important; }
.cssPopup.searchpop [id^="mbtn"] { background-color: #5ee2f8; color: #fff !important }
.cssPopup.searchpop [id^="mbtn"].clear { background-color: #a2e171; color: #fff !important; }
.cssPopup.searchpop [id^="mbtn"].clear span.k-icon { margin-right: -5px }
.cssPopup.searchpop .k-input { border-bottom: 1px solid #68cee0; color: #ffffff; font-weight: 600 !important; height: 18px !important }
.cssPopup.searchpop .k-input .k-icon { color: #b7f0f8 !important }
/*icons for calendar,dropdown arrow, etc*/

cssPopup.cssLoading { background-color: #1fb8d3; opacity: 1; border: 0; }





/*---------scrollbar--------------------------------------------*/

::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-thumb { background-color: #92e6f5; /*#72e6fa*/ background-clip: padding-box; border: 4px solid #ececec; /*change width of border for scroll here*/ }
::-webkit-scrollbar-track { background-color: #f3f3f3; }


/*--SCROLLBAR FOR TELERIK CONTROLS----*/
/*.k-grid ::-webkit-scrollbar { width: 10px; }*/
.k-grid ::-webkit-scrollbar-thumb { background-color: #aaaaaa; background-clip: padding-box; border-radius: 0px; border: 4px solid #f3f3f3; transition: all 0.6s ease }
.k-grid ::-webkit-scrollbar-thumb:hover { background-color: #14d5f6; background-clip: padding-box; border-radius: 0px; border: 4px solid #f3f3f3; transition: all 0.6s ease }
.k-grid ::-webkit-scrollbar-track { background-color: #f3f3f3; }


/*--for combobox----*/
.k-virtual-list ::-webkit-scrollbar { width: 10px !important; }

/*--for multicolumncombobox with table----*/
.k-virtual-list.k-table-md ::-webkit-scrollbar { width: 10px !important; }


.k-input { border-radius: 0em !important }
.k-input.k-input-md {border:1px solid #dedede !important;}
.k-input-inner {padding:6px !important; background-color:#fcfcfc; font-size:13px}
.k-input-md.k-rounded-md.k-focus { border-bottom-color: #00b9d9 !important }
.k-input-prefix.k-input-prefix-horizontal .fa-solid, .k-input-prefix.k-input-prefix-horizontal .fa-regular { width:32px !important; text-align:center }
.k-radio-list.k-list-vertical .k-radio-list-item { padding: 0px !important }


ul.std li { list-style-type: disc !important; margin-left: 20px; color: #fff !important }
.boxshadow { box-shadow: 0px 1px 14px -5px rgba(117,117,117,0.75); -webkit-box-shadow: 0px 1px 14px -5px rgba(117,117,117,0.75); -moz-box-shadow: 0px 1px 14px -5px rgba(117,117,117,0.75); }

/*---------title tooltip----------*/
[data-tooltip] { position: relative; }
[data-tooltip]:after { content: attr(data-tooltip); position: absolute; left: 50%; top: 32px; /* put it on the top */ 
                       color: white; font-size: 11px !important; letter-spacing:0 !important; text-transform: none !important;  padding: 5px; border-radius: 5px; 
                       background-color: #11C816; width: max-content; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; z-index:9999}
[data-tooltip]:hover:after { opacity: 1; }
div[data-tooltip]:after { left: 5px !important; }


.learnmore { scroll-margin-top: 100px; }


/*-----p-5----------*/
.p-5.bgteal { transition: 0.3s; background-color: #48cab6 !important; box-shadow: 6px 2px 18px -7px rgba(112,112,112,0.75); -webkit-box-shadow: 6px 2px 18px -7px rgba(112,112,112,0.75); -moz-box-shadow: 6px 2px 18px -7px rgba(112,112,112,0.75); }
.p-5.bgteal:hover { background-color: #00b9d9 !important; transform: scale(1.05); }
.p-5.bgteal .mb-3 { color: #ffffff }
.p-5.bgteal .mb-4 { color: #d9f4f8 }




/*------NOTIFICATION--------------------------------------------------------------*/
.k-notification { border-radius: 0; padding: 15px; vertical-align: top !important; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10) !important; color: #ffffff !important }
.k-notification .k-svg-icon { width: 34px !important; height: 34px !important; }
.k-notification.k-notification-warning .k-svg-icon { color: #ffffff !important; }
.k-notification.k-notification-warning .k-notification-content { color: #333333 !important; }
.k-notification-info { border-color: #00b9d9; color: white; background-color: #00b9d9; }
.k-notification-content { margin-left: 8px; }



/*--------custom---------------------------------------*/
@media (max-width:720px) {
    .symextraLine { display: none; }
}

 .currentPageSelected { color: #00b9d9 !important }
 .currentPageSelected:hover { color: #caefcb !important }



span.k-input-suffix .k-button { border: 0px !important; background-color: #e1e1e1; padding: 5px; }
span.k-input-suffix .k-button:hover { background-color: #d9e8c3; }
.k-rounded-md { border-radius: 0px !important }
.k-input-separator.k-input-separator-vertical { display: none }


@media only screen and (min-width: 1px) and (max-width: 415px) {
    .margintopspacing { margin-top: -140px }
}

@media only screen and (min-width: 416px) {
    .margintopspacing { margin-top: -200px }
}

@media only screen and (min-width: 1px) and (max-width: 439px) {
    .margintopspacing2 { margin-top: -100px }
}

@media only screen and (min-width: 440px) and (max-width: 1024px) {
    .margintopspacing2 { margin-top: -170px }
}


@media only screen and (min-width: 1025px) {
    .margintopspacing2 { margin-top: -200px }
}

/*-------digit section blture--------------------------*/
section.blture { display: grid; gap: 3rem; align-items: center; justify-content: center;  }
section.blture p { margin: 0; font-size: 2.25rem; color: hsl(0 0% 40%); text-align: center; background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%)); color: transparent; background-clip: text; }
.code { font-size: 22px; display: flex; flex-wrap: nowrap; color: black; border-radius: 1rem; background: white; justify-content: center; box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset; }
.code:hover { cursor: grab; }
.digit { display: flex; height: 100%; padding: 18px; font-family: 'Poppins', sans-serif; }
.digit:focus-visible { outline-color: hsl(0 0% 50% / 0.25); outline-offset: 1rem; }
.digit span { scale: calc(var(--active, 0) + 0.5); filter: blur(calc((1 - var(--active, .6)) * 1rem)); transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s); }
    
.digit:first-of-type { padding-left: 10px; }
.digit:last-of-type { padding-right: 10px; }
:root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); }
.digit:is(:hover, :focus-visible) { --active: var(--lerp-0); }
.digit:is(:hover, :focus-visible) + .digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); }
.digit:is(:hover, :focus-visible) + .digit + .digit,
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) { --active: var(--lerp-2); }
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) { --active: var(--lerp-3); }
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) { --active: var(--lerp-4); }
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) { --active: var(--lerp-5); }