/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████              GENERAL             ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
/* Makes the way the boxes are sized more intuitive */
* {box-sizing:border-box}

/* Insert Sofia Sans Font */
@font-face {
    font-family: 'Sofia Sans';
    src: url('../autoindex/swag%20aviation%20-%20files/general//fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
}

/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████            BODY & MAIN           ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
body {
    overflow-y: scroll;

    font-weight: bold;

    background-image: url(../autoindex/swag%20aviation%20-%20files/general/background/Lynx-medium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    text-align: center;
    justify-content: center;

    font-family:'Sofia Sans', Times New Roman;
}

.Main{
    position: absolute;
    top: 0px;
    left: 250px;
    margin: 15px;
    border-radius: 25px;
    height: auto;
    
    /* I do not know why, I do not know how but for some reason without this .main does not span the whole page if the screen width is high enough */
    /* width = 100% - 2 * margin .main */
    width: 100%;
    max-width: calc(100% - 250px - 2 * 20px);
    
    padding: 15px;
    background-color: #D6C5C9a4;
}

.MainFlex{
    display: flex;
    flex-direction: row;
}


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████       GLOBAL ELEMENT STYLING     ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
/* Font sizes */
span.Header{
    font-size: 150%;
    font-weight: 725;
}
span.Text{
    font-size: 120%;
}


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████         LEFT SIDE CONTENT        ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
.LeftHidden{
    flex: 75%;
    max-width: 75%;
    height: auto;
}

.LeftVisible{
border-radius: 25px;
margin-left: 1%;
margin-right: 1%;
height: auto;
width: 98%;
padding: 1.5%;
background-color: #ebd9dd44;
}

.LeftTop{
    height: auto;
    width: 100%;
    max-width: 100%;
    border-style: solid;
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 10px;
    background-color: #E2C4D8c2;
    font-size: 175%;
    text-align: center;
}

.LeftContainer{
    flex-direction: column;
    flex-wrap: nowrap;

    height: auto;
    width: 100%;
    max-width: 100%;
    border-style: solid;
    border-radius: 25px;
    margin-bottom: 10px;
    background-color: #E2C4D8c2;
    text-align: left;
}

    
/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████       INFORMATION STYLING        ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Info{
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 25px;
    width: auto;
}

.InfoSpan{
    font-size: 120%;
}

.InfoInformation{
    font-size: 120%;
}

.InfoModule,
.InfoCategory,
.InfoQuestions{
    font-size: 120%;
}

.InfoScore,
.InfoDisclose{
    font-size: 120%;
    margin-top: 5px;
    font-style: italic;
}

.InfoNotice{
    font-size: 120%;
    margin-top: 5px;
    font-style: italic;
    color: rgb(218, 59, 59);
}

img.Formulas{
    border-radius: 10px;
    width: auto;
    max-width: 100%;
}

.ResultsButton{
    width: auto;
    max-width: 100%;
}

button.ButtonCheckAnswers{
    margin-top: 10px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.63);
    min-width: 100%;
    font-family:'Sofia Sans', Times New Roman;
    font-size: 120%;
    border-radius: 10px;
    border-style: solid;
}
button.ButtonCheckAnswers:hover{
    background-color: rgba(68, 140, 208, 0.631);
    cursor: pointer;
}

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████         QUESTIONS STYLING        ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Questions{
    /* Display none => Display flex when Generate() function runs */
    display: none;
    flex-direction: column;
    height: auto;
    padding: 25px;
    width: auto;
}
.QuestionsQuestions{
    height: auto;
    width: 100%;
    max-width: 100%;
    border-radius: 15px;
    padding: 5px;
    background-color: #ffffff00;
    font-size: 120%;
    text-align: left;
}


img.QuestionsImage{
    border-radius: 10px;
    width: auto;
    max-width: 75%;
}
img.AnswerImage{
    border-radius: 10px;
    width: auto;
    max-width: 35%;
}


.QuestionsLabel{
    border-radius: 10px;
    min-width: 100%;
}
.QuestionsLabel:hover{
    background-color: #757575c2;
}


.Label{
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.Label input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.CheckMark{
  position: absolute;
  top: 3px;
  left: 4px;
  height: 16px;
  width: 16px;
  background-color: #eee;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.Label:hover input ~ .CheckMark{
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.Label input:checked ~ .CheckMark{
  background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.CheckMark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.Label input:checked ~ .CheckMark:after{
  display: block;
}
/* Style the indicator (dot/circle) */
.Label .CheckMark:after{
  top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          RESULTS STYLING         ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.Results{
    display: none;
    flex-direction: column;
    height: auto;
    padding: 25px;
    width: auto;
}
.ResultsERROR{
    font-size: 120%;
}
.ResultsScore{
    margin-top: 10px;
    font-size: 120%;
}
.ResultsInfoScore{
    font-size: 100%;
    font-style: italic;
}
.ResultsAnswer{
    font-size: 120%;
    margin-top: 15px;
}
.ResultsQuestions{
    font-size: 110%;
    font-style: italic;
}


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████        RIGHT SIDE CONTENT        ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
.Right{
    flex: 25%;
    max-width: 25%;
    height: 100%; 
    background-color: #ebd9dd44;;
    padding: 10px;
    border-radius: 35px;
}

.RightFlex{
    padding: 10px;
    border-radius: 35px;
    background-color: #D6C5C9a4;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

span.RightColumnnotice{
    font-size: 200%;
    text-align: center;
    margin: 10px;
    width: 100%;
    max-width: 100%;
}

.RightColumn1, .RightColumn2{
    flex: 100%;
    max-width: 100%;
}

.NoteM15,
.NextcloudPremade{
    margin-bottom: 15px;
}

.NoteM15,
.NextcloudPremade,
.GeneralInfo,
.PremadeM1,
.PremadeM2,
.PremadeM3,
.PremadeM4,
.PremadeM5,
.PremadeM6,
.PremadeM7,
.PremadeM8,
.PremadeM9,
.PremadeM10,
.PremadeM11,
.PremadeM12,
.PremadeM13,
.PremadeM14,
.PremadeM15,
.PremadeM16,
.PremadeM17{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #448cd0;
    border-style: solid;
    font-size: 90%;
}

.NextcloudPremade{
    background-color: #8855a8;
}

img.BongoCat{
    width: 50%;
    max-width: 50%;
    border-radius: 15px;
}

/*
.PremadeM1,
.PremadeM2,
.PremadeM9{
    background-color: #1eb049;
}

.PremadeM3,
.PremadeM4,
.PremadeM5{
    background-color: #FFE641;
}

.PremadeM6,
.PremadeM7,
.PremadeM10{
    
background-color: rgb(91, 91, 91);
}
.PremadeM8{
    background-color: #CFE5FA;
}

.PremadeM11,
.PremadeM12,
.PremadeM13{
    background-color: #448cd0;
}

.PremadeM14,
.PremadeM15,
.PremadeM16,
.PremadeM17{
    background-color: #a93737;
}
*/

a.RightLinks:link {color:rgb(0, 0, 0); text-decoration: underline;}
a.RightLinks:visited {color:rgb(0, 0, 0); text-decoration: underline;}
a.RightLinks:hover {color: #EBD9DD; text-decoration: underline;}


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████           BOTTOM IFRAME          ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
iframe.BottomIframe{
    border-radius: 25px;
    border-style: none;
    margin-top: 1%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
}







/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████   @MEDIA - RESPONSIVE FONT SIZE  ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
@media only screen and (min-width: 1600px) {
    /* Increase Font Size Globally, but just a bit */
    body{
        font-size: 115%;
    }

    /* Make the Font on the RH side a bit smaller so it isn't too large */
    .Right{
        font-size: 90%;
    }
}


/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████    @MEDIA - RESPONSIVE LAYOUTS   ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1600px) {
    /* Create a custom radio button */
    .CheckMark{
      top: 5px;
      left: 5px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and down) */
@media only screen and (max-width: 1200px) {
    /* NOTES:   
        => RH Side goes to the bottom
    */

    .MainFlex{
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .LeftHidden{
        flex: 100%;
        max-width: 100%;

        margin-bottom: 15px;
    }

    .Right{
    flex: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
        
    .RightColumn1, 
    .RightColumn2{
        flex: 48%;
        max-width: 48%;
        margin-right: 1%;
        margin-left: 1%;
    }
}

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

}

/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width: 768px) {
    /* NOTES:   
        => Change to Mobile Layout 
        => Menu = Desktop
    */

    .Left{
        display: none;
    }
 
    .LeftHidden{
        flex: 100%;
        max-width: 100%;
        margin-bottom: 5px;
    }

    .Right{
        flex: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;
    }
        
    .RightColumn1, .RightColumn2{
        flex: 100%;
        max-width: 100%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* NOTES:   
        => Menu = Mobile
        => 
    */

    .Main{
        margin: 5px;
        max-width: calc(100% - 2 * 5px);
        padding: 5px;
        left: 0;
        top: 55px;
        font-size: 90%;
    }
    

    /* Create a custom radio button */
    .CheckMark{
      top: 4px;
      left: 3px;
      height: 13px;
      width: 13px;
    }
    /* Style the indicator (dot/circle) */
    .Label .CheckMark:after{
        top: 4px;
        left: 4px;
        width: 5px;
        height: 5px;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}