/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████          HEX COLOUR CODES        ████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/

/*
Hex Colour Codes

Hover colours:
White: #fff
Blue:  #7acbf5;
Pink:  #eaacb8;

Background colours: 
Dark Grey:    #2d2d2d;
Lighter Grey: #7e7e7e;
Light Grey:   #bbb;
*/

/*████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████              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: hidden;
    overflow-x: hidden;

    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;

    margin: 0 !important;
}

















/*██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
█████████████████████████████████████████████████████████████             Toolbar           ████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
.Toolbar{
    position: fixed;
    top: 0;
    left: 0;

    height: 35px;
    width: 100%;
    background-color: #2d2d2d;

    text-align: left;
    z-index: 9999;
}
a.ToolbarLink{


    height: inherit;
    width: auto;

    
}
img.ToolbarLogo{
    height: inherit;
    
    /*Top Right Bottom left */
    margin: 0 10px 0 0;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Toolbar Buttons         ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
button.ToolbarButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;

    /*Top Right Bottom left */
    margin: 2px 1px 0 1px;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;
}
button.ToolbarButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}

img.ToolbarButtonIcon{
    display: block;
    margin-left: auto;
    margin-right: auto;

    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████         Toolbar Dropdown         ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.ToolbarDropdownButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;
    
    width: 250px;
    text-align: left;

    /*Top Right Bottom left */
    margin: 2px 1px 0 1px;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;

    color: white;
    font-family: 'Sofia Sans', Times New Roman;
    font-size: 115%;
}
.ToolbarDropdownButton:after{
    content: '\2228';
    color: white;
    float: right;
    margin-left: 5px;
    font-size: 75%;
}

.ToolbarDropdownButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}


.ToolbarDropdown{
    position: absolute;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    height: auto;
    width: 250px;
    background-color: #2d2d2d;

    flex-direction: column;

    display: none;    

    z-index: 1;

    /* NOTE: FIND DYNAMIC WAY OF SETTING X COORDINATE 
    translate: 117px 38px;*/
}

.ToolbarDropdownShow{
    display: flex;
}

/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████      Toolbar Dropdown - MSN      ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
#ToolbarMSNFilterDropdown{
    /*display: flex;*/

    /* X Y */
    translate: 103px -7px;

    background-color: #3d3d3d;
}

/* Checkbox Inputs and Labels */
input.checkbox.ToolbarMSNCheckBox{
    width: 13px;
}
label.DropdownMSNLabel{
    display: block;
    /* NOTE: width = .ToolbarDropdown width - 2px*/
    width: 248px;
    color: #fff;
}
label.DropdownMSNLabel:hover{
    cursor: pointer;
    color: #000;
    background-color: #7acbf5;
}

div.ToolbarDropdownText{
    display: block;
    /* NOTE: width = .ToolbarDropdown width - 2px*/
    width: 248px;
    color: #fff;

    /* top-right-bottom-left */
    padding: 2px 2px 2px 5px;

    font-size: 105%;
}
div.ToolbarDropdownTextEngines{
    margin-top: 5px;
}
/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████  Toolbar Dropdown - Publication  ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
#PublicationDropdown{
    /*display: flex;*/

    /* X Y */
    translate: 393px -7px;

    width: 400px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.PublicationDropdownButton{
    width: 100%;
    text-align: left;

    /*Top Right Bottom left 
    margin: 2px 1px 0 1px;*/

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #2d2d2d00;

    color: white;
    font-family: 'Sofia Sans', Times New Roman;
    font-size: 115%;

    display: none;
}
.PublicationDropdownButtonShow{
    display: block;
}
.PublicationDropdownButton:after{
    content: '\2228';
    color: rgb(255, 255, 255);
    float: right;
    margin-left: 5px;
    font-size: 75%;
}
.PublicationDropdownButton:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}

.PublicationDropdown{
    position: static;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    height: auto;
    width: 100%;
    background-color: #3e3e3e;

    flex-direction: column;

    display: none;    

    z-index: 1;
}
/* Toggled when opening and closing the dropdown through its applicable dropdown button */
.PublicationDropdownShow{
    display: flex;
}
/* Toggled when hiding and showing the dropdownbuttons */
.PublicationDropdownHide{
    display: none;
}


/* Span and Publication Buttons */
span.PublicationDropdownSpan{
    color: white;
    padding: 5px;
    font-weight: normal;
    font-size: 110%;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    display: none;
    background-color: #5d5d5d;
}
span.PublicationDropdownSpanShow{
    display: block;
}
button.PublicationButton{
    background-color: #5d5d5d;
    border-style: none;

    text-align: left;
    color: white;

    padding: 5px;

    display: none;
}
button.PublicationButton:hover{
    background-color: #7acbf5;
    color: #000;
}
button.PublicationButtonShow{
    display: block;
}



















































.ToolbarSearchWrapper{
    position: fixed;
    right: 0;
    top: 0;    
    display: flex;
    flex-wrap: nowrap;
    width: 350px;
    height: inherit;    
}

input.ToolbarSearch{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;
    font-size: 20px;
    font-family: 'Sofia Sans';
    padding: 5px;
    outline: none;
    border-style: solid;
    border-color: rgb(255, 255, 255);
}

button.ToolbarSearchButton{
    /* NOTE: height and width are set by JS => Function SetElements() */
    position: fixed;
    right: 0;
    top: 0;  
    padding: 5px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    background-color: #ffffff;
    cursor: pointer;
}

/*██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
█████████████████████████████████████████████████████████████            Navigator          ████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
.Navigator{
    position: fixed;
    /* top = ToolbarHeight */
    top: 35px;
    left: 0;

    /* NOTE: Height dependent on .Tab divs (25px) and if they flex-wrap (+25px each wrap) */
    /* NOTE: I have to set min-height for JS to be able to get a readable Height of the element (Which it does not do when height is set to auto) */ 
    min-height: 25px;
    height: auto;
    width: 100%;
    background-color: #4c4c4c;

    display: flex;
    flex-wrap: wrap;

    font-weight: bold;
}
/*
button.NavigatorButton,
button.NavigatorButtonHome{
    background-color: #2d2d2d00;
    border: none;

    color: white;
    font-family: 'Sofia Sans';
    margin: none;

    height: inherit;
    max-height: inherit;
    font-size: 115%;
    cursor: pointer;
}
*/




.Tab{
    min-width: auto;
    max-width: 300px;
    height: inherit;
    display: block;
    height: 25px;

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

.TabActive{
    background-color: #7acbf5;;
}



button.TabButton{
    background-color: #2d2d2d00;
    border: none;

    text-align: left;
    color: white;
    font-family: 'Sofia Sans';
    /*margin: none;*/

    height: inherit;
    max-height: inherit;
    cursor: pointer;
}
button.TabOpen{
    font-size: 115%;
    /* NOTE: max-width must be 25px less than max-width of .Tab */
    flex: 250px;
    min-width: 0;
    max-width: 250px;
    min-height: 0;
    max-height: 25px;
    cursor: pointer;
    overflow: hidden;
}
button.TabClose{
    font-size: 85%;

    position: static;
    cursor: pointer;

    top: 0;
    right: 0;

    flex: 25px;
    min-width: 25px;
    max-width: 25px;
    min-height: 25px;
    max-height: 25px;
}


/*██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
█████████████████████████████████████████████████████████████            Container          ████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████*/
.Container{
    position: fixed;
    /* top = ToolbarHeight + NavigatorHeight+ */
    top: calc(35px + 25px);
    left: 0;
    width: 100%;

    background-color: #D6C5C9a4;

    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
}
.ContainerActive{
    display: flex;
}



/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████               Menu               ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
/* Ref: menu.css */



/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████          Resize Sliders          ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.MenuResize,
.MenuResizeSlider,
.IframeResize,
.IframeResizeSlider{
    height: 100%;
    background-color: rgb(163, 171, 172);

    min-width: 5px;
    max-width: 5px;
}

button.MenuResizeButton,
button.IframeResizeButton{
    height: inherit;
    min-height: 100%;
    max-height: 100%;
    background-color: rgba(0, 128, 0, 0);

    min-width: 7px;
    max-width: 7px;
    border-style: none;
}


button.MenuResizeButton:hover,
button.IframeResizeButton:hover{
    cursor: col-resize;
}
.MenuResize:hover,
.IframeResize:hover{
    background-color: #7ACBF5;
}



.MenuResizeSlider,
.IframeResizeSlider{
    min-height: 100%;
    max-height: 100%;
    min-width: 10000px;
    max-width: 10000px;

    position: absolute;

    display: none;

    background-color: rgba(238, 255, 0, 0);
}
button.MenuResizeSliderButton,
button.IframeResizeSliderButton{
    min-width: 7px;
    max-width: 7px;

    height: inherit;
    min-height: 100%;
    max-height: 100%;

    cursor: col-resize;

    border-style: none;
    
    background-color: rgba(122, 204, 245, 0.633);
} 


/*███████████████████████████████████████████████████████████████████████████████████
█████████████████████████              Content             ██████████████████████████
███████████████████████████████████████████████████████████████████████████████████*/
.ContentWrapper{
    flex-grow: 1;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #7accf500;
}
.Content{
height: inherit;
background-color: rgba(0, 128, 0, 0);

width: 60%;
}

.Images{
height: inherit;
background-color: rgba(0, 0, 255, 0);

flex-grow: 1;
}



div.SingularIframe{
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
}

iframe.SingularIframe,
iframe.DualIframe1,
iframe.DualIframe2{
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;

    background-color: rgba(255, 255, 255, 0);
    border-style: none;

    zoom: 0.995;
}


div.DualIframe1{
    max-height: 100%;
    min-height: 100%;
    width: 60%;
}

div.DualIframe2{
    flex-grow: 1;
}

div.DualIframe2Top{
    height: calc(100% - 35px);
}


div.DualIframe2Bottom{
    max-height: 35px;
    min-height: 35px;

    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #4c4c4c;

    text-align: left;
}

button.OpenImages{
    /* NOTE: height and width are set by JS => Function SetElements() */
    vertical-align: top;

    /*Top Right Bottom left */
    margin:2px 2px 2px 3px;

    border-style: solid;
    border-color: white;
    border-width: 1px;

    background-color: #4c4c4c00;

    height: 31px;
    width: 31px;
}
button.OpenImages:hover{
    cursor: pointer;

    /* Set border-color & background-color to the inverted of what we want */
    border-color: #000;
    background-color: #85340A;

    /* invert all colours */
    filter: invert(1);
}

img.OpenImagesIcon{
    display: block;
    margin-left: auto;
    margin-right: auto;

    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}











.Resize,
.ResizeSlider{
    min-width: 7px;
    max-width: 7px;
    width: 7px;

    min-height: 100%;
    height: 100%;

    background-color: #3d3d3d;
}
.ResizeSlider{
    min-width: 450px;
    max-width: 450px;

    position: absolute;

    display: none;

    background-color: rgba(255, 0, 0, 0);
    }

button.ResizeButtonAllow,
button.ResizeButtonDisAllow{
    min-width: inherit;
    max-width: inherit;

    min-height: 100%;
    height: 100%;

    cursor: col-resize;

    background-color: #3d3d3d00;
                
    border-style: none;
}
button.ResizeButtonDisAllow{
    min-width: 7px;
    max-width: 7px;

    min-height: 100%;
    height: 100%;

    cursor: col-resize;

    border-style: none;

    background-color: hsla(0, 0%, 34%, 0.6);
} 













/* Content - Search */
.ContentWrapperSearch{
    background-color: rgba(255, 255, 255, 0.400);

    overflow-y: scroll;
    text-align: left;

    display: block;
    padding: 10px;
}



.SearchHeader,
.SearchResultWrapper{
    background-color: rgba(255, 0, 0, 0);
    border-style: solid;
    border-color: rgb(142, 142, 142);

    /* top right bottom left */
    border-width: 1px 2px 1px 2px;

    width: 100%;
    height: auto;
}

.SearchHeader{
    /* top right bottom left */
    border-width: 2px 2px 1px 2px;
}

.SearchHeader,
a.SearchResultLink{
    display: flex;
    flex-direction: row;

    

}

a.SearchResultLink{
    text-decoration: none;
    color: black;
}

a.SearchResultLink:hover{
    background-color: #EAACB8;
}

.SearchResultTitle{
    background-color: rgba(255, 255, 0, 0);
    min-width: 35%;
    max-width: 35%;

    padding: 2px;
}
.SearchResultText{
    background-color: rgba(0, 128, 0, 0);
    min-width: 50%;
    max-width: 50%;

    overflow: hidden;

    padding: 2px;
}
.SearchResultPublication{
    background-color: rgba(255, 192, 203, 0);
    min-width: 7.5%;
    max-width: 7.5%;

    padding: 2px;
}

.SearchResultEffectivity{
    min-width: 7.5%;
    max-width: 7.5%;

    padding: 2px;
}