/******************************************************************
 * @file        samwareuk.windows.css
 * @path        components/samwareuk/windows/v1.0.0/css
 * @version     1.0.1
 * @created_on  01 Apr 2020
 * @author      Scott Markham <scott.markham@samwareuk.co.uk>
 * @copyright   2020 SAMWare UK <https://www.samwareuk.co.uk>
 * @description CSS for Windows tools.
 ******************************************************************/
.sw-window {
    position:               fixed;
    top:                    120px;
    left:                   10vw;
    right:                  10vw;
    min-width:              60vw;
    border-width:           1px;
    border-style:           solid;
    border-color:           #bfbfbf;
    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
    border-radius:          6px;
    padding-top:            20px;
    padding-left:           20px;
    padding-right:          20px;
    padding-bottom:         20px;
    z-index:                98;
    background-color:       white;
    color:                  black;
    box-shadow:             0px 0px 8px 2px rgba(0,0,0,0.4);
}

.sw-window-controls {
    text-decoration:        none;
    position:               absolute;
    top:                    5px;
    right:                  5px;
}

.sw-window-controls > button {
    width:                  32px;
    min-width:              32px;
    height:                 32px;
    min-height:             20px;
    margin:                 2px;
    border-radius:          50%;
    padding:                0px;
    font-size:              12pt;
}

.sw-window > h3 {
    margin-top:             6px;
    margin-bottom:          10px;
    font-size:              16pt;
    color:                  black;
}

.sw-window-content {
    display:                none;
}

.sw-window-content.sw-visible {
    display:                block;
}

.sw-window-content input:invalid,
.sw-window-content textarea:invalid,
.sw-window-content select:invalid {
    background-color:       #ffbfaa;
}

.sw-hidden {
    display:                none;
}

@media (max-height: 340px) {
    .sw-window {
        top:                100px;
    }
}

@media (min-height: 500px) {
    .sw-window {
        top:                170px;
    }
}

@media (min-width: 438px) {
    .sw-window {
        left:               calc(50vw - 175px);
        right:              calc(50vw - 175px);
        min-width:          0;
        max-width:          350px;
    }
}