html, body {
    height: 100Vh;
    width: 100%;
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    background-color: #ECF0F5;
}

.fc1 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px;
    margin: 4px 0px 4px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc2 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc2cb {
    display: block;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc2nb {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
}

.fc2nbtp {
    display: block;
    width: 99%;
    height: 30px;
    padding:  5px 0px 5px;
    margin:  5px 0px 00px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
}
.fc2b {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #c9d8f2;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc4 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 11px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc3 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}
.fcd4 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 11px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #adadad;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.ui-widget-overlay {
    background-color: black;
    background: black;
    opacity: .8;
    filter: Alpha(Opacity=100)
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
}

@media (max-width: 768px) {
    .loading {
        position: absolute;
        top: 50%;
        left: 45%;
    }
}

.lb {
    display: inline-block;
    width: 15px;
    height: 20px;
    border-radius: 3px;
    animation: loading 1s ease-in-out infinite
}

    .lb:nth-child(1) {
        background-color: #4977bb;
        animation-delay: 0
    }

    .lb:nth-child(2) {
        background-color: #17a84a;
        animation-delay: 0.09s
    }

    .lb:nth-child(3) {
        background-color: #f58220;
        animation-delay: .18s
    }

    .lb:nth-child(4) {
        background-color: #cd2027;
        animation-delay: .27s
    }

    .lb:nth-child(5) {
        background-color: #cd2027;
        animation-delay: .27s
    }

@keyframes loading {
    0% {
        transform: scale(1)
    }

    20% {
        transform: scale(1, 2.2)
    }

    40% {
        transform: scale(1, 1)
    }
}

.dt-body-center {
    padding-left: 10px
}

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

.loginboxfield {
    border-bottom: thin;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom-color: black;
    border-bottom-style: solid;
    width: 100%;
    text-align: center
}

@media (max-width: 600px) {
    .loginboxfield {
        font-size: 20px;
        background-color: none;
    }
}

.holdingdiv {
    width: 100%;
    margin: auto;
    overflow: auto;
    height: 100vh;
    background-image: url(../Content/Images/background.jpg);
    background-size: cover;
}

.hrspit {
    border-bottom-color: lightgray;
    border-bottom-style: solid;
    border-bottom-width: thin;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 10px;
    margin: 0px;
    font-size: 20px;
    font-weight: bolder
}

.Datatablebottom {
    border-bottom-color: darkgray;
    border-bottom-style: solid;
    border-bottom-width: medium;
}

.Bubbletabframe {
    position: relative;
    background: #fff;
    border: 1px solid #adadad;
    border-top: 0px;
    margin: 0px 5px 0px 5px;
    padding: 3px;
    padding-left: 5px;
    overflow: hidden;
    font-size: 24px;
    box-shadow: 2px 3px 2px #adadad
}

@media (max-width: 755px) {
    .Bubbletabframe {
        margin: 5px 5px 0px 5px
    }
}

.hrspitheadernoborder {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 5px;
    margin: 0px;
    font-size: 20px;
    font-weight: 900
}

.yellowbutton.disabled, .yellowbutton[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.4;
    filter: alpha(opacity=25);
    -webkit-box-shadow: none;
    box-shadow: none
}

.ar {
    color: red
}

.alo {
    color: #f58220
}

.sgreenbutton.disabled, .greenbutton[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.4;
    filter: alpha(opacity=25);
    -webkit-box-shadow: none;
    box-shadow: none
}

.ui-autocomplete {
    z-index: 5000;
    position: absolute
}

.numericCol {
    text-align: right;
    padding-right: 20px
}

.ft {
    width: 130px;
    font-weight: bold;
    text-align: right;
    margin-right: 5px;
    padding-top: 4px;
    vertical-align: middle;
}

.formcontainer {
    width: 98%
}

.fadeinannimation {
    animation: fadein 1s;
    -moz-animation: fadein 1s;
    -webkit-animation: fadein 1s;
    -o-animation: fadein 1s
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1
    }
}

.ui-state-default {
    background-color: white;
    border-bottom-color: black;
    border-bottom-width: medium;
    border-left-color: black;
    border-top-color: black;
    font-weight: 900;
    font-size: 16px
}

.ui-widget-header {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

h2 {
    text-align: center;
    padding: 20px 0
}

.ladder {
    overflow: auto
}

.bubblemiddle {
    position: relative;
    background: #fff;
    border: 1px solid #adadad;
    padding: 3px;
    padding-bottom: 5px;
    margin: 0px 8px 0px 8px;
    overflow: hidden; /*box-shadow: 1px 2px 1px #adadad*/
}

.sorting_asc {
    background-color: #f7e6e6;
}

.sorting_desc {
    background-color: #f7e6e6;
}

.sorting {
    background-color: #efefef;
}

@media (max-width: 755px) {
    .bubblemiddle {
        margin: 0px 5px 0px 5px
    }
}

.bubblenoback {
    position: relative;
    background: #fff;
    margin: 0px 0px 0px 0px;
    overflow: hidden
}

.pr5 {
    margin-right: 5px;
    float: right;
    margin-top: 5px;
}

.bubbletabs {
    position: relative;
    background: #f2f2f2;
    margin: 15px 5px 0px 5px;
    padding: 0px;
    overflow: hidden;
    border-top-left-radius: 3px;
    border: 1px solid #adadad;
    border-bottom: 0px;
    border-top-right-radius: 3px;
    border-radius: 2px;
    font-weight: bold;
    vertical-align: baseline; /*box-shadow: 1px 2px 1px #adadad*/
}

.bubbletabsdashboard {
    position: relative;
    background: #f2f2f2;
    margin: 0px 5px 0px 5px;
    padding: 0px;
    overflow: hidden;
    border-top-left-radius: 3px;
    border: 1px solid #adadad;
    border-bottom: 0px;
    border-top-right-radius: 3px;
    border-radius: 2px;
    font-weight: bold;
    vertical-align: baseline; /*box-shadow: 1px 2px 1px #adadad*/
}

.ftb {
    position: relative;
    background: #f2f2f2;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    overflow: hidden;
    font-weight: bold;
    vertical-align: baseline; /*box-shadow: 1px 2px 1px #adadad*/
}

.bubblemixandmatchheaders {
    position: relative;
    background: #cfd6e9;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    padding-left: 6px;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.42857143;
    border-top-left-radius: 3px;
    border: 1px solid #adadad;
    border-top-right-radius: 3px;
    border-radius: 2px;
    vertical-align: baseline; /*box-shadow: 2px 3px 2px #adadad*/
}

.bubblessubtabtitle {
    position: relative;
    background: #cfd6e9;
    margin: 0px 5px 0px 5px;
    padding: 1px;
    padding-left: 6px;
    overflow: hidden;
    font-size: 20px;
    border-top-left-radius: 3px;
    line-height: 1.42857143;
    border: 1px solid #adadad;
    border-top-right-radius: 3px;
    border-radius: 2px;
    font-weight: bold;
    vertical-align: baseline; /*box-shadow: 2px 3px 2px #adadad*/
}

@media (max-width: 755px) {
    .bubblesubtabtitle {
        margin: 8px 8px 0px 8px
    }
}

.hrspitheader {
    border-bottom-color: #d3d3d3;
    border-bottom-style: solid;
    border-bottom-width: thin;
    padding: 5px;
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
    font-size: 20px
}

.dbg {
    font-size: 20px;
    width: 100%;
    height: 100px;
    border-radius: 15px;
    margin-top: 5px;
    padding: 0px 0px 0px 0px;
    color: black;
    background-color: #00a65a;
    text-decoration: none;
}

.dbr {
    font-size: 20px;
    width: 100%;
    height: 100px;
    border-radius: 15px;
    margin-top: 5px;
    padding: 0px 0px 0px 0px;
    color: black;
    background-color: palevioletred;
    text-decoration: none;
}

.dbb {
    font-size: 20px;
    width: 100%;
    height: 100px;
    border-radius: 15px;
    margin-top: 5px;
    padding: 0px 0px 0px 0px;
    color: black;
    background-color: cornflowerblue;
    text-decoration: none;
}

.dby {
    font-size: 20px;
    width: 100%;
    height: 100px;
    border-radius: 15px;
    margin-top: 5px;
    padding: 0px 0px 0px 0px;
    color: black;
    background-color: yellow;
    text-decoration: none;
}

@media (max-width: 755px) {
    .dashbutton {
        margin: 1px 1px 0px 1px
    }
}

.ifs {
    font-size: xx-large
}

@media (max-width: 767px) {
    .dcm {
        display: none
    }
}

@media (min-width: 768px) {
    .dcd {
        display: none
    }
}

@media (max-width: 767px) {
    .dcm {
        display: none
    }
}

@media (max-width: 319px) {
    .deviceblock {
        display: none
    }
}

@media (min-width: 320px) {
    .deviceblock {
        display: block;
    }
}

@media (min-width: 320px) {
    .deviceblockalert {
        display: none;
    }
}

@media (max-width: 319px) {
    .deviceblockalert {
        display: block;
    }
}
/*THIS IS LAYOUT*/

.table-responsive {
    overflow-x: auto;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /*    background: #EEEEEE;
*/ opacity: 1.0;
    background-image: url(../Content/Images/background.jpg);
    background-size: cover;
}

.deleted {
    background-color: tomato
}

.over7 {
    background-color: #f3fa5d
}

.over14 {
    background-color: #fadf5d
}

.over28 {
    background-color: #fabd5d
}

.over56 {
    background-color: #fa925d
}

.over90 {
    background-color: #fa5d5d
}

.archiv
ed {
    background-color: lightblue
}

.itemunder {
    color: #c40000
}

.itemover {
    color: #014ca8
}

.selected {
    background-color: #6bff97
}

.layout-boxed html, .layout-boxed body {
    height: 100%
}

body {
    overflow: hidden;
    font: 14px calibri
}

.wrapper {
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .wrapper:before, .wrapper:after {
        content: " ";
        display: table
    }

    .wrapper:after {
        clear: both
    }

.layout-boxed .wrapper {
    max-width: 1250px;
    margin: 0 auto;
    min-height: 100%;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    position: relative
}

.content-wrapper, .main-footer {
    -webkit-transition: -webkit-transform .3s ease-in-out,margin .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,margin .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,margin .3s ease-in-out;
    transition: transform .3s ease-in-out,margin .3s ease-in-out;
    margin-left: 230px;
    z-index: 820
}

@media(max-width:767px) {
    main-footer {
        -webkit-transition: -webkit-transform .3s ease-in-out,margin .3s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out,margin .3s ease-in-out;
        -o-transition: -o-transform .3s ease-in-out,margin .3s ease-in-out;
        transition: transform .3s ease-in-out,margin .3s ease-in-out;
        margin-left: 200px;
        z-index: 820
    }
}

.layout-top-nav .content-wrapper, .layout-top-nav .main-footer {
    margin-left: 0
}

@media(max-width:767px) {
    .content-wrapper, .main-footer {
        margin-left: 0
    }
}

@media(min-width:768px) {
    .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer {
        margin-left: 0;
        margin-right: 0
    }
}

@media(max-width:767px) {
    .sidebar-open .content-wrapper, .sidebar-open .main-footer {
        -webkit-transform: translate(215px,0);
        -ms-transform: translate(215px,0);
        -o-transform: translate(215px,0);
        transform: translate(215px,0)
    }
}

.content-wrapper {
    z-index: 800;
    padding-top: 0px;
    margin-top: 44px;
    background-color: #ECF0F5;
}

@media(max-width:767px) {
    .content-wrapper {
        margin-top: 5px;
    }
}

.fixed .main-header, .fixed .main-sidebar, .fixed .left-side {
    position: fixed
}

.fixed .main-header {
    top: 0;
    right: 0;
    left: 0
}

.fixed .content-wrapper, .fixed .right-side {
    padding-top: 44px
}

@media(max-width:767px) {
    .fixed .content-wrapper, .fixed .right-side {
        padding-top: 100px
    }
}

.fixed.layout-boxed .wrapper {
    max-width: 100%
}

.fixed .wrapper {
    overflow: auto
}

.hold-transition .content-wrapper, .hold-transition .right-side, .hold-transition .main-footer, .hold-transition .main-sidebar, .hold-transition .left-side, .hold-transition .main-header .navbar, .hold-transition .main-header .logo, .hold-transition .menu-open .fa-angle-left {
    -webkit-transition: none;
    -o-transition: none;
    transition: none
}

.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Source Sans Pro',sans-serif
}

a {
    color: #3c8dbc
}

    a:hover, a:active, a:focus {
        outline: none;
        text-decoration: none;
        color: #72afd2
    }

.page-header {
    margin: 10px 0 20px;
    font-size: 22px
}

    .page-header > small {
        color: #666;
        display: block;
        margin-top: 5px
    }

.main-header {
    position: relative;
    max-height: 100px;
    z-index: 1030;
    width: 100%
}

    .main-header .navbar {
        -webkit-transition: margin-left .3s ease-in-out;
        -o-transition: margin-left .3s ease-in-out;
        transition: margin-left .3s ease-in-out;
        border: none;
        min-height: 44px;
        border-radius: 0;
        padding-right: 30px;
        margin: 0 0 0 230px
    }

    .main-header .navbar-custom-menu, .main-header .navbar-right {
        float: right
    }

@media(max-width:991px) {
    .main-header .navbar-custom-menu a, .main-header .navbar-right a {
        color: inherit;
        background: transparent
    }
}

@media(max-width:767px) {
    .main-header .navbar-right {
        float: none
    }

    .navbar-collapse .main-header .navbar-right {
        margin: 7.5px -15px
    }

    .main-header .navbar-right > li {
        color: inherit;
        border: 0
    }
}

.main-header .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 15px;
    font-family: fontAwesome;
    color: #fff
}

    .main-header .sidebar-toggle:before {
        content: "\f0c9"
    }

    .main-header .sidebar-toggle:hover {
        color: #fff
    }

    .main-header .sidebar-toggle:focus, .main-header .sidebar-toggle:active {
        background: transparent;
        color: #fff
    }

    .main-header .sidebar-toggle .icon-bar {
        display: none;
        color: #fff;
    }

.main-header .navbar .nav > li.user > a > .fa, .main-header .navbar .nav > li.user > a > .glyphicon, .main-header .navbar .nav > li.user > a > .ion {
    margin-right: 5px
}

.main-header .logo {
    -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: 44px;
    text-align: center;
    width: 230px;
    padding: 0;
    overflow: hidden;
    font: 300 20px/50px "Helvetica Neue",Helvetica,Arial,sans-serif
}

@media(max-width:767px) {
    .main-header .logo {
        width: 200px
    }
}

.main-header .logo .logo-lg {
    display: block
}

.main-header .logo .logo-mini {
    display: none
}

.main-header .navbar-brand {
    color: #3C8DBC;
}

.main-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 44px;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,width .3s ease-in-out;
    transition: transform .3s ease-in-out,width .3s ease-in-out
}

@media(max-width:767px) {
    .main-sidebar {
        padding-top: 100px;
        width: 100%
    }
}

@media(max-width:767px) {
    .main-sidebar {
        -webkit-transform: translate(-767px,0);
        -ms-transform: translate(-767px,0);
        -o-transform: translate(-767px,0);
        transform: translate(-767px,0)
    }
}

@media(min-width:768px) {
    .sidebar-collapse .main-sidebar {
        -webkit-transform: translate(-230px,0);
        -ms-transform: translate(-230px,0);
        -o-transform: translate(-230px,0);
        transform: translate(-230px,0)
    }
}

@media(max-width:767px) {
    .sidebar-open .main-sidebar {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0)
    }
}

.sidebar {
    padding-bottom: 10px
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: thin;
    border-bottom-style: solid;
    border-bottom-color: #696969;
    height:100vh;
}

    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
        border-bottom: thin;
        border-bottom-style: solid;
        border-bottom-color: #696969
    }

        .sidebar-menu > li > a {
            padding: 10px 3px 10px 10px;
            display: block
        }

            .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .glyphicon, .sidebar-menu > li > a > .ion {
                width: 20px
            }

        .sidebar-menu > li .label, .sidebar-menu > li .badge {
            margin-right: 5px
        }

        .sidebar-menu > li .badge {
            margin-top: 3px
        }

    .sidebar-menu li.header {
        padding: 10px 25px 10px 15px;
        font-size: 16px
    }

    .sidebar-menu li > a > .fa-angle-left, .sidebar-menu li > a > .pull-right-container > .fa-angle-left {
        width: auto;
        height: auto;
        padding: 0;
        margin-right: 10px;
        -webkit-transition: transform .5s ease;
        -o-transition: transform .5s ease;
        transition: transform .5s ease
    }

    .sidebar-menu li > a > .fa-angle-left {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -8px
    }

    .sidebar-menu .menu-open > a > .fa-angle-left, .sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-left {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

    .sidebar-menu .active > .treeview-menu {
        display: block
    }

@media(min-width:768px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer {
        margin-left: 0px !important;
        z-index: 840
    }

    .sidebar-mini.sidebar-collapse .main-sidebar {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
        width: 0px !important;
        z-index: 850;
        height: 100%;
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li {
        position: relative
    }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
            margin-right: 0
        }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
                border-top-right-radius: 4px
            }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
            padding-top: 3px;
            padding-bottom: 3px;
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right, .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
            display: none !important;
            -webkit-transform: translateZ(0)
        }

    .sidebar-mini.sidebar-collapse .main-header .logo {
        width: 50px
    }

        .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
            display: block;
            margin-left: -15px;
            margin-right: -15px;
            font-size: 18px
        }

        .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
            display: none
        }

    .sidebar-mini.sidebar-collapse .main-header .navbar {
        margin-left: 50px
    }
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block !important;
    position: absolute;
    width: 180px;
    left: 50px
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span {
    top: 0;
    margin-left: -3px;
    padding: 12px 5px 12px 20px;
    background-color: inherit
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    position: relative !important;
    float: right;
    width: auto !important;
    left: 180px !important;
    top: -22px !important;
    z-index: 900
}

    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container > .label:not(:first-of-type) {
        display: none
    }

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 44px;
    margin-left: 0
}

.sidebar-expanded-on-hover .main-footer, .sidebar-expanded-on-hover .content-wrapper {
    margin-left: 0px
}

.sidebar-expanded-on-hover .main-sidebar {
    box-shadow: 3px 0 8px rgba(0,0,0,0.125)
}

.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu > li.header {
    white-space: nowrap;
    overflow: hidden
}

    .sidebar-menu:hover {
        overflow: visible
    }

    .sidebar-form, .sidebar-menu > li.header {
        overflow: hidden;
        text-overflow: clip
    }

    .sidebar-menu li > a {
        position: relative
    }

        .sidebar-menu li > a > .pull-right-container {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -7px
        }

.control-sidebar-bg {
    position: fixed;
    z-index: 1000;
    bottom: 0
}

.control-sidebar-bg, .control-sidebar {
    top: 0;
    right: -215px;
    width: 215px;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out
}

.control-sidebar {
    position: absolute;
    padding-top: 50px;
    z-index: 1010
}

@media(max-width:768px) {
    .control-sidebar {
        padding-top: 100px
    }
}

.control-sidebar > .tab-content {
    padding: 10px 15px
}

.control-sidebar.control-sidebar-open, .control-sidebar.control-sidebar-open + .control-sidebar-bg {
    right: 0
}

.control-sidebar-open .control-sidebar-bg, .control-sidebar-open .control-sidebar {
    right: 0
}

@media(min-width:768px) {
    .control-sidebar-open .content-wrapper, .control-sidebar-open .right-side, .control-sidebar-open .main-footer {
        margin-right: 215px
    }
}

.fixed .control-sidebar {
    position: fixed;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 50px
}

.nav-tabs.control-sidebar-tabs > li:first-of-type > a, .nav-tabs.control-sidebar-tabs > li:first-of-type > a:hover, .nav-tabs.control-sidebar-tabs > li:first-of-type > a:focus {
    border-left-width: 0
}

.nav-tabs.control-sidebar-tabs > li > a {
    border-radius: 0
}

    .nav-tabs.control-sidebar-tabs > li > a, .nav-tabs.control-sidebar-tabs > li > a:hover {
        border-top: none;
        border-right: none;
        border-left: 1px solid transparent;
        border-bottom: 1px solid transparent
    }

        .nav-tabs.control-sidebar-tabs > li > a .icon {
            font-size: 18px
        }

.nav-tabs.control-sidebar-tabs > li.active > a, .nav-tabs.control-sidebar-tabs > li.active > a:hover, .nav-tabs.control-sidebar-tabs > li.active > a:focus, .nav-tabs.control-sidebar-tabs > li.active > a:active {
    border-top: none;
    border-right: none;
    border-bottom: none
}

@media(max-width:768px) {
    .nav-tabs.control-sidebar-tabs {
        display: table
    }

        .nav-tabs.control-sidebar-tabs > li {
            display: table-cell
        }
}

.control-sidebar-menu > li > a {
    display: block;
    padding: 10px 15px
}

    .control-sidebar-menu > li > a:before, .control-sidebar-menu > li > a:after {
        content: " ";
        display: table
    }

    .control-sidebar-menu > li > a:after {
        clear: both
    }

    .control-sidebar-menu > li > a > .control-sidebar-subheading {
        margin-top: 0
    }

.control-sidebar-menu .menu-icon {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px
}

.control-sidebar-menu .menu-info {
    margin: 3px 0px 0px 45px
}

    .control-sidebar-menu .menu-info > .control-sidebar-subheading {
        margin: 0
    }

    .control-sidebar-menu .menu-info > p {
        margin: 0;
        font-size: 11px
    }

.control-sidebar-menu .progress {
    margin: 0
}

.btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent
}

    .btn.uppercase {
        text-transform: uppercase
    }

    .btn.btn-flat {
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-width: 1px
    }

    .btn:active {
        -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125)
    }

    .btn:focus {
        outline: none
    }

    .btn.btn-file {
        position: relative;
        overflow: hidden
    }

        .btn.btn-file > input[type='file'] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            opacity: 0;
            filter: alpha(opacity=0);
            outline: none;
            background: #fff;
            cursor: inherit;
            display: block
        }

.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd
}

.btn-default:hover, .btn-default:active, .btn-default.hover {
    background-color: #e7e7e7
}

.btn-primary {
    background-color: #3c8dbc;
    border-color: #367fa9
}

.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: #367fa9
}

.btn-success {
    background-color: #00a65a;
    border-color: #008d4c
}

.btn-success:hover, .btn-success:active, .btn-success.hover {
    background-color: #008d4c
}

.btn-info {
    background-color: #00c0ef;
    border-color: #00acd6
}

    .btn-info:hover, .btn-info:active, .btn-info.hover {
        background-color: #00acd6
    }

.btn-danger {
    background-color: #dd4b39;
    border-color: #d73925
}

    .btn-danger:hover, .btn-danger:active, .btn-danger.hover {
        background-color: #d73925
    }

.btn-warning {
    background-color: #f39c12;
    border-color: #e08e0b
}

    .btn-warning:hover, .btn-warning:active, .btn-warning.hover {
        background-color: #e08e0b
    }

.treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 5px
}

    .treeview-menu .treeview-menu {
        padding-left: 15px
    }

    .treeview-menu > li {
        margin: 0
    }

        .treeview-menu > li > a {
            padding: 5px 4px 5px 4px;
            display: block;
            font-size: 16px;
            border-bottom: thin;
            border-bottom-style: solid;
            border-bottom-color: #696969
        }

            .treeview-menu > li > a > .fa, .treeview-menu > li > a > .glyphicon, .treeview-menu > li > a > .ion {
                width: 20px
            }

            .treeview-menu > li > a > .pull-right-container > .fa-angle-left, .treeview-menu > li > a > .pull-right-container > .fa-angle-down, .treeview-menu > li > a > .fa-angle-left, .treeview-menu > li > a > .fa-angle-down {
                width: auto
            }

.skin-blue .main-header .navbar {
    background-color: #222D32;
}

    .skin-blue .main-header .navbar .nav > li > a {
        color: #fff
    }

        .skin-blue .main-header .navbar .nav > li > a:hover, .skin-blue .main-header .navbar .nav > li > a:active, .skin-blue .main-header .navbar .nav > li > a:focus, .skin-blue .main-header .navbar .nav .open > a, .skin-blue .main-header .navbar .nav .open > a:hover, .skin-blue .main-header .navbar .nav .open > a:focus, .skin-blue .main-header .navbar .nav > .active > a {
            background: rgba(0,0,0,0.1);
            color: #f6f6f6
        }

    .skin-blue .main-header .navbar .sidebar-toggle {
        color: #fff
    }

        .skin-blue .main-header .navbar .sidebar-toggle:hover {
            color: #f6f6f6;
            background: rgba(0,0,0,0.1)
        }

    .skin-blue .main-header .navbar .sidebar-toggle {
        color: #fff
    }

        .skin-blue .main-header .navbar .sidebar-toggle:hover {
            background-color: #0b00ad
        }

@media(max-width:767px) {
    .skin-blue .main-header .navbar .dropdown-menu li.divider {
        background-color: rgba(255,255,255,0.1)
    }

    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #fff
    }

        .skin-blue .main-header .navbar .dropdown-menu li a:hover {
            background: #0b00ad
        }
}

.skin-blue .main-header .logo {
    background-color: #367fa9;
    color: #fff;
    border-bottom: 0 solid transparent
}

    .skin-blue .main-header .logo:hover {
        background-color: #367fa9
    }

.skin-blue .main-header li.user-header {
    background-color: #367fa9
}

.skin-blue .content-header {
    background: transparent
}

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

.skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a {
    color: #fff
}

.skin-blue .sidebar-menu > li.header {
    color: #2c3b42;
    background: #2c3531
}

.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent
}

.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a {
    color: #fff;
    background: #6f6f70
}

.skin-blue .sidebar-menu > li.active > a {
    border-left-color: #3c8dbc
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #2C3B41;
}

.skin-blue .sidebar a {
    color: #d7e9f2
}

    .skin-blue .sidebar a:hover {
        text-decoration: none;
        background-color: #BB1919;
    }

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: #919191;
}

    .skin-blue .sidebar-menu .treeview-menu > li.active > a, .skin-blue .sidebar-menu .treeview-menu > li > a:hover {
        color: #fff
    }

.skin-blue.layout-top-nav .main-header > .logo {
    background-color: #3c8dbc;
    color: #fff;
    border-bottom: 0 solid transparent
}

    .skin-blue.layout-top-nav .main-header > .logo:hover {
        background-color: #3b8ab8
    }

.logonasfix {
    position: fixed;
    top: 0;
    right: 5px
}

@media(max-width:767px) {
    .logonasfix {
        position: fixed;
        top: 44px;
        right: 0px
    }
}

.biglogo {
    padding: 0px 0 0px 0px;
    height: 40px;
    width: 100%;
    float: left;
}

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: block;
    height: 0;
    overflow-y: hidden
}

.tab-content > .active, .pill-content > .active {
    height: auto;
}

.navbar-toggle {
    color: #fff;
    border: 0;
    margin: 0;
    padding: 15px
}

@media(max-width:991px) {
    .navbar-custom-menu .navbar-nav > li {
        float: left
    }

    .navbar-custom-menu .navbar-nav {
        margin: 0;
        float: left
    }

        .navbar-custom-menu .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
            line-height: 20px
        }
}

@media(max-width:767px) {
    .main-header {
        position: relative
    }

        .main-header .logo, .main-header .navbar {
            width: 100%;
            float: none
        }

        .main-header .navbar {
            margin: 0
        }

        .main-header .navbar-custom-menu {
            float: right
        }
}

@media(max-width:991px) {
    .navbar-collapse.pull-left {
        float: none !important
    }

        .navbar-collapse.pull-left + .navbar-custom-menu {
            display: block;
            position: absolute;
            top: 0;
            right: 40px
        }
}

.control-sidebar-light {
    color: #5e5e5e
}

@media(min-width:768px) {
    .Fixposition {
        position: fixed;
    }
}

@media(min-width:767px) {
    .Fixpositionpadding {
        margin-top: 0px;
    }
}
/*Cutdown*/

.bbtn {
    position: relative;
    background: #fff;
    margin: 0px 5px 8px 5px;
    padding: 1px;
    overflow: hidden;
    font-size: 24px;
    border-top: 0px;
    border-right: 1px solid #adadad;
    border-left: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
    border-radius: 2px;
    font-weight: bold;
    vertical-align: baseline
}

.bt {
    position: relative;
    background: #fff;
    margin: 0px 0px 10px 0px;
    padding: 3px;
    overflow: hidden;
    font-size: 24px;
    box-shadow: 1px 2px 1px #adadad
}

.bst {
    position: relative;
    background: white;
    margin: 15px 5px 0px 5px;
    padding: 1px;
    padding-left: 6px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.42857143;
    border-top-left-radius: 5px;
    border: 1px solid #adadad;
    border-top-right-radius: 5px;
    font-weight: bold;
    vertical-align: baseline;
    border-top-color: #00c0ef;
    border-top-width: 3px
}

.bstdashboardpivot {
    position: relative;
    background: white;
    margin: 0px 5px 0px 5px;
    padding: 1px;
    padding-left: 6px;
    overflow: scroll;
    font-size: 20px;
    line-height: 1.42857143;
    border: 1px solid #adadad;
    font-weight: bold;
    vertical-align: baseline;
    border-top-color: #00c0ef;
    border-top-width: 3px
}

.bst_screendesigner {
    position: relative;
    background: white;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    padding-left: 6px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.42857143;
    border-top-left-radius: 5px;
    border: 1px solid #adadad;
    border-top-right-radius: 5px;
    font-weight: bold;
    vertical-align: baseline;
    border-top-color: #00c0ef;
    border-top-width: 3px
}

.bft {
    position: relative;
    background: #fff;
    border-bottom: 1px solid #adadad;
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
    border-top: 0px solid #adadad;
    border-radius: 2px;
    margin: 0px 5px 0px 5px;
    overflow: hidden;
    overflow-y: hidden
}

.bft_screendesigner {
    position: relative;
    background: #fff;
    border-bottom: 0px solid #adadad;
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
    border-top: 0px solid #adadad;
    border-radius: 2px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    overflow-y: hidden
}

.bft_screendesigner_bottom {
    position: relative;
    background: #fff;
    border-bottom: 1px solid #adadad;
    border-left: 1px solid #adadad;
    border-right: 1px solid #adadad;
    border-top: 0px solid #adadad;
    border-radius: 2px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    overflow-y: hidden;
    padding-top: 5px;
}

.bftnb {
    position: relative;
    background: #fff;
    border-left: 1px solid #ffffff;
    margin: 0px 5px 0px 5px;
    overflow: hidden;
    overflow-y: hidden
}

.w95 {
    min-width: 99%
}

.w100p {
    width: 100px
}

.wallowterm {
    width: 250px
}
.w150p {
    width: 150px
}

.ar {
    color: red
}

.fidi {
    background-color: lightgray
}

.disn {
    display: none
}

.flr {
    float: right
}

.mb5 {
    margin-bottom: 5px;
}

.fll {
    float: left
}

.w100 {
    min-width: 100%;
    float: right
}

.dshb {
    float: left
}

@media (max-width: 450px) {
    .dshb {
        width: 48%;
        max-width: 300px;
        margin: 1%
    }
}

@media (min-width: 451px) {
    .dshb {
        width: 31%;
        margin: 1%
    }
}

@media(max-width:800px) {
    .b200 {
        font-size: 1em;
        width: 100%;
        max-width: 200px;
    }
}

@media(max-width:800px) {
    .b150 {
        font-size: 1em;
        width: 100%;
        max-width: 150px;
    }
}

@media(max-width:600px) {
    .b100p {
        width: 100%;
    }
}
/*Login*/

.lbox {
    max-width: 500px;
    margin: 5%;
    border: thin;
    border-color: lightgray;
    border-style: solid;
    background-color: white;
    border-radius: 5px;
    max-height: 500px;
    min-height: 325px;
}

.lboxb {
    max-width: 500px;
    margin: 5%;
    border: thin;
    border-color: lightgray;
    border-style: solid;
    background-color: white;
    border-radius: 5px;
    max-height: 500px;
    min-height: 120px;
}

@media(max-width:600px) {
    .lbox {
        max-width: 500px;
        min-height: 325px;
        height: 350px;
        padding: 10px;
        background-color: #fff;
        border-color: none;
        border-style: none;
    }
}

.clog {
    width: 100%;
}

@media(max-width:600px) {
    .clog {
        width: 75%;
    }
}

.obox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    margin-top: 5%;
    margin-bottom: 0%;
}

@media(max-width:600px) {
    .obox {
        max-width: 400px;
        margin-top: 50px;
        margin-bottom: 50%;
    }
}

.lbh {
    width: 100%;
    padding-left: 12.5%;
    padding-right: 12.5%;
    padding-top: 20px;
    text-align: center;
}

@media(max-width:600px) {
    .lbh {
        max-width: 550px;
        padding-left: 3%;
        padding-right: 3%;
    }
}

@media(min-width:601px) {
    .fpw {
        width: 100%;
        padding-left: 10%;
        padding-top: 10px;
        padding-right: 30%;
    }
}

.hmb {
    display: n;
}

@media(min-width:601px) {
    .hmb {
        display: none
    }
}

@media(min-width:601px) {
    .libb {
        width: 100%;
        padding-left: 25%;
        padding-top: 10px;
        padding-right: 10%;
    }
}

@media(min-width:601px) {
    .flrm {
        float: right;
        margin-right: 10%;
    }
}
/*Mobile*/

.Dw100 {
    width: 100%;
    border-bottom-color: darkgray;
    border-bottom-style: solid;
    border-bottom-width: medium;
}

.tfb {
    width: 100%;
    border-bottom-color: darkgray;
    border-bottom-style: solid;
    border-bottom-width: medium;
}

.btn-w {
    background-color: #f39c12;
    border-color: #e08e0b;
    color: white;
}

    .btn-w:hover, .btn-w:active, .btn-w.hover {
        background-color: #e08e0b;
        color: white;
    }

.btn-s {
    background-color: #00a65a;
    border-color: #008d4c;
    color: white;
}

    .btn-s:hover, .btn-s:active, .btn-s.hover {
        background-color: #008d4c;
        color: white;
    }

.btn-a {
    background-color: lightblue;
    border-color: lightsteelblue;
    color: white;
}

.btn-a:hover, .btn-a:active, .btn-a.hover {
    background-color: lightsteelblue;
    color: white;
}

.btn-d {
    background-color: #dd4b39;
    border-color: #d73925;
    color: white;
}

    .btn-d:hover, .btn-d:active, .btn-d.hover {
        background-color: #d73925;
        color: white;
    }

.btn-de {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd
}

    .btn-de:hover, .btn-de:active, .btn-de.hover {
        background-color: #e7e7e7;
        color: white;
    }

.btn-p {
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: white;
}

.btn-p:hover, .btn-p:active, .btn-p.hover {
    background-color: #367fa9;
    color: white;
}

.fcd {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px;
    margin: 4px 0px 4px 5px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    background-color: lightgray
}

.ard {
    color: red;
    display: none
}

.fcd3 {
    display: block;
    width: 99%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    background-color: lightgray
}

.fcd3ms {
    display: block;
    width: 80%;
    height: 30px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    background-color: lightgray
}
.sidebar {
    overflow-y: auto;
    height: calc(100% - 4rem);
}
.sud {
    position: relative;
    background: white;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    padding-left: 6px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.42857143;
    border-bottom: 1px solid #adadad;
    font-weight: bold;
    vertical-align: baseline;
    width: 100%;
}

.col_align_right {
    text-align: right
}

.fc3_textarea {
    display: block;
    width: 99%;
    height: 90px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc3_textarea6 {
    display: block;
    width: 99%;
    height: 200px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc3_textarea8 {
    display: block;
    width: 99%;
    height: 154px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.fc3_textarea12 {
    display: block;
    width: 99%;
    height: 270px;
    padding: 5px 5px 5px;
    margin: 5px 0px 10px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
}

.div-with-bg {
    background-color: red;
}

.div_center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.col_right {
    text-align: right;
}

.col_center {
    text-align: center;
}

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

.pt5 {
    padding-top: 5px;
}

.nbb{
    border-bottom: 0px;
}

.nlb {
    border-left: 0px;
}

.nrb {
    border-right: 0px;
}

.nplr
{
    padding-left:0px;
    padding-right: 0px;
}

.lddisabled
{
background-color: lightblue;
}

.bp5px
{
    padding-bottom:10px;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.elipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}