@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* this sets background color, removing all the margins and setting font for the entire document*/

html {
    --white: #fff;
    --dark-gray: #424242;
    --bright-gray: #eee;
    --gray: #8B8B8B;
    --blue: #1298D5;
    --light: #f8f9fa;
    --dark: #343a40;
    --red: #dc3545;
    --green: #28a745;
    height: 100%;
}

html{
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--white);
    font-family: 'Open Sans', 'sans-serif';
    color: var(--dark-gray);
    height: 100%;
}

p {
    margin-right: 1%;
    font-size: 0.9vw;
}

a { text-decoration: none; color: var(--gray); }
a:visited { text-decoration: none; color: var(--gray);}
a:hover {color:var(--dark-gray)}

/* This part of document set rules for the login page*/


/* setting rules for the box where the user enters the credentials*/

.login_comp {
    border-radius: 15px;
    width: 30%;
    height: 30%;
    margin: 0 auto;
    transition: box-shadow 200ms;
    text-align: center;
}

.logo{
    width: 100%;
    margin-top: 7%;
}

/*rules to centre this element inside the login component*/

.input_area {
    margin: 0 auto;
    padding: 1%;
    margin-top: 8%;
    width: 75%;
}

/*a little blank space around each input element*/

.input_line {
    padding: 15px;
}


/*rules when a user hovers over the input*/

input:hover {
    box-shadow: 2px 1.5px 5px var(--dark-gray);
    transition: box-shadow 200ms;
}


/*style for  the text input area*/

.input_field {
    border: 1px solid var(--dark-gray);
    background: linear-gradient(90deg, var(--white) 0%, var(--bright-gray) 100%);
    border-radius: 5px;
    height: 30px;
    width: 60%;
    transition: box-shadow 200ms;
    margin-top: 0.75%;
}


/*styling the submit button*/

.foss_button {
    background-color: var(--blue);
    border: 1px solid var(--dark-gray);
    border-radius: 5px;
    color: black;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 200ms;
    margin-top: 1%;
    font-size: 0.9vw;
}

button[type="submit"]:disabled {
    background-color: var(--gray);
    cursor: not-allowed;
} 

.alert {
    color: var(--red) !important;
}

/* This part of document set rules for the instructions page*/

#header {
    width: 75%;
    display: inline-flex;
    justify-content: space-between;
    margin-left: 8%;
    padding: 0.5%;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
 }

 .footer p{
    font-size: 0.7vw;
 }

#hor_menu {
    width: 75%;
    text-align: left;
    display: inline-flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 2%;
}

#headline_cont {
    width: 100%;
    text-align: left;
    display: inline-flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 2%;
}

.head_text{
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--dark-gray);
    margin-top: 0;
    margin-bottom: 0;
  }

.head_text h1{
    font-size: 2vw;
    border-bottom: 2px solid var(--blue);
    margin-top: 0;
    margin-bottom: 0;
}

.menu_item {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--gray);
    /*border: 2px solid transparent;*/
    cursor: pointer;
  }
  
.menu_item h4{
   border: 2px solid transparent;
   font-size: 1.75vw;
  }

.menu_item h4:hover{
    color: var(--dark-gray);
    border-bottom: 2px solid var(--blue);
   }

.current {
    color: var(--dark-gray);
    border-bottom: 2px solid var(--blue) !important;
}


#inst_container {
    width: 75%;
    display: inline-flex;
    justify-content: space-between;
    padding: 0.5%;
    margin-left: 8%;
}

#logo_cont{
    width: 20%;
    height: fit-content;
}

#side_panel {
    width: 20%;
    height: fit-content;
}

.vert_menu_item{
    color: var(--gray);
    font-size: 1.1vw;
    display: none;
    margin-top: 5%;
}

.vert_menu_item a.active {
    font-weight: 700;
    color:var(--dark-gray);
    }

.child{
    font-size: 0.9vw;
    display: none;
    margin-top: 2%;
    margin-left: 15%;
    color: var(--gray);
}

#read_window {
    width: 75%;
    height: 60vh;
    text-align: justify;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.code_area {
    display: block;
    background-color: var(--dark);
    color: var(--light);
    white-space: nowrap;
    font-family: monospace;
    border-radius: 5px;
    padding: 4px 4px;
    width: max-content;
}

#down_left{
    color: var(--gray);
    margin-left: 18%;
    font-size: 2vw !important;
}

.read_cont_item {
    display: none;
}

#success {
    color: var(--green);
}

.center_element {
    display: flex;
    justify-content: center;
}

.dropzone {
    margin: 2% !important; 
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgba(4, 4, 4, 0.262);
width: 100%; /* Full width */
height: 100vh; /* Full height */
overflow: auto; /* Enable scroll if needed */
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Modal Content/Box */
.modal-content {
background-color: #fefcfc;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
font-size: 2em;
height: 70vh;
}

.modal-content p {
color: black;
font-size: 0.5em;
padding-bottom: 0.5em;
}

.modal-content h2 {
    font-size: 1em;
    color: var(--blue);
}

.modal-content h3 {
    font-size: 0.6em;
    color: var(--blue);
}
.modal-content h4 {
    font-size: 0.5em;
    color: var(--dark-gray);
}

/* The Close Button */
.close-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

#oslBtn {
background: none !important;
  border: none;
  padding: 0 !important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: var(--gray);
  text-decoration: underline;
  cursor: pointer;
}

#oslBtn:hover {
color: var(--dark-gray);
}

#osl-title {
    margin: 0 auto !important;
    text-align: center;
    padding-bottom: 2em;
}

.oslcontent {
width: 100%;
height: 50vh;
text-align: justify;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}

#licenseinfo {
background-color: var(--dark);
color: var(--white);
}

#osltoc li {
    color: var(--gray);
    font-size: 0.4em;
    padding-bottom: 0.5em;
    text-decoration: none;
    list-style-type: none;
    text-align: left;
}

#osltoc a {
    scroll-margin-top: 4em;
}

#osltoclist p {
    text-align: left;
    color: var(--dark);
    font-size: 0.6em;
    padding-bottom: 0.2em;
}

#osltoclist ul {
    text-decoration: none;
    list-style-type: none;
    font-size: 0.4em;
}

/* CSS HomePage IT-61 */

h4.instructionTitle {   
    text-decoration: none;
    color: var(--gray);
    /*border: 2px solid transparent;*/  
   font-size: 1.55vw;
  }