/* images by Freepik */

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    overflow-x: hidden;
}
body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    overflow-x: hidden;
    position: relative;
    background: url(/static/images/bg2.jpg);
    width: 100%;
    margin: 0;
    padding: 0;
    background-size: cover;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
    text-align: center;
}

img {
    width: 10em;
    height: auto;
}

.navbar {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: background-color 0.3s ease;
}

.navbar.scrolled {
    background-color: #180d31;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-nav .nav-link {
    color: #180d31;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #180d31;
    font-weight: bold;
}

.navbar-toggler {

    border: none;
    padding: 10px;
    cursor: pointer;
}
  
.navbar-toggler-icon {
    font-size: 24px;
    color: #fff;
}

#back-to-top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Distance from bottom */
    right: 20px; /* Distance from right */
    z-index: 1000; /* Ensure on top of other elements */
    background-color: #333; /* Background color */
    color: #fff; /* Text color */
    padding: 10px 15px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor style */
}

#back-to-top:hover {
background-color: #180d31; /* Hover background color */
}

.mola-bg {
    background: url(/static/images/bg1.png);
    width: 100%;
    background-size:contain;
    background-repeat: no-repeat;
    margin: 0;
    padding-top: 25em;
    padding-bottom: 10em;
    padding-left: 60em;
}

.active {
    background-color: #180d3149; 
    color: #fff;
    padding: 2px;
    border-radius: 5px;
}

.active:hover {
    background-color: #342e4049; 
}

ul {
    list-style: circle;
}

.btn {
    text-align: center;
}

.row .cards{
    width: 100%; 
    padding-top: 5em;
    padding-bottom: 30em;
}

.hero {
    padding-top: 2em;
    padding-bottom: 4em;
    margin-left: 3em;
    margin-right: 3em;
}

.hero-text {
    justify-content: right;
}

.about {
    padding-top: 8em;
    padding-left: 2em;
    padding-right: 2em;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}



.title-header {
    padding-bottom: 2em;
}

#services {
    padding-bottom: 28em;
}

.features {
    text-align: center;
}

.features-icon {
    line-height: 1.2;
    font-size: 42px;
    color: #111;
    margin-top: 40px;
}

.features-item {
    position: relative;
    padding-left: 55px;
    margin: 65px 0 0 0;
}

.features-title {
    font-size: 13px;
    margin: 0 0 10px;
}


.form-group {
    background: transparent;
}

.about-title {
    padding-top: 2em;
    padding-bottom: 2em;
}

.about-text-leadership {
    padding-top: 12em;
}

.about-text {
    padding-top: 6em;
}

.about-text-values {
    padding-top: 3em;
}

.about-text-third {
    padding-top: 2em;
}
.about-text-last {
    padding-top: 2em;
}

.services-text {
    padding-top: 4em;
    padding-left: 10em;
}
.services-photo {
    padding-top: 4em;
}

.img-fluid {
    width: 30em;
    border-radius: 20px;
}

.section-top-border {
    padding: 50px 0;
    border-top: 1px dotted #eee;
}

.dash {
    padding-bottom: 9em;
}

tr:nth-child(even) {
    background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
    background-color: #96d4d466;
}

tr:hover {background-color: #D6EEEE;}

th, td {
    padding: 10px;
}

.paginator {
    padding-top: 2em;
    padding-left: 1em;
}

.pagi {
    padding-right: 1em;
}

.search {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 14em;
}

.searchbtn {
    padding-top: 1em;
    padding-bottom: 4em;
}


.bk {
    background-color: #4cb4c75d;
}

.candidates {
    padding-top: 4em;
    padding-bottom: 4em;
}

.preview {
    padding-top: 4em;
}

.name {
    color: #08155bdc;
}

#total-candidates {
    background-color: #4cb4c787;
    color: #000;
}

#candi {
    background-color: #4cb4c799;
    color: #000;
}

.status {
    padding-bottom: 5em;
}

.delete {
    padding-top: 8em;
    padding-bottom: 20em;
}

.small {
    color: blue;
}

.create {
    padding-top: 3em;
    padding-bottom: 9em;
}

.hello-msg {
    font-size: 18px;
    color:#2f0691;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 8px;

}

.success {
    padding-top: 6em;
    padding-bottom: 2em;
}

.success-2 {
    padding-top: 2em;
    padding-bottom: 8em;
    margin-bottom: 0;
}

.details {
    padding-top: 5em;
    padding-bottom: 15em;
}

.logout {
    margin-right: 10px;
}

.erp {
    padding-top: 10em;
}
.erp1 {
    padding-top: 5em;
}
.erp1 img {

    width: 60%;

    border-radius: 20px;
}

.footer {
    background: url(/static/images/bgfooter.png);
    color: #fff;
    width: 100%;
    background-size:cover;
    background-repeat: no-repeat;
    padding-top: 2em;
    padding-bottom: 2em;
}

.footer-container {
    padding-left: 2em;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer li {
    margin-bottom: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer a:hover {
    color: #ccc;
}


@media only screen and (max-width: 480px) {
    .photo {
        width: 100%;
        padding-bottom: 10px;
    }
    .about {
        width: 100%;
        padding-top: 8px;
        padding-bottom: 5px;
    }

    .about-title{
        padding-bottom: 0px;
        padding-top: 0px;

    }

    .about-text {
        padding-top: 5px;
    }

    .img-fluid {
        width: 100%;
    }
    .about-text-leadership {
        width: 100%;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .erp {
        padding-top: 2em;
    }

    .erp1 img {
        padding-top: 1em;
        width: 100%;
        padding-left: 1em;
    }
    
    .logout {
        text-align: center;
        width: 100px; 
        height: 40px; 
    }

    .hello-msg {
        margin: 0;
        padding-bottom: 10px;
    }
    

    .services-text {
        padding-top: 4em;
        padding-left: 1em;
    }
    .card {

        height: auto; 
        padding-bottom: 1em;
        padding-top: 1em;
    }
    .footer .container {
        width: 100%;
        text-align: center;
    }
    .copyright {
        padding-bottom: 1em;
    }
    .mola-bg {
        background: url(/static/images/bg1.png);
        width: 100%;
        background-size:contain;
        background-repeat: no-repeat;
        margin: 0;
        padding-top: 5em;
        padding-bottom: 2em;
        padding-left: 2em;
    }
    .hero {
        width: 100%;
        margin-left: 1em;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
        padding-bottom: 1em;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
    td:nth-of-type(1):before { content: "View Details"; }
    td:nth-of-type(2):before { content: "Name"; }
	td:nth-of-type(3):before { content: "Surname"; }
	td:nth-of-type(4):before { content: "Email"; }
	td:nth-of-type(5):before { content: "Phone"; }
	td:nth-of-type(6):before { content: "Date Added"; }

}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}