﻿.no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; }
@media only screen and (max-width: 767px) {
    .no-gutter-mobile  > [class*='col-'] { padding-right: 0; padding-left: 0; }
}
@media only screen and (min-width: 768px) {
.no-gutter-desktop  > [class*='col-'] { padding-right: 0; padding-left: 0; }
}
#trainingCatalogue {
    margin-bottom: 20px;
}
#trainingCatalogue table { table-layout: auto; background-color: #ffffff; width: 100%; margin: 0;}
#trainingCatalogue .thead h4 { margin: 0;}
#trainingCatalogue .thead { 
    padding: 10px;
    border-top:1px solid rgb(236, 236, 236);
    border-bottom:1px solid rgb(236, 236, 236);
    background-color: rgba(248, 248, 253, 1);
}
#trainingCatalogue table thead tr td { text-align: left; }
#trainingCatalogue table tbody tr:last-child { border-bottom: none; }
#trainingCatalogue table tr td { padding: 10px; border-right: 1px solid #e9eaeb; }
#trainingCatalogue table tr th, 
#trainingCatalogue table tr td {
    text-align: left;
}
#trainingCatalogue table tr .title.heading { text-align: center; }
#trainingCatalogue table tr td:last-child { border-right: none;}
#trainingCatalogue table tr td.logo { padding: 0!important; }
#trainingCatalogue table tr td.logo img {max-width: 100%; height: auto;}

#trainingCatalogue table tr td .name { display: block; font-weight: 700; margin-bottom: 5px; color: #4d98ce;}
#trainingCatalogue table tr td .name:hover {cursor:pointer;}
#trainingCatalogue table tr td .time { display: block; margin-bottom: 5px; }
#trainingCatalogue table tr td .desc {  font-size: 14px; }
#trainingCatalogue table tr td .month,
#trainingCatalogue table tr td .num { display: block; }
#trainingCatalogue table tr td .num { font-size: 24px; }

#trainingCatalogue table tr td.title {border-right: none;}
#trainingCatalogue table tr td.register { font-size: 60px; text-align: right; }
#trainingCatalogue table tr .date,
#trainingCatalogue table tr .duration,
#trainingCatalogue table tr .level { text-align: center; }
#trainingCatalogue table thead td.date,
#trainingCatalogue table thead td.duration {
    border-right: none !important;
}
#trainingCatalogue table tr .icon { 
    border-right: none;
    text-align: center;
    width: 48px;
}


/* filterBy*/
.filterByContainer {
    position: relative;
    background-color: #ffffff;
    height: auto;
    float: left;
    width: 100%;
    border-bottom:1px solid rgb(236, 236, 236);
}

.filterBy a {
    float: left;
    font-size: 14px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.filterBy .filterDropdown {
    float: left;
}
.filterBy:last-child .filterDropdown .dropbtn {
    border-right:0;
}
.filterBy .search {
    padding-top: 8px;
    padding-left: 25px;
    padding: 10px;
    text-align: center;
}
.filterBy .search .search-input {
    display: block;
    width: 75%;
    margin: 0 auto;
    position: relative;
}

.filterBy .search .search-input input { 
    font-size: 14px;
    border-color: #cccccc;
    border-radius: 41px;
    padding: 5px 25px 5px 12px;
    border-style: solid;
    border-width: 1px;
    position: relative;
    width: 100%; 
} 
.filterBy .search .search-input input:focus { outline:none; } 
.filterBy .search .search-input:after {
    content: "\f002";
    font-family: fontAwesome;
    position: absolute;
    right: 9px;
    top: 7px;
}

.filterBy .filterDropdown .dropbtn {
    overflow:visible;
    display: block;
    position: relative;
    font-size: 11px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px transparent solid;
    outline: none;
    color: #39454d;
    padding: 10px;
    background-color: inherit;
    width: 100%;
    border-right: 1px #e9eaeb solid;
    background-color: white;
}
.filterBy .dropbtn .filteredQty {
    display: none;
    position: absolute;
    height: 20px;
    width: 20px;
    color: #ffffff;
    background-color: #4d98ce;
    right: -5px;
    text-align: center;
    border-radius: 50%;
    padding-top: 2px;
    top: -5px;
    z-index: 99;
    font-size: 11px;
}
.filterBy .filterDropdown .dropbtn:after {
    font-family: FontAwesome;
    content: "\f0d7";
    margin-left: 10px;
    display: inline-block;
    width: 10px; 
}
.filterBy .filterDropdown .dropbtn.hover:after {
    content: "\f00d";
}

.filterBy .filterDropdown .dropbtn.hover {
    border-bottom: 1px transparent solid;
}

.filterBy .filterDropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    z-index: 1;
    left: 0;
    margin-right: -9px;
    border-top: 1px solid #e9eaeb;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.12);
}
.filterBy .filterDropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: #e0dede 1px solid;
}

.filterBy .filterDropdown-content a:hover {
    background-color: #ddd;
}

.filterBy ul { 
    list-style-type: none; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-margin-start: 0; 
    -webkit-margin-end: 0; 
    -webkit-padding-start: 0; 
    background-color: #fff; 
    padding: 5px 10px;
    margin-bottom: 0; 
}
.filterBy ul li { margin: 5px 0 0 0; padding-bottom: 5px; border-bottom: 1px solid #ececec; }

.filterBy ul li:first-child { margin: 0; }
.filterBy ul li:last-child { border: 0; padding-bottom: 0; }

.filterBy ul li label { display: block; }
.filterBy ul li label.checkbox { font-size: 12px; }
.filterBy ul li label.checkbox span.check .fa {
    position: absolute;
    top: 4px;
    left: 1px;
    color: #fff;
    font-size: 12px;
}

@media only screen and (min-width: 480px) {   
    .filterBy .filterDropdown-content {
        width: auto;
        min-width: 168px;
        z-index: 1;
        left: auto;
        border: 1px solid #e9eaeb;
        margin-left: -1px;
    }
    .filterBy .filterDropdown .dropbtn {
        font-size: 14px;
    }
    .filterBy ul li label.checkbox {
        font-size: 14px;

    }

}

@media only screen and (min-width: 992px) {
    
}
@media only screen and (min-width: 1200px) {
    
}