#popup{
        display:none;
        position:fixed;
        top :0;
        left:0;
        width:100%;
        height:100%;
        padding:70px;
        background:rgba(0, 0, 0, 0.3);
        font-weight:300;
        z-index:3;
	box-sizing:border-box;
}

#popup .content{
        width:100%;
        height:100%;
        padding:5px;
        background :           rgba(78, 134, 40, 0.9);
        outline    : 5px solid rgba(78, 134, 40, 0.9);
        border     : 1px solid rgba(234, 255, 221, 0.9);
	position:relative;
}

#popup .content *{
	font-family:'Ropa Sans', sans-serif;
}

#popup .content .header{
        font-size:24px;
	font-weight:400;
        padding:10px;
        color:#fff;
}

#popup .content .header .name{
        font-size:1.25vw;
}

#popup .content .header .slash{
        padding:0 0.5vw;
}

#popup .content .header hr{
        border-color:rgba(118, 173, 81, 0.9);
        width:150px;
	margin:4px 0 0 10px;
}

#popup .content .main-container{
        width :calc( 100% -  50px );
        height:calc( 100% - 120px );
	margin:auto;
        position:relative;
}

#popup .content .main-container .content-container{
        width:100%;
        height:100%;
        overflow:auto;
	border:1px solid rgba(135, 194, 95, 0.9);
	background:rgba(0,0,0,0.2);
	color:#fff;
}

#popup .content .main-container .content-container:before,
#popup .content .main-container .content-container:after{
	content:'';
	display:block;
	width:100%;
	height:30px;
}

#popup .content .main-container .content-container:before{
	height:15px;
}

#popup .content .load-more-times,
#popup .content .button{
	display:inline-block;
	padding:4px 0;
	width:110px;
	background:rgba(0,0,0,0.85);
	color:rgba(255,255,255,0.9);
	border-radius:50px;
	cursor:pointer;
	margin:2px 4px 0;
	font-size:12px;
}

#popup .content .load-more-times:hover,
#popup .content .button:hover{
	background:rgba(0,0,0,0.65);
	color:#fff;
}

#popup .content .load-more-times{
	padding:5px 0;
	width:200px;
	font-size:14px;
}

#popup .content #select-tables{
	overflow:auto;
}

#popup .content #select-frames-controls hr,
#popup .content #select-criteria hr{
	width:300px;
	max-width:100%;
	border:0;
	border-top:1px solid rgba(255, 255, 255, 0.4);
}

#popup .content .pattern-field{
	display:inline-block;
	border:1px solid rgba(255,255,255,0.25);
	white-space:nowrap;
	overflow:hidden;
	vertical-align:middle;
	margin:5px;
}

#popup .content .pattern-field .pattern-label{
	display:inline-block;
	width:175px;
	background:rgba(0,0,0,0.25);
	font-size:12px;
	color:rgba(255,255,255,0.9);
	padding:5px 10px;
	border-right:1px solid rgba(255,255,255,0.25);
}

#popup .content #select-criteria .pattern-field .pattern-label{
	font-size:16px;
	background:rgba(0,0,0,0.25);
	width:121px;
}

#popup .content .pattern-field .pattern-label .caption{
	font-size:10px;
	color:rgba(255,255,255,0.6);
	font-style:italic;
}

#popup .content .pattern-field .pattern-value{
	display:inline-block;
	padding:3px;
	background:rgba(255, 255, 255, 0.1);
}

#popup .content #select-criteria .pattern-field select{
	background:rgba(0,0,0,0.85);
	color:#fff;
	cursor:pointer;
	font-size:14px;
	border:0;
	display:inline-block;
	height:27px;
	padding:0 5px;
}

#popup .content #select-criteria .pattern-field select:hover{
	background:rgba(130, 130, 130, 0.3);
}

#popup .content .pattern-field .pattern-value .divider{
	margin:0 3px;
}

#popup .content .pattern-field .pattern-value-toggle{
	display:inline-block;
	font-size:12px;
	padding:2px 0;
	background:rgba(0,0,0,0.4);
	border:1px solid rgba(255,255,255,0.5);
	border-radius:100px;
	margin:0 5px;
	width:80px;
	cursor:pointer;
}

#popup .content .pattern-field .pattern-value-toggle:hover{
	background:rgba(130, 130, 130, 0.4);
}

#popup .content .pattern-field .pattern-value-toggle.active{
	background:rgba(83, 154, 35, 0.9);
}

#popup .content .pattern-field input{
	background:rgba(0,0,0,0.85);
	color:#dcffc5;
	border:1px solid rgba(255, 255, 255, 0.25);
	text-align:center;
	width:50px;
	padding:2px;
	font-size:12px;
	vertical-align:middle;
}

#popup .content .pattern-field input.date{
	width:55px;
	border-left:0;border-right:0;
}

#popup .content .pattern-field input.time{
	width:30px;
	border-left:0;border-right:0;
}

#popup .content .pattern-field .arrow{
	color:#fff;
	display:inline-block;
	background:rgba(0,0,0,0.35);
	padding:2px 5px;
	font-size:12px;
	border:1px solid rgba(255,255,255,0.25);
	vertical-align:middle;
	cursor:pointer;
}

#popup .content .pattern-field input:hover,
#popup .content .pattern-field .arrow:hover{
	background:rgba(0,0,0,0.65);
}

#popup .content .pattern-field .arrow.left{
	border-right:0;
	margin-left:2px;
}

#popup .content .pattern-field .arrow.right{
	border-left:0;
	margin-right:2px;
}

#popup .content .content-container .frames-disclaimer{
	font-style:italic;
	padding-top:10px;
	font-size:12px;
	color:rgba(255,255,255,0.75);
}

#popup .content .content-container .times-table{
	margin:2px auto 10px;
	max-width:600px;
	border-collapse:collapse;
}

#popup .content .content-container .times-table th.disabled,
#popup .content .content-container .times-table td.disabled{
	opacity:0.5;
}

#popup .content .content-container .times-table th.disabled,
#popup .content .content-container .times-table td.disabled,
#popup .content .content-container .times-table.disabled{
	pointer-events:none;
}

#popup .content .content-container .times-table th.date{
	vertical-align:middle;
	background:rgba(0,0,0,0.85);
	border:1px solid rgba(255,255,255,0.4);
	padding:3px;
	padding-left:7px;
	text-align:left;
	font-size:14px;
	cursor:pointer;
}

#popup .content .content-container .times-table th.date:hover{
	background:rgba(130, 130, 130, 0.3);
}

#popup .content .content-container .times-table td.hour{
	background:rgba(0,0,0,0.85);
	border:1px solid rgba(255,255,255,0.35);
	padding:2px;
	font-size:12px;
	width    :35px;
	min-width:35px;
	vertical-align:middle;
	cursor:pointer;
}

#popup .content .content-container .times-table td.hour:hover{
	background:rgba(224, 224, 224, 0.15);
}

#popup .content .content-container .times-table td{
	vertical-align:bottom;
	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.25);
}

#popup .content .content-container .times-table td.entries{
	text-align:left;
	white-space:nowrap;
}

#popup .content .content-container .time-button{
	display:inline-block;
	background:rgba(0,0,0,0.85);
	color:rgba(255,255,255,0.75);
	font-family:'Open Sans';
	font-size:10px;
	padding:1px 2px;
	width:35px;
	white-space:nowrap;
	border:1px solid rgba(255,255,255,0.35);
	text-align:center;
	cursor:pointer;
}

#popup .content .content-container .time-button:hover{
	background:rgba(98, 98, 98, 0.5);
}

#popup .content .content-container .time-button.active{
	background:rgba(70, 173, 0, 0.9);
	color:#fff;
	font-weight:700;
}

#popup .content .content-container .times-table.disabled .time-button       { background:rgba(0,0,0,0.4); }
#popup .content .content-container .times-table.disabled .time-button.active{ background:rgba(70, 173, 0, 0.4); }

#popup .content .content-container .datetime-button .datetime-part.date{ width : 95px; }
#popup .content .content-container .datetime-button .datetime-part.time{ width : 70px; }

#popup .content .buttons-container{
        position:absolute;
        bottom:0;
        left:0;
	padding:0;
	font-size:16px;
	font-weight:400;
	text-align:center;
	width:100%;
}

#popup .content .buttons-container hr{
        border-color:rgba(118, 173, 81, 0.9);
        width:calc(100% - 200px);
}

#popup .content .popup-button{
        color:#fff;
	width:auto;
	display:inline-block;
	padding:5px 15px;
        margin:5px 10px 15px;
        text-align:center;
        border:1px solid #fff;
        border-radius:10px;
        cursor:pointer;

        -webkit-transition:0.5s color, 0.5s background;
                transition:0.5s color, 0.5s background;
}

#popup .content .popup-button:hover{
        background:rgb(30, 75, 3);
        color:white;
}

#popup .content .popup-button i,
#popup .content .popup-button svg{
        margin-right:5px;
}

#popup .select-column{
	display:inline-block;
	width:calc( 33.3% - 10px );
	max-width:400px;
	margin:10px 2.5px;
	background:rgba(0,0,0,0.2);
	border:1px solid rgba(255,255,255,0.25);
	vertical-align:top;
}

#popup .select-column .column-name{
	background:rgba(0,0,0,0.25);
	padding:5px;
}

#popup .select-column .entries{
	padding:10px 20px;
}

#popup .select-column .entry{
	background:rgba(0,0,0,0.5);
	margin:2px 1px 0;
	padding:3px;
	font-size:12px;
	border:1px solid rgba(255,255,255,0.35);
}
#popup .select-column .entry:nth-child(1){
	margin-top:0;
}

#popup  #hour-select .entry,
#popup #frame-select .entry{
	display:inline-block;
}

#popup .select-column .entry .selected,
#popup .select-column .entry .name,
#popup .select-column .entry .next{
	display:inline-block;
}

#popup .select-column .entry .selected{
	width:50px;
	background:rgb(115, 125, 109);
	border:1px solid rgba(255,255,255,0.25);
	margin-right:2px;
	cursor:pointer;
}
#popup  #hour-select .entry .selected{
	width:40px;
}
#popup .select-column .entry .selected:hover{
	background:rgb(153, 156, 150);
}

#popup .select-column .entry .name{
	width:calc( 100% - 84px );
}
#popup  #hour-select .entry .name{
	width:50px;
}

#popup .select-column .entry .next{
	width:28px;
	background:rgb(72, 101, 53);
}

#popup .select-column .entry .selected,
#popup .select-column .entry .next{
	border:1px solid rgba(255,255,255,0.25);
	cursor:pointer;
}

#popup .select-column .entry .next:hover{
	background:#668453;
}

#popup .select-column .entry.active{
	background:rgb(57, 101, 26);
}

#popup .select-column .entry.active .next{
	background:rgb(99, 158, 59);
}

#popup .content.share{
	background   :rgba( 40,  65, 134, 0.9);
	outline-color:rgba( 40,  65, 134, 0.9);
	border-color :rgba(170, 190, 245, 0.9);
}

#popup .content.share .header hr,
#popup .content.share .buttons-container hr,
#popup .content.share .main-container .content-container{
	border-color:rgba(170, 190, 245, 0.9);
}

#popup .content.share .main-container .content-container{
	padding:15px;
	box-sizing:border-box;
}

#popup .content .content-container .section{
	border:1px solid rgba(255,255,255,0.25);
	margin:0px auto 15px;
	max-width:800px;
}

#popup .content .content-container .section .header{
	font-size:16px;
	padding:5px 7px;
	text-align:left;
	background:rgba(0,0,0,0.5);
	border-bottom:1px solid rgba(255,255,255,0.25);
}

#popup .content .content-container .section .header .sub-header{
	display:inline-block;
	font-size:12px;
	font-style:italic;
	opacity:0.8;
	margin-left:5px;
}

#popup .content .content-container .section .body{
	padding:3px;
}

#popup .content .content-container .section .body .sub-section{
	white-space:nowrap;
	overflow:hidden;
	margin:10px;
	border:1px solid rgba(255,255,255,0.25);
}

#popup .content .content-container .section .body .sub-section .name,
#popup .content .content-container .section .body .sub-section .val{
	display:inline-block;
}

#popup .content .content-container .section .body .sub-section .name{
	width:100px;
	padding:3px;
	background:rgba(0,0,0,0.25);
	border-right:1px solid rgba(255,255,255,0.25);
}

#popup .content .content-container .section .body .sub-section .val{
	width:calc( 100% - 100px );
	background:rgba(115, 145, 226, 0.34);
	padding:3px;
}

#popup .content .content-container .section .body .sub-section .val input{
	width:calc( 100% - 115px );
	padding:0 5px;
	font-size:16px;
}

#popup .content .content-container .section .body .sub-section .val .copy-button{
	display:inline-block;
	width:70px;
	background:#1d2f5f;
	border:1px solid rgba(255,255,255,0.25);
	font-size:12px;
	padding:3px 0 2px;
	margin-left:3px;
	cursor:pointer;
}

#popup .content .content-container .section .body .sub-section .val .copy-button:hover{
	background:#6483d6;
}

#popup .content .content-container .section .body .download-button{
	display:inline-block;
	font-size:14px;
	width:150px;
	padding:3px;
	background:rgb(50, 79, 158);
	color:#fff;
	border:1px solid rgba(255,255,255,0.25);
	margin:5px;
	cursor:pointer;
}

#popup .content .content-container .section .body .download-button:hover,
#popup .content.share .popup-button:hover{
	background:rgb(92, 135, 251);
}

#popup .content.info{
	background   :rgba( 41, 143, 181, 0.9);
	outline-color:rgba( 41, 143, 181, 0.9);
	border-color :rgba(106, 212, 251, 0.9);
}

#popup .content.info .header hr,
#popup .content.info .buttons-container hr,
#popup .content.info .main-container .content-container{
	border-color:rgba(106, 212, 251, 0.9);
}

#popup .content.info .content-container .section .body{
	text-align:left;
	padding:15px 25px;
	background:rgba(0,0,0,0.15);
}

#popup .content.info .content-container .section .body a{
	color:#ffd89b;
	text-decoration:none;
}

#popup .content.info .popup-button:hover{
	background:rgb(11, 87, 115);
}

#popup .content.layers{
	background   :rgba(138, 117,  0, 0.9);
	outline-color:rgba(138, 117,  0, 0.9);
	border-color :rgba(212, 187, 55, 0.9);
}

#popup .content.layers .mobile-layers{ display:none; }

#popup .content.layers .header hr,
#popup .content.layers .buttons-container hr,
#popup .content.layers .main-container .content-container{
	border-color:rgba(212, 187, 55, 0.9);
}

#popup .content.layers .main-container .content-container{
	padding:15px;
	box-sizing:border-box;
	text-align:center;
}

#popup .content.layers .popup-button:hover{
	background:#5c4e00;
}

#popup .content.layers .content-container .section{
	display:inline-block;
	margin:10px;
	width:500px;
	max-width:100%;
	vertical-align:top;
	text-align:left;
	box-sizing:border-box;
}

#popup .content.layers .content-container .section.mobile-only{
	display:none;
}

#popup .content.layers .content-container .section.full{
	width:1023px;
	max-width:100%;
}

#popup .content.layers .content-container .section .header{
	margin-bottom:5px;
}

#popup .content.advanced-settings .setting-label,
#popup .content.layers .content-container .section .sub-title{
	font-size:12px;
	padding:0 5px;
}

#popup .content.advanced-settings .setting-label hr,
#popup .content.layers .content-container .section .sub-title hr{
	margin:3px 0;
	border:0;
	border-top:1px solid rgba(255,255,255,0.25);
	width:100px;
}

#popup .content.layers .content-container .section .active-layers,
#popup .content.layers .content-container .section .inactive-layers{
	display:inline-block;
	width:100%;
	box-sizing:border-box;
	vertical-align:top;
	padding:0 5px 5px;
}

#popup .content.layers .content-container .section .inactive-layers{
	text-align:left;
}

#popup .content.layers .content-container .section .button,
#popup .content.layers .content-container .section .add-layer,
#popup .content.layers .content-container .section .layer{
	background:rgba(10, 48, 108, 0.9);
	border:1px solid rgba(204, 217, 255, 0.53);
	padding:5px;
	margin :2.5px;
	white-space:nowrap;
	overflow:clip;
	position:relative;
}

#popup .content.layers .content-container .section .add-layer{
	width:calc(100% - 5px);
	background:rgba(47, 106, 87, 0.9);
	color:#fff;
	cursor:pointer;

        -moz-appearance: none;
        -webkit-appearance:none;
}

#popup .content.layers .content-container .section .add-layer::-ms-expand{
        display: none;
}

#popup .content.layers .content-container .section .add-layer:hover{
	background:rgba(63, 170, 136, 0.9);
}

#popup .content.layers .content-container .section .layer.hidden{
	display:none;
}

#popup .content.layers .content-container .section .inactive-layers .layer{
	display:inline-block;
	width:225px;
	text-align:left;
	background:#555;
	cursor:pointer;
}

#popup .content.layers .content-container .section .inactive-layers .layer:hover{
	background:#4f8d69;
}

#popup .content.layers .content-container .section .layer .remove-layer,
#popup .content.layers .content-container .section .layer .order-layers{
	display:inline-block;
	background:rgba(0,0,0,0.35);
	border:1px solid rgba(255,255,255,0.35);
	border-radius:5px;
	padding:0 6px;
	margin-left:5px;
	cursor:pointer;
}

#popup .content.layers .content-container .section .layer .order-layers.disabled{
	opacity:0.5;
	pointer-events:none;
}

#popup .content.layers .content-container .section .layer .remove-layer{
	background:#300;
	position:absolute;
	top:0;
	right:0;
	margin:0;
	padding:2px 6px;
	border-radius:0;
}
#popup .content.layers .content-container .section .layer .remove-layer:hover{
	background:#600;
}

#popup .content.layers .content-container .section .inactive-layers .plus{
	margin-right:10px;
}

#popup .content.layers .content-container .section .layer .name{
	display:inline-block;
	margin-left:5px;
}

#popup .content.layers .content-container .section .layer .name .classification{
	opacity:0.85;
	width:25px;
	display:inline-block;
	text-align:center;
	padding:2px;
	font-size:12px;
	background:rgba(0, 0, 0, 0.2);
	border:1px solid rgba(255, 255, 255, 0.5);
	vertical-align:top;
	margin-top:-1px;
	margin-right:5px;
}

#popup .content.layers .content-container .section .layer .opacity-input{
	display:inline-block;
	margin-top : 3px;
	margin-left:25px;
}

#popup .content.layers .content-container .section .layer .opacity-input .input-label{
	display:inline-block;
	font-size:14px;
	font-style:italic;
	color:rgba(255,255,255,0.75);
	padding-right:10px;
}

#popup .content.layers .content-container .section .layer .opacity-input .opacity-val{
	-webkit-appearance: none;
	-moz-appearance:textfield;

	background:rgba(0,0,0,0.35);
	border:1px solid rgba(255,255,255,0.35);
	border-radius:5px;
	font-size:14px;
	color:#eee;
	padding:1px 5px;
	width:50px;
	text-align:center;
}

#popup .content.layers .content-container .section .layer .opacity-input .opacity-slider{
	-webkit-appearance: none;
	-webkit-background-clip: padding;
	background-clip: padding-box;

	width :110px;
	height:  3px;
	border:1px solid rgba(255, 255, 255, 0.3);
	background:rgb(0, 78, 189);
	border-radius:15px;
	margin-left:10px;
}

#popup .content.layers .content-container .section .layer .opacity-input .opacity-slider::-webkit-slider-thumb {
	-webkit-appearance: none;

	width :15px;
	height:15px;
	border:1px solid #044062;
	box-shadow:0 1px 3px rgba(0,0,0,0.2);
	cursor:pointer;
	border:1px solid rgba(255, 255, 255, 0.3);
	background:rgb(0, 78, 189) !important;
	border-color:rgba(255,255,255,0.3);
	border-radius:15px;
}

#popup .content.layers .content-container .section .button{
	background:rgba(10, 48, 108, 0.9);
	border:1px solid rgba(204, 217, 255, 0.53);
	margin-top:0;
	margin-bottom:5px;
	text-align:center;
}

#popup .content.advanced-settings{
	background   :rgba(138,  48,  0, 0.9);
	outline-color:rgba(138,  48,  0, 0.9);
	border-color :rgba(207, 126, 84, 0.9);
}

#popup .content.advanced-settings .header hr,
#popup .content.advanced-settings .buttons-container hr,
#popup .content.advanced-settings .main-container .content-container{
	border-color :rgba(207, 126, 84, 0.9);
}

#popup .content.advanced-settings .popup-button:hover{
	background:#cc632a;
}

#popup .content.advanced-settings .setting{
	padding:5px;
}

#popup .content.advanced-settings .setting-label{
}

#popup .content.advanced-settings input{
	background:#000;
	color:#fff;
	border:1px solid rgba(255,255,255,0.4);
	padding:3px;
}
#popup .content.advanced-settings input::-webkit-outer-spin-button,
#popup .content.advanced-settings input::-webkit-inner-spin-button{
    -webkit-appearance : none;
    margin : 0;
}
#popup .content.advanced-settings input[type=number]{
    -moz-appearance : textfield;
}

#popup .content.advanced-settings .button{
	padding:4px 10px;
}