.ss-list-inline{
    padding-left: 0;
    list-style: none;    
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.ss-list-inline>li{
    display: inline-block;
}
/*
For display of lists as row with bs4 collapse 
*/
.ss-list-as-row{
    padding-left: 0;
    list-style: none;    
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.ss-list-as-row.ss-row>li{
    border-bottom:1px solid silver;
    border-right: 1px solid silver;
    padding: 3px 2px;
    overflow-x: hidden;

}

/*
DISPLAYS UL/LI AS TABLE
*/
.ss-work-events{
    list-style: none;
    padding-left:10px;
}
.ss-work-events>li{
    padding: 3px;
}
.ss-work-events-box>li{
    padding:5px;
}
.ss-work-events-label,.ss-work-events-value{
    border:1px solid silver;
}
.ss-work-events-section-heading{
    font-size: 1.3rem;
    background-color:#801313;
    color:white;
    padding:2px 5px;
    display:block;
}
.ss-work-events-pending-box{
    min-height: 60px;
}
.ss-work-events-label{
    background-color:#e3dada;
}
/*This is for testing ul/li as row
*/

.ss-list-inline.ss-row>li{
    border-bottom:1px solid silver;
    border-right: 1px solid silver;
    padding: 3px 2px;
    overflow-x: hidden;

}
.ss-list-inline.ss-row>li.ss-label{
    background-color: #f5f5f5;
}
.ss-list-table-head{
    font-weight: bold;
    background-color: silver;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
}

.ss-slno{
    padding: 5px;
    border-radius: 50%;
    background-color: brown;
    color:white;

}
.ss-list-table-head>li{

    padding: 5px 3px;
    border-left: 1px solid silver;
}
.ss-track-label{
    background-color: brown;
    color: white;
}
.ss-track-label{
    min-width: 150px;
    border-top:1px solid white;
    border-right:1px solid brown;
}
.ss-track-value{
    min-width: 150px;
    border-top:1px solid brown;
    border-right:1px solid brown;
}
.ss-track-label,.ss-track-value{
    padding: 2px !important;
    xmax-height: 80px;
    xoverflow: hidden;
    font-size: .7rem;
}
.ss-track-row {    
    border-left:1px solid brown;
    border-bottom:1px solid brown;
    margin-bottom:15px;

}
.ss-col-lg,.ss-col-md,.ss-col-xl,.ss-col-xs{
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
ul.row{
    list-style: none;
}
.ss-section-title{
    border-bottom: 1px solid #0275d8;
    margin: 10px 0px;
    font-size: 1.5rem;
}
/* nav tabs for visa register*/
.ss-nav-tabs { border-bottom: 2px solid #C64646; }
.ss-nav-tabs  .nav-link {
    background-color:#b9b9b9;
    color:white;
    border-right: 1px solid white;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.ss-nav-tabs  .nav-link.active {background-color:red;color:white}
.ss-nav-tabs > li.active > a, .ss-nav-tabs > li.active > a:focus, .ss-nav-tabs > li.active > a:hover { border-width: 0; }
.ss-nav-tabs > li > a { border: none; color: #ffffff;background: #C64646; }
.ss-nav-tabs > li.active > a, .ss-nav-tabs > li > a:hover { border: none;  color: #FFF !important; background: #ff8100; }
.ss-nav-tabs > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.ss-nav-tabs > li.active > a::after, .ss-nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #5a4080 none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.ss-nav-tabs > li  {width:20%; text-align:center;}

@media only screen and (max-width:480px){
    /* styles for mobile browsers smaller than 480px; (iPhone) */
    .ss-col-xs{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media only screen and (min-width:481px) and  (max-width:720px){
    /* styles for mobile browsers smaller than 480px; (iPhone) */
    .ss-col-sm{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (min-width:721px) and  (max-width:960px){
    /* styles for browsers larger than 960px; */
    .ss-col-md{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .ss-col-md-2x{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (max-width:960px){
    .ss-list-inline.ss-row{
        border-left: 1px solid silver;
        border-top: 1px solid silver;
        margin-bottom: 15px;
    }
    .ss-sm-hide{
        display: none !important;
        border:none;
    }
    .ss-sm-btn{

        padding: 0.25rem 1.0rem;
        font-size: 0.8rem;
        border-radius: 1.0rem;
    }
}
@media only screen and (min-width:961px){
    /* styles for browsers larger than 1440px; */
    .ss-col-lg{
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }    
    .ss-col-lg-2x{
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        max-width: 100%;
    }    
    .ss-col-lg-3x{
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 3;
        -webkit-flex-grow: 3;
        -ms-flex-positive: 3;
        flex-grow: 3;
        max-width: 100%;
    }
    .ss-lg-hide{
        display: none !important;
        border:none;
    }
    .ss-list-inline.ss-list-table-body>li:nth-child(odd){
        background-color: #f5f5f5;
    }
    .ss-list-inline.ss-list-table-body{
        border-left: 1px solid silver;
        border-top: 1px solid silver;
    }
    .ss-list-inline.ss-list-table-body>li:hover{
        background-color: #eceeef;
    }
    .ss-list-as-row.ss-list-table-body>li:nth-child(odd){
        background-color: #f5f5f5;
    }
    .ss-list-as-row.ss-list-table-body{
        border-left: 1px solid silver;
        border-top: 1px solid silver;
    }
    .ss-list-as-row.ss-list-table-body>li:hover{
        background-color: #eceeef;
    }

}
@media only screen and (min-width:2000px){
    /* for sumo sized (mac) screens */
    .ss-col-xl{
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
}
@media only screen and (device-width:768px){
    /* default iPad screens */
    .ss-col{
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}