/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.psgc-popup p {font-family:Arial, Helvetica, sans-serif; margin:0 0 10px;}

.psgc-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:9999;max-width: 800px; width: 100%; border-radius:5px; display:none;}
.psgc-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);  z-index: 9998; display:none;}
.psgc-overlay.active {display:block}
.psgc-popup.active {display:block}
.psgc-popup .psgc-content {margin: 0 auto; display: flex; flex-wrap:wrap;}


.psgc-popup .psgc-tab-container { width:100%; display: flex; border-bottom:1px solid #CCCCCC; justify-content: space-between; font-size: 13px;}
.psgc-popup .psgc-tab { cursor: pointer; padding: 10px;border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-radius:5px 5px 0 0; transition: opacity 0.5s ease; text-align:center; width: 32%; background:#EAEAEA;}
.psgc-popup .psgc-tab p {font-weight:bold; margin:5px 0;}
.psgc-popup .psgc-tab.active { font-weight: bold;  background-color: #fff; position:relative;}
.psgc-popup .psgc-tab.active::before {position: absolute; content: ""; width: 100%;height: 3px; background: #fff; bottom: -2px; left: 0;}
.psgc-popup .psgc-tab-content { overflow-y: scroll; padding: 0px 40px; max-height: 320px; background-color: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
.psgc-popup .psgc-tab-pane { display: none;}
.psgc-popup .psgc-tab-pane.active { display: flex; justify-content: space-between; flex-wrap:wrap; padding: 0 0 20px 0;}
.psgc-popup .psgc-tab-pane .psgc-card {font-size:12px;width:100%; display: flex; justify-content: space-between; flex-wrap:wrap; margin:20px 0 0; padding:15px; transition: opacity 0.5s ease; border:1px solid #CCCCCC; border-radius:5px;}
.psgc-popup .psgc-tab-pane .psgc-card.noborder {border:none;padding: 15px 0;} 

.psgc-popup .psgc-tab-pane .psgc-card .psgc-hidden-content .psgc-card {background: #EAEAEA; display: block; width: 93%; padding: 15px 3%;}
.psgc-popup .psgc-tab-pane .psgc-card .psgc-hidden-content .psgc-card:first-child {margin:0;}

.psgc-tab-inner {width:80%;}

.psgc-popup .psgc-toggle-container { display: inline-block; position: relative;}
.psgc-popup .psgc-toggle-container input { display: none;}
.psgc-popup .psgc-toggle {display: inline-block; width: 40px; height: 20px; background-color: #FF4101;border-radius: 15px; position: relative;cursor: pointer; overflow: hidden; padding: 0; }
.psgc-popup .psgc-toggle.default {background-color: #bebebe;}
.psgc-popup .psgc-toggle:before { content: ""; position: absolute; top: 4px;left: 8px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); box-sizing: content-box;}
.psgc-popup .psgc-slider { position: absolute; top: 50%;transform: translateY(-50%); width: 16px; height: 16px; transform: translate(100%, -50%); margin:0 0 0 5px;  background-color: white; border-radius: 50%;transition: transform 0.2s ease;}
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle .psgc-slider { margin: 0 0 0 2px; transform: translateY(-50%);}
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle { background:#595959;}
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle::before,
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle::after { content: ""; position: absolute; top: 50%; right: 0; left: auto;width: 29%; height: 2px; background-color: #fff; transform-origin: center;}
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle::before { transform: translate(-50%, -50%) rotate(45deg); margin: 0;  padding: 0; height: 0px; left: 28px; width: 10px;}
.psgc-popup .psgc-toggle-container input:checked + .psgc-toggle::after { transform: translate(-50%, -50%) rotate(-45deg);}

.psgc-arrow {border: solid #595959; border-width: 0 3px 3px 0;  display: inline-block; padding: 3px; width: 7px; height: 6px; margin: 0 0 0 10px; cursor: pointer;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.psgc-arrow.active {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -webkit-transform: rotate(225deg); margin: 7px 0 0 10px;}
.psgc-hidden-content {display:none; overflow:hidden; width:100%; margin:20px 0 0 0;}
.psgc-hidden-content.active {display:block;}

.psgc-popup-footer {display:flex; background-color: #fff; justify-content: space-between; width:100%; padding:20px 40px; border-top:1px solid #CCCCCC; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
.psgc-popup-footer .button {cursor: pointer; border-radius: 5px; background: #F0F0F0; padding: 0 10px; width: 25%; text-align: center;}
.psgc-popup-footer .button p {margin:5px 0; font-size: 13px;}
.psgc-popup-footer .button:hover {background:#c9c6c6;}
.psgc-popup-footer .button.save {background:#FF4101}
.psgc-popup-footer .button.save p {color:#fff;}
.psgc-popup-footer .button.save:hover {background:#C63200}

.psgc-sub-pane {display:flex; justify-content: space-between;}
.scrollable-content {width:100%;}

@media only screen and (max-width: 600px) {

    .psgc-popup {position: fixed; top: auto; left: 0%; bottom: 0; transform: translate(0, 0);}
    .scrollable-content {height: 310px;overflow-y: scroll;}
    .psgc-tab-inner {width:60%}
    .psgc-toggle-container {width:20%;}

    .psgc-popup-footer {flex-wrap: wrap;}
    .psgc-popup-footer .button {width: 100%; margin:0 0 10px 0}
}