/* Template Css Start */
@font-face {
    font-family: 'LoveYaLikeASister';
    src: url(https://s3-us-west-1.amazonaws.com/cdnhubworks/signage/mooyah/fonts/LoveYaLikeASister.ttf);
}

@font-face {
    font-family: 'KraftNine';
    src: url(https://s3-us-west-1.amazonaws.com/cdnhubworks/signage/mooyah/fonts/KraftNine.ttf);
}

/* cyrillic */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Merienda';
    font-style: normal;
    font-weight: 400;
    src: local('Merienda'), local('Merienda-Regular_0_wt'), url(https://fonts.gstatic.com/s/merienda/v5/gNMHW3x8Qoy5_mf8uWMLMIqK_Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Merienda';
    font-style: normal;
    font-weight: 400;
    src: local('Merienda'), local('Merienda-Regular_0_wt'), url(https://fonts.gstatic.com/s/merienda/v5/gNMHW3x8Qoy5_mf8uWMFMIo.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Chicle';
    font-style: normal;
    font-weight: 400;
    src: local('Chicle Regular'), local('Chicle-Regular'), url(https://fonts.gstatic.com/s/chicle/v6/lJwG-pw9i2dqU-BzwGivkbY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Chicle';
    font-style: normal;
    font-weight: 400;
    src: local('Chicle Regular'), local('Chicle-Regular'), url(https://fonts.gstatic.com/s/chicle/v6/lJwG-pw9i2dqU-Bzzmiv.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Chewy';
    font-style: normal;
    font-weight: 400;
    src: local('Chewy Regular'), local('Chewy-Regular'), url(https://fonts.gstatic.com/s/chewy/v9/uK_94ruUb-k-wn52KjI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Kaushan Script';
    font-style: normal;
    font-weight: 400;
    src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/vm8vdRfvXFLG3OLnsO15WYS5DG72wNJHMw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Kaushan Script';
    font-style: normal;
    font-weight: 400;
    src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Maven Pro Regular'), local('MavenPro-Regular'), url(https://fonts.gstatic.com/s/mavenpro/v13/7Au9p_AqnyWWAxW2Wk3GwmQIAFg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Maven Pro Regular'), local('MavenPro-Regular'), url(https://fonts.gstatic.com/s/mavenpro/v13/7Au9p_AqnyWWAxW2Wk3Gw2QIAFg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Maven Pro Regular'), local('MavenPro-Regular'), url(https://fonts.gstatic.com/s/mavenpro/v13/7Au9p_AqnyWWAxW2Wk3GzWQI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Serif SC */
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif TC'), local('NotoSerifTC-Regular'), url(https://fonts.gstatic.com/s/notoseriftc/v6/XLYgIZb5bJNDGYxLBibeHZ0BhnJsUnN3PrBufRbmGqUtcg4pzRPk5AEpzv6YzI9aTbOhf6M.6.woff2) format('woff2');
  unicode-range: U+ff78-ff7e, U+ff80-ff86, U+ff89-ff94, U+ff97-ff9e, U+ffb9, U+ffe0-ffe3, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1d7c7, U+1f004, U+1f0cf, U+1f141-1f142, U+1f150, U+1f154, U+1f158, U+1f15b, U+1f15d-1f15e, U+1f162-1f163, U+1f170-1f171, U+1f174, U+1f177-1f178, U+1f17d-1f17f, U+1f192-1f195, U+1f197-1f19a, U+1f1e6-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f22f, U+1f232-1f237, U+1f239-1f23a, U+1f250-1f251, U+1f300, U+1f302-1f319;
}
.template-holder {
    width: 100%;
    height: auto;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    background: #fff;
    float: left;
}

.component-holder {
    display: inline-block;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    background: #ededed;
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.component-heading {
    font-size: 16px;
    text-align: center;
    background: #a5a5a5;
    color: #fff;
    margin: 0 0 10px 0;
    padding: 3px 15px;
    border-radius: 5px;

}

.img-component-dark {
    position: relative;
    border-radius: 50%;
}

.img-component-dark label {
    min-width: 55px;
    min-height: 55px;
    width: 100%;
    border-radius: 50%;
    border: 1px solid #f2f2f2;
    background: #dbdbdb;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
    overflow: hidden;
}

.img-component-dark label input[type="file"] {
    display: none;
}

.img-component-light {
    position: relative;
    border-radius: 50%;
}

.img-component-light label {
    min-width: 55px;
    min-height: 55px;
    width: 100%;
    border-radius: 50%;
    border: 1px solid #f2f2f2;
    background: #fff;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
    overflow: hidden;
}

.img-component-light label input[type="file"] {
    display: none;
}

.img-component-light-square {
    position: relative;
    border-radius: 5px;
}

.img-component-light-square label {
    min-width: 55px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    background: #fff;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
    overflow: hidden;
}

.img-component-light-square label input[type="file"] {
    display: none;
}

.img-component-dark-square {
    position: relative;
    border-radius: 5px;
}

.img-component-dark-square label {
    min-width: 55px;
    min-height: 55px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    background: #dbdbdb;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
    overflow: hidden;
}

.img-component-dark-square label input[type="file"] {
    display: none;
}

.text-component {
    font-size: 16px;
    text-align: center;
    color: #afafaf;
    width: 100%;
    border: 1px solid transparent;
}

.text-component:hover {
    border: 1px solid #ccc;
}

.component-list {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.component-list li {
    display: block;
   margin-bottom: 0.4vw;
    float: left;
    width: 100%;
}

.component-list li:last-child {
    margin-bottom: 0px;
}

.component-list li .component-list-text {
    display: inline-block;
    width: 65%;
}

.component-list li .component-list-button {
    font-size: 13px;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    display: inline-block;
    min-width: 2.5vw;
    background: #a5a5a5;
    display: inline-block;
    float: right;
}

.btn-component {
    font-size: 13px;
    color: #fff;
    padding: 1px 10px;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
    background: #a5a5a5;
    text-align: center;
}

.img-component-light-tringle-up {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0px;
    border: 1px solid #f2f2f2;
    background: #dbdbdb;
    clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
}

.img-component-light-tringle-up label {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 25% 25%;;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
}

.img-component-light-tringle-up label input[type="file"] {
    display: none;
}

.img-component-light-tringle-down {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0px;
    border: 1px solid #f2f2f2;
    background: #dbdbdb;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.img-component-light-tringle-down label {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-image: url("../../images/digital-signage/upload-img.svg");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 75% 75%;;
    max-width: inherit !important;
    display: inherit;
    cursor: pointer;
}

.img-component-light-tringle-down label input[type="file"] {
    display: none;
}

.component-textarea {
    width: 30px;
    padding: 0;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.center-circle-template .component-list li .component-list-button {
    padding: 3px 5px;
}

.center-circle-template .component-list-button {
    border-radius: 5px;
    display: inline-block;
    background: #a5a5a5;

}

.center-circle-template .component-holder label {
    /* margin-left: auto;
    margin-right:auto; */
    position: relative;
}

.center-circle-template .circle-template-full .component-list li .component-list-button,
.center-circle-template .circle-template-full .component-list li .component-list-text {
    float: none;
    width: 100%;
}

.circle-template-full .component-list li {
    line-height: 1.8;
}

.component-list-margin .component-list li {
    /* margin-bottom:15px; */
}

.component-list-margin .component-list li:last-child {
    margin-bottom: 0px;
}

.component-list-inline li {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

.component-list-inline li {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

/* Template CSS End */
label[contentEditable = true], button[contentEditable = true], div[contentEditable = true] {
    border: 1px dotted grey;
    padding: 5px;
    background: #fff !important;
    color: gray !important;
    min-width: 50px;
    min-height: 25px;
}

.small-window .full-height {
    min-height: 63.5vh;
    overflow: hidden;
    max-height: 63.5vh;
}

.small-window .half-height {
    min-height: calc(31.75vh - 5px);
    max-height: calc(31.75vh - 5px);
    overflow: hidden;
}

.small-window .quater-height {
    min-height: calc(17vh - 15px);
    max-height: calc(17vh - 15px);
    overflow: hidden;
}

.small-window .img-quater-bigb {
    min-height: calc(21vh - 40px);
    max-height: calc(21vh - 40px);
    overflow: hidden;
}

.small-window .img-half {
    min-height: calc(32vh - 30px);
    max-height: calc(32vh - 30px);
    overflow: hidden;
}

.small-window .quater-img,
.small-window .img-quater {
    min-height: calc(18vh - 70px);
    max-height: calc(18vh - 70px);
    overflow: hidden;
}

.small-window .quater-img-big,
.small-window .img-quater-big {
    min-height: calc(16vh - 40px);
    max-height: calc(16vh - 40px);
    overflow: hidden;
}

.small-window .middle-img {
    margin-top: -calc(24.5vh -40px) !important;
}

.small-window .half-circle-left {
    height: 17.5vw;
    width: 17.5vw;
    margin-top: -2vw;
    margin-left: -6vw;
}

.small-window .circle-height-quater {
    height: 4vw;
    width: 4vw;
}

.small-window .circle-height-width {
    width: 10vw;
    height: 10vw;
    overflow: hidden;
}

.small-window .sm-circle {
    height: 5.5vw;
    width: 5.5vw;
    margin: 0 auto;
}

.small-window .center-full-img {
    height: 13.8vw;
    width: 13.8vw;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: -2vw;
}

.small-window .tringle-circle {
    height: 4.4vw;
    width: 4.4vw;
    margin-bottom: 0vw;
}

.small-window .verti-circle {
    height: 4.5vw;
    width: 4.5vw;
    margin-top: 0vw;
    margin-bottom: 0.2vw;
}

.small-window .big-corner-circle {
    height: 14.5vw;
    width: 14.5vw;
    margin-top: -5.1vw;
    margin-left: -4.5vw;
    margin-bottom: 0px;
}

.small-window .big-center-pic {
    height: 17vw;
    width: 17vw;
    margin: 0 auto;
}

.small-window .big-center-image {
    height: 13.9vw;
    width: 13.9vw;
    margin: 0 auto;
}

.small-window .cornar-img {
    height: 9vw;
    width: 9vw;
    margin-top: 0vw;
}
.small-window .row-quater{min-height: 21vh;}
.small-window .temp-8-full{height: 94vh;}
.big-window .row-quater{min-height: 21vh;}
.big-window .temp-8-full{height: 100vh;}
.big-window .full-height {
    min-height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

.big-window .half-height {
    min-height: calc(50vh - 15px);
    max-height: calc(50vh - 15px);
    overflow: hidden;
}

.big-window .quater-height {
    min-height: calc(25vh - 13px);
    max-height: calc(25vh - 13px);
    overflow: hidden;
}

.big-window .img-half {
    min-height: calc(50vh - 40px);
    max-height: calc(50vh - 40px);
    overflow: hidden;
}

.big-window .img-quater-bigb {
    min-height: calc(25vh - 35px);
    max-height: calc(25vh - 35px);
    overflow: hidden;
}

.big-window .quater-img,
.big-window .img-quater {
    min-height: calc(25vh - 75px);
    max-height: calc(25vh - 75px);
    overflow: hidden;
}

.big-window .quater-img-big,
.big-window .img-quater-big {
    min-height: calc(25vh - 35px);
    max-height: calc(25vh - 35px);
    overflow: hidden;
}

.big-window .middle-img {
    margin-top: -calc(24.5vh -40px) !important;
    overflow: hidden;
}

.big-window .circle-height-width {
    width: 16vw;
    height: 16vw;
    overflow: hidden;
}

.big-window .sm-circle {
    height: 9vw;
    width: 9vw;
    margin: 0 auto;
}

.big-window .half-circle-left {
    height: 26.5vw;
    width: 26.5vw;
    margin-top: -2.1vw;
    margin-left: -8vw;
}

.big-window .circle-height-quater {
    height: 6vw;
    width: 6vw;
}

.big-window .setting-icons, .big-window .text-edition-action {
    display: none;
}

.big-window .center-full-img {
    height: 21.8vw;
    width: 21.8vw;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: -2vw;
}

.big-window .tringle-circle {
    height: 6vw;
    width: 6vw;
    margin-bottom: 2vw;
}

.big-window .verti-circle {
    height: 6.1vw;
    width: 6.1vw;
    margin-top: 1vw;
}

.big-window .big-center-pic {
    height: 26vw;
    width: 26vw;
    margin: 0 auto;
}

.big-window .big-corner-circle {
    height: 18.5vw;
    width: 18.5vw;
    margin-top: -5.1vw;
    margin-left: -4.5vw;
}

.big-window .big-center-image {
    height: 19.5vw;
    width: 19.5vw;
    margin: 0 auto;
}

.big-window .cornar-img {
    height: 12vw;
    width: 12vw;
    margin-top: 0;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
    padding-left: 10px;
    padding-right: 10px;
}

.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
    padding-left: 10px;
    padding-right: 10px;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

.padding-left-0 {
    padding-left: 0px;
}

.padding-right-0 {
    padding-right: 0px;
}

.no-padding {
    padding: 0;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-20 {
    padding-top: 20px;
}

.margin-top-10 {
    margin-top: 10px;
}

.lebal-component {
    position: relative;
    float: left;
    transform: rotate(-10deg);
}

.lebal-component .lebal-circle {
    height: 6vw;
    width: 6vw;
    background: #333;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 0.8vw;
    padding: 10px 5px;
}

.lebal-component .lebal-circle span:first-child {
    font-size: 0.9vw;
    display: block;
}

.lebal-component .lebal-circle span:last-child {
    font-size: 0.6vw;
    display: block;
    border-top: 1px solid #13c66d;
    padding-top: 5px;
}

.lebal-component .lebal-strip {
    position: absolute;

    left: 100%;
    top: 50%;
    min-width: 68px;
    background: #d80000;
    color: #fff;
    padding: 6px 10px;
    margin-top: -14px;
    margin-left: -3px;
}

.bg-white {
    background-color: #fff !important;
}

.no-border {
    border: none !important;
}

.small-window .circle-tag-holder {
    position: relative;
    height: 14vw;
    width: 14vw;
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    margin: 0 auto;
    padding: 0;
    clear: both;

}

.bottom-first-img {
    width: 18.7vw;
}

.small-window .bottom-bck-img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.small-window .bottom-bck-img img{
	width: auto;
	max-height: 10vh;
}
.big-window .bottom-bck-img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.big-window .bottom-bck-img img{
	width: auto;
	max-height: 20vh;
}

.makeCombo{
	position: absolute;bottom: 15vh;left: 4vh;background: #fff;border-radius: 0.5vh;z-index:3;width: 11vw;
}

.big-window .mooyha-temp-1 .makeCombo, .big-window.mooyha-temp-1 .makeCombo {
    bottom: 20vh;
    left: 4vh;
}
 
.small-window .mooyha-temp-1 .header, .small-window.mooyha-temp-1 .header{
	max-height: 15vh;
}
.big-window .mooyha-temp-1 .header, .big-window.mooyha-temp-1 .header{
	max-height: 15vh;
}

.big-window .mooyha-temp-1 .bottom-first-img, .big-window.mooyha-temp-1 .bottom-first-img {
    width: 26vw;
}

.big-window .mooyha-temp-1 .full-height, .big-window.mooyha-temp-1 .full-height {
 	min-height: 85vh !important;
	max-height: 85vh !important;
    overflow: hidden;
}



/** For Template template9**/

.template9 .component-list li .component-list-text {
    width: 33%;
}

.template9 .component-list-margin .component-list li {
    margin-bottom: 0;
    color: #333;
}

.template9 .component-list-margin .component-list {
    border: 0 none;
    border-radius: 0;
}

.template9 .component-holder.half-height {
    border-radius: 0;
}

.hand-cut-fries img {
    width: 12vw;
}

.template9 label {
    margin-bottom: 0;
}

.salads-right-img {
    position: absolute;
    right: -5vw;
    bottom: 0;
}

.salads-right-img img {
    width: 16vw;
}

.kids-right-img {
    position: absolute;
    right: -1vw;
    bottom: -1vh;
}

.kids-right-img img {
    width: 16vw;
    z-index: -1;
}

.coke-cane img {
    width: 12vw;
}

.shakes-strawberry {
    position: absolute;
    bottom: 4vh;
    left: 40%;
    top: 5%;
    transform: transition(-5%, -40%);
}

.shakes-strawberry img {
    width: 10vw;
}

.shakes-side {
    height: 32vh;
}

.template9 .p-0 {
    padding: 0 !important;
}

.template9 .text-component {
    color: #333;
}

.hand-cut-fries {
    position: absolute;
    top: 2vh;
    transform: rotate(20deg);
    right: -4vw;
}

.sweet-fries {
    position: absolute;
    top: 20vh;
    transform: rotate(20deg);
    right: -4vw;
}

.sweet-fries img {
    width: 11vw
}

.section-fries-img img {
    width: 10vw;
}

.section-fries-bottom {
    position: absolute;
    bottom: -5.5vh;
    transform: rotate(-40deg);
    left: -4vw;
}

.section-fries-bottom img {
    width: 10vw;
}

.coco-logo img {
    width: 6vw;
}

.gradient-template9 {
    background: #e31b23;
    background: -moz-linear-gradient(left, #e31b23 0%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #e31b23 0%, #ffffff 100%);
    background: linear-gradient(to right, #e31b23 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e31b23',
    endColorstr='#ffffff', GradientType=1);
}

.gradient-template9-back {
    background: #e31b23;
    background: -moz-linear-gradient(left, #ffffff 0%, #e31b23 100%);
    background: -webkit-linear-gradient(left, #ffffff 0%, #e31b23 100%);
    background: linear-gradient(to right, #ffffff 0%, #e31b23 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#e31b23', GradientType=1
    );
}

.small-window .template9 .half-height.fries, .small-window .template9 .half-height.shakes {
    min-height: calc(45.75vh - 5px);
    max-height: calc(45.75vh - 5px);
    overflow: hidden;
}

.big-window .template9 .half-height, .big-window .template9 .half-height,
.big-window.template9 .half-height, .big-window.template9 .half-height {
    min-height: 40vh !important;
	max-height: 40vh !important; 
    overflow: hidden;
}

.big-window .template9 .half-height.fries, .big-window .template9 .half-height.shakes,
.big-window.template9 .half-height.fries, .big-window.template9 .half-height.shakes {
    min-height: 60vh !important;
    max-height: 60vh !important;
    overflow: hidden;
}

.big-window .template9 .shakes-side, .big-window.template9 .shakes-side {
    height: 43vh;
}

.big-window .template9 .shakes-strawberry img, .big-window.template9 .shakes-strawberry img {
    width: 13vw;
}

.big-window .template9 .texas-fries-chili ,.big-window.template9 .texas-fries-chili {
    padding-top: 8vh;
}

.big-window .template9 .section-fries-bottom img ,.big-window.template9 .section-fries-bottom img {
    width: 14vw;
}

.big-window .template9 .kids-right-img img, .big-window.template9 .kids-right-img img {
    width: 20vw;
}

/**template_Byo **/
.template_Byo .component-list li{
	margin-bottom: 0.1vw;
}
.template_Byo label{
	margin-bottom: 0vw;
}
.template_Byo .text-component{
	width: none !important;
}
.template_Byo .component-list li span{
border: 1px solid transparent;
position: relative;
}
.template_Byo .component-list li span:hover{
border: 1px solid #ccc;
}
.template_Byo{
padding: 0 !important;

color: #000;
font-size: 1vw;
	}
.small-window .template_Byo{margin: 4vh 0 0 0;}
.big-window .template_Byo,.big-window.template_Byo{margin: 8.5vh 0 0 0;}
.template_Byo .template_Byo_bg{padding: 0.9vw 1.2vw; margin-bottom:1.5vh;}
.template_Byo .template_Byo_title_no{display:inline-block; vertical-align:middle; width: 1.8vw; height: 1.8vw; border-radius: 50%;border: 0.18vw solid #444; font-size:0.8vw; text-align: center;line-height: 1.5vw}
.template_Byo .template_Byo_middle_title {text-align:left;display:block;vertical-align:middle;margin: 0;font-size: 2vw;font-weight: 500;font-family: cursive;}
.template_Byo .template_Byo_middle_image img.comp-img{width: 25vw;max-height: 18vw;}
.template_Byo .template_Byo_subtitle {margin: 0;font-size: 1vw;font-weight: bold;color:#000;}
.template_Byo .byo_footer{text-align: center; border: 0.22vw solid #000; border-bottom:0; padding: 1.5vh 3vh; width:22vw; margin: 0 auto;}
.template_Byo .byo_footer label{color: #444; font-weight: 600;font-size: 1.5vw;}
.template_Byo .byo_footer span{font-size: 2.5vw;font-weight: 900;}
.template_Byo .byo_subfooter{text-align: center; background-color: #000000;color: #fff;font-size: 1.1vw; padding: 2vh 1.5vh;width: 100%; margin: 0 auto;}
.small-window .template_Byo .byo_subfooter, .small-window.template_Byo .byo_subfooter{height: 8vh;}
.big-window .template_Byo .byo_subfooter, .big-window.template_Byo .byo_subfooter{height: 8vh;}
.template_Byo .boy_header{text-align: center; display:block; height:55vh; width: 26.2vw;transform: perspective(50vh) scalex(0.5) rotateX(-45deg); background: #777;text-align: center;margin: 0 auto; margin-bottom:-11.5vh;}
.template_Byo .boy_header h1{margin: 0 auto;font-size: 2vw;color: #fff;font-family: cursive;transform:none;}
.template_Byo_middle_bg {
   
    display: block;
    margin-left: 0vh;
    margin-right: 0vh;
    position: relative;
    width: 100%;
    z-index: 1;
    background: gray;
    float: left;
    

}
.small-window .template_Byo_middle_bg{
	height: calc(60vh + 6vh);
	margin-top: -6vh;
}
.big-window .template_Byo_middle_bg{
	height: calc(60vh + 8.5vh);
    margin-top: -8.5vh;
}
.template_Byo_middle_bg:before{
	position: absolute;
	content: "";
	left: -2.5vh;
	top: 0;
	width: 6vh;
	height: 100%;
	transform: skewX(5deg);
	z-index: 1;
	background: gray;
}
.template_Byo_middle_bg:after{
	position: absolute;
	content: "";
	right: -2.5vh;
	top: 0;
	width: 6vh;
	height: 100%;
	transform: skewX(-5deg);
	z-index: 1;
	background: gray;
}
.btm-content-section{
	border: 3px solid gray;
	padding: 2.5vh 0;
}
.small-window .btm-content-section{
	height: 23vh;;
}
.big-window .btm-content-section{
	height: 23vh;;
}
.bg_gradient_left {background: linear-gradient(to right, #E84758 0%, #F8CED3 65%, #FDF5F6 90%, #FEFAF8 100%);}
.bg_gradient_right{background: linear-gradient(to left, #E84758 0%, #F8CED3 65%, #FDF5F6 90%, #FEFAF8 100%);}
.big-window .img-component .setting-icons{display:none !important;}
.big-window .text-component:hover{border: 1px solid transparent !important;}
.big-window .text-edition-action{display: none !important;}
.big-window img[src=""] { opacity: 0; height: 100% !important;}
.title-container{
	position: relative;
	width: 100%;
	height: 66px;
}
.title-tag{
	display: table;
	width: 100%;
	position: absolute;
	top: 0;
	margin: 10px 0 0 0;
}
.title-tag:before{
content: "";
background: #000;
width: 100%;
position: absolute;
top: 50%;
margin-top: -15px;
height: 30px;
left: 0;
z-index: -1;
transform: rotate(-1deg);	
}

.title-tag span{
	vertical-align: middle;
}

.big-window .template-11 .adjust-padding{
    padding-top:3vh!important;
}
.big-window .template-11 .adjust-padding label{
    padding-bottom:2vh!important;
    font-size:2.3vh;
}


.template-12 label,.template-12 span{
    font-family: 'Nunito', sans-serif;
}

.template12-adjust-padding{
    padding-top:13vh;
}
.big-window .template-12 .template12-adjust-padding{
    padding-top:25vh!important;
}
.big-window .template-12 .template12-adjust-padding .text-btn{
    margin-top:3vh;
}
.big-window .template-12 .big-window-adjustPadding{
    padding-top:5vh;
}
.big-window .template-12 .big-window-adjustPadding .text-btn{
    margin-bottom:3vh;
}
.temp-padding-handle{
    padding:4vh 0!important;
}
.big-window .template-12 .temp-padding-handle{
    padding:8vh 0!important;
}