/* Add here all your CSS customizations */
.aylarkutu{border:solid 2px #e2e2e2;background:#faf3f3;box-shadow:rgba(0,0,0,0.4) 3px 4px 6px;}
    .aylarkutu .aybaslik{background:url('../images/aylar-bg2.jpg') no-repeat left center; text-indent:40px;color:#1ba1e2;padding:10px 0px;}
    .aylarkutu h3{padding:0px; margin:0px;}
    .aylarkutu p{padding-left:10px;font-size:larger;}

.aydetay-personel:hover {
    font-weight: bold;
    background-color:aliceblue;
}
    /*Messagebox */
    .divMessageBox {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100000;
    }
 .MessageIE {
     background-image: url(../img/bg.png);
 }
 .MessageBoxContainer {
     position: relative;
     top: 35%;
     color: white;
     position: relative;
     width: 100%;
     background-color:#232323;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 }
 .MessageBoxMiddle {
     position: relative;
     left: 20%;
     width: 50%;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     padding: 10px;
 }
 .MessageBoxMiddle .MsgTitle {
     font-size: 26px;
 }
 .MessageBoxMiddle .pText {
     font-style: 30px;
 }
 .MessageBoxContainer input {
     width: 50%;
     padding: 5px;
 }
 .MessageBoxContainer select {
     width: 50%;
     padding: 5px;
 }
 .MessageBoxButtonSection {
     width: 100%;
     height: 30px;
 }
 .MessageBoxButtonSection button {
     float: right;
     /*background-color: black;*/
     border-color: white;
     border-width: 2px;
     border-style: solid;
     color: white;
     margin-right: 5px;
     padding: 5px;
     padding-left: 15px;
     padding-right: 15px;
     font-family: arial;
 }
 .MessageBoxButtonSection button:hover {
     background-color: red;
 }
 /* End of MessageBox */
 .LoadingBoxContainer {
     position: relative;
     top: 20%;
     color: white;
     position: relative;
     width: 100%;
     background-color:#232323;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 }
 .LoadingBoxMiddle {
     position: relative;
     left: 20%;
     width: 50%;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     padding: 10px;
 }
 .LoadingBoxContainer .MsgTitle {
     font-size: 26px;
 }
 .LoadingBoxContainer .pText {
     font-style: 30px;
 }
 #LoadingPoints {
     position: absolute;
 }
 /* bigBoxes */
 .bigBox {
     position: fixed;
     right: 10px;
     bottom: 10px;
     background-color: #004d60;
     padding-left: 10px;
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 5px;
     width: 390px;
     height: 150px;
     color: white;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     z-index: 99999;
 }
 .bigBox span {
     font-size: 22px;
 }
 .bigBox p {
     font-size: 14px;
     margin-top: 2px;
 }
 #divMiniIcons {
     float: right;
     position: fixed;
     width: 430px;
     right: 10px;
     bottom: 180px;
     z-index: 9999;
 }
 .botClose {
     position: absolute;
     right: 10px;
     height: 15px;
     width: 15px;
     cursor: pointer;
 }
 #divMiniIcons .cajita {
     margin-left: 4px;
     margin-top: 5px;
     background-color: red;
     width: 30.5px;
     height: 30.5px;
     margin: 2 2px 0em;
     float: right;
     cursor: pointer;
     display: block;
 }
 .cajita img {
     width: 23px;
     height: 23px;
     padding-left: 3px;
     padding-top: 3px;
 }
 .bigBox .bigboxicon {
     width: 100px;
     margin: 0 0px 0em;
     float: left;
 }
 .bigBox .bigboxnumber {
     width: 220px;
     margin: 5 0px 0em;
     float: left;
     text-align: right;
     font-size: 25px;
     margin-top: 2px;
 }
 /* End of bigBoxes */
 /* SmallBox */
 #divSmallBoxes {
     position: fixed;
     right: 0;
     top: 0;
 }
 .SmallBox {
     position: absolute;
     right: 0px;
     top: 20px;
     padding-right: 30px;
     width: 420px;
     color: white;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     z-index: 9999;
 }
 .SmallBox:hover {
     box-shadow: 0px 0px 10px #888888;
     cursor: pointer;
 }
 .SmallBox .foto {
     width: 100px;
     height: 100px;
     margin: -10 -10px 2em;
     float: left;
 }
 .SmallBox .textoFull {
     width: 93%;
     float: left;
     padding-left: 20px;
 }
 .SmallBox .textoFoto {
     width: 65%;
     margin: 0 20px 0em;
     float: left;
 }
 .miniPic {
     position: absolute;
     bottom: 5px;
 }
 .miniIcono {
     height: 100%;
 }
 .SmallBox span {
     font-size: 22px;
     /*font-weight:bold;*/
 }
 .SmallBox p {
     font-size: 12px;
     margin-top: 2px;
 }
 /* End of SmallBox */
 #pageslide {
     /* These styles MUST be included. Do not change. */
     display: none;
     position: absolute;
     position: fixed;
     top: 0;
     height: 100%;
     z-index: 999999;
     /* Specify the width of your pageslide here */
     width: 305px;
     padding: 20px;
     /* These styles are optional, and describe how the pageslide will look */
     background-color: #004d60;
     color: #FFF;
     -webkit-box-shadow: inset 0 0 5px 5px #222;
     -moz-shadow: inset 0 0 0px 0px #222;
     box-shadow: inset 0 0 0px 0px #222;
 }
 .purehtml {
     color: white;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     font-size: 16px;
 }
 @font-face {
     font-family: Quattro;
     src: url('Quattrocento-Regular.otf');
 }
 /* Mobile Phones */
 @media screen and (max-width: 450px) and (max-width: 767px) {
     /* SmallBox Responsive */
     #divSmallBoxes {
         position: fixed;
         width: 90%;
         right: 0;
         top: 0;
     }
     .SmallBox {
         position: absolute;
         right: 0px;
         top: 20px;
         padding-right: 30px;
         width: 100%;
         color: white;
         font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
         z-index: 9999;
     }
     .SmallBox:hover {
         box-shadow: 0px 0px 10px #888888;
         cursor: pointer;
     }
     .SmallBox span {
         font-size: 16px;
         /*font-weight:bold;*/
     }
     .SmallBox p {
         font-size: 12px;
         margin-top: 2px;
     }
     .SmallBox .foto {
         width: 100px;
         height: 100px;
         margin: -10 -10px 2em;
         float: left;
     }
     .SmallBox .textoFull {
         width: 93%;
         float: left;
         padding-left: 20px;
     }
     .SmallBox .textoFoto {
         width: 55%;
         margin: 0 15px 0em;
         float: left;
     }
     /* End of SmallBox Responsive*/
     /* bigBoxes Responsive */
     .bigBox {
         position: fixed;
         right: 10px;
         bottom: 10px;
         background-color: #004d60;
         padding-left: 10px;
         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 5px;
         width: 88%;
         height: 150px;
         color: white;
         font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
         z-index: 99999;
     }
     .bigBox span {
         font-size: 19px;
     }
     .bigBox p {
         font-size: 12px;
         margin-top: 2px;
     }
     #divMiniIcons {
         float: right;
         position: fixed;
         right: 10px;
         bottom: 180px;
         z-index: 9999;
     }
     .botClose {
         position: absolute;
         right: 10px;
         height: 20px;
         width: 20px;
     }
     .bigBox .bigboxicon {
         width: 100px;
         margin: 0 0px 0em;
         float: left;
     }
     .bigBox .bigboxnumber {
         position: fixed;
         width: 220px;
         margin: 5 0px 0em;
         float: left;
         text-align: right;
         font-size: 25px;
         margin-top: 2px;
     }
     /* End of bigBoxes Responsive */
     /*Messagebox Responsive */
     .divMessageBox {
         width:100%;
         height:100%;
         position:fixed;
         top:0;
         left:0;
         background: rgba(0, 0, 0, 0.6);
         z-index:100000;
     }
     .MessageBoxContainer {
         position: relative;
         top: 25%;
         color: white;
         position: relative;
         width: 100%;
         background-color:#232323;
         font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     }
     .MessageBoxMiddle {
         position: relative;
         left: 10%;
         width: 80%;
         font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
         padding: 3px;
     }
     .MessageBoxMiddle .MsgTitle {
         font-size: 22px;
     }
     .MessageBoxMiddle .pText {
         font-style: 10px;
     }
     .MessageBoxContainer input {
         width: 50%;
         padding: 5px;
     }
     .MessageBoxContainer select {
         width: 50%;
         padding: 5px;
     }
     .MessageBoxButtonSection {
         width: 100%;
         height: 30px;
     }
     .MessageBoxButtonSection button {
         float: right;
         /*background-color: black;*/
         border-color: white;
         border-width: 2px;
         border-style: solid;
         color: white;
         margin-right: 5px;
         padding: 5px;
         padding-left: 15px;
         padding-right: 15px;
         font-family: arial;
     }
     .MessageBoxButtonSection button:hover {
         background-color: red;
     }
     /* End of MessageBox Responsive */
 }
 /* Animations */
 .animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.fast {
     -webkit-animation-duration: 0.4s;
     -moz-animation-duration: 0.4s;
     -ms-animation-duration: 0.4s;
     -o-animation-duration: 0.4s;
     animation-duration: 0.4s;
 }
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 @keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 .fadeIn {
     -webkit-animation-name: fadeIn;
     -moz-animation-name: fadeIn;
     -o-animation-name: fadeIn;
     animation-name: fadeIn;
 }
 @-webkit-keyframes fadeInRight {
     0% {
         opacity: 0;
         -webkit-transform: translateX(20px);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
     }
 }
 @-moz-keyframes fadeInRight {
     0% {
         opacity: 0;
         -moz-transform: translateX(20px);
     }
     100% {
         opacity: 1;
         -moz-transform: translateX(0);
     }
 }
 @-o-keyframes fadeInRight {
     0% {
         opacity: 0;
         -o-transform: translateX(20px);
     }
     100% {
         opacity: 1;
         -o-transform: translateX(0);
     }
 }
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         transform: translateX(20px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 .fadeInRight {
     -webkit-animation-name: fadeInRight;
     -moz-animation-name: fadeInRight;
     -o-animation-name: fadeInRight;
     animation-name: fadeInRight;
 }
 @-webkit-keyframes fadeInUp {
     0% {
         opacity: 0;
         -webkit-transform: translateY(20px);
     }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
     }
 }
 @-moz-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(20px);
     }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
     }
 }
 @-o-keyframes fadeInUp {
     0% {
         opacity: 0;
         -o-transform: translateY(20px);
     }
     100% {
         opacity: 1;
         -o-transform: translateY(0);
     }
 }
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 .fadeInUp {
     -webkit-animation-name: fadeInUp;
     -moz-animation-name: fadeInUp;
     -o-animation-name: fadeInUp;
     animation-name: fadeInUp;
 }
 @-webkit-keyframes fadeOut {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 @-moz-keyframes fadeOut {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 @-o-keyframes fadeOut {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 @keyframes fadeOut {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 .fadeOut {
     -webkit-animation-name: fadeOut;
     -moz-animation-name: fadeOut;
     -o-animation-name: fadeOut;
     animation-name: fadeOut;
 }
 @-webkit-keyframes fadeOutLeft {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);
     }
     100% {
         opacity: 0;
         -webkit-transform: translateX(-20px);
     }
 }
 @-moz-keyframes fadeOutLeft {
     0% {
         opacity: 1;
         -moz-transform: translateX(0);
     }
     100% {
         opacity: 0;
         -moz-transform: translateX(-20px);
     }
 }
 @-o-keyframes fadeOutLeft {
     0% {
         opacity: 1;
         -o-transform: translateX(0);
     }
     100% {
         opacity: 0;
         -o-transform: translateX(-20px);
     }
 }
 @keyframes fadeOutLeft {
     0% {
         opacity: 1;
         transform: translateX(0);
     }
     100% {
         opacity: 0;
         transform: translateX(-20px);
     }
 }
 .fadeOutLeft {
     -webkit-animation-name: fadeOutLeft;
     -moz-animation-name: fadeOutLeft;
     -o-animation-name: fadeOutLeft;
     animation-name: fadeOutLeft;
 }
 /* End of Animations 
    
    /* - */
 /* ====================================

Basic CSS for the demo

==================================== */
 body {
     /*background-color: black;*/
     /* padding-top: 20px; */
 }
 p {
     margin-top: 0px;
 }
 #MetroUnloadingButton {
     z-index: 1000000;
     position: fixed;
     top: 300px;
     left: 300px;
     background-color: #1ba1e2;
 }
 #MetroUnloadingButton:hover {
     background-color: #178ec7;
 }
 .BoxContainer {
     position:absolute;
     left: 25%;
     margin-left: -50px;
     width: 800px;
     font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 }
 .title {
     font-size: 40px;
     margin-bottom: 0px;
     display: block;
 }
 .subtitle {
     position: relative;
     top: -10px;
     font-size: 23px;
 }
 .pSpacer {
     height: 430px;
 }
 .inBoxTitle {
     padding-top: 15px;
     font-size: 23px;
     display: block;
     /*padding-left: 5px;*/
 }
 .contentBox {
     width: 380px;
     height: 380px;
     /*background-color: red;*/
     position: relative;
     left: -7px;
     margin: 0 8px 0em;
     float: left;
 }
 .red {
     color: #e51400;
 }
 .purp {
     color: #92278f;
 }
 .botPurp {
     background-color: #92278f;
 }
 .botPurp:hover {
     background-color: #721f70;
 }
 .teal {
     color: #1ba1e2;
 }
 .teal2 {
     color: #00aba9;
 }
 .white {
     color: white;
 }
 .green {
     color: #a4c400;
 }
 .orange {
     color: #fa6800;
 }
 .tealBox {
     background-color: #1ba1e2;
 }
 .purpBox {
     background-color: #92278f;
 }
 .greenBox {
     background-color: #a4c400;
 }
 .botGreen {
     background-color: #a4c400;
 }
 .botGreen:hover {
     background-color: #88a300;
 }
 .botTeal {
     background-color: #1ba1e2;
 }
 .botTeal:hover {
     background-color: #1588c0;
 }
 .botTeal2 {
     background-color: #00aba9;
 }
 .botTeal2:hover {
     background-color: #008c8a;
 }
 .botOrange {
     background-color: #fa6800;
 }
 .botOrange:hover {
     background-color: #e35e00;
 }
 .pink {
     color: #d80073;
 }
 .botPink {
     background-color: #d80073;
 }
 .botPink:hover {
     background-color: #bc0064;
 }
 .blue {
     color: #0050ef;
 }
 .botBlue {
     background-color: #0050ef;
 }
 .botBlue:hover {
     background-color: #0044ca;
 }
 .yellow {
     color: #d8c100;
 }
 .botYellow {
     background-color: #d8c100;
 }
 .botYellow:hover {
     background-color: #bba700;
 }
 button {
     border-color: white;
     border-width: 2px;
     border-style: solid;
     color: white;
     margin-right: 5px;
     padding: 5px;
     padding-left: 15px;
     padding-right: 15px;
 }
 @font-face {
     font-family: Quattro;
     src: url('Quattrocento-Regular.otf');
 }
 @media screen and (max-width: 450px) and (max-width: 767px) {
     .BoxContainer {
         position:absolute;
         /*margin-left: -50px;*/
         width: 88%;
         font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
     }
     .contentBox {
         width: 90%;
         height: 600px;
         /*background-color: red;*/
         /*position: relative;*/
         left: 0px;
         margin: 0 8px 0em;
         float: left;
     }
     .title {
         font-size: 32px;
         margin-bottom: 0px;
         display: block;
     }
     .subtitle {
         position: relative;
         top: -10px;
         font-size: 23px;
     }
     #MetroUnloadingButton {
         position: fixed;
         bottom: 100px;
         left: 20px;
     }
 }


.dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

    .dataTables_wrapper .dataTables_filter {
        display: flex;
        margin-left: auto
    }

        .dataTables_wrapper .dataTables_filter label {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 0;
            font-weight: 600
        }

    .dataTables_wrapper .dataTables_length label {
        font-weight: 700;
        margin-right: 1rem
    }

        .dataTables_wrapper .dataTables_length label select {
            margin: 0 5px
        }

input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
    outline-offset: inherit;
    outline: 0;
    border: 1px solid #ced4da;
    border-radius: 2px;
    height: 23px;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
    text-align: center;
    padding: 0;
    vertical-align: middle;
    line-height: normal;
    padding: 7px 10px
}

html .card-primary .card-header {
    background: #08c;
    border-color: #08c;
    padding: 5px 20px
}

html .card-primary .card-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700
}

form#SearchForm .container > .row > div > div > label {
    margin: 0;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

form#SearchForm .container > .row > div > div {
    align-items: center
}

.dataTables_wrapper .dataTables_length label {
    margin-bottom: 0
}

.dataTables_wrapper .dataTables_scroll {
    margin-top: 15px
}

.dt-button {
    border: 0;
    color: #fff;
    font-size: 18px
}

a.dt-button, button.dt-button, div.dt-button {
    font-size: 14px;
    background: red;
    color: #fff;
    box-shadow: none !important;
    border: 0 !important
}

.buttons-print {
    background: #231f20 !important
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
    background-color: #17191d;
    color: #fff;
    border: 1px solid #ccc;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th {
    padding: 0 10px
}

    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td img, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th {
        margin: 10px 0;
        box-shadow: 1px 1px 10px rgb(29 33 39 / 43%);
        background: #fff;
        border-radius: 6px;
        border: 0 !important
    }

    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td a i {
        font-style: normal;
        font-weight: 600;
        min-width: 40px
    }

.dataTables_scrollHeadInner {
    padding: 0 !important;
    margin: 0 !important
}

.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #428bca !important;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0;
    min-width: inherit;
    box-shadow: none !important
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
    margin-left: 10px
}

.dataTables_wrapper div.dataTables_info {
    font-weight: 600;
    margin-right: auto
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    box-shadow: none !important;
    background: #e31a1c !important;
    outline: 0 !important;
    border: 1px solid #e31a1c !important
}

.dt-button.buttons-print {
    background: #e31a1c !important;
    color: #fff
}

.dt-button.buttons-excel.buttons-html5 {
    background: #47a447;
    color: #fff
}

table.dataTable thead .sorting {
    width: auto !important;
    min-width: 130px !important;
    padding: 0 !important;
    text-align: center !important
}

table.dataTable thead td, table.dataTable thead th {
    min-width: 100px;
    box-sizing: border-box;
    max-width: 100px !important
}

table.dataTable tbody td, table.dataTable tbody th {
    box-sizing: border-box;
    min-width: inherit !important;
    white-space: inherit !important;
    max-width: 130px
}

.dataTables_wrapper .dataTables_scroll {
    /* overflow-x: scroll;*/
    width: 100%
}

::-webkit-scrollbar {
    width: 5px;
    height: 15px;
}

::-webkit-scrollbar-track {
    background: #edf2fe
}

::-webkit-scrollbar-thumb {
    background: #9daec4;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex
}

    .dataTables_wrapper .dataTables_paginate .ellipsis {
        float: left
    }

html .card-primary .card-header .btn-success {
    background: #ec407a;
    border: 0
}

.form-control:not(.form-control-lg) {
    padding: 10px 20px 10px 0px;
    border: none;
    border-bottom: 1px solid #ced4da;
    outline: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input {
    height: 40px;
    border-color: #ced4da
}

#btnCri {
    height: 40px;
    width: 100%;
}

html .card-primary .card-header .btn-success.excel {
    margin-left: auto;
    margin-right: 20px;
    background: #28bebd
}

.dataTables_scrollHeadInner {
    width: 100% !important
}

table.table-bordered.dataTable td, table.table-bordered.dataTable th {
}

table.table-bordered.dataTable td, table.table-bordered.dataTable th {
}


.content-wrapper {
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0.5rem;
}

.news-card {
    border: 0px solid aqua;
    margin: 0.5rem;
    position: relative;
    height: 12rem;
    overflow: hidden;
    border-radius: 0.5rem;
    flex: 1;
    min-width: 290px;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

@media (min-width: 900px) {

    .news-card {
        height: 20rem
    }
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);
    ;
    z-index: 0;
}

.news-card__card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*     background: rgba(255,0,0,.5); */
}

.news-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
}

.news-card__text-wrapper {
    position: absolute;
    bottom: 0rem;
    padding: 1rem;
    color: white;
    /*     background-color: rgba(0, 0, 0, 0.4); */
    transition: background-color 1.5s ease;
}

.news-card__title {
    transition: color 1s ease;
    margin-bottom: .5rem;
    font-size: 18pt;
}

.news-card__post-date {
    font-size: .7rem;
    margin-bottom: .5rem;
    color: #CCC;
}

.news-card__details-wrapper {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
}

@media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {
        max-height: 20rem;
        opacity: 1;
    }

    .news-card:hover .news-card__text-wrapper {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .news-card:hover .news-card__title {
        color: #FFF;
    }

    .news-card:hover .news-card__image {
        transform: scale(1.2);
        z-index: -1;
    }
}

.news-card__excerpt {
    font-weight: 300;
}

.news-card__read-more {
    background: black;
    color: #bbb;
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
    border: 1px solid #444;
    font-size: 0.8rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-decoration: none;
    width: 7rem;
    margin-left: auto;
    position: relative;
    z-index: 5;
}

    .news-card__read-more i {
        position: relative;
        left: 0.2rem;
        color: #888;
        transition: left 0.5s ease, color 0.6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .news-card__read-more:hover i {
        left: 0.5rem;
        color: yellow;
    }

/* Bootstrap 4 Card with background image */

.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.container-fostrap {
    display: table-cell;
    padding: 1em;
    text-align: center;
    vertical-align: middle;
}

.fostrap-logo {
    width: 100px;
    margin-bottom: 15px
}

h1.heading {
    color: #fff;
    font-size: 1.15em;
    font-weight: 900;
    margin: 0 0 0.5em;
    color: #505050;
}

@media (min-width: 450px) {
    h1.heading {
        font-size: 3.55em;
    }
}

@media (min-width: 760px) {
    h1.heading {
        font-size: 3.05em;
    }
}

@media (min-width: 900px) {
    h1.heading {
        font-size: 3.25em;
        margin: 0 0 0.3em;
    }
}

.card {
    display: block;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    transition: box-shadow .25s;
}

    .card:hover {
        box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

.img-card {
    width: 100%;
    height: 200px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display: block;
    overflow: hidden;
}

    .img-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: all .25s ease;
    }

.card-content {
    padding: 15px;
    text-align: left;
}

.card-title {
    margin-top: 0px;
    font-weight: 700;
    font-size: 1.65em;
}

    .card-title a {
        color: #000;
        text-decoration: none !important;
    }

.card-read-more {
    border-top: 1px solid #D4D4D4;
}

    .card-read-more a {
        color: #434242;
        text-decoration: none !important;
        padding: 10px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: .9em;
    }

        .card-read-more a:hover {
            color: #434242;
            text-decoration: none !important;
            padding: 10px;
            font-weight: 700;
            font-size: .9em;
        }