div.container {
    width: 100%;
}

th, td {
    padding: 1px;
}

input:focus:not([read-only]) {
    border-bottom: none!important;
    box-shadow   : none!important;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding-top   : 0px;
    padding-bottom: 0px;
}

.users {
    table-layout: fixed;
    width       : 100%;
    white-space : nowrap;
    border      : none;
}

.users td {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ;
    border       : none;
}

.trclass {
    font-weight:bold;
}

a:hover {
    color: #0056b3;
    text-decoration: none
}

input[type=search] {
    outline              : none;
    box-shadow           : none;
    box-sizing           : none;
    box-sizing           : none;
    box-shadow           : none;
    border-radius        : 0;
    -webkit-border-radius: 0;
    -webkit-box-sizing   : none;
    -moz-box-sizing      : none;
}

.paper-snackbar {
    transition-property         : opacity, bottom, left, right, width, margin, border-radius;
    transition-duration         : 0.5s;
    transition-timing-function  : ease;
    font-family                 : RobotoDraft;
    font-size                   : 14px;
    min-height                  : 14px;
    background-color            : #ffcc00;
    position                    : absolute;
    display                     : flex;
    justify-content             : space-between;
    align-items                 : center;
    color                       : black;
    line-height                 : 22px;
    padding                     : 18px 24px;
    bottom                      : 0px;
    opacity                     : 0;
}

@media (min-width: 640px) {
    .paper-snackbar {
        min-width    : 288px;
        max-width    : 568px;
        display      : inline-flex;
        border-radius: 2px;
        margin       : 24px;
        bottom       : -100px;
    }
}

@media (max-width: 640px) {
    .paper-snackbar {
        left : 0px;
        right: 0px;
    }
}


div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
    position: relative;
    font-size: 13px;
    display: inline-block;
    box-sizing: none;
    width: 300px;
    max-width: 100%;
    margin: 0;
    padding: 0px 0;
    border: none;
    border-bottom: 1px solid black;
}

.form-control:focus {
    border-color        : inherit;
    -webkit-box-shadow  : none;
    box-shadow          : none;
}

.sscc-table-row-length-textfield {
    width      : 75px;
    float      : right;
    margin-left: 10px;
}

.sscc-search-textfield {
    width: 80%;
}

.sscc-default-textfield {
    width: 100px;
}

.sscc-fam-mailing-textfield {
    width: 150px;
}

.sscc-modal-title {
   margin-bottom: 0px;
   color        : #006600;
   font-weight  : bold;
   font-size    : 16px;
}

.sscc-modal-error-title {
   margin-bottom: 0px;
   color        : #ff3300;
   background   : #ff3300;
   font-weight  : bold;
   font-size    : 16px;
}

.sscc-img-td {
    width: 50%
}

.row-CategoryID {
    width: 10%;
}

.row-Gender {
    width: 10%;
}

.modal-header {
    display                 : -ms-flexbox;
    display                 : flex;
    -ms-flex-align          : start;
    align-items             : flex-start;
    -ms-flex-pack           : justify;
    justify-content         : space-between;
    padding                 : .2rem;
    margin-bottom           : 0px;
    padding-bottom          : 0;
    border-bottom           : 0px solid #e9ecef;
    border-top-left-radius  : 0;
    border-top-right-radius : 0;
    background              : #99cc00;
}

.modal-error-header {
    display                 : -ms-flexbox;
    display                 : flex;
    -ms-flex-align          : start;
    align-items             : flex-start;
    -ms-flex-pack           : justify;
    justify-content         : space-between;
    padding                 : .2rem;
    margin-bottom           : 0px;
    padding-bottom          : 0;
    border-bottom           : 0px solid #e9ecef;
    border-top-left-radius  : 0;
    border-top-right-radius : 0;
    background              : #ff3300;
}

.modal-content {
    border-radius: 0;
    font-size    : 14px;
}

/*
.mdl-textfield--floating-label.is-focused
.mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty
.mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder
.mdl-textfield__label {
    font-weight: bold;
    color      : #3f51b5;
    font-size  : 10px;
    top        : 4px;
    visibility : visible
}
*/
/* custom styles */

.acme-card {
    width: 125px;
    height: 175px;
    background: url('./images/sscclogo125.png') center;
    background-repeat: no-repeat;
    border: 1px solid #d9d9d9;
    padding: 0px;
    margin-top:0.001;
    margin-bottom:0.9;
    margin-left:0;
}

.content-grid {
    margin-left:0;
    padding: 0;
}

div.int-titlebar {
    font-size: 13px;
    color    : #000000;
    vertical-align: middle;
}

/* +------------------------------------------------------------------------+ //
// | The followings will prevent hte body from scrolling from mobile device | //
// |    o body.modal-open                                                   | //
// |    o body.viewport-lg                                                  | //
// |    o body                                                              | //
// +------------------------------------------------------------------------+ */

body.modal-open {
    /* block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens */
    overflow: hidden;
    position: fixed;
}

body.viewport-lg {
    /* block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile */
    position: absolute;
}

body {
    /* STOP MOVING AROUND! */
    overflow-x: hidden;
    overflow-y: scroll !important;
}

table.dataTable tbody td.no-padding { padding: 0; }
div.slider { display: none; }

/* Disable ugly boxes around images in IE10 */
a img { border: 0px; }
header.sscc-header { background-color: #1a0d00; }

#sscc th, #sscc td, #sscc tbody {
    text-align: left;
}

.datatablerowhighlight {
    background-color: #ECFFB3 !important;
}

/*.spinner {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    height: 11px;*/
/*    width: 16px;*/
/*    text-align: center;*/
/*    background: url("images/ajax-loader.gif");*/
/*    background-size: 100%;*/
/*    z-index: 10000000;*/
/*}*/

.sscc-header .material-icons {
    color: #000;
}

/**** Mobile layout ****/
@media (max-width: 900px) {
    .sscc-title {
        display: none !important;
    }
}

.sscc-header .material-icons {
    color: #8bc34a !important;
}

::-moz-selection {
    background-color: #6ab344;
    color: #fff;
}

::selection {
    background-color: #6ab344;
    color: #fff;
}

/* +-------------------------------------------------------------------------------------+ *
 * | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx MDL xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | *
 * +-------------------------------------------------------------------------------------+ */

.mdl-textfield--expandable .mdl-button--icon { top: 19px }
.sscc-search-box .mdl-textfield__input {
    color      : #ff9933;
    font-weight: bold;
}

.mdl-layout__drawer span.mdl-layout-title {
    background      : #1a0d00;
    color           : #8bc34a;
    text-decoration : none;
    font-weight     : bold;
}

.maximize_mdl_textfield {
    width: 100%;
}

.md17_icon {
   position: absolute;
   right: 0;
   top: 30px;
}

.material-icons.md-17 { font-size: 17px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-19 { font-size: 19px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-50 { font-size: 50px; }

.mdl-tabs {
    display: block;
    width  : 100%
}

.mdl-tabs__tab-bar {
    display                 : -webkit-flex;
    display                 : -ms-flexbox;
    display                 : flex;
    flex-direction          : row;
    justify-content         : flex-start !important;
    align-content           : space-between;
    align-items             : flex-start;
    height                  : 48px;
    padding                 : 0;
    margin                  : 0;
    border-bottom           : 0px solid #e0e0e0;
    -webkit-align-items     : flex-start;
    -ms-flex-align          : start;
    -webkit-align-content   : space-between;
    -ms-flex-line-pack      : justify;
    -webkit-flex-direction  : row;
    -ms-flex-direction      : row;
    -webkit-justify-content : center;
    -ms-flex-pack           : center;
}

.mdl-tabs__tab {
    margin         : 0;
    border         : none;
    padding        : 0 20px;
    float          : left;
    position       : relative;
    display        : block;
    text-decoration: none;
    height         : 38px;
    line-height    : 38px;
    text-align     : center;
    text-transform : uppercase;
    color          : rgba(0, 0, 0, .54);
    overflow       : hidden;
    font-size      : 13px;
    font-weight    : bold;
    margin-top     : 0px;
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
    color: rgba(0, 0, 0, .87)
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    height           : 2px;
    width            : 100%;
    display          : block;
    content          : " ";
    bottom           : 0;
    left             : 0;
    position         : absolute;
    background       : #3f51b5;
    animation        : border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards;
    transition       : all 1s cubic-bezier(.4, 0, 1, 1)
    -webkit-animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards;
}

.mdl-tabs__tab .mdl-tabs__ripple-container {
    display : block;
    position: absolute;
    height  : 100%;
    width   : 100%;
    left    : 0;
    top     : 0;
    z-index : 1;
    overflow: hidden
}

.mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
    background: #3f51b5
}

.mdl-tabs__panel {
    display: block
}

.mdl-tabs.is-upgraded .mdl-tabs__panel {
    display: none
}

.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active {
    display: block
}

.mdl-spinner {
    width : 56px;
    height: 56px;
}

.mdl-spinner__circle {
    border-width: 3px;
}

/* +---------------------------------------------------------+ */
/* | (DO NOT REMOVE) This line will fix double-border lines  | */
/* +---------------------------------------------------------+ */
.mdl-textfield__label{
   margin-bottom: 0px;
   color        : #ff6600;
   font-weight  : bold;
}

.mdl-textfield {
    margin: -13px 0;
}

.mdlext-selectfield {
    font-size: 13px;
    margin   : -13px 0;
}

.mdlext-selectfield__select {
    font-size: 13px;
}

/* This will change MDL TextField */
.mdl-textfield__input {
    /* Remove ugly rounded corner */
    font-size            : 15px;
    border-radius        : 0;
    box-shadow           : none;
    -webkit-border-radius: 0;
    -webkit-box-shadow   : none;
}

.mdlext-selectfield__input {
    /* Remove ugly rounded corner */
    font-size            : 13px;
    border-radius        : 0;
    box-shadow           : none;
    -webkit-border-radius: 0;
    -webkit-box-shadow   : none;
}

.sscc-mdl-email-textfield {
    width    : 400px;
    max-width: 100%;
    font-size: 13px;
    color    : #ff6600;
}

.mdl-textfield {
    input[type="text"] {
        padding  : 0;
        font-size: 13px;
        color    : #ff6600;
    }
}

.mdl-textfield__label {
    font-size  : 15px;
    font-weight: bold;
    color      : #ff6600;
}

.mdlext-selectfield__label {
    font-size    : 13px;
    margin-bottom: 0px;
    color        : #ff6600;
    font-weight  : bold;
}

/* This will change MDL TextField Floating Label */
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    color      : #3f51b5;
    font-size  : 14px;
    font-weight: bold;
    top        : 4px;
    visibility : visible
}

/* +-------------------------------------------------------------------------------------+ *
 * | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx FLEX-ITEM xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | *
 * +-------------------------------------------------------------------------------------+ */
.flex-container {
    display               : -webkit-flex;
    display               : flex;
    flex-direction        : row;
    align-items           : top;
    flex-wrap             : wrap;
    -webkit-align-items   : top;
    -webkit-flex-direction: row;
}

.flex-item {
    display     : flex;
    align-items : top;
    /*height: 47px;*/
    height      : 100%;
    width       : 97%;
    border-left : 5px solid #F93A7F;
    margin-top  : 25px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub1 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #F9C53A;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub2 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #28B4D8;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub3 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #9249FA;
    /*border     : 1px solid #9249FA;*/
    margin      : 5px;
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub4 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #FAE449;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    margin-left : 5px;
    padding-left: 10px;
}


.flex-item-sub5 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #F9C53A;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub6 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #28B4D8;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub7 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #9249FA;
    /*border     : 1px solid #9249FA;*/
    margin      : 5px;
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub8 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #FAE449;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    margin-left : 5px;
    padding-left: 10px;
}

.flex-item-sub9 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #F9C53A;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub10 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #28B4D8;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub11 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #9249FA;
    /*border     : 1px solid #9249FA;*/
    margin      : 5px;
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub12 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #FAE449;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    margin-left : 5px;
    padding-left: 10px;
}

.flex-item-sub13 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #FAE449;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    margin-left : 5px;
    padding-left: 10px;
}

.flex-item-sub14 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #F9C53A;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub15 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #28B4D8;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub16 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #9249FA;
    /*border     : 1px solid #9249FA;*/
    margin      : 5px;
    margin-top  : 5px;
    margin-left : 5px;
    padding     : 5px;
    padding-left: 10px;
}

.flex-item-sub17 {
    display     : flex;
    align-items : top;
    height      : 100%;
    width       : 100%;
    border-left : 5px solid #FAE449;
    /*border     : 1px solid #9249FA;*/
    margin-top  : 5px;
    margin-left : 5px;
    margin-left : 5px;
    padding-left: 10px;
}

.flex-item img {
    flex-grow  : 0;
    flex-shrink: 0;
}

/* +-------------------------------------------------------------------------------------+ *
 * | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CURVED-TOP_HEADINGS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | *
 * +-------------------------------------------------------------------------------------+ */
.top_heading_for_main_page {
    background   : red;
    margin       : 0;
    color        : white;
    border-bottom: 5px solid #F9C53A;
    height       : 10%;
    text-align   : center;
    opacity      : 0.5;
    clip-path    : polygon(0 0,300% -150%,88% 90%,0 70%);
}

.top_heading_for_settings_popup {
    background   : #F9DE25;
    margin       : 0;
    color        : white;
    border-bottom: 5px solid #F9C53A;
    height       : 10%;
    text-align   : center;
    /*opacity      : 0.5;*/
    clip-path    : polygon(0 0,300% -150%,88% 90%,0 70%);
}

.top_heading_for_view_member_data {
    background   : #73DAF9;
    margin       : 0;
    color        : white;
    border-bottom: 5px solid #F9C53A;
    height       : 10%;
    text-align   : center;
    /*opacity      : 0.5;*/
    clip-path    : polygon(0 0,300% -150%,88% 90%,0 70%);
}

/* +-------------------------------------------------------------------------------------+ *
 * | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx NAV BAR xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | *
 * +-------------------------------------------------------------------------------------+ */

.sscc-navbar-icon {
    width           : 36px !important;
    height          : 36px !important;
    line-height     : 12px !important;
    text-align      : center !important;
    font-size       : 0.95rem !important;
    font-family     : sans-serif;
    text-decoration : none !important;
    font-weight     : bold !important;
    margin-right    : 20px !important;
    display: block;
}

a { outline: 0 !important;; }

html, body {width: auto!important; overflow-x: hidden!important}