/*
html {
    position: relative;
    min-height: 100%;
}
*/

body  
{
    color: #666; 
    /*margin: 50px auto !important;*/
    padding-left: 5px;
    padding-right: 5px;
    background-image: url(../img/bg_body_texture.png);
    background-repeat: repeat;
    background-attachment: fixed;
    margin-bottom: 60px;
    /*font-size: 12px !important;*/
}

body > .container 
{
    padding-left: 10px; 
    padding-right: 10px; 
    
}

h5 
{
    font-style: italic !important;
    font-weight: bolder !important;
}

.grid-col-action { white-space: nowrap; }

.left { float: left; }
.right { float: right; }
.clearfix { clear: both; }

.margin-5 { margin: 5px; }
.margin-auto { margin: auto; }
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-25 { margin-top: 25px; }
.margin-left-5 { margin-left: 5px; }
.margin-left-15 { margin-left: 15px; }
.margin-right-5 { margin-right: 5px; }
.margin-right-15 { margin-right: 15px; }
.margin-0 { margin: 0px; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-20 { margin-bottom: 20px; }

.padding-0 { padding: 0px; }
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-top-10 { padding-top: 10px; }
.padding-top-20 { padding-top: 20px; }
.padding-bottom-10 { padding-bottom: 10px; }

.padding-right-20 { padding-right: 20px; }

.padding-left-3 { padding-left: 3px; }

.background-color-white { background-color: #fff; }

.color-red { color: red; }
.color-green { color: green; }
.color-orange { color: orange; }

.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }
.font-style-italic { font-style: italic; }
.text-transform-uppercase { text-transform: uppercase; }

.tab-working-service a, .tab-km-working-service a
{
    color: #ff0000 !important;
}

.gridview-colum-width-90
{
    width: 90px;
}

tr.travelRequest-timeReport-gridview-row td:hover, tr.travelRequest-timeReport-gridview-row:hover
{
    background-color: #ffffff !important;
}

.gridview-rowaddtional
{
    border-top-width: 0px;
    background-image : url("/Content/img/icon-freccia-down.png") !important;    
    background-position: top;
    background-repeat: no-repeat;    
}

label.error 
{
    color: #a94442;
    font-size: 12px;
    margin-top: 10px;
}

.action-plus 
{
    text-decoration: none;
}

input.error, select.error
{
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

input.error:focus, select.error:focus
{
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;

}


body.body_login
{
    margin: 10px auto !important;
}

.breadcrumb {
    background-color: #fff;
    margin: 0px;
    padding: 0px;
}

.breadcrumb li, .breadcrumb li.active, .breadcrumb a
{
    color: #999;
}

.page-header 
{
    margin-top: 0px;
}

.page-header h1 
{
    color: #006699;
    font-size: 30px;
}

.page-sub-header 
{
    margin-top: 0px;
    margin-bottom: 10px; 
}

.page-sub-header h3 
{
    color: #006699;
    margin: 0px;
    font-style: italic;
}

.box-border { border: 1px solid #ccc !important; }

.box-border-radius {
    -webkit-border-radius:  4px;
    -moz-border-radius:     4px;
    border-radius:          4px;
}

.box-container-login { max-width: 500px !important; }
.box-login { background-color: #fff; }
.box-login-footer
{
       font-size: 9px;
       text-transform: uppercase;
       color: #ccc;
       padding: 5px;
       background-color: #006699;
}

.section-standard 
{
    border-top-width: 3px !important;
    border-top-color: #006699 !important;
}

.section-approver
{
    border-top-width: 3px !important;
    border-top-color: #F44336 !important;
}

.header-top
{
    background-color: #006699;
    min-height: 30px;
    color: #fff;
    padding: 5px;
}

.header-top .link
{
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}

.sidebar-header
{
    background-color: #fff;
}

.sidebar-menu-function 
{
    background-color: #006699;
    font-size: 12px;
    padding:10px;
}

.sidebar-menu-function ul 
{
    margin: 0px;
    padding: 0px;
    margin-top: 8px;
}

.sidebar-menu-function li
{
    color: #fff;
    text-transform: uppercase;
    list-style: none;
    display: inline;
    margin-left: 40px;
}

.sidebar-menu-function li:first-child 
{
    margin-left: 0px;
}


.sidebar-menu-function a
{
    color: #fff;
}

.sidebar-menu-function a:hover 
{
    text-decoration: none;
}

.sidebar-menu-function-header 
{
    top: 100 !important;
}

.language-pannel *{
    font-size: 12px;
}

.language-pannel .btn-transparent
{
    
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
}

.language-pannel .dropdown-menu a
{
    color: #333;
}

.language-pannel img 
{
    width: 15px;
    box-shadow: 0px 0px 5px 1px #fff;
    margin:2px;
    
}

.sidebar-menu-action
{
    background-color: #fff;
    padding: 5px;
}

.sidebar-menu-second-level 
{
    margin-top: 20px;
    /*margin-bottom: 20px;*/
    background-color: #fff;
    text-transform: uppercase;
    color: #666666;
    padding-top: 20px;
    padding-bottom: 20px;
}

.sidebar-menu-second-level ul 
{
    margin: 0px;
    padding: 0px;
}

.sidebar-menu-second-level li
{
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid #ccc;
}

.sidebar-menu-second-level li:first-child
{
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    border-left: none;
}

.sidebar-menu-second-level li a
{
    color: #666666;
}

.sidebar-menu-second-level li a:hover, .sidebar-menu-second-level li a.active
{
    color: #006699;
    padding-bottom: 5px;
    border-bottom: 3px solid #006699;
    text-decoration: none;
}

.box-sidebar 
{
    background-color: #fff;
    margin-right: 20px;
}

.box-container 
{
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

span.icon-text::before
{
    content: " ";
}

.input-group .remove 
{
    background-color: #fff;
}

/*
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  * Set the fixed height of the footer here *
  height: 60px;
  text-transform: uppercase;
  text-align: right;
  font-size: 10px;
}
*/

.footer {
    height: 60px;
    text-transform: uppercase;
    text-align: right;
    font-size: 10px;
    background-color: #006699;
    padding-top: 10px;
}

.footer * { color: #fff; }

.footer > .container 
{
    height: inherit;
    
}

.line-separater
{
    margin: 5px 0px 5px 0px;
    border-bottom: 2px solid #666666;
    display: block;
}

.line-separater-light
{
    margin: 5px 0px 5px 0px;
    border-bottom: 2px solid #dddddd;
    display: block;
}

.line-separater-light-small
{
    margin: 5px 0px 5px 0px;
    border-bottom: 1px solid #dddddd;
    display: block;
}

.table-header > div 
{
    font-weight: bold;
}

.column-action 
{
    width: 120px;
}

.action-grid 
{
    float:right;
}
.action-grid > div
{
    display: inline-block;
    width: 15px;
}

.action-grid .active
{
    color: #337ab7;
}

.action-grid .inactive
{
    color:#CCCCCC;
}


.icon-approval-nothing 
{
    border-left: 4px solid #fff;
}

.icon-state-grey
{
    color: #CCCCCC;
    background-color: #CCCCCC;
}

.icon-state-yellow 
{
    color: #F5F909;
    background-color: #F5F909;
}

.icon-approval-yellow 
{
    border-left-color: #F5F909;
}

.icon-state-black
{
    color: #000000;
    background-color: #000000;
}


.icon-approval-green 
{
    border-left-color: #4CAF50;
}

.icon-approval-red 
{
    border-left-color: #FF2020;
}

.icon-state-azzure
{
    color: #19E5FF;
    background-color: #19E5FF;    
}

.icon-state-red
{
    color: #FF2020;
    background-color: #FF2020;
}

.icon-state-yellow
{
    color: #ffcc33;
    background-color: #ffcc33;
}

.icon-state-green-yellow
{
    color: #cddc39;
    background-color: #cddc39;
}
.icon-state-blue
{
    /*color: #336699;
    background-color: #336699;*/
    color: #0099ff;
    background-color: #0099ff;
}

.icon-state-green
{
    color: #4CAF50;
    background-color: #4CAF50;
}

.timereport-state-blue
{
    color: #0099ff;
}
.timereport-state-red
{
    color: #FF2020;
}
.timereport-state-gray
{
    color: #CCCCCC;
}
.timereport-state-green
{
    color: #4CAF50;
}
.timereport-state-yellow
{
    color: #ffcc33;
}

.blink_me
{    
}

.width-full
{
    width: 100%;
}

.height-full
{
    height: 100%;
}

.width-half
{
    width: 50%;
}

.height-half
{
    height: 50%;
}

.icon-shadow
{
    -webkit-box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.75);
}    

.box-grey
{
    padding: 5px;
    background-color: rgba(204, 204, 204, 0.12);
    border: 1px solid #cccccc;
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
}

.box-grey-nouppercase
{
    padding: 5px;
    background-color: rgba(204, 204, 204, 0.12);
    border: 1px solid #cccccc;
    display: inline-block;
    width: 100%;
}

.box-documentState
{
    color: #2196F3;
    text-transform: lowercase;
}

.detail-line 
{
    margin: 5px 0px 5px 0px;
}

.ui-customDP-RangeSelection-First .ui-state-default
{
    background-color : #fff !important;
    background-image : url("/Content/img/calLeft.png") !important;    
    background-position:left top !important;
    background-repeat:repeat-y !important;
}

.ui-customDP-RangeSelection-Last .ui-state-default
{
    background-color : #fff !important;
    background-image: url("/Content/img/calRight.png") !important;
    background-position:right top !important;
    background-repeat:repeat-y !important;
}

.ui-customDP-RangeSelection .ui-state-default
{
        background-color : #fff !important;
        background-image :none !important;
}

.ui-customDP-RangeSelection-FirstLast .ui-state-default
{
        background-color : #fff !important;
        background-image :none !important;
        border-left: 2px solid #000 !important;
        border-right: 2px solid #000 !important;
}

.pointer 
{
    cursor: pointer;
}

.amount-total {
    color: #0099cc;
    font-size: 16px;
    /*text-transform: uppercase;*/
    line-height: 30px;
}

.amount-total span
{
    /*font-size: 30px;*/
    text-align:right;
}

.grid-status-service-detail { width: 150px; }

/*.requestStateBlocker, .requestStateWarning, .requestStateInfo { display: table-cell; width: 50px; }*/

.box-tooltip-grid-bloker, .box-tooltip-grid-warning, .box-tooltip-grid-info
{
    display: inline;
    font-weight: bold;
    cursor: pointer;
    margin: 0px 3px 0px 3px;
}
/*
.box-tooltip-grid-bloker .badge { background-color: #d9534f; }
.box-tooltip-grid-warning .badge { background-color: #F9A932; }
.box-tooltip-grid-warning .badge { background-color: #F9A932; }
*/

.box-tooltip-grid-bloker { color: #d9534f; }
.box-tooltip-grid-warning { color: #F9A932; }
.box-tooltip-grid-info { color: #337AB7; }

.tooltip-inner, .tooltip-inner
{
    text-align: left !important;
}

.lookup-favorite
{
    color: #D8D3D3;
}

.lookup-favorite-active
{
    color: #FFC107;
}

.inactive-link
{
   pointer-events: none;
   cursor: default;
}



/* AUTOCOMPLETE */

input.autocomplete-loading {
	background-image: url(/Content/img/autocomplete.gif);
	background-position: center right;
	background-repeat: no-repeat;
}

ul.autocompletelist {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid ButtonShadow;
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #000;
	display: none;
	z-index: 10000000;  
}

ul.autocompletelist li {
  display: block; 
  padding: 0.3em; 
  overflow: hidden;
  cursor: pointer;
  width: 100%;
}

ul.autocompletelist li.selected {
  background-color: Highlight ; 
  color: #fff;
}

th.approvalState, td.approvalState { width: 5px; padding: 5px !important; }

/*.header-sidebar-fix 
{
    display: none;
}

*/
.sidebar-menu-second-level-fixed
{
    /*margin-top: 20px;*/
    /*margin-bottom: 20px;*/
    background-color: #fff;
    text-transform: uppercase;
    color: #666666;
    padding-top: 20px;
    padding-bottom: 20px;
    display: none;
}

.sidebar-nomenu-second-level-fixed
{
    display: none; 
}


.dashboard-thumb
{
    width: 150px;
    height: 150px;
    background-color: #fff;
    border: 1px solid #999999;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #999999;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
}

.dashboard-thumb-active
{
    background-color: #f1f1f1;
    border: 1px solid #6699cc;
    color: #3399cc;
}

.dashboard-thumb-red
{
    color: #ff0000 !important;
}

.dashboard-thumb:hover 
{
    background-color: #f1f1f1;
}

.dashboard-thumb > span
{
    font-size: 40px;
    display: block;
}

.box-dashboard .nav-tabs li > a
{
    border: 0px;
    border-bottom: 3px solid none !important;
}

.box-dashboard .nav-tabs li > a:hover 
{
    background-color: #fff !important;
    border: 0px !important;
    border-bottom: 3px solid #006699 !important;
}

.box-dashboard .nav-tabs li.active > a, .box-dashboard .nav-tabs li.active > a:hover
{
    border: 0px;
    border-bottom: 3px solid #006699 !important;
}


.box-dashboard .nav-tabs li.active > a > .dashboard-thumb
{
    background-color: #f1f1f1;
    border: 1px solid #6699cc;
    color: #3399cc;
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) 
{
    .box_submit_login > div:nth-child(2) { margin-top:20px; }
    
     .header-sidebar-fix
     {
         display: block;
     }
     
     .header-sidebar
     {
         display: block;
     }     
        
     .sidebar-menu-second-level-fixed
     {
         display: inherit;
         background-color: #fff;
         margin-top: 160px;
     }
     
     .sidebar-nomenu-second-level-fixed
     {
         display: inherit;
     }     
     
     .sidebar-menu-second-level { display: none; }
}



/* Small devices (tablets, 768px and up) */
@media (max-width: 540px) 
{
    .language-pannel .language-pannel-btn-txt { display: none; }
    .language-pannel .dropdown-menu { min-width: 50px; }
    .sidebar-menu-function li
    {
        color: #fff;
        text-transform: uppercase;
        list-style: none;
        display: inline;
        margin-left: 10px;
    }    
    span.icon-text{ display: none; }
}

/****************************/
/* box shadow               */
/***************************/

.box-shadow-2dp 
{    
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.box-shadow-3dp {
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
    -moz-box-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
}
.box-shadow-4dp {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    -moz-box-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}
.box-shadow-6dp {
    -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
    -moz-box-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
.box-shadow-8dp {
    -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    -moz-box-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.box-shadow-16dp {
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
    -moz-box-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

/****************************/
/* MENU                     */
/***************************/
.menu-header
{ 
    position:       relative; 
    text-align:     left;
    overflow:       hidden;
    float:          left;
    margin:         10px;
}

div#navigation
{
    float: right;
    text-align:  left;
    margin:      0 0 35px;
    position:    relative;
    z-index:     10;
    text-transform: uppercase;
    font-size: 11px;
}

div#navigation ul ul { display: none; }

div#navigation ul li { list-style: none; } 

/*div#navigation ul li:hover > ul { display: block; }*/

.btn-responsive-menu
{
    display:                none;
    padding:                5px;
    cursor:                 pointer;
    color:                  #006699;
    background:             #006699;
    -webkit-border-radius:  4px;
    -moz-border-radius:     4px;
    border-radius:          4px;
}

.icon-bar 			
{
    display:                 block;
    width:                   20px;
    height:                  3px;
    margin:                  5px;
    background-color:        #fff;
    -webkit-border-radius:   2px;
    -moz-border-radius:      2px;
    border-radius:           2px;
}

div#navigation ul li a 
{
    display: block;
    text-decoration: none;
}

div#navigation ul li img 
{
    /*
    height: 35px;
    width: 34px;
    */
}
 
div#navigation li a span
{
    display: block;
}



@media screen and (min-width:992px)
{
    div#navigation { margin-bottom: 0px; }
    
    div#navigation ul li  
    {
        display: inline-block; 
        width: 90px;
        height: 80px;
        vertical-align: top;
        text-align: center;
        float: right;
        border-right: 1px solid #ccc;
        padding: 3px;
    }
    
    div#navigation ul li.active, div#navigation ul li:hover
    {
        border-bottom: 3px solid #0066cc;
    }
    
    
    div#navigation ul li a.active, div#navigation ul li a:hover
    {
        background-repeat:no-repeat;
        background-position: top right;
        background-image: url(../img/icon-freccia.png);
    }    
    
    div#navigation ul li:first-child { border-right: none; }
    
    div#navigation ul li.navigation-text img { margin-bottom: 8px; }
}

@media screen and (max-width:991px)
{
    .menu-header
    {
        /*margin: 0 1.2em;*/
        float: none;
    }

    div#navigation  
    {
        float: none;
        clear: both;
        display: none; 
    }

    div#navigation ul 
    {
        padding: 0px;
    }

    div#navigation ul ul 
    {
        width:         100%;
        position:      relative;
        display:       table;
    }
    
    div#navigation li 
    {
        margin: 5px 0px 5px 0px;
        border-top: 1px solid #e8e8e8;
        padding: 10px;
    }
    
    div#navigation li a
    {
        display: inline-block;
    }    
    
    div#navigation ul li a.active, div#navigation li a:hover 
    {
        /*background-color: #e8e8e8;*/
        background-repeat:no-repeat;
        background-position: center right;
        background-image: url(../img/icon-freccia.png);        
    }

    div#navigation li:first-child
    {
        border-top: none;
    }
    
    div#navigation li a span
    {
        display: inline;
    }
    
    div#navigation li a span::after
    {
        content: " ";
    }

    .btn-responsive-menu
    {
        display:      block;
        position:     absolute; 
        top:          20px; 
        right:        20px; 
    }
    
    div#navigation ul li:hover > ul { display: block; }
    
    /*.sidebar-menu-second-level { display: none; }*/
}


/******************************************************************
CHECKBOX
******************************************************************/

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}
.nofilter
{
    color:#ff0000;
    /*width: 10px;*/
    
}

.noBorderSize5
{
    border: none !important;
    border-color: transparent !important; 
    -webkit-appearance:none;
    width:50px;   
}

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