@import url('https://fonts.googleapis.com/css?family=Quicksand');
* {
    box-sizing: border-box;
}
body {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    position: relative;
}

/* Full-width input fields */
input[type=text],input[type=date],input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /*color:#fff;*/
    color: #000;
}

select {
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /*color:#fff;*/
    color: #000;
}

input {
    background: transparent;
}
/* Set a style for all buttons */

.row .col button {
 /*background-color: #4CAF50;*/
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 4px;
}

button:hover {
    opacity: 0.8;
}



/* Extra styles for the cancel button */

.cancelbtn {

    width: auto;

    padding: 10px 18px;

    background-color: #f44336;

}



/* Center the image and position the close button */

.imgcontainer {

    text-align: center;

    margin: 24px 0 12px 0;

    position: relative;

    padding-top: 25px;

}



img.avatar {

    width: 20%;

    //border-radius: 50%;

}



.container {

    padding: 16px;

    position: relative;





}



.center {

    margin: 0;

    position: absolute;

    top: 50%;

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

}



span.psw {

    float: right;

    padding-top: 16px;

}



/* The Modal (background) */

.modal {
    display: block;
    /* Hidden by default */
    /*position: fixed;*//* Stay in place */
    z-index: 1;/* Sit on top */
    width: 100%; /* Full width */
    height: 100vh;    /* Full height */
}

.modal::-webkit-scrollbar {
    display: none;
}



/* Modal Content/Box */

.modal-content {

    /*background-color: rgba(254, 254, 254, .2);*/

    box-shadow: 0 0 20px 0px #0093e9;

    margin: 2% auto 2% auto;

    /* 5% from the top, 15% from the bottom and centered */

    //border: 1px solid #888;

    width: 50%;

    /* Could be more or less, depending on screen size */

    border-radius: 5px;

}



/* The Close Button (x) */

.close {

    position: absolute;

    right: 25px;

    top: 0;

    color: #000;

    font-size: 35px;

    font-weight: bold;

}



.close:hover,

.close:focus {

    color: red;

    cursor: pointer;

}



/* Add Zoom Animation */

.animate {

    -webkit-animation: animatezoom 0.6s;

    animation: animatezoom 0.6s

}

.particles-js-canvas-el{
    min-width: 100%;
    min-height: 99vh;
}



@-webkit-keyframes animatezoom {

    from {

        -webkit-transform: scale(0)

    }



    to {

        -webkit-transform: scale(1)

    }

}



@keyframes animatezoom {

    from {

        transform: scale(0)

    }



    to {

        transform: scale(1)

    }

}



/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 600px) {
    .modal-content{
        width: 90%;
    }
}

@media screen and (max-width: 300px) {

    span.psw {

        display: block;

        float: none;
    }

    .cancelbtn {

        width: 100%;

    }



    //For Particle JS

    canvas {

        display: block;

        vertical-align: bottom;

    }


}



.alert-warning {

    font-weight: bold;

    color: #ef2727;

}



.filterable {

    margin-top: 15px;

}



.filterable .panel-heading .pull-right {

    margin-top: -20px;

}



.filterable .filters input[disabled] {

    background-color: transparent;

    border: none;

    cursor: auto;

    box-shadow: none;

    padding: 0;

    height: auto;

    text-align: center;

}



.filterable .filters input[disabled]::-webkit-input-placeholder {

    color: #333;

}



.filterable .filters input[disabled]::-moz-placeholder {

    color: #333;

}



.filterable .filters input[disabled]:-ms-input-placeholder {

    color: #333;

}



a {

    text-decoration: none;

}



table tbody tr td a {

    font-size: 13px !important;

}



.table-wrapper {

    max-height: 500px;

    overflow-y: scroll;

}



th {

    position: sticky;

    top: 0;

    background: #ffffff !important;

}



table {

    min-width: max-content;

}



.row .col select {

    margin-bottom: 20px;

}