.jss37 { display: flex; overflow: hidden; flex-wrap: wrap; justify-content: space-around; background-color: #fff; } .jss38 { width: 500px; height: 450px; } .jss39 { color: rgba(255, 255, 255, 0.54); } .jss55 { display: flex; } .jss56 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss56 { min-height: 48px; } } @media (min-width:600px) { .jss56 { min-height: 64px; } } .jss57 { display: flex; padding: 0 8px; min-height: 56px; align-items: center; justify-content: flex-end; } @media (min-width:0px) and (orientation: landscape) { .jss57 { min-height: 48px; } } @media (min-width:600px) { .jss57 { min-height: 64px; } } .jss58 { background-color: #445c7c; } @media (min-width:600px) { .jss58 { width: calc(100%); margin-left: 280px; } } .jss59 { width: calc(100%); } .jss60 { margin-right: 16px; } @media (min-width:600px) { .jss60 { display: none; } } .jss61 { flex-grow: 1; } @media (min-width:600px) { .jss62 { flex-shrink: 0; } } .jss63 { width: 280px; } .jss64 { flex-wrap: nowrap; transform: translateZ(0); } .jss65 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss65 { min-height: 48px; } } @media (min-width:600px) { .jss65 { min-height: 64px; } } .jss66 { height: 100vh; overflow: auto; flex-grow: 1; } .jss67 { padding-top: 32px; padding-bottom: 32px; } .jss68 { display: flex; padding: 16px; flex-direction: column; } .jss69 { height: 240px; } .jss18 { display: flex; } .jss19 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss19 { min-height: 48px; } } @media (min-width:600px) { .jss19 { min-height: 64px; } } .jss20 { display: flex; padding: 0 8px; min-height: 56px; align-items: center; justify-content: flex-end; } @media (min-width:0px) and (orientation: landscape) { .jss20 { min-height: 48px; } } @media (min-width:600px) { .jss20 { min-height: 64px; } } .jss21 { background-color: #445c7c; } @media print { .jss21 { display: none; } } .jss22 { width: calc(100%); } .jss23 { margin-right: 0; } @media (min-width:600px) { .jss23 { display: none; } } .jss24 { margin-right: 16px; } .jss24:hover { border-top: 4px solid red; } .jss25 { flex-grow: 1; } @media (min-width:600px) { .jss26 { flex-shrink: 0; } } .jss27 { width: 240px; } .jss28 { flex-wrap: nowrap; transform: translateZ(0); } .jss29 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss29 { min-height: 48px; } } @media (min-width:600px) { .jss29 { min-height: 64px; } } .jss30 { height: 100vh; overflow: auto; flex-grow: 1; } .jss31 { padding-top: 32px; padding-bottom: 32px; } .jss32 { display: flex; padding: 16px; flex-direction: column; } .jss33 { height: 240px; } .jss34 { margin-right: 16px; } .jss34:hover { border-top: 4px solid red; } @media print { .jss35 { width: 100%; } } @media only screen { .jss35 { display: none; } } @media print { .jss36 { display: none; } } .jss180 { display: flex; } .jss181 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss181 { min-height: 48px; } } @media (min-width:600px) { .jss181 { min-height: 64px; } } .jss182 { display: flex; padding: 0 8px; min-height: 56px; align-items: center; justify-content: flex-end; } @media (min-width:0px) and (orientation: landscape) { .jss182 { min-height: 48px; } } @media (min-width:600px) { .jss182 { min-height: 64px; } } .jss183 { background-color: #445c7c; } @media (min-width:600px) { .jss183 { width: calc(100%); margin-left: 240px; } } .jss184 { width: calc(100%); } .jss185 { margin-right: 16px; } @media (min-width:600px) { .jss185 { display: none; } } .jss186 { flex-grow: 1; } @media (min-width:600px) { .jss187 { flex-shrink: 0; } } .jss188 { width: 240px; } .jss189 { flex-wrap: nowrap; transform: translateZ(0); } .jss190 { min-height: 56px; } @media (min-width:0px) and (orientation: landscape) { .jss190 { min-height: 48px; } } @media (min-width:600px) { .jss190 { min-height: 64px; } } .jss191 { height: 100vh; overflow: auto; flex-grow: 1; padding-top: 32px; } .jss192 { padding-bottom: 32px; } .jss193 { display: flex; padding: 16px; flex-direction: column; } .jss194 { height: 240px; } /*Main Box Content*/ .modalBox { position:fixed; font-family: Arial, Helvetica,sans-serif; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.8); color:black; z-index:99999; opacity :0; pointer-events:none; } /*When the href are clicked*/ .modalBox:target { opacity: 1; pointer-events: auto; -webkit-transition:opacity 400ms ease-in; -moz-transition:opacity 400ms ease-in; transition:opacity 400ms ease-in; } /*Positioning of the child box*/ .modalBox>div { width: 100%; /*max-width: 700px;*/ position:relative; margin:10% auto; padding:5px 20px 13px 20px; border-radius:0px; background:transparent; } /*Positioning and style of the close button*/ .close { background:transparent; color:white; line-height:10px; position:relative; right:1px; text-align:center; top:1px; width:35px; text-decoration:none; font-weight:bold; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:none; border:none; } /*Style when mouse hovers on the close button*/ .close:hover { background:black; color:white; } /*Default style of the open pop-up button*/ .button { background-color:transparent; border:none; padding:0px 0px; margin:0px 0px; cursor:pointer; }