/* version 1.0.1 */

body {
margin: 0;
padding: 0;

background: url("https://i.imgur.com/5rZ91h5.gif");
/*background-color: #1A1A1A;*/

line-height: 1.5;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;;
}
h1, h2, h3, h4, h5, h6, h7, h8 {
color: #B5E853;
line-height: 1.5;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;;
text-align: left;
margin: 0 0 20px;
}
p {
color: #FFFFFF;
padding-left: 30px;
font-size: 15px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;;
}
.hr {
border: 0;
border-top: 2px dashed #B5E853;
}
li {
color: #FFFFFF;
font-size: 15px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;;
}
.button {
text-decoration: none;
text-align: left;
background-color: #121212;
color: white;
border: 2px solid #000000;
border-radius: 15px;
padding: 10px 14px;
font-size: 14px;
display: inline-block;
padding-left: 10px;
}
blockquote {
border-left-style: dotted;
border-left-width: 1px;
border-left-color: gray;
color: #8D8D8D;
padding: 20px;
}
td {
color: #FFFFFF;
border-spacing: 20px;
text-align: left;
padding: 8px;
}
th {
color: #FFFFFF;
border-bottom: 1px dashed #B5E853;
text-align: left;
padding: 8px;
}
dl {
color: #FFFFFF;
text-align: left;
padding: 5px;
}
dt {
color: #FFFFFF;
font-weight: bold;
}
.smallimg {
background-attachment: fixed;
background-position: left;
background-repeat: no-repeat;
background-size: cover;
width: 100px;
height: 100px;
}
.largeimg {
background-attachment: fixed;
background-position: left;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
max-height: 100%;
display: block;
}
.horizontalscroll {
background-color: #242424;
font-style: italic;
overflow: auto;
white-space: nowrap;
color: #FFFFFF;
padding: 10px;
}
ul {list-style: none;}
ul li::before {content: ">>  "; color: #B5E853;}
ol {display: table; margin-left: 0; margin-right: auto; list-style-position: inside;}
/*  font style  */
.bold {font-weight: bold;}
.ital {font-style: italic;}
.oblique {font-style: oblique;}
.overline {text-decoration: overline;}
.strickthrough {text-decoration: line-through;}
.underline {text-decoration: underline;}
.keyword {color: #E867E8; border: 1px solid gray; background-color: black; padding: 2px 2px; }
.linkk {color: #6CBDEC; text-decoration: underline;}
.w3-black,.w3-hover-black:hover{color:#BAB9B9!important;background-color:#000!important}
/* margin for button */
.leftmar {margin-left: 30px;}
/* font colour*/
.gray {color: #8D8D8D;}
.green {color: #B5E853;}
/* padding */
.topp {padding-top: 10px;}
.left {padding-left: 30px}
.mediumsize {font-size: 19px;}


.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
.login-header {
background: #008500;
padding: 20px;
font-size: 35px;
font-weight: bold;
text-align: center;
color:  #B5E853;
}
.login-container {
background: #3D3D3D;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: dashed;
border-color: #B5E853;
padding: 16px;
outline: 0;
/*font-family: inherit;
*/font-size: 0.95em;
}
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #006200;
color: black;
}
/* Text fields' focus effect */
.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #008500;
border-color: transparent;
color:  #B5FF53;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #006200;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #006200;
opacity: 1; /* Firefox */
}
.linkk {color: #6CBDEC;}


/*Dropdown */

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: black;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 30px;
  right: 20px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 20px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: black;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/*Dropdown End*/

.button-link {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: -webkit-linear-gradient(right, #9f01ea, #56d8e4);
    color: #FFF;
    padding: 10px 12px;
    text-decoration: none;


}

.additional-info a {
    color: red;
    text-decoration: none;
}

.additional-info a:hover {
    text-decoration: underline;
}


/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/*alert color*/
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
        }

        .success {
            color: #155724;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .warning {
            color: #856404;
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
        }

        .error {
            color: #721c24;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
        }

        .info {
            color: #0c5460;
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
        }

        .primary {
            color: #004085;
            background-color: #cce5ff;
            border: 1px solid #b8daff;
        }

        .secondary {
            color: #383d41;
            background-color: #e2e3e5;
            border: 1px solid #d6d8db;
        }

        .dark {
            color: #fff;
            background-color: #343a40;
            border: 1px solid #6c757d;
        }

.username-notification {
    background-color: #222;
    color: #fff;
    padding: 10px;
    margin-top: 20px;
    border: 2px solid green;
    border-radius: 5px;
}

.hidden {
    opacity: 0;
}

.notification-red {
    background-color: #222;
    color: #fff;
    padding: 10px;
    margin-top: 20px;
    border: 2px solid red;
    border-radius: 5px;
}