:root {
 --white: #ffffff;      /* #ffffff */  
 --blue: #718ba4;       /* #718ba4 */
 --navy: #003366;       /* #003366 */
 --sky: #b1bfcd;        /* #b1bfcd */
 --green: #77a471;      /* #77a471 */
 --yellow: #e9d341;     /* #e9d341 */
 --red: #c2452d;        /* #c2542d */
 --purple: #663336;     /* #663336 */
 --lavender: #a4717d;   /* #a4717d */
 --orange: #cb8d49;     /* #cb8d49 */
 --odd: #f5f8fa;        /* #f5f8fa */
 --even: #e6edf2;       /* #e6edf2 */
 --highlight: #ffff99;  /* #ffff99 */
 --black: #000000;      /* #000000 */
}
body {
 margin: 0;
}
.ptl {
 display: flex;
 height: 100vh;
 margin: 0;
}
#ptm {
 height: 100%;
 flex-grow: 1;
}
#vsp {
 height: 100%;
 width: 8px;
 background-color: var(--blue);
 display: flex;
 align-items: center;
}
#vsp img {
 cursor: pointer;
}
#pts {
 width: 232px;
}
.hideside #pts {
 display: none;
}
#vsp img:last-child {
 display: none;
}
#vsp img:first-child {
 display: inline;
}
.hideside #vsp img:first-child {
 display: none;
}
.hideside #vsp img:last-child {
 display: inline;
}
iframe {
 width: 100%;
 height: 100%;
 border: none;
 margin: 0;
 display: block;
}