.c{ text-align:center; }
.l{ text-align:left; }
.r{ text-align:right; }
.t{ vertical-align:top; }
.b{ vertical-align:bottom; }
.m{ vertical-align:middle; }

.x1{ width:100%; }
.x2{ width:50%; }
.x3{ width:33%; }
.x4{ width:25%; }
.x5{ width:20%; }

.table{ display:table; border-spacing:0; }
.cell{ display:table-cell; }
.flex{ display:flex; flex-flow:row nowrap; align-items:center; }
.flex-v{ display:flex; flex-flow:column nowrap; align-items:center; }
.inflex{ display:inline-flex; flex-flow:row nowrap; align-items:center; }

.fc{ justify-content:center; }
.fl{ justify-content:flex-start; }
.fr{ justify-content:flex-end; }
.ft{ align-items:flex-start; }
.fb{ align-items:flex-end; }
.fm{ align-items:center; }
.fs{ align-items:stretch; }
.fsep{ justify-content:space-between; }

.grid{ display:grid; }
.gx1{ grid-template-columns:1fr; }
.gx2{ grid-template-columns:1fr 1fr; }
.gx3{ grid-template-columns:1fr 1fr 1fr; }
.gg20{ grid-gap:20px; }
.gg30{ grid-gap:30px; }


.dn{ display:none; }

.c-red{ color:#e74c3c !important; }
.bg-red{ background-color:#e74c3c !important; }
.c-blue{ color:#3498db !important; }
.bg-blue{ background-color:#3498db !important; }
.c-grey{ color:#999 !important; }
.bg-grey{ background-color:#999 !important; }
.c-lightgrey{ color:#c2c2c2 !important; }
.bg-lightgrey{ background-color:#c2c2c2 !important; }
.c-green{ color:#2ecc71 !important; }
.bg-green{ background-color:#2ecc71 !important; }
.c-orange{ color:#f39c12 !important; }
.bg-orange{ background-color:#f39c12 !important; }
/* 
.modal{ 
    display:none;
    z-index:3;
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100vh; 
    background-color:rgba(0,0,0,0.7); 
}
.modal > .flex{ width:100%; height:100vh; justify-content:center; }
.modal-cont{ background-color:#fff; width:100%; max-width:620px; border-radius:5px; box-shadow:0 1px 6px #333; }
.modal-cont.md-s{ max-width:460px; }
.modal-cont.md-l{ max-width:860px; }
.modal-header{ background-color:#fff; display:flex; flex-flow:row nowrap; align-items:center; border-radius:5px 5px 0 0; border-bottom:1px solid #e2e2e2; padding-right:12px; }
.modal-header > i{ width:48px; min-width:48px; line-height:48px; text-align:center; cursor:pointer; font-size:16px; color:#777; }
.modal-title{ width:100%; font-weight:500; font-size:16px; color:#555; text-align:left; padding-left:30px; }
.modal-body{  }
.modal-body-cont{ padding:12px 30px; max-height:78vh; overflow:auto; }
.modal-footer{ display:flex; flex-flow:row nowrap; border-top:1px solid #e2e2e2; padding:12px 25px; justify-content:flex-end; align-items:center; }
.modal-sep{ margin:20px auto; height:1px; background-color:#e2e2e2; }
.modal-section-title{ font-size:16px; font-weight:500; padding-bottom:6px; color:#333; text-transform:uppercase; } */
/* 
.field{ padding:6px 0 12px 0;  }
.field-title{ font-weight:400; font-size:14px; color:#777; line-height:1.4em; margin-bottom:6px; text-transform:uppercase; }
.field-input{ 
    width:100%; 
    border:1px solid #d2d2d2; 
    background-color:#fff; 
    color:#333; font-size:14px;
    padding:8px;
    border-radius:3px;
}
.field-input.fci{ border-left:0; border-radius:0 3px 3px 0; }
.field-icon{ border:1px solid #d2d2d2; min-width:37px; width:37px; background-color:#f8f8f8; text-align:center; line-height:37px; color:#888; border-radius:3px 0 0 3px; } */

textarea.field-input{ height:120px; } 
.box-options{ display:none; }
.box-options.on{ display:block;  }
.fo-delete{ color:#e74c3c; font-size:18px; cursor:pointer; }
.in-fo{ width:100%; border:0; outline:none; padding:9px 6px; }
.fo{ padding:0px; border:1px solid #d2d2d2; margin-bottom:4px; border-radius:3px; box-sizing:border-box; width:100%; background-color:#fff; }
.sel-fo{ width:100%; border:0; outline:none; }

.snackbar{
    /* display:none; */
    position:fixed;
    z-index:11;
    top:20px;
    width:100%; max-width:560px;
    left:0; right:0;
    margin:auto;
    padding:12px;
    border-radius:3px;
    background-color:#fff;
    color:#333;
    font-size:14px;
    border:1px solid #34495e;
    border-left:5px solid #34495e;
}
.snackbar > i{ margin-right:6px; }
.snackbar.success{ border-color:#2ecc71; }
.snackbar.success > i{ color:#2ecc71; }
.snackbar.error{ border-color:#e74c3c; }
.snackbar.error > i{ color:#e74c3c; }

.switch{ display:inline-block; width:40px; height:20px; background-color:#c3c4c5; border-radius:12px; margin:15px 20px 15px 10px; cursor:pointer; user-select: none; }
.switch > span, .switch_ball{
    background-color:#848587;
    position:relative;
    display:inline-block;
    top:-5px;
    left:-10px;
    width:30px;
    height:30px;
    transition:0.2s;
    box-shadow:0px 1px 1px rgba(0,0,0,0.2);
    border-radius:50%;
    padding:11px;
    box-sizing:border-box;
}
.switch.on .switch_ball, .switch.on > span{ background-color:#3498db; left:20px; }

.shape{ 
    display:inline-block; 
    background-color:#fff;
    border:1px dashed #d2d2d2;
    background-size:contain;
    background-position:center center;
    width:120px; height:120px;
    background-repeat:no-repeat;
    box-sizing:border-box;
    background-origin:content-box;
    padding:4px;
}
.shape-info{
    background-color:rgba(0,0,0,0.8);
    color:#fff;
    transition:0.2s;
    display:flex;
    flex-flow:column nowrap;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    height:100%;
    opacity:0;
    border-radius:3px;
}
.shape:hover .shape-info{ opacity:1; }
.shape-info > div{ font-size:12px; color:rgba(255,255,255,0.8); line-height:1.4em; }
.shape-info b{ font-size:14px; color:#fff; }

.shape-logo{ width:130px; height:130px; }
.shape-bg{ width:380px; height:110px; background-size:cover; }
.shape-bg-mobile{ width:230px; height:130px; background-size:cover; }

.tag{ display:inline-block; line-height:20px; font-size:13px; padding:5px 12px; color:#1abc9c; background-color:rgba(26, 188, 156,0.1); border-radius:3px; }
.tag.green{  }
.tag.red{ background-color:rgba(231, 76, 60,0.1); color:#e74c3c;  }
.tag.purple{ background-color:rgba(155, 89, 182,0.1); color:#9b59b6;  }
.tag > i{ margin-right:3px; }
.tag.off{ display:none; }

.t-switch{ display:inline-block; width:28px; height:12px; background-color:#bdbdbd; border-radius:12px; user-select:none; margin:3px; cursor:pointer; transition:0.2s; }
.t-switch > div{ 
    background-color: #848587;
    position: relative;
    display: inline-block;
    top: -3px;
    left: -12px;
    width: 18px;
    height: 18px;
    transition: 0.2s;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    border-radius: 50%;
    box-sizing: border-box;
}
.t-switch.on > div{ left:2px; background-color:#3498db; } 
.t-switch.loading > div{ background-color:#f39c12; }

.hidden{ position:fixed; height:0px; width:0px; line-height:0; font-size:0px; opacity:0px; top:-900px; }