.skin-io .main-sidebar .user-panel {
    border-bottom: 3px solid #3C8DBC;
}

.skin-io .main-header {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)
}

.skin-io .main-header .navbar-toggle {
    color: #333
}

.skin-io .main-header .navbar-brand {
    color: #333;
    border-right: 1px solid #eee
}

.skin-io .main-header .navbar {
    background-color: #fff
}

.skin-io .main-header .navbar .nav > li > a {
    color: #333
}

.skin-io .main-header .navbar .nav > li > a:hover, .skin-io .main-header .navbar .nav > li > a:active, .skin-io .main-header .navbar .nav > li > a:focus, .skin-io .main-header .navbar .nav .open > a, .skin-io .main-header .navbar .nav .open > a:hover, .skin-io .main-header .navbar .nav .open > a:focus, .skin-io .main-header .navbar .nav > .active > a {
    background: #fff;
    color: #999
}

.skin-io .main-header .navbar .sidebar-toggle {
    color: #3C8DBC;
}

.skin-io .main-header .navbar .sidebar-toggle:hover {
    color: #fff;
    background: #3C8DBC
}

.skin-io .main-header .navbar > .sidebar-toggle {
    color: #333;
    border-right: 1px solid #eee
}

.skin-io .main-header .navbar .navbar-nav > li > a {
    border-right: 1px solid #eee
}

.skin-io .main-header .navbar .navbar-custom-menu .navbar-nav > li > a, .skin-io .main-header .navbar .navbar-right > li > a {
    border-left: 1px solid #eee;
    border-right-width: 0
}

.skin-io .main-header > .logo {
    background-color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    width: 230px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    overflow: hidden;
    background-image: url("../img/next_gen_logo.8c9d0ccbf7c4.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 50px;
    border-right: solid 1px #ddd;
    color: #333;
    border-bottom: 0 solid transparent;
    border-right: 1px solid #eee;
    background-image: url("../img/next_gen_logo.8c9d0ccbf7c4.png");
    background-size : auto 80%;
    background-position: center center;
    background-repeat : no-repeat;
}

.skin-io.sidebar-collapse .main-header > .logo {
    background-image: url("../icon/io_icon.3e370fc3723d.png")
}

.skin-io .main-header > .logo:hover {
    background-color: #fcfcfc
}

@media (max-width: 767px) {
    .skin-io .main-header > .logo {
        background-color: #222;
        color: #fff;
        border-bottom: 0 solid transparent;
        border-right: none
    }

    .skin-io .main-header > .logo:hover {
        background-color: #1f1f1f
    }
}

.skin-io .main-header li.user-header {
    background-color: #222
}

.skin-io .content-header {
    background: transparent;
    box-shadow: none
}

.skin-io .wrapper, .skin-io .main-sidebar, .skin-io .left-side {
    background-color: #222d32
}

.skin-io .content-wrapper, .skin-io .main-footer {
    border-left: 1px solid #d2d6de
}

.skin-io .user-panel > .info, .skin-io .user-panel > .info > a {
    color: #444
}

.skin-io .sidebar-menu > li {
    -webkit-transition: border-left-color .3s ease;
    -o-transition: border-left-color .3s ease;
    transition: border-left-color .3s ease
}

.skin-io .sidebar-menu > li.header {
    color: #7892a1;
    background: #111;
    font-size: 14px;
    margin-top: 0px
}

/*Colapse sidebar section set height to 0*/
.sidebar-mini.sidebar-collapse .sidebar-menu li.header {
    color: transparent;
    height: 0px;
    background-color: #111;
    padding: 0;
}

.skin-io .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    font-weight: 600
}

.skin-io .sidebar-menu > li:hover > a, .skin-io .sidebar-menu > li.active > a {
    color: #fff;
    background: #1e282c;
    border-left-color: #3C8DBC;
}

.skin-io .sidebar-menu > li.active {
    border-left-color: #fff
}

.skin-io .sidebar-menu > li.active > a {
    font-weight: 600
}

.skin-io .sidebar-menu > li > .treeview-menu {
    background: #f4f4f5
}

.skin-io .sidebar a {
    color: #b8c7ce
}

.skin-io .sidebar a:hover {
    text-decoration: none
}

.skin-io .treeview-menu > li > a {
    color: #777
}

.skin-io .treeview-menu > li.active > a, .skin-io .treeview-menu > li > a:hover {
    color: #000
}

.skin-io .treeview-menu > li.active > a {
    font-weight: 600
}

.skin-io .sidebar-form {
    border-radius: 3px;
    border: 1px solid #d2d6de;
    margin: 10px 10px
}

.skin-io .sidebar-form input[type="text"], .skin-io .sidebar-form .btn {
    box-shadow: none;
    background-color: #fff;
    border: 1px solid transparent;
    height: 35px
}

.skin-io .sidebar-form input[type="text"] {
    color: #666;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px
}

.skin-io .sidebar-form input[type="text"]:focus, .skin-io .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: #fff;
    color: #666
}

.skin-io .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    border-left-color: #fff
}

.skin-io .sidebar-form .btn {
    color: #999;
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 0
}

@media (min-width: 768px) {
    .skin-io.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
        border-left: 1px solid #d2d6de
    }
}

.skin-io .main-sidebar .user-panel {
    border-bottom: 2px solid #3C8DBC;
}

.skin-io .username-location {
    color : #b8c7ce;
}

.skin-io .username-location b {
    color : #b8c7ce;
}

.skin-io .time-server {
    color : #b8c7ce;
}

.skin-io .time-server>span.right-controls>a {
    color : #b8c7ce;
}

.skin-io .time-server>span.right-controls>a:hover {
    color : #b8c7ce;
}

.skin-io .time-server:hover {
    color : #b8c7ce;
}

.skin-io .attribution-panel {
    font-family: "Source Code Pro", monospace;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 230px;
    height: 30px;
    background-color: #111;
    color: #b8c7ce;
    line-height: 30px;
    padding-left: 35px;
    background-image: url("../img/oa_logo.02894e9146fd.svg");
    background-size: auto 70%;
    background-position: 10px center;
    background-repeat: no-repeat;
}


.skin-io .bootstrap-switch {
    width: 60px;
    display: inline-block;
    direction: ltr;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid;
    border-color: #ccc;
    position: relative;
    text-align: left;
    overflow: hidden;
    line-height: 8px;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


.login-footer {
    font-size: 35px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
    font-weight: 300;
}

.login-page {
    background-image: url("../img/login_background.48cc8f7851ae.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.skin-io .btn-primary:hover,
.skin-io .btn-primary:active,
.skin-io .btn-primary.hover,
.skin-io .btn-primary.focus{
    background-color: rgb(15, 60, 90) !important;
    border-color: rgb(33, 118, 184) !important;
    color: #fff !important;
}

.skin-io .btn-primary{
    color: rgb(33, 118, 184) !important;
    border-color: rgb(33, 118, 184) !important;
    background-color: #fff !important;
}
a[href="#admin_sims_list"] .fa-mobile-phone{
    font-size: 18px !important;
}
.simInfoItem span[class^='sim']{
    margin: 0 20px 0 0;
    width: 150px;
    display: inline-block;
}
.simInfoItem input{
    margin-right: 10px;
}
.simInfoItem label{
    cursor: pointer;
    font-weight: normal;
}
#simListBody .simItem:hover{
    background-color: rgba(79, 91, 105, 0.07);
}
#simListBody .simItem label{
    width: 98%;
    padding: 5px 0;
    margin-bottom: 0;
}
#box_all_sims_div_header_ctrls span.multiselect-native-select {
    position: absolute;
    right:220px;
}
.btn-providers-chart{
    padding: 0px 2px;
    text-align: right;
    float: right;
    margin-right: 5px;
}

.range_selected{
    /*display: none;*/
    background-color: rgb(15, 60, 90) !important;
    border-color: rgb(33, 118, 184) !important;
    color: #fff !important
}
.service_info_div{
    position: sticky;
}
#mobile_services_logs .log-entry > span.timestamp{
    display: none;
}
#mobile_services_logs .service-name{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 125px !important;
}
#mobile_services_logs .log-entry b{
    margin-right: 0px;
    margin-left: 0px;
}
#mobile_services_logs{
    font-size: 12px;
    width: 100%;
}
@keyframes highlight-and-back {
	0% { color : #00a65a }
    100% { color : #ccc }
}

#box_contracts_container_header_ctrls>div, #box_contracts_container_header_ctrls>span {
    margin-left: 5px;
}

.admin-contract-item {
    width: 100%;
    border: solid 1px #ececec;
    display: inline-block;
    padding: 10px;
    background-color: #fff;
    position : relative;
    margin-bottom : 5px;
    cursor: pointer;
}

.admin-contract-item:hover {
    background-color : #f9f9f9;
}

.admin-contract-item>div.row-header {
    height:34px;
}

.admin-contract-item>div.row-header>span.btn-link {
    position : absolute;
    top : -5px;
    right : -5px;
}

.admin-contract-item>div.row-header>span.btn-link>.fa-times {
    opacity : 0;
    padding : 0;
}

.admin-contract-item>div.row-header>span.triangle.top-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #fff transparent transparent;
    position : absolute;
    top : 0;
    right : 0;
    opacity: 0;
}

.admin-contract-item:not(.lost-contact, .never-contacted):hover {
    background-color: #ececec;
}

.admin-contract-item>div.row-header>span.status-mark {
    display: block;
    position: absolute;
    left : -5px;
    top : 0;
    height : 100%;
    width : 5px;
    background-color: #00a65a;
}

.admin-contract-item>div.row-header>input.contract_item_checkbox {
    display: block;
    position: absolute;
    left : 10px;
    top : 0;
    height : 42px;
    width : 15px;
}

.admin-contract-item>div.row-header.inactive>span.status-mark {
    background-color: #535657
}
.admin-contract-item>div.row-header.ready>span.status-mark {
    background-color: #99f594;
}
.admin-contract-item>div.row-header.active>span.status-mark {
    background-color: #00A560
}
.admin-contract-item>div.row-header.suspended>span.status-mark {
    background-color: #FFA90B;
}
.admin-contract-item>div.row-header.terminated>span.status-mark {
    background-color: #A01313
}
.admin-contract-item>div.row-header.purged>span.status-mark {
    background-color: #8B4513;
}
.admin-contract-item>div.row-header.unknown>span.status-mark {
    background-color: #BCC4C4;
}


/* Contract name, LED and ID */
.admin-contract-item>div.row-header>span.contract-name-wrapper {
    width : 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top : -8px;
    margin-left: 24px;
    height : 42px;
}

.admin-contract-item>div.row-header>span.contract-name-wrapper>span.contract-name {
    display : block;
    width : 98%;
    height : 28px;
    line-height: 28px;
    font-size : 16px;
}

.admin-contract-item>div.row-header>span.contract-name-wrapper>span.contract-details {
    display : block;
    width : 98%;
    height : 10px;
    line-height: 10px;
    color : #666;
    font-size : 12px;
}

.admin-contract-item>div.row-header>span.contract-name-wrapper>span.contract-details>span.fa {
    font-size : 10px;
    margin-right : 5px;
    line-height: 10px;
    color: #ccc;
}

.admin-contract-item>div.row-header>span.contract-name-wrapper>span.contract-details>span.fa.active {
    animation : highlight-and-back 800ms;
}


/* Contract data plan */
.admin-contract-item>div.row-header>span.contract-plan-wrapper {
    width : 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*margin-top : -8px;*/
    /*margin-left: -30px;*/
    /*height : 42px;*/
}

.admin-contract-item>div.row-header>span.contract-plan-wrapper>span.contract-base {
    display : block;
    width : 100%;
    height : 18px;
    font-size : 12px;
    line-height: 15px;
}

.admin-contract-item>div.row-header>span.contract-plan-wrapper>span.contract-extension {
    display : block;
    width : 100%;
    height : 18px;
    font-size : 12px;
    line-height: 15px;
}

.admin-contract-item>div.row-header>span.contract-plan-wrapper>span.contract-adjustment {
    display : block;
    width : 100%;
    height : 10px;
    font-size : 10px;
    line-height: 12px;
}

.admin-contract-item>div.row-header>span.contract-pie-usage {
    float : left;
    width : 30px;
    height : 30px;
    text-align: center;
    overflow: hidden;
    transform: rotate(-90deg);
}

.admin-contract-item>div.row-header>span.contract-pie-usage>span {
    width: 28px;
    height: 28px;
    border-radius: 0;
    display: inline-block;
    padding : 1px;
}

.controller-item>div.row-header>span.contract-usage {
    width : 30px;
    text-align: center;
}


.admin-contract-item>div.row-header>span {
    margin-left : 5px;
    margin-right : 5px;
    display : inline-block;
    line-height: 30px;
    float : left;
}



/* Contract SIMs */
.provider-icon{
    margin-left: 5px;
    height: 14px;
    width: 14px;
}
.contract-provider-units {
    margin-left: 6px;
}
/* End of Contract SIMs */


.admin-contract-item>div.row-header>span.contract-alert {
    color : #A01313;
    height : 30px;
    float : right;
    width : 100px;
    text-align: center;
}

.admin-contract-item>div.row-header.pending-target-state>span.contract-alert {
    color : #f38c16;
}

.admin-contract-item>div.row-header>span.contract-alert>span {
    line-height : 15px;
    display : block;
}

.admin-contract-item>div.row-header>span.contract-alert>span.alert-text {
    padding-top : 3px;filter: hue-rotate(215deg) brightness(0.4);
}

.admin-contract-item>div.row-header>span.go-to-contract {
    float : right
}

.admin-contract-item .detail-area{
    /*background-color : #fff;*/
    height: 0;
    overflow: hidden;
    display : block;
    transition : height 200ms;
    -webkit-transition : height 200ms;
    width : calc(100% - 10px);
    margin-left : 5px;
    cursor: default;
}

.admin-contract-item.expanded>.detail-area {
    height: 400px;
    margin-top : 10px;
    /*border : solid 1px #ececec;*/
    /*padding : 5px;*/
    position : relative;
    /*padding-left : 17px;*/
}

.admin-contract-item.expanded>.detail-area .title-area {
    position: absolute;
    top: 0;
    left: 0;
    height : 400px;
    width : 12px;
    padding : 0 3px;
    background-color: #fefefe;
    border-right : solid 1px #ececec;
    text-align: center;
    color : #999;
    font-size : 12px;
    font-weight: bold;
}

.admin-contract-item:not(.expanded)>.detail-area>* {
    visibility: hidden;
}

.admin-contract-item.expanded>.detail-area .title-area>span {
    transform: rotate(-90deg) translateX(-50%) translateY(-21px);
    display: inline-block;
    transform-origin: 42% 45%;
    width: 50px;
    height: 10px;
    font-size: 10px;
    text-align: right;
}

.admin-contract-item.expanded>.detail-area>.details-row {
    height : 192px;
    margin-bottom : 5px;
}

.admin-contract-item.expanded>.detail-area .group-wrapper {
    height: 192px;
    border : solid 1px #ececec;
    float : left;
}

.admin-contract-item.expanded>.detail-area .contract-details-wrapper {
    background-color : #fff;
    width : 40%;
}

.admin-contract-item.expanded>.detail-area .contract-usage-wrapper {
    background-color : #fff;
    margin-left: 5px;
    width : 25%;
}

.details-span{
    display: block;
    margin-left: 10px;
    font-size: 14px;
    text-align: left;
}


/* Available extensions */
.extension-entry {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.extension-entry>.data {
    width: 50px;
    font-weight: bold;
}

.extension-entry>.price {
    float: right;
    width: 20%;
    text-align: right;
    color: #999;
    margin-left: 10px;
}

.extension-entry>.discount {
    float: right;
    width: 25%;
    text-align: right;
    color: #999;
    margin-left: 5px;
    margin-right: 5px;
}
.extension-entry>.sale-price {
    float: right;
    text-align: right;
    width: 130px;
}

/*.admin-contract-item.expanded>.detail-area .contract-discount-wrapper {*/
    /*width : calc(10% - 5px);*/
    /*margin-left : 5px;*/
/*}*/

/*.discount-sum {*/
    /*display: inline-block;*/
    /*width: 30%;*/
    /*font-weight: bold;*/
    /*height: 10px;*/
    /*font-size: 20px;*/
    /*text-align: center;*/
    /*color: #377DB5;*/
/*}*/

/*.discount-sub {*/
    /*display: inline-block;*/
    /*width: 30%;*/
    /*font-weight: bold;*/
    /*height: 10px;*/
    /*font-size: 20px;*/
    /*text-align: center;*/
    /*color: #377DB5;*/
/*}*/

/*.discount-value {*/
    /*display: inline-block;*/
    /*width: 40%;*/
    /*height: 10px;*/
    /*font-size: 18px;*/
    /*text-align: center;*/
/*}*/

.admin-contract-item.expanded>.detail-area .extensions-wrapper {
    background-color : #fff;
    width : 40%;
    padding : 3px 0;
    position: relative;
}

.admin-contract-item.expanded>.detail-area .group-wrapper>div.loader-wrapper {
    width : 100%;
    height : 100%;
    padding-top : 75px;
    text-align: center;
}


.admin-contract-item.expanded>.detail-area .chart-area-right-wrapper {
    background-color : #fff;
    height : 188px;
    float : left;
    position : relative;
}

.admin-contract-item.expanded>.detail-area .area-title {
    text-align: left;
    margin-left: 5px;
    color : #999;
    font-weight: 400;
    text-transform: capitalize;
    width : 85%;
}

.admin-contract-item.expanded>.detail-area .chart-area-legend {
    width : 100%;
    height : 100px;
    position : absolute;
    left : 0;
    bottom : 5px;
    padding : 5px;
    padding-left : 30px;
}

.admin-contract-item.expanded>.detail-area .chart-area-right-wrapper {
    width : 150px;
}

.admin-contract-item.expanded>.detail-area .timeline-wrapper {
    background-color : #fff;
    width : calc(35% - 10px);
    padding : 3px 0;
    margin-left : 5px;
    position: relative;
}

#timeline-contract-wrapper .log-entry > span.timestamp{
    width: 70px;
    color: #999;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

/* Usage chart */
.admin-contract-item.expanded>.detail-area .usage-chart-wrapper {
    background-color : #fff;
    width : calc(60% - 5px);
    padding : 3px 0;
    margin-left : 5px;
    position: relative;
}
/* End of Usage chart */


.icon.critical {
    color: #ff0000;
}

.icon.success {
    color: #00a157;
}

/**********************************************************************************************************************/
/*********************************************************** MODALS ***************************************************/
/**********************************************************************************************************************/
.panel.panel-light > .panel-heading {
    background-color: #fbfbfb;
    color: #666;
    border: solid 1px #ececec;
}

/************************************************* CUSTOMIZE EXTENSIONS MODAL *****************************************/
.extension_label{
    margin-left: 25px;
}

.volume_wrapper {
    display: inline-block;
    width: 18%;
}

.extension_volume{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 15px;
    padding: 5px 5px 5px 5px;
    width: 50px;
}

.price_wrapper {
    display: inline-block;
    width: 14%;
}

.extension_original_price{
    text-align: center;
}

.discount_wrapper {
    display: inline-block;
    width: 24%;
}

.extension_discount{
    width : 50px;
    height : 28px;
    line-height: 28px;
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
}

.sale_price_wrapper {
    display: inline-block;
    left: 1%;
    top: 45px;
    width: 33%;
    height: auto;
}
.extension_sale_price{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 75px;
}

/**************************************************** MANAGE SIMS MODAL ***********************************************/
.icon_wrapper {
    display: inline-block;
    width: 4%;
}

.iccid_wrapper {
    display: inline-block;
    width: 22%;
}

.iccid{
    text-align: center;
    height : 28px;
    line-height: 28px;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.line_number_wrapper {
    display: inline-block;
    width: 15%;
}

.line_number{
    text-align: center;
    display: block;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.puk_wrapper {
    display: inline-block;
    width: 15%;
}

.puk{
    text-align: center;
    display: block;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.line_number_edit{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 90%;
}

.puk_edit{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 90%;
}

.target_wrapper {
    display: inline-block;
    width: 30%;
}

.target {
    text-align: center;
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.confirm_btn_wrapper{
    float: right;
    display: inline-block;
    width: 10%;
}

.confirm_btn{
    text-align: center;
    display: block;
    width: 90%;
    margin: 5px 5px 5px 5px;
}

.delete_icon_wrapper{
    float: right;
    display: inline-block;
    width: 5%;
}

.delete_icon{
    margin-top: 5px;
    margin-left: 5px;
    height: 14px;
    width: 14px;
}


/*************************************************** EDIT DETAILS MODAL ***********************************************/
.detail {
    display: block;
    width: 100%;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    border: solid 1px #ececec;
    background-color: #fbfbfb;
    resize: none;
    margin-bottom: 15px;
}
.details_container {
    display: block;
}

.ending_date_wrapper {
    display: block;
}
.ending_date {

}
.base_discount_wrapper {
    display: block;
}
.currency_wrapper {
    display: block;
}
.limit_min_wrapper {
    display: block;
}
.limit_max_wrapper {
    display: block;
}
.comments_wrapper {
    display: block;
}
.comments_area {
    height: 60px;
}
.buttons_wrapper {
    display: block;
    text-align: right;
    /*float: right;*/
}


.input-append.date label{
    font-weight: normal;
    height: 40px;
    padding-left: 10px;
    margin-top: 15px;
    width: 100%;
}
.input-append.date label input{
    float: right;
    top: -10px;
    margin: -5px 35px 5px 5px;
    padding: 5px;
    border: none;
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    background-color: transparent;
}
.report-selector{
    background-color: white;
    border: 1px solid #888;
}
#report_name{
    width: 100%;
}
/* Used to remove invalid red border on Firefox */
input:required,
input:invalid {
    box-shadow:none;
}
.customerItem {
    border-style: solid;
    border-width: 1px;
    border-color: #ececec;
    display: block;
    margin-bottom: 5px;
    background-color: #F9F9F9;
}

.customerInfoItem {
    display : block;
    width : 100%;
    height : 42px;
    margin : 0;
    padding : 0;
    cursor : pointer;
}

.customerItem:hover {
    background-color : #f0f0f0;
}

.customerInfoItem[aria-expanded="false"]:hover>.customerName:after {
    content: '\25bc';
}

.customerInfoItem[aria-expanded="true"]:hover>.customerName:after {
    content: '\25b2';
}

.customerInfoItem:hover>.customerName:after {
    margin-left : 10px;
    color : #aaa;
    font-size : 12px;
    line-height: 20px;
}


.customerItem, .contractItem, .target-item, .simListItem, .contract-item {
    transition : border-color, background-color 300ms;
    -webkit-transition : border-color, background-color 300ms;
}

.customerItem:hover, .contractItem:hover, .target-item:hover, .contract-item:hover {
    border-color: #ccc;
    box-shadow : 0 0 2px #999;
}

#customerListBody .submenu-target {
    margin-top : -1px;
}

.customerName {
    display: inline-block;
    width: 35%;
    height: 20px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 20px;
    float: left;
}

.customerName>span {
    padding-left : 10px;
}

.customerTargetsSummary{
    display: inline-block;
    width: 200px;
    height: 100%;
}
.customerTargetsSummary ul{
    list-style: none;
    padding-left: 0;
}
.target-summary-item{
    float: left;
    height: 65%;
    width: 40%;
    margin: 5px;
}
.target-summary-text{
    height: 100%;
    display: inline-block;
    line-height: 28px;
    color: #666;
    margin-left: 6px;
    font-size: 16px;
}

.contractItem {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}


.contractImage{
  width:30px;
    filter: hue-rotate(215deg) brightness(0.4);
}

.simListItem {
    display: inline-block;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-bottom : 5px;
}

.simItem {
    display: inline-block;
    width : calc(100% - 10px);
    margin-left : 5px;
    padding : 0 5px;
    border-bottom : solid 1px #ddd;
}

.box #box_customer_list_body{
    height: calc(100% - 66px)!important;
}

.simItem:last-of-type {
    border : none;
}

.simItem>.progress {
    margin-bottom : 0 !important;
}

.contractInfoHolder {
    display: inline-block;
    border : none;
    width : 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.contractInfoHolder>.progress {
    margin-bottom : 5px !important;
}

.simImage{
    width:30px;
    transform: rotate(-90deg);
    filter: hue-rotate(215deg) brightness(0.4);
}
.simProvider{
   margin-left: 20px;
}

.alias_wrapper {
    margin-left: 20px;
    display: inline-block;
    width: 20%;
}

.sim_alias{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    /*padding: 5px 5px 5px 5px;*/
    width: 100%;
}

.simICCID{
    margin-left: 20px;
}

.simUsage{
    margin-left: 20px;
}
.simIsBackup{
    margin-left: 20px;
    color: #ff9900;
    opacity: .7;
}
.no_margin{
    margin: 0;
}
.simProfile{
    margin-left: 20px;
}

.contractData {
    margin-left: 20px;
}

.progress-dark {
    background-color: #E5E5E5;
}

.targets-container {
    display: block;
    width : calc(100% - 10px);
    margin-left : 5px;
    overflow : hidden;
}

.targets-container:before {
    /*content : '';*/
    /*border-top : solid 1px #ddd;*/
    /*display : inline-block;*/
    /*width : 100%*/
}

.targets-container:empty{
    display: none;
}

.contracts-container {
    display: inline-block;
    width : calc(100% - 10px);
    margin-left : 5px;
}

.contracts-container>span {
    margin-bottom : 5px;
    display: inline-block;
    width : 100%;
    background-color: #F9F9F9;
    border : solid 1px #ddd;
}

.contracts-container .progress>.progress-bar {
    background-color: rgb(195, 233, 182) !important;
}

.contracts-container:empty {
    display : none
}

.target-item {
    display : inline-block;
    font-size : 16px;
    width : 100%;
    border : solid 1px #ddd;
    background-color : #fff;
    margin-bottom : 5px;
}

.target-item>.item-icon{
    display : inline-block;
    width : 50px;
    height : 50px;
    background-position: center center;
    background-size : 90%;
    background-repeat : no-repeat;
    filter : hue-rotate(215deg) brightness(0.4);
    -webkit-filter : hue-rotate(215deg) brightness(0.4);
    margin-left : 10px;
    float : left;
}
.target-summary-icon{
    display : inline-block;
    width: 30px;
    height: 100%;
    filter :  grayscale(100%) opacity(.6) brightness(75%);
    -webkit-filter :  grayscale(100%) opacity(.6) brightness(75%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
    margin-right: 5px;
    float: left;
}
.target-summary-icon.item-icon-fleet{
    width: 38px;
    margin-top: 2px;
}
.target-item>.item-name {
    height : 50px;
    line-height : 50px;
    width : calc(100% - 70px);
    display : inline-block;
    float : left;
    margin-left : 10px;
}

.item-icon-marlink {
    background-image : url("../img/marlink.f8a253696b96.png");
}

.item-icon-livewire {
    background-image : url("../img/livewire.9f21961a7f3c.png");
}

.item-icon-fleet {
    background-image : url("../img/yatch_fleet.60704e7f3b2e.svg");
}

.item-icon.item-icon-vessel {
    background-image : url("../img/yatch.1bcca366d7f0.svg");
}

.target-item>.item-name>.submenu-target {
    float : right
}

.targets-container.collapse.in {
    overflow: visible;
}

.customer_list_title_bar{
    border-top: 1px solid #F2F2F2;
    margin-top: 10px;
}
.customer_title, .customerTargets_title, .iOContracts_title{
    display: inline-block;
    text-align: center;
    font-weight: bolder;
    padding-top: 5px;
}
.customer_title{
    width: 35%;
}
.customerTargets_title{
    width: 200px;
}
.iOContracts_title, .iOContractsSummary{
    width:  200px;
    margin-left: 10px;
}

.iOContractsSummary{
    height: 100%;
    position: relative;
}
.submenu-target{
    /*border:1px solid red;*/
    float: right;
    display:inline-block;
    margin-right: 10px;
}
.customerInfoItem>.submenu-target{
    margin-top: 10px !important;
}
.iOContractsSummary .contractImage{
    vertical-align: 0;
    width: 28px;
}
.iOContractsTitle{
    top: 0;
}
.contractImage[data-target_items='0'],
.iOContract-item[data-target_items='0'],
.target-summary-item[data-target_items='0']{
    display: none !important;
}
.contractsUL{
    position: relative;
    margin-left: 10px;
    width: 300px;
    top: -6px;
}

.iOContract-item{
    width: 70px;
    display: inline-block
}
.iOContract-item span{
    display: block;
    text-align: center;
}
.iOContract-item.popover-summary-item[data-contracts_level="warning"], .contract_table_warning{
    color: #c9bc09;
}
.iOContract-item.popover-summary-item[data-contracts_level="danger"], .contract_table_danger{
    color: #e65e5f;
}


#current-usage-left {
    width : 25%;
    height : 100%;
    float : left;
}

#current-usage-right {
    position : relative;
    width : 75%;
    height : 100%;
    float : right;
}

#current-usage-right-top>h4 {
    width : calc(100% - 150px);
    display : inline-block;
}

#current-usage-right-bottom {
    position : absolute;
    bottom : 0;
    left : 0;
    width : calc(100% - 10px);
}

#current-usage-bar {
    display : block;
    width : 100%;
    height : 15px;
    background-color : #ececec;
    padding : 1px;
    position : relative;
}

#current-usage-bar-fill {
    position : absolute;
    left : 1px;
    top : 1px;
    display : inline-block;
    height : 13px;
    background-color : #00a65a;
    transition : width 800ms;
    padding : 0 !important;
}

#current-usage-bar-fill.alert { background-color : #f3d637 }
#current-usage-bar-fill.warning { background-color : #f38c16 }
#current-usage-bar-fill.critical { background-color : #A01313 }

#current-usage-available {
    margin-left : 5px;
    font-size : 7vh;
    line-height : 13vh;
    height : 10vh;
}

#btn-extend-plan, #btn-save-contract {
    padding : 0 2px;
    float : right;
}

#btn-extend-plan>span, #btn-save-contract>span {
    margin : 0 3px;
}

#monthly-quota-top {
    width : 100%;
    height : 100%;
}

#monthly-quota-bottom {
    width : 100%;
    height : 0;
}

#monthly-quota-top-left {
    width : auto;
    height : 100%;
    text-align : center;
    float : left;
}

#monthly-quota-top-right {
    width : calc(100% - 18vh);
    height : 100%;
    float : right;
    position : relative;
}

.monthly-calendar {
    display : inline-block;
    width : 17vh;
    height : 17vh;
    background-color : #fff;
    border : solid 1px #ececec;
    box-shadow: 0 0 5px #ececec;
}

.monthly-calendar-top {
    display : inline-block;
    width : 100%;
    height : 20px;
    margin-bottom : 5px;
    background-color : #9DC7F1;
    border-bottom : solid 1px #91bce0;
    text-align: center;
}

.monthly-calendar-top>span.hole {
    background-color : #fff;
    display : inline-block;
    height : 8px;
    width : 8px;
    border-radius: 10px;
    border : solid 1px #91bce0;
}

.monthly-calendar-top>span.hole:not(:last-of-type) {
    margin-right : 20%;
}

.monthly-calendar-bottom {
    font-size : 6vh;
    line-height : 11vh;
}

.monthly-quota-month {
    display : inline-block;
    margin-left : 2%;
    height : 0;
    float : left;
    background-color: #DCEDFF;
    cursor: pointer;
    position : absolute;
    top : 50%;
    transform: translateY(-50%);
    transition : height 800ms;
    box-shadow: 0 0 2px #f9f9f9;
}

.monthly-quota-month:not(.disabled):hover {
    background-color: #9DC7F1;
    box-shadow: 0 0 2px #ccc;
    border-color : #bbb
}

.monthly-quota-month:not(.disabled).selected {
    background-color: #278bd8;
    box-shadow: 0 0 2px #666;
}

.monthly-quota-month.disabled.selected {
    background-color: #9f9f9f;
    box-shadow: 0 0 2px #e0e0e0;
}

.monthly-quota-month.disabled {
    background-color: #ececec;
}

.monthly-quota-month-line {
    content : '';
    position : absolute;
    margin : 0;
    padding : 0;
    border-top : solid 1px #ddd;
    width : calc(100% - 9px);
    display : inline-block;
    top : 50%;
}

#monthly-quota-graph {
    width : 100%;
    height : 12vh;
    position: relative;
}

#monthly-quota-top-right-bottom {
    width : 100%;
    margin-top : 1vh;
    height : calc(10% - 13.5vh);
    text-align : center;
    line-height : 2vh;
}

#monthly-quota-top-right-bottom .bootstrap-select {
    width: 90px;
    margin-left : 5px;
    margin-top : -3px;
}

#monthly-quota-top-right-bottom .bootstrap-select .filter-option {
    text-align: center !important;
}

#monthly-quota-top-right-bottom .bootstrap-select .dropdown-toggle {
    height : auto;
}

#box_contract_settings_body {
    position : relative;
}

#box_contract_settings_body form.ctrl-form {
    margin-top : 20px;
}

#box_contract_settings_body .ctrl-form.layout-fixed .ctrl-form-field-label {
    width : 225px;
}

#box_contract_settings_body .ctrl-form-field-row {
    text-align: center;
}
.max_expand_reached{
    cursor: not-allowed;
    color: rgb(203, 203, 203) !important;
    border: none !important;
}
.max_expand_reached:hover{
    color: rgb(203, 203, 203) !important;
    background-color: white !important;
}
#base_plan_table th{
    text-align: center;
    padding: 5px 0 5px 15px;
}
#base_plan_table ul{
    list-style: none;
    padding: 5px 0 5px 15px;
    margin-bottom: 0;
}
#base_plan_table tr{
    border-bottom: 1px solid #ddd
}
#base_plan_table td{
    padding-bottom: 0;
    padding-top: 0;
}
.monthly-calendar-bottom span:first-of-type{
    position: relative;
    top: -10px;
}
.calendar_year{
    font-size: 0.4em;
    display: block;
    position: relative;
    bottom: 68px;
    margin: 0px auto;
}
#box_user_logs_body .log-entry > span.timestamp{
    width: 140px;
    color: #999;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

#contract_details #plan_info, #contract_details #contract_options{
    width: 50%;
    float: left;
}
#contract_details #contract_options .ctrl-form-field-label{
    width: 100%;
    text-align: center;
}
#contract_details #contract_options .ctrl-form-field-row > label {
    text-align: right;
}
#contract_options div[data-name='can_expand']{
    padding-top:10px;
}
#contract_details #contract_options .ctrl-form-field-row .input-group-btn > button{
    width: 30px;
}
#contract_details #contract_options .ctrl-form-field-row .input-group-btn{
    right: 0px;
    position: absolute;
    bottom: -10px;
}
 #contract_options .with-controls{
     position: absolute;
    right: 30px;
    bottom: -10px;
     width: 45px;
 }
 #unlimited_help_icon{
    margin-left: 2px;
    font-size: .95em;
    color: #296AA2;
 }

.slider {
    text-align: center;
    vertical-align: top;
}

.slider.slider-vertical {
    text-align: center;
    height: 100%;
    width: 20px;
}

.slider-handle {
	background: #337AB7;
}

.slider-track-high {
	background: #9DC7F1;
}

.modal-body{
	padding-top: 80px;
}
#new_contract_left_div{
	height: 100%;
	width: 50%;
	float: left;
}
#new_contract_right_div{
	height: 100%;
	width: 50%;
	float: right;
}
#new_contract_left_div h4, #new_contract_users_div h4{
	margin-top: 0;
	margin-bottom: 15px;
}
#left_static_info{
	padding-left: 6px;
}
#new_contract_form_div{
	width: 100%;
}
#new_contract_info_div{
	width: 40%;
	float: left;	
}
#new_contract_sims_div .simImage{
	filter: hue-rotate(0deg) brightness(10%);
	width: 25px;
}
#new_contract_sims_div .input-group-addon{
	display: none;
}
#new_contract_sims_div .multiselect-clear-filter{
	background-color: transparent;
}
#new_contract_sims_div .multiselect-native-select .btn-group{
	margin-bottom: 15px;
}
#new_contract_sims_div .multiselect-native-select .btn-group>button, .bootstrap-select>button{
	width: 100%;
	height: 24px;
	padding: 0px;
	background-color: transparent;
}
#new_contract_left_div .ctrl-form.layout-fixed .ctrl-form-field-label,
#new_contract_right_div .ctrl-form.layout-fixed .ctrl-form-field-label{
	width: 20%;
}
#new_contract_sims_div .multiselect-container{
	width: 100%;
}
#new_contract_users_div .ctrl-form-buttons-row{
	display: none;
}
#new_contract_sims_selectors{
	text-align: right;
	padding-right: 13px;
}
#new_contract_form_div .ctrl-form-buttons-row{
	position: relative;
	bottom: -35px;
	left: 50px;
}
#new_contract_set_perms_div{
    margin-left: 20px;
}
div[id^="box-add_new_contract-"] .modal-content{
	height: 370px;
}
.new_contract_left_title{
	padding-bottom: 10px;
}
.left_title_header{
	float: left;
}
.left_title_header, .users_title_header{
	width: 20%;
	text-align: right;
	margin-left: -5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.users_title_header{
	padding-left: 15px;
	margin-bottom: 10px;
	width: 70%;
	text-align: left;
}

.users_title_content{
    top: -15px;
    position: relative;
}
.users_title_content .fa-check{
	color: #228024;
}
.new_contract_confirming_sim{
	margin-left:20px;
}
.ctrl-form-btn-Create4Gcontract{
	position: absolute;
	left: 85%;
}
div[data-name='chiefengineer_email'] .ctrl-form-field-label,
div[data-name='captain_email'] .ctrl-form-field-label{
    white-space: nowrap;
}

div[data-name='chiefengineer_email'] .ctrl-form-field-label,
div[data-name='captain_email'] .ctrl-form-field-label{
    text-align: left !important;
    padding-left: 10px;
    text-overflow: ellipsis;
}

div[data-name='chiefengineer_email'] .ctrl-form-input,
div[data-name='captain_email'] .ctrl-form-input{
    position: relative;
    right: -70px;
}
div[id^='box-addnewcontract-'] .modal-dialog{
    margin-top: 80px;
}
div[id^='box-addnewcontract-'] .modal-dialog > .modal-content {
    height: 600px;
}

#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row,
#new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row,
#new_contract_form_div div[data-name='base_plan_price'].ctrl-form-field-row{
	width: 100px !important;
	position: absolute;
	top: 345px;
    right: 270px;
}
#new_contract_form_div div[data-name='promo_bundle'].ctrl-form-field-row{
    width: 200px !important;
    position: absolute;
    bottom: 150px;
    right: 270px;
}
#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row{
	right: 370px;
}
#new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row{
	right: 205px;
}
#new_contract_form_div div[data-name='base_plan_price'].ctrl-form-field-row{
	right: 30px;
}
#new_contract_form_div div[data-name='can_expand'].ctrl-form-field-row{
	position: absolute;
    bottom: 170px;
    right: -666px;
    height: 24px;
}
#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row > label,
#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row > label .input-group,
#new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row > label .input-group,
#new_contract_form_div div[data-name='base_plan_price'].ctrl-form-field-row > label .input-group,
#new_contract_form_div div[data-name='promo_bundle'].ctrl-form-field-row > label .input-group,
#new_contract_form_div div[data-name='base_plan'] label span.ctrl-form-field-label.pre-group{
	width: 100% !important;
}
#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row > label > span,
#new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row > label > span,
#new_contract_form_div div[data-name='base_plan_price'].ctrl-form-field-row > label > span{
	position: absolute;
	top: -25px;
	width: 100%;
	text-align: center;
}
#new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row > label .input-group input,
#new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row > label .input-group input,
#new_contract_form_div div[data-name='base_plan_price'].ctrl-form-field-row > label .input-group input,
#new_contract_form_div div[data-name='promo_bundle'].ctrl-form-field-row > label .input-group input{
	width: calc(100% - 35px);
}
[id^=box-addnewcontract-] .ctrl-form-field-row label span.ctrl-form-field-label.pre-group{
	position: absolute;
	top: -25px;
    width: 100% !important;
    text-align: left;
}
#new_contract_form_div div[data-name='base_plan'] label .input-group input{
	width: 75px;
}

.modal-content .modal-body {
    height: 100%;
}
#new_contract_errors_div{
    height: 70px;
    background-color: #DD4B39;
    color: white;
    padding: 10px;
    font-weight: bolder;
    font-size: 1.1em;
    margin-bottom: 5px;
    display: none;
}

#new_contract_form_div .ctrl-form-field-row .input-group-btn{
	width: 35px;
    background-color: transparent;
    cursor: auto;
}
div.ctrl-form-field-row > label:nth-child(1) > div:nth-child(2) > div:nth-child(2) > button:nth-child(1){
    width: 250px;
}
div.ctrl-form-field-row > label:nth-child(1) > div:nth-child(2) > div:nth-child(2) > button:nth-child(1){
    width: 35px;
    background-color: transparent;
    cursor: auto;
}
#new_contract_right_div .fa-cog{
    font-size: 1.2em;
}
#new_contract_sims_div, #new_contract_settings_div{
	border-top: 1px solid rgba(127,127,127,.05);
}
@media screen and (max-width: 1367px){
	div[id^="box-addnewcontract-"] .modal-dialog{
		width: 80% !important;
	}
    #new_contract_form_div div[data-name='base_plan'].ctrl-form-field-row{
	    right: 332px;
    }
    #new_contract_form_div div[data-name='base_discount'].ctrl-form-field-row{
        right: 210px;
    }
    #new_contract_form_div div[data-name='can_expand'].ctrl-form-field-row{
        right: -630px;
    }
    #new_contract_form_div div[data-name='promo_bundle'].ctrl-form-field-row{
        right: 230px;
    }
    #new_contract_form_div div[data-name='chiefengineer_email'] .ctrl-form-input,
    #new_contract_form_div div[data-name='captain_email'] .ctrl-form-input{
        position: relative;
        right: -65px;
    }
}

@media screen and (max-width: 1919px){
	div[id^="box-addnewcontract-"] .modal-dialog{
		width: 65% !important;
	}
}
div[id^='box-add_data_extension-'] .modal-dialog{
	width: 450px !important;
	height: 240px;
}
div[id^='box-add_data_extension-'] .expansion-btn{
	margin: 20px;
}
#extend_data_modal_text{
	margin-top: 10px;
}
/* ONLY IN DEV, must to fix*/
.statusLine{
	display: block;
}
div[id^='box-details_of_'] .modal-dialog > .modal-content{
	height: auto;
}
.simListProvider{
	float: left;
	width: 50%;
	margin:0;
}
.chartSimsContainer{
	height: 200px;
}
.simProvider p:first-child{
	text-align: center;
}
.simItem td.simProvider{
	width: 150px;
}
	
.simListTableBody{
	border-right: 1px solid #f4f4f4;
}
.tdStatus, .tdLimit{
	width: 90px;
}

.tdServiceProfile{
	width: 135px;
}
td.simActions{
	width: 80px;
}
.table > tbody > tr > td{
	vertical-align: middle !important;
}
div[id^='box-details_of_'] div.modal-dialog.mini-wide{
	width: 20% !important;
}

.Testeo{
	width: 300px;
	border: 1px solid black;
	float: left;
}
.main-sidebar .user-panel {
    height: 35px;
}

.user-panel .user-image {
    display: none
}

#box_sim_history_info_body .log-entry > span.timestamp{
    width: 140px;
    color: #999;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

.session {
    width: 100%;
    background-color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    float:left;
    border-bottom : solid 1px #ececec;
}

.session .data{
    float: left;
    text-align: right;
    width: 18%;
    height: 100%;
}


.session:last-of-type {
    border: none;
}

.session .icon-dev{
    float: left;
    width: 5%;
    height: 100%;
    line-height: 32px;
    font-size: 20px;
}

.session .alias{
    float: left;
    width: 30%;
    height: 100%;
    line-height: 30px;
    overflow: hidden;
}

.session .tags {
    float: left;
    width: 16%;
    height: 32px;
    line-height: 10px;
    overflow: hidden;
    display: block;
}


.session .icons{
    float: left;
    width: 5%;
    max-width : 12px;
    /*padding-right: 5px;*/
    height: 100%;
}

.session .date{
    float: left;
    text-align: left;
    width: 50%;
    height: 100%;
}

.session .data_format{
    margin-left: 2px;
    float: left;
    text-align: right;
    width: 15%;
    height: 100%;
}

.session .icon-flag{
    float: left;
    text-align: right;
    width: 10%;
    max-width : 12px;
    height: 100%;
}

.session .icon-flag .flag{
    margin-left: 10px;
}

.session .data_info{
    float: left;
    text-align: right;
    width: 25%;
    height: 100%;
}

.session .limited{
    float: left;
    text-align: center;
    width: 50%;
    height: 100%;
    overflow: hidden;
}


.session .config{
    float: left;
    text-align: right;
    width: calc(8% - 5px);
    height: 100%;
    margin-left : 10px;
    margin-top : 1px;
    line-height: 30px;
}

.session .config i.dropdown-toggle {
    padding : 6px 3px !important;
}

.session .more-info{
    float: left;
    width: 100%;
    line-height: 30px;
}

#sessions {
    position : relative;
}
.modal-header{
	background: #fff !important;
	color: #333 !important;
}
.modal-dialog{
	width: 450px !important;
	height: 240px;
}
.expansion-btn{
	margin: 16px;
}
#extend_data_modal_text{
	margin-top: 10px;
}
.extension-btn{
	margin: 10px;
}
div[id^='box-addnew-'] .modal-dialog.mini-wide{
    width: 25% !important;
    height: 20% !important;
}


.contact-option {
    height: calc(25% - 2px);
    border: solid 1px #ececec;
    padding: 10px 20px;
    width: 100%;
    margin-bottom: 5px;
    position : relative;
}

.contact-option>span {
    display: inline-block;
    float: left;
    vertical-align: center;
    text-align: center;
}

.contact-option>span.contact-icon {
    width : 10%;
    font-size : 4vh;
    vertical-align: top;
    color: #f00;
    filter: hue-rotate(190deg);
    -webkit-filter: hue-rotate(190deg);
}

.contact-option>span.container {
    width : 90%;
    height : 100%;
}

.contact-option>span.container>span{
    width : 100%;
    height : 50%;
    line-height: 50%;
    display: inline-block;
}

.contact-option>span.container>span.contact-label {
    font-weight: 700;
}

.contact-option>span.container>span.contact-data>b {
    margin : 0 5px;
}
/***************************************************************************/
/****************************** Usage summary ******************************/
.sim-summary-1-wrapper {
    position : relative;
    width : 50%;
    height : 100%;
    float : left;
}
.sim-summary-2-wrapper {
    position : relative;
    width : 50%;
    height : 100%;
    float : right;
}

.provider-summary-1-wrapper {
    position : relative;
    width : 40%;
    height : 100%;
    float : left;
}
.provider-summary-2-wrapper {
    position : relative;
    width : 30%;
    height : 100%;
    float : left;
}

.provider-summary-3-wrapper {
    position : relative;
    width : 30%;
    height : 100%;
    float : right;
}

.provider-info-title {
    display: block;
}

.provider-info-label {
    display: block;
    font-weight: bold;
    font-size: medium;
}

.provider-usage-chart-wrapper {
    position : relative;
    width : 100%;
    height : 100%;
    float : right;
}


/**************************************************************************/
/********************************* Report *********************************/
.dropzone {
    position : relative;
    width : 100%;
    height : 100px;
    float : right;
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 40px;
    text-align: center;
    font: 14pt bold;
    color: #bbb;
}
.droplist {
    position : relative;
    width : 100%;
    height : 20px;
    float : right;
    margin-bottom: 10px;
}

/*********************************** Table *********************************/
.vf_m2m-table-error {
    display: block;
    color: red;
    padding: 4px;
}
.vf_m2m-table {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
/* Zebra striping */
.vf_m2m-tr:nth-of-type(odd) {
    background: #eee;
}
.vf_m2m-th {
    background: #3c8dbc;
    color: white;
    font-weight: bold;
    cursor: s-resize;
    background-repeat: no-repeat;
    background-position: 3% center;
}
.vf_m2m-th-error {
    background: #ff0000;
    color: white;
    font-weight: bold;
    cursor: s-resize;
    background-repeat: no-repeat;
    background-position: 3% center;
}
.vf_m2m-td, .vf_m2m-th, .vf_m2m-th-error {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

.vf_m2m-th.des:after, .vf_m2m-th-error.des:after  {
  content: "\21E9";
}

.vf_m2m-th.aes:after, .vf_m2m-th-error.aes:after  {
  content: "\21E7";
}

.vf_m2m-total-processed {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: x-large;
}


/*!
 * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/)
 */.flag{display:inline-block;width:32px;height:32px;background:url("common/flags.45ef8c91ce61.png") no-repeat}.flag.flag-mm{background-position:-384px -256px}.flag.flag-bf{background-position:-128px -32px}.flag.flag-ve{background-position:-128px -448px}.flag.flag-ee{background-position:-352px -96px}.flag.flag-jp{background-position:-384px -192px}.flag.flag-bl{background-position:-288px -32px}.flag.flag-mq{background-position:0 -288px}.flag.flag-tm{background-position:-160px -416px}.flag.flag-sm{background-position:-128px -384px}.flag.flag-be{background-position:-96px -32px}.flag.flag-lr{background-position:-416px -224px}.flag.flag-hr{background-position:-384px -160px}.flag.flag-et{background-position:0 -128px}.flag.flag-dm{background-position:-224px -96px}.flag.flag-bg{background-position:-160px -32px}.flag.flag-cg{background-position:-192px -64px}.flag.flag-ne{background-position:-384px -288px}.flag.flag-by{background-position:-32px -64px}.flag.flag-mt{background-position:-96px -288px}.flag.flag-mu{background-position:-128px -288px}.flag.flag-tw{background-position:-352px -416px}.flag.flag-gs{background-position:-160px -160px}.flag.flag-ec{background-position:-320px -96px}.flag.flag-gu{background-position:-224px -160px}.flag.flag-gq{background-position:-96px -160px}.flag.flag-fo{background-position:-192px -128px}.flag.flag-mf{background-position:-224px -256px}.flag.flag-cv{background-position:0 -96px}.flag.flag-cn{background-position:-384px -64px}.flag.flag-kh{background-position:-480px -192px}.flag.flag-cu{background-position:-480px -64px}.flag.flag-es{background-position:-480px -96px}.flag.flag-hn{background-position:-352px -160px}.flag.flag-mw{background-position:-192px -288px}.flag.flag-tn{background-position:-192px -416px}.flag.flag-vi{background-position:-192px -448px}.flag.flag-ki{background-position:0 -224px}.flag.flag-sr{background-position:-224px -384px}.flag.flag-om{background-position:-192px -320px}.flag.flag-hu{background-position:-448px -160px}.flag.flag-zm{background-position:-448px -448px}.flag.flag-sk{background-position:-64px -384px}.flag.flag-sd{background-position:-416px -352px}.flag.flag-sh{background-position:0 -384px}.flag.flag-eh{background-position:-416px -96px}.flag.flag-fr{background-position:-224px -128px}.flag.flag-mn{background-position:-416px -256px}.flag.flag-nr{background-position:-96px -320px}.flag.flag-mk{background-position:-320px -256px}.flag.flag-vg{background-position:-160px -448px}.flag.flag-ad{background-position:0 0}.flag.flag-ir{background-position:-192px -192px}.flag.flag-tk{background-position:-96px -416px}.flag.flag-za{background-position:-416px -448px}.flag.flag-cm{background-position:-352px -64px}.flag.flag-nl{background-position:0 -320px}.flag.flag-se{background-position:-448px -352px}.flag.flag-mo{background-position:-448px -256px}.flag.flag-ai{background-position:-128px 0}.flag.flag-pa{background-position:-224px -320px}.flag.flag-so{background-position:-192px -384px}.flag.flag-tg{background-position:0 -416px}.flag.flag-ro{background-position:-192px -352px}.flag.flag-gd{background-position:-320px -128px}.flag.flag-dj{background-position:-160px -96px}.flag.flag-tz{background-position:-384px -416px}.flag.flag-na{background-position:-320px -288px}.flag.flag-fj{background-position:-96px -128px}.flag.flag-sc{background-position:-384px -352px}.flag.flag-gg{background-position:-384px -128px}.flag.flag-an{background-position:-224px 0}.flag.flag-kr{background-position:-128px -224px}.flag.flag-iq{background-position:-160px -192px}.flag.flag-cf{background-position:-160px -64px}.flag.flag-sl{background-position:-96px -384px}.flag.flag-ws{background-position:-320px -448px}.flag.flag-ge{background-position:-352px -128px}.flag.flag-aw{background-position:-416px 0}.flag.flag-ps{background-position:0 -352px}.flag.flag-ck{background-position:-288px -64px}.flag.flag-ht{background-position:-416px -160px}.flag.flag-km{background-position:-32px -224px}.flag.flag-ss{background-position:-256px -384px}.flag.flag-az{background-position:-480px 0}.flag.flag-bz{background-position:-64px -64px}.flag.flag-la{background-position:-256px -224px}.flag.flag-sg{background-position:-480px -352px}.flag.flag-py{background-position:-96px -352px}.flag.flag-gi{background-position:-448px -128px}.flag.flag-mc{background-position:-128px -256px}.flag.flag-kz{background-position:-224px -224px}.flag.flag-lt{background-position:-480px -224px}.flag.flag-va{background-position:-64px -448px}.flag.flag-ms{background-position:-64px -288px}.flag.flag-sz{background-position:-384px -384px}.flag.flag-tj{background-position:-64px -416px}.flag.flag-kg{background-position:-448px -192px}.flag.flag-tv{background-position:-320px -416px}.flag.flag-rs{background-position:-224px -352px}.flag.flag-je{background-position:-288px -192px}.flag.flag-as{background-position:-320px 0}.flag.flag-ma{background-position:-96px -256px}.flag.flag-im{background-position:-96px -192px}.flag.flag-mz{background-position:-288px -288px}.flag.flag-bo{background-position:-384px -32px}.flag.flag-st{background-position:-288px -384px}.flag.flag-td{background-position:-448px -384px}.flag.flag-bi{background-position:-224px -32px}.flag.flag-uz{background-position:-32px -448px}.flag.flag-sy{background-position:-352px -384px}.flag.flag-md{background-position:-160px -256px}.flag.flag-af{background-position:-64px 0}.flag.flag-bs{background-position:-448px -32px}.flag.flag-rw{background-position:-288px -352px}.flag.flag-cd{background-position:-128px -64px}.flag.flag-zw{background-position:-480px -448px}.flag.flag-ml{background-position:-352px -256px}.flag.flag-cy{background-position:-64px -96px}.flag.flag-cz{background-position:-96px -96px}.flag.flag-mg{background-position:-256px -256px}.flag.flag-ls{background-position:-448px -224px}.flag.flag-ke{background-position:-416px -192px}.flag.flag-pt{background-position:-32px -352px}.flag.flag-mh{background-position:-288px -256px}.flag.flag-nz{background-position:-160px -320px}.flag.flag-pl{background-position:-416px -320px}.flag.flag-pw{background-position:-64px -352px}.flag.flag-sa{background-position:-320px -352px}.flag.flag-vu{background-position:-256px -448px}.flag.flag-mx{background-position:-224px -288px}.flag.flag-co{background-position:-416px -64px}.flag.flag-ky{background-position:-192px -224px}.flag.flag-pe{background-position:-256px -320px}.flag.flag-uy{background-position:0 -448px}.flag.flag-bw{background-position:0 -64px}.flag.flag-id{background-position:0 -192px}.flag.flag-fk{background-position:-128px -128px}.flag.flag-np{background-position:-64px -320px}.flag.flag-is{background-position:-224px -192px}.flag.flag-tt{background-position:-288px -416px}.flag.flag-gm{background-position:0 -160px}.flag.flag-ci{background-position:-256px -64px}.flag.flag-br{background-position:-416px -32px}.flag.flag-lu{background-position:0 -256px}.flag.flag-mv{background-position:-160px -288px}.flag.flag-no{background-position:-32px -320px}.flag.flag-ye{background-position:-352px -448px}.flag.flag-me{background-position:-192px -256px}.flag.flag-lb{background-position:-288px -224px}.flag.flag-my{background-position:-256px -288px}.flag.flag-at{background-position:-352px 0}.flag.flag-gr{background-position:-128px -160px}.flag.flag-li{background-position:-352px -224px}.flag.flag-dk{background-position:-192px -96px}.flag.flag-gt{background-position:-192px -160px}.flag.flag-it{background-position:-256px -192px}.flag.flag-dz{background-position:-288px -96px}.flag.flag-ly{background-position:-64px -256px}.flag.flag-ca{background-position:-96px -64px}.flag.flag-bm{background-position:-320px -32px}.flag.flag-ga{background-position:-256px -128px}.flag.flag-lk{background-position:-384px -224px}.flag.flag-il{background-position:-64px -192px}.flag.flag-kn{background-position:-64px -224px}.flag.flag-pk{background-position:-384px -320px}.flag.flag-nc{background-position:-352px -288px}.flag.flag-qa{background-position:-128px -352px}.flag.flag-gn{background-position:-32px -160px}.flag.flag-yt{background-position:-384px -448px}.flag.flag-ar{background-position:-288px 0}.flag.flag-gw{background-position:-256px -160px}.flag.flag-vn{background-position:-224px -448px}.flag.flag-pg{background-position:-320px -320px}.flag.flag-fm{background-position:-160px -128px}.flag.flag-bh{background-position:-192px -32px}.flag.flag-jo{background-position:-352px -192px}.flag.flag-de{background-position:-128px -96px}.flag.flag-ao{background-position:-256px 0}.flag.flag-tr{background-position:-256px -416px}.flag.flag-tc{background-position:-416px -384px}.flag.flag-ba{background-position:0 -32px}.flag.flag-ic{background-position:-480px -160px}.flag.flag-vc{background-position:-96px -448px}.flag.flag-gy{background-position:-288px -160px}.flag.flag-ag{background-position:-96px 0}.flag.flag-wf{background-position:-288px -448px}.flag.flag-in{background-position:-128px -192px}.flag.flag-ua{background-position:-416px -416px}.flag.flag-cr{background-position:-448px -64px}.flag.flag-nf{background-position:-416px -288px}.flag.flag-mr{background-position:-32px -288px}.flag.flag-sn{background-position:-160px -384px}.flag.flag-lv{background-position:-32px -256px}.flag.flag-gb{background-position:-288px -128px}.flag.flag-bj{background-position:-256px -32px}.flag.flag-ie{background-position:-32px -192px}.flag.flag-us{background-position:-480px -416px}.flag.flag-er{background-position:-448px -96px}.flag.flag-re{background-position:-160px -352px}.flag.flag-gp{background-position:-64px -160px}.flag.flag-ax{background-position:-448px 0}.flag.flag-do{background-position:-256px -96px}.flag.flag-tf{background-position:-480px -384px}.flag.flag-ph{background-position:-352px -320px}.flag.flag-gl{background-position:-480px -128px}.flag.flag-ru{background-position:-256px -352px}.flag.flag-ni{background-position:-480px -288px}.flag.flag-ch{background-position:-224px -64px}.flag.flag-pr{background-position:-480px -320px}.flag.flag-fi{background-position:-64px -128px}.flag.flag-nu{background-position:-128px -320px}.flag.flag-kw{background-position:-160px -224px}.flag.flag-am{background-position:-192px 0}.flag.flag-ug{background-position:-448px -416px}.flag.flag-tl{background-position:-128px -416px}.flag.flag-au{background-position:-384px 0}.flag.flag-pn{background-position:-448px -320px}.flag.flag-kp{background-position:-96px -224px}.flag.flag-al{background-position:-160px 0}.flag.flag-pf{background-position:-288px -320px}.flag.flag-ng{background-position:-448px -288px}.flag.flag-gh{background-position:-416px -128px}.flag.flag-bb{background-position:-32px -32px}.flag.flag-bn{background-position:-352px -32px}.flag.flag-eg{background-position:-384px -96px}.flag.flag-bt{background-position:-480px -32px}.flag.flag-si{background-position:-32px -384px}.flag.flag-jm{background-position:-320px -192px}.flag.flag-cw{background-position:-32px -96px}.flag.flag-to{background-position:-224px -416px}.flag.flag-mp{background-position:-480px -256px}.flag.flag-hk{background-position:-320px -160px}.flag.flag-th{background-position:-32px -416px}.flag.flag-lc{background-position:-320px -224px}.flag.flag-cl{background-position:-320px -64px}.flag.flag-ae{background-position:-32px 0}.flag.flag-bd{background-position:-64px -32px}.flag.flag-sb{background-position:-352px -352px}.flag.flag-sv{background-position:-320px -384px}.flag.flag-eu{background-position:-32px -128px}
.tooltipster-fall,.tooltipster-grow.tooltipster-show{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-base{display:flex;pointer-events:none;position:absolute}.tooltipster-box{flex:1 1 auto}.tooltipster-content{box-sizing:border-box;max-height:100%;max-width:100%;overflow:auto}.tooltipster-ruler{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;visibility:hidden}.tooltipster-fade{opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;-ms-transition-property:opacity;transition-property:opacity}.tooltipster-fade.tooltipster-show{opacity:1}.tooltipster-grow{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-backface-visibility:hidden}.tooltipster-grow.tooltipster-show{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-swing{opacity:0;-webkit-transform:rotateZ(4deg);-moz-transform:rotateZ(4deg);-o-transform:rotateZ(4deg);-ms-transform:rotateZ(4deg);transform:rotateZ(4deg);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform}.tooltipster-swing.tooltipster-show{opacity:1;-webkit-transform:rotateZ(0);-moz-transform:rotateZ(0);-o-transform:rotateZ(0);-ms-transform:rotateZ(0);transform:rotateZ(0);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,1);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-moz-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-ms-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-o-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);transition-timing-function:cubic-bezier(.23,.635,.495,2.4)}.tooltipster-fall{-webkit-transition-property:top;-moz-transition-property:top;-o-transition-property:top;-ms-transition-property:top;transition-property:top;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-fall.tooltipster-initial{top:0!important}.tooltipster-fall.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;top:0!important;opacity:0}.tooltipster-slide{-webkit-transition-property:left;-moz-transition-property:left;-o-transition-property:left;-ms-transition-property:left;transition-property:left;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-slide.tooltipster-initial{left:-40px!important}.tooltipster-slide.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;left:0!important;opacity:0}@keyframes tooltipster-fading{0%{opacity:0}100%{opacity:1}}.tooltipster-update-fade{animation:tooltipster-fading .4s}@keyframes tooltipster-rotating{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}.tooltipster-update-rotate{animation:tooltipster-rotating .6s}@keyframes tooltipster-scaling{50%{transform:scale(1.1)}100%{transform:scale(1)}}.tooltipster-update-scale{animation:tooltipster-scaling .6s}
.tooltipster-fall,.tooltipster-grow.tooltipster-show{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-base{display:flex;pointer-events:none;position:absolute}.tooltipster-box{flex:1 1 auto}.tooltipster-content{box-sizing:border-box;max-height:100%;max-width:100%;overflow:auto}.tooltipster-ruler{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;visibility:hidden}.tooltipster-fade{opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;-ms-transition-property:opacity;transition-property:opacity}.tooltipster-fade.tooltipster-show{opacity:1}.tooltipster-grow{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-backface-visibility:hidden}.tooltipster-grow.tooltipster-show{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-swing{opacity:0;-webkit-transform:rotateZ(4deg);-moz-transform:rotateZ(4deg);-o-transform:rotateZ(4deg);-ms-transform:rotateZ(4deg);transform:rotateZ(4deg);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform}.tooltipster-swing.tooltipster-show{opacity:1;-webkit-transform:rotateZ(0);-moz-transform:rotateZ(0);-o-transform:rotateZ(0);-ms-transform:rotateZ(0);transform:rotateZ(0);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,1);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-moz-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-ms-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-o-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);transition-timing-function:cubic-bezier(.23,.635,.495,2.4)}.tooltipster-fall{-webkit-transition-property:top;-moz-transition-property:top;-o-transition-property:top;-ms-transition-property:top;transition-property:top;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-fall.tooltipster-initial{top:0!important}.tooltipster-fall.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;top:0!important;opacity:0}.tooltipster-slide{-webkit-transition-property:left;-moz-transition-property:left;-o-transition-property:left;-ms-transition-property:left;transition-property:left;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-slide.tooltipster-initial{left:-40px!important}.tooltipster-slide.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;left:0!important;opacity:0}@keyframes tooltipster-fading{0%{opacity:0}100%{opacity:1}}.tooltipster-update-fade{animation:tooltipster-fading .4s}@keyframes tooltipster-rotating{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}.tooltipster-update-rotate{animation:tooltipster-rotating .6s}@keyframes tooltipster-scaling{50%{transform:scale(1.1)}100%{transform:scale(1)}}.tooltipster-update-scale{animation:tooltipster-scaling .6s}.tooltipster-sidetip .tooltipster-box{background:#565656;border:2px solid #000;border-radius:4px}.tooltipster-sidetip.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip .tooltipster-content{color:#fff;line-height:18px;padding:6px 14px}.tooltipster-sidetip .tooltipster-arrow{overflow:hidden;position:absolute}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow{height:10px;margin-left:-10px;top:0;width:20px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow{height:20px;margin-top:-10px;right:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow{height:20px;margin-top:-10px;left:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow{bottom:0;height:10px;margin-left:-10px;width:20px}.tooltipster-sidetip .tooltipster-arrow-background,.tooltipster-sidetip .tooltipster-arrow-border{height:0;position:absolute;width:0}.tooltipster-sidetip .tooltipster-arrow-background{border:10px solid transparent}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:#565656;left:0;top:3px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{border-left-color:#565656;left:-3px;top:0}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{border-right-color:#565656;left:3px;top:0}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{border-top-color:#565656;left:0;top:-3px}.tooltipster-sidetip .tooltipster-arrow-border{border:10px solid transparent;left:0;top:0}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#000}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border{border-left-color:#000}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color:#000}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{border-top-color:#000}.tooltipster-sidetip .tooltipster-arrow-uncropped{position:relative}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped{top:-10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped{left:-10px}
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box{border:none;border-radius:5px;background:#fff;box-shadow:0 0 10px 6px rgba(0,0,0,.1)}.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom .tooltipster-box{margin-top:6px}.tooltipster-sidetip.tooltipster-shadow.tooltipster-left .tooltipster-box{margin-right:6px}.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-box{margin-left:6px}.tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-box{margin-bottom:6px}.tooltipster-sidetip.tooltipster-shadow .tooltipster-content{color:#8d8d8d}.tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow{height:6px;margin-left:-6px;width:12px}.tooltipster-sidetip.tooltipster-shadow.tooltipster-left .tooltipster-arrow,.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow{height:12px;margin-left:0;margin-top:-6px;width:6px}.tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-background{display:none}.tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-border{border:6px solid transparent}.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#fff}.tooltipster-sidetip.tooltipster-shadow.tooltipster-left .tooltipster-arrow-border{border-left-color:#fff}.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-border{border-right-color:#fff}.tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-arrow-border{border-top-color:#fff}.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom .tooltipster-arrow-uncropped{top:-6px}.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-uncropped{left:-6px}
#io-user-profile-form div[data-name="username"] input{
    border: none;
}
#box_user_profile_modal_footer{
    background-color: white;
}

@keyframes highlight-and-back {
	0% { color : #00a65a }
    100% { color : #ccc }
}
/* Contract name, LED and ID */
.admin-report-item>div.row-header>span.report-image-wrapper {
    width : 100px;
    margin-top : -10px;
    height : 80px;
    padding-top: 5px;
    margin-bottom: 5px;
}

/* Report image */
#reportListBody img.report-image{
    max-height: 100%;
    border: 1px solid grey;
    margin: 5px;
}
#reportListBody .report-actions{
    position: absolute;
    left: 17px;
    bottom: -7px;
    font-size: 10px;
    color: #888;
}
#reportListBody .report-actions .refresh_report,
#reportListBody .report-actions .delete_report{
    width: 20px;
}
#reportListBody .report-downloads-wrapper,
#reportListBody .report-state-wrapper{
    width: 200px;
    height: 100%;
    padding: 0px 5px 0px 5px
}
#reportListBody .report-state-title{
    width: 100%;
    display: block;
    text-align: center;
    margin-top: -10px;
    height: 25%;
    margin-bottom: 5px;
    font-weight: bolder;
    color: #888;
}
#reportListBody .report-state-content{
    width: 100%;
    display: block;
    height: 75%;
}
#reportListBody .report-state-content .subcontent{
    height: 33%;
    width: 100%;
    display: block;
}
#reportListBody .report-state-wrapper .report-state-content{
    margin-top: 20px;
}
#reportListBody .report-state-info_title{
    font-size: 12px;
}
#reportListBody .report-state-info_title,
#reportListBody .report-state-info_value{
    width: 50%;
    float: left;
    height: 15px;
}
.report-state-down_formats .report-state-info_value{
    height: 25px !important;
    margin-top: 5px;
}

#reportListBody .report-state-info_value{
    text-align: right;
}
#reportListBody .report-downloads-title{
    height: 60%;
    width: 100%;
    display: block;
    text-align: center;
}
#reportListBody .report-downloads-options{
    text-align: right;
    float: right;
}
#reportListBody .report-downloads-options .fa-file-pdf-o{
    color: #F15642;
}
#reportListBody .report-downloads-options .fa-file-excel-o{
    color: #217346;
}
#reportListBody .report-downloads-options .fa-file-excel-o,
#reportListBody .report-downloads-options .fa-file-pdf-o{
    font-size: 20px;
    width: 25px;
}
#reportListBody .report-downloads-title{
    height: 40%;
}
#reportListBody .report-downloads-options a{
    width: 25px;
    height: 100%;
    font-size: 20px;
    color: #666;
}
#reportListBody .report-rightSide{
    float: right;
}
#reportListBody .report-owner-wrapper{
    max-width: 800px;
    margin-left: 20px;
    height: 100%;
}
#reportListBody .report-owner-wrapper .report-owner{
    margin-top: -8px;
}
#reportListBody .report-owner-wrapper .report-owner,
#reportListBody .report-owner-wrapper .report-name{
    display: block;
    height: 50%;
    width: 100%;
}
#reportListBody .report-owner-wrapper .report-owner{
    color: #888;
    font-weight: bold;
}
#reportListBody .report-owner-wrapper .report-name{
    font-size: 16px;
}
#reportListBody .report-image-wrapper img{
    max-width: 100%;
    max-height: 100%;
}
#reportListBody .report-image-wrapper{
    text-align: center;
}
#box_reports_container_header_ctrls>div, #box_reports_container_header_ctrls>span {
    margin-left: 5px;
}

.admin-report-item {
    width: 100%;
    border: solid 1px #ececec;
    display: inline-block;
    padding: 10px;
    background-color: #fff;
    position : relative;
    margin-bottom : 5px;
    cursor: pointer;
}

.admin-report-item:hover {
    background-color : #f9f9f9;
}

.admin-report-item>div.row-header {
    height:65px;
}

.admin-report-item>div.row-header>span.btn-link {
    position : absolute;
    top : -5px;
    right : -5px;
}

.admin-report-item>div.row-header>span.btn-link>.fa-times {
    opacity : 0;
    padding : 0;
}

.admin-report-item>div.row-header>span.triangle.top-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #fff transparent transparent;
    position : absolute;
    top : 0;
    right : 0;
    opacity: 0;
}

.admin-report-item:not(.lost-contact, .never-contacted):hover {
    background-color: #ececec;
}

.admin-report-item>div.row-header>span.status-mark {
    display: block;
    position: absolute;
    left : -5px;
    top : 0;
    height : 100%;
    width : 5px;
}

.admin-report-item>div.row-header>input.report_item_checkbox {
    display: block;
    position: absolute;
    left : 10px;
    top : 0;
    height : 42px;
    width : 15px;
}

.admin-report-item span.status-mark {
    background-color: #BCC4C4;
}
.admin-report-item[data-state='0'] span.status-mark {
    background-color: #BCC4C4;
}
.admin-report-item[data-state='1'] span.status-mark {
    background-color: #99f594;
}
.admin-report-item[data-state='2'] span.status-mark {
    background-color: #00A560;
}
.admin-report-item[data-state='3'] span.status-mark {
    background-color: #A01313;
}
.admin-report-item[data-state='4'] span.status-mark {
    background-color: #FFA90B;
}
.admin-report-item[data-state='9'] span.status-mark {
    background-color: #535657;
}

.admin-report-item>div.row-header>span.report-name-wrapper>span.report-details {
    display : block;
    width : 98%;
    height : 10px;
    line-height: 10px;
    color : #666;
    font-size : 12px;
}

.admin-report-item>div.row-header>span.report-name-wrapper>span.report-details>span.fa {
    font-size : 10px;
    margin-right : 5px;
    line-height: 10px;
    color: #ccc;
}

.admin-report-item>div.row-header>span.report-name-wrapper>span.report-details>span.fa.active {
    animation : highlight-and-back 800ms;
}


/* Contract data plan */
.admin-report-item>div.row-header>span.report-plan-wrapper {
    width : 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*margin-top : -8px;*/
    /*margin-left: -30px;*/
    /*height : 42px;*/
}

.admin-report-item>div.row-header>span.report-plan-wrapper>span.report-base {
    display : block;
    width : 100%;
    height : 18px;
    font-size : 12px;
    line-height: 15px;
}

.admin-report-item>div.row-header>span.report-plan-wrapper>span.report-extension {
    display : block;
    width : 100%;
    height : 18px;
    font-size : 12px;
    line-height: 15px;
}

.admin-report-item>div.row-header>span.report-plan-wrapper>span.report-adjustment {
    display : block;
    width : 100%;
    height : 10px;
    font-size : 10px;
    line-height: 12px;
}

.admin-report-item>div.row-header>span.report-pie-usage {
    float : left;
    width : 30px;
    height : 30px;
    text-align: center;
    overflow: hidden;
    transform: rotate(-90deg);
}

.admin-report-item>div.row-header>span.report-pie-usage>span {
    width: 28px;
    height: 28px;
    border-radius: 0;
    display: inline-block;
    padding : 1px;
}

.controller-item>div.row-header>span.report-usage {
    width : 30px;
    text-align: center;
}


.admin-report-item>div.row-header>span {
    margin-left : 5px;
    margin-right : 5px;
    display : inline-block;
    line-height: 30px;
    float : left;
}



/* Contract SIMs */
.provider-icon{
    margin-left: 5px;
    height: 14px;
    width: 14px;
}
.report-provider-units {
    margin-left: 6px;
}
/* End of Contract SIMs */


.admin-report-item>div.row-header>span.report-alert {
    color : #A01313;
    height : 30px;
    float : right;
    width : 100px;
    text-align: center;
}

.admin-report-item>div.row-header.pending-target-state>span.report-alert {
    color : #f38c16;
}

.admin-report-item>div.row-header>span.report-alert>span {
    line-height : 15px;
    display : block;
}

.admin-report-item>div.row-header>span.report-alert>span.alert-text {
    padding-top : 3px;filter: hue-rotate(215deg) brightness(0.4);
}

.admin-report-item>div.row-header>span.go-to-report {
    float : right
}

.admin-report-item .detail-area{
    /*background-color : #fff;*/
    height: 0;
    overflow: hidden;
    display : block;
    transition : height 200ms;
    -webkit-transition : height 200ms;
    width : calc(100% - 10px);
    margin-left : 5px;
    cursor: default;
}

.admin-report-item.expanded>.detail-area {
    height: 400px;
    margin-top : 10px;
    /*border : solid 1px #ececec;*/
    /*padding : 5px;*/
    position : relative;
    /*padding-left : 17px;*/
}

.admin-report-item.expanded>.detail-area .title-area {
    position: absolute;
    top: 0;
    left: 0;
    height : 400px;
    width : 12px;
    padding : 0 3px;
    background-color: #fefefe;
    border-right : solid 1px #ececec;
    text-align: center;
    color : #999;
    font-size : 12px;
    font-weight: bold;
}

.admin-report-item:not(.expanded)>.detail-area>* {
    visibility: hidden;
}

.admin-report-item.expanded>.detail-area .title-area>span {
    transform: rotate(-90deg) translateX(-50%) translateY(-21px);
    display: inline-block;
    transform-origin: 42% 45%;
    width: 50px;
    height: 10px;
    font-size: 10px;
    text-align: right;
}

.admin-report-item.expanded>.detail-area>.details-row {
    height : 192px;
    margin-bottom : 5px;
}

.admin-report-item.expanded>.detail-area .group-wrapper {
    height: 192px;
    border : solid 1px #ececec;
    float : left;
}

.admin-report-item.expanded>.detail-area .report-details-wrapper {
    background-color : #fff;
    width : 40%;
}

.admin-report-item.expanded>.detail-area .report-usage-wrapper {
    background-color : #fff;
    margin-left: 5px;
    width : 25%;
}

.details-span{
    display: block;
    margin-left: 10px;
    font-size: 14px;
    text-align: left;
}


/* Available extensions */
.extension-entry {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.extension-entry>.data {
    width: 50px;
    font-weight: bold;
}

.extension-entry>.price {
    float: right;
    width: 20%;
    text-align: right;
    color: #999;
    margin-left: 10px;
}

.extension-entry>.discount {
    float: right;
    width: 25%;
    text-align: right;
    color: #999;
    margin-left: 5px;
    margin-right: 5px;
}
.extension-entry>.sale-price {
    float: right;
    text-align: right;
    width: 130px;
}

/*.admin-report-item.expanded>.detail-area .report-discount-wrapper {*/
    /*width : calc(10% - 5px);*/
    /*margin-left : 5px;*/
/*}*/

/*.discount-sum {*/
    /*display: inline-block;*/
    /*width: 30%;*/
    /*font-weight: bold;*/
    /*height: 10px;*/
    /*font-size: 20px;*/
    /*text-align: center;*/
    /*color: #377DB5;*/
/*}*/

/*.discount-sub {*/
    /*display: inline-block;*/
    /*width: 30%;*/
    /*font-weight: bold;*/
    /*height: 10px;*/
    /*font-size: 20px;*/
    /*text-align: center;*/
    /*color: #377DB5;*/
/*}*/

/*.discount-value {*/
    /*display: inline-block;*/
    /*width: 40%;*/
    /*height: 10px;*/
    /*font-size: 18px;*/
    /*text-align: center;*/
/*}*/

.admin-report-item.expanded>.detail-area .extensions-wrapper {
    background-color : #fff;
    width : 40%;
    padding : 3px 0;
    position: relative;
}

.admin-report-item.expanded>.detail-area .group-wrapper>div.loader-wrapper {
    width : 100%;
    height : 100%;
    padding-top : 75px;
    text-align: center;
}


.admin-report-item.expanded>.detail-area .chart-area-right-wrapper {
    background-color : #fff;
    height : 188px;
    float : left;
    position : relative;
}

.admin-report-item.expanded>.detail-area .area-title {
    text-align: left;
    margin-left: 5px;
    color : #999;
    font-weight: 400;
    text-transform: capitalize;
    width : 85%;
}

.admin-report-item.expanded>.detail-area .chart-area-legend {
    width : 100%;
    height : 100px;
    position : absolute;
    left : 0;
    bottom : 5px;
    padding : 5px;
    padding-left : 30px;
}

.admin-report-item.expanded>.detail-area .chart-area-right-wrapper {
    width : 150px;
}

.admin-report-item.expanded>.detail-area .timeline-wrapper {
    background-color : #fff;
    width : calc(35% - 10px);
    padding : 3px 0;
    margin-left : 5px;
    position: relative;
}

#timeline-report-wrapper .log-entry > span.timestamp{
    width: 70px;
    color: #999;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

/* Usage chart */
.admin-report-item.expanded>.detail-area .usage-chart-wrapper {
    background-color : #fff;
    width : calc(60% - 5px);
    padding : 3px 0;
    margin-left : 5px;
    position: relative;
}
/* End of Usage chart */


.icon.critical {
    color: #ff0000;
}

.icon.success {
    color: #00a157;
}

/**********************************************************************************************************************/
/*********************************************************** MODALS ***************************************************/
/**********************************************************************************************************************/
.panel.panel-light > .panel-heading {
    background-color: #fbfbfb;
    color: #666;
    border: solid 1px #ececec;
}

/************************************************* CUSTOMIZE EXTENSIONS MODAL *****************************************/
.extension_label{
    margin-left: 25px;
}

.volume_wrapper {
    display: inline-block;
    width: 18%;
}

.extension_volume{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 15px;
    padding: 5px 5px 5px 5px;
    width: 50px;
}

.price_wrapper {
    display: inline-block;
    width: 14%;
}

.extension_original_price{
    text-align: center;
}

.discount_wrapper {
    display: inline-block;
    width: 24%;
}

.extension_discount{
    width : 50px;
    height : 28px;
    line-height: 28px;
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
}

.sale_price_wrapper {
    display: inline-block;
    left: 1%;
    top: 45px;
    width: 33%;
    height: auto;
}
.extension_sale_price{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 75px;
}

/**************************************************** MANAGE SIMS MODAL ***********************************************/
.icon_wrapper {
    display: inline-block;
    width: 4%;
}

.iccid_wrapper {
    display: inline-block;
    width: 22%;
}

.iccid{
    text-align: center;
    height : 28px;
    line-height: 28px;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.line_number_wrapper {
    display: inline-block;
    width: 15%;
}

.line_number{
    text-align: center;
    display: block;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.puk_wrapper {
    display: inline-block;
    width: 15%;
}

.puk{
    text-align: center;
    display: block;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.line_number_edit{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 90%;
}

.puk_edit{
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    width: 90%;
}

.target_wrapper {
    display: inline-block;
    width: 29%;
}

.target {
    text-align: center;
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.confirm_btn_wrapper{
    float: right;
    display: inline-block;
    width: 10%;
}

.confirm_btn{
    text-align: center;
    display: block;
    width: 90%;
    margin: 5px 5px 5px 5px;
}

.delete_icon_wrapper{
    float: right;
    display: inline-block;
    width: 5%;
}

.delete_icon{
    margin-top: 5px;
    margin-left: 5px;
    height: 14px;
    width: 14px;
}


/*************************************************** EDIT DETAILS MODAL ***********************************************/
.detail {
    display: block;
    width: 100%;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    border: solid 1px #ececec;
    background-color: #fbfbfb;
    resize: none;
    margin-bottom: 15px;
}
.details_container {
    display: block;
}

.ending_date_wrapper {
    display: block;
}
.ending_date {

}
.base_discount_wrapper {
    display: block;
}
.currency_wrapper {
    display: block;
}
.limit_min_wrapper {
    display: block;
}
.limit_max_wrapper {
    display: block;
}
.comments_wrapper {
    display: block;
}
.comments_area {
    height: 60px;
}
.buttons_wrapper {
    display: block;
    text-align: right;
    /*float: right;*/
}


.input-append.date label{
    font-weight: normal;
    height: 40px;
    padding-left: 10px;
    margin-top: 15px;
    width: 100%;
}
.input-append.date label input{
    float: right;
    top: -10px;
    margin: -5px 35px 5px 5px;
    padding: 5px;
    border: none;
    text-align: center;
    border-bottom: dotted 2px rgba(0,0,0,0.5);
    background-color: transparent;
}

/* Used to remove invalid red border on Firefox */
input:required,
input:invalid {
    box-shadow:none;
}