/*Sticky menu*/
.affix {
    position: fixed;
    display: block;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #99cc00;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    /* boropacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */der: 2px solid black; 
    /* opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.affix + .top-header {
    padding-top: 200px;
}

.clear:after{
    content: '';
    display: block;
    clear: both;
}


.affix .dropdown-content{
    display: block;
    z-index: 100;
}

.affix a {
    /* color: white !important; */
    padding: 10px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
} 

.affix-top a {
    padding: 25px !important;
}

@keyframes navigation {
    10% { background-color: #bfee00; color: white; }
    75% { background-color: #efdf00; color: yellow; }
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #bfee00;
    color: white;
    animation-name: navigation;
    animation-duration: 4s;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
    z-index: 1000;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*
*Dashboard side navigation
*/
/* Fixed sidenav, full height */
.sidenav {
  /*height: 100%; 
  
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;  
  */
  width: 200px;
  background-color: #a1a1a1;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn, input[type=button] {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  display: block;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  outline: none;

}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Add an active class to the active dropdown button */
.active {
    /*
  background-color: green;
  color: white; */
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #a1a1a1;
  padding-left: 16px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* 
* Footer 
*/
.button-up{ position: fixed; right: 0px; bottom: 0px; }

/* ObajeSoft Layout */

input[type="file"],
input[type="select"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
    width: 100%;
    padding: 12px 20px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

textarea {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    font-size: 12px;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    float: left;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: white;
    border: 1px solid #4CAF50;
    color: #4CAF50;
}

/*Start style the Checkbox*/
/* Customize the label (the container) */
.arktech-container {
     margin: 10px;
    padding: 10px;
}



/*Table*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 4px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/*Start Tab Styling*/
/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.dashboard-card{
    width: 20%;
    height: 200px;
    color: yellowgreen;
    background-color: green;
}

.dashboard-card-counter{
    top: 2px;
    right: 2px;
}

/*Advert Body styling */
.arktech-column {
    float: left;
}

 .arktech-left-side-navigation{
    width: 20%;
    padding: 20px;
}
 .arktech-main-body{
    width: 50%;
    padding: 10px;
    margin: 0px 20px;
    background-color: #f6f6f6;
}

.arktech-right-side{
    width: 20%;
    padding: 5px;
}

/* Clear floats after the columns */
.arktech-row{
    background-color: #FFFFFF;
    width: 100%;
}
.arktech-row:after, .sub-linkx:after {
    content: "";
    display: table;
    clear: both;
}

.arktech-row button {
    padding: 10px;
    color: #e0ebeb;
    background-color: #008000;
    width: 100%;
}

.arktech-row button:hover {
    padding: 10px;
    color: #008000;
    background-color: #e0ebeb;
    width: 100%;
}

.arktech-Quarter{
    padding: 5px;
    width: 30%;
}

.arktech-third{
    padding: 5px;
    width: 31%;
    float: left;
}

.arktech-half{
    padding: 5px;
    width: 48%;
    float: left;
}

.arktech-3Quarter{
    padding: 5px;
    width: 75%;
}

.arktech-full{
    padding: 5px;
    width: 98%;
}

.arktech-padding-updown{
    padding: 20px;
}

.sub-linkx{
    float: left;
    padding: 10px;
}

.sub-linkx a{
    text-decoration: none;
    background-color: #555;
    color: #fff;
    padding: 10px;
}

.sub-linkx a:hover{
    text-decoration: none;
    background-color: #fff;
    color: #555;
    border: 1px solid #555;
}

div.arktech-dashboard-statuses {
    position: relative;
    width: 120px;
    height: 70px;
    border: 2px solid #e0e0d1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    background-color: #e0e0d1;
    color: #fff;
    float: left;
}

div.arktech-dashboard-statuses-counter {
    position: absolute;
    font-size: 32px;
    top: 2px;
    right: 5px;
}

div.arktech-dashboard-statuses-icon {
    position: absolute;
    top: 2px;
    margin: auto;
    width: 80%;
    font-size: 56px;
}

div.arktech-dashboard-statuses:hover{
    background-color: #fff;
    color: #555;
}

/*Colors*/
.obajesoft-grey{
    color: #eee;
}

.arktech_SignIn >  input:focus[type=text], input:focus[type=tel], input:focus[type=email], input:focus[type=password]{
    background: #cccccc;
}

.arktech_SignIn >  input[type=button], input[type=submit], input[type=reset]{
    background-color: #4CAF50;
    color: white;
    width: 100%;
    padding: 8px 16px;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.button {
    width: 100%;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button:hover, 
.cancelbtn:hover{
    width: 100%;
    background-color: #FFFFFF; /* White */
    border: none;
    color: green;
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: 1px solid #008000;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    display: inline-block;
    background-color: red;
}

span.psw {
    float: right;
    padding-top: 16px;
}
.copyright{
    color: white;
    margin: auto;
    max-width: 350px;
}
.RememberMe{
    margin: 5px 0px;
    padding: 30px;
    color: #4CAF50;
}
.center {
    margin: auto;
    width: min-content;
    padding: 10px;
}

.ark-dashboard-header{
    margin: 10px;
    padding: 10px;
    background-color: #a1a1a1;
}

.ark-dashboard-header .logo{
    margin-right: 10px;
}

.ark-dashboard-header .navigation{
    margin-left: 10px;
}

.ark-dashboard-header a{
    float: left;
    overflow: hidden;
    padding: 10px;
}

.ark-dashboard-click{
    float: left;
    overflow: hidden;
}

.ark-dashboard-click-text{
    font-size: 12px;
}

.ark-dashboard-click-icon{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    font-size: 24px;
}
.ark-dashboard-click a{
    text-decoration: none;
}

.arktech-login{
    max-width: 350px; 
    opacity: red; 
    margin: auto; 
    margin-top: 10%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 30px;
}

div.arktech-request-detail .title{
    font-size: 40px;
    color: #a94442;
    font-weight: bold;
    padding: 0px; 
    margin: 20px, 0px, 0px;
}

div.arktech-request-detail p{
    font-size: 24px;
    padding: 20px, 0px, 0px;
}

div.arktech-request-detail .request-detail-view-label{
    margin: 0px;
    padding: 0px;
    font-style: bold;
    font-size: 12;
    color: blue;
}

div.arktech-request-detail .request-detail-view-data{
    margin: 0px;
     padding: 0px;
    font-size: 10;
}

div.arktech-request-detail > input[type=button]{
    text-decoration: none;
    padding: 8px 12px;
    margin: 0px 5px;
    border-radius: 1px;
    background-color: #a94442;
    color: #FFFFFF;
}

div.arktech-request-detail > input[type=button]:hover{
    border: 1px solid #a94442;
    background-color: #FFFFFF;
    color: #a94442;
}

div.arktech-small-button > input[type=button]{
    text-decoration: none;
    padding: 8px 12px;
    margin: 0px 5px;
    border-radius: 1px;
    background-color: #a94442;
    color: #FFFFFF;
}

div.arktech-small-button > input[type=button]:hover{
    border: 1px solid #a94442;
    background-color: #FFFFFF;
    color: #a94442;
}

.arktech-request-table-row p{
    margin: 0px;
}

.arktech-request-table-row .arktech-row-date{
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    color: red;
}

/*Status Tracking Starts Here*/
ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3.5em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}
ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 2.2em;
    width: 2.2em;
    line-height: 2.2em;
    border: none;
    border-radius: 2.2em;
}
ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 2.2em;
    bottom: -1.2em;
}
/*Status Tracking Stops Here*/

@media screen and (max-width: 600px) {
    .arktech-Quarter,
    .arktech-third,
    .arktech-half,
    .arktech-3Quarter,
    .arktech-full, 
    .arktech-left-side-navigation,
    .arktech-column, 
    .arktech-right-side{
        width: 100%;
    }
}