.package_header{font-family: 'Open Sans', serif; font-weight: bold; font-size: 14px; margin: 5px 0 5px 0; text-transform: uppercase;}
    .package_header {margin-top: 35px;}
    .package_section {display: inline;}

      .imgBorder {border: 1px solid #e1e1e1;}

        .loader {width:25px !important; 
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 25px;
                    margin-top: 250px;
                  }

  .centerPreview {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 580px;
            }

            .icon-image:before {
            font-family: "Font Awesome 5 Free";
            content: "\f03e";
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            padding:10px;
            }
            .icon-box-add:before {
            font-family: "Font Awesome 5 Free";
            content: "\f03e";
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            }
            .icon-github:before {
            font-family: "Font Awesome 5 Free";
            content: "\f03e";
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            }
            .icon-rotate-right:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f01e";


            }
            .icon-rotate-left:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0e2";
            margin-right: 5px;

            }

            .large-image {font-size: 24px;}

            .cropit-preview {
            background-color: #f8f8f8;
            background-size: cover;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-top: 7px;
            width: 250px;
            height: 250px;
            }

            .cropit-preview-image-container {
            cursor: move;
            }



            .cropit-image-input.custom{visibility:hidden;position:absolute;top:0;left:0;width:1px;height:1px;}


            .select-image-btn{background:#ce0e2d;color:#fff;padding:10px 10px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:inline-block;position:relative; font-size: 14px; margin-top: 15px; width:230px;}

            .btn { cursor: pointer;margin-top:32px;color:#fff;background-color:#2D7BCD; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px 10px; width:100%; font-size: 14px; border: 0; transition: 0.5s ease; }

            .btn_href { cursor: pointer;margin-top:32px;color:#fff;background-color:#2D7BCD; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px 0 10px 0; width:100%; font-size: 14px; border: 0; transition: 0.5s ease; display: inline-block; text-align: center; text-decoration: none;}
            
            .liButton.selected{color: #fff; background-color: #ce0e2d; border-color: #ce0e2d;}

            ol,ul {
            list-style:none;
            padding:0;
            margin: 0;
            }
            /*
            li {position: relative; float:left; width:205px; border: 1px solid #e1e1e1; text-align: center; padding:20px 0 20px 0;}
            #formContainer {border: 1px solid #e1e1e1; width:728px; background-color: #fff; position:absolute; left: 50%; transform:translateX(-50%); top:50px; z-index: 2;}
            */
            body {margin:0; padding:0; background-color: #F1F1F1; font-family: 'Open Sans', serif;}
            h3 {font-family: 'Roboto Slab', serif; font-weight: normal; text-align: center; font-size: 16px; }
            h1 {font-family: 'Roboto Slab', serif; font-weight: normal; text-align: center; font-size: 28px; }
            h2{font-family: 'Open Sans', serif; font-weight: normal; font-size: 10px; margin: 5px 0 5px 0; text-transform: uppercase; color: #666;}
            h4 {font-size: 14px; margin:0; padding:0;}
            p{font-size: 12px;}

            li:hover { background: #f8f8f8;}

            @media (min-width: 481px) {  

            #leftcol{float:left; width:402px; margin-top:25px; margin-left:25px; }
            #formContent {float:right; margin:75px 25px 25px 25px; width:678px;}

            .floated_input {float:left; width: 333px;}
            #formContainer {border: 1px solid #e1e1e1; width:1155px; background-color: #fff; position:absolute; left: 50%; transform:translateX(-50%); top:50px; }


            .liButton {position: relative; float:left; width:205px; /*height: 80px;*/ border: 1px solid #e1e1e1; text-align: center; padding:10px 0 10px 0; font-size: 12px;}
          /*  .liButton:nth-child(3), .liButton:nth-child(6), .liButton:nth-child(9), .liButton:nth-child(12), .liButton:nth-child(15), .liButton:nth-child(18), .liButton:nth-child(21), .liButton:nth-child(24), .liButton:nth-child(27), .liButton:nth-child(30) { margin-right: 0; }*/
          .liButton2:nth-child(2n){ margin-right: 0; }

            .liButton3:nth-child(3n){ margin-right: 0; }
            .liButton4:nth-child(4n){ margin-right: 0; }

            .liButtonCenter{ position: relative; float:left; width:205px; border: 1px solid #e1e1e1; text-align: center; padding:20px 0 20px 0; display: flex; align-items: center; justify-content: center; text-align: center;}

            .col-10 {width:55px; height: 20px;}
            .col-10-space {margin-right:12px; margin-bottom: 15px;}


            .col-4 {width:160px;}
            .col-4-space {margin-right:10px; margin-bottom: 15px;}
            .col-3 {width:216px;}
            .col-3-space {margin-right:12px; margin-bottom: 15px;}
            .col-2 {width:331px; display: flex; justify-content: center; align-items: center;height: 145px;}
            .col-2-space {margin-right:12px; margin-bottom: 15px;}
            #salesRepImage {float:left;width:237px;}
            #salesRepData {width:100%;}


            #previewIMG { width:400px;}
            #previewIMGLG { width:800px;}


            }

            @media all and (max-width: 480px) { 
            #formContainer {border: 1px solid #e1e1e1; width:100%; background-color: #fff; z-index: 2;}
            .liButton {position: relative; width:100%; border: 1px solid #e1e1e1; text-align: center; padding:20px 0 20px 0;}
            .liButtonCenter{ position: relative; width:100%; border: 1px solid #e1e1e1; text-align: center; padding:20px 0 20px 0; display: flex; align-items: center; justify-content: center; text-align: center;}
            .col-4 {width:100%;}
            .col-4-space {margin-right:0; margin-bottom: 15px;}
            .col-3 {width:100%;}
            .col-3-space {margin-right:0; margin-bottom: 15px;}
            .col-2 {width:100%;}
            .col-2-space {margin-right:0; margin-bottom: 15px;}
            #salesRepImage {float:none;width:100%; text-align: center;}
            #salesRepData {float:none; width:100%;}

            .centerPreview {width:100%;}

                .floated_input {float:none; width:100%; margin: 0;}

            #previewIMG { display:none;}
            #previewIMGLG {width:100%;}


            .col-10 {width:100%;}
            .col-10-space {margin-right:0; margin-bottom: 15px;}


            }

            .flabel {display:block; margin-top: 8px; font-size: 12px; margin-bottom: 3px; font-weight: bold; color:#666;}
            .spaceRt {margin-right:15px; margin-bottom: 15px;}


   

            #mascotContainer {position:absolute; top:2px; z-index: 4; left: 50%; transform:translateX(-50%);}
            #formContent {margin:75px 25px 25px 25px; max-width:100%;}




         #mascot { display: inline-block; width: 100px; height: 100px; background: #fff; border-radius: 50%; background-image: url(https://ssgsales.com/renderer/_yearbook/yearbook_mark.png); background-repeat:no-repeat; background-size: 70%; background-position: center center; border: 5px solid #000; }

#color1Bar {height:150px; background-color: #000;}



       


            .repImg{border: 1px solid #e1e1e1;}

            .firstLabel {margin-top: 0;}
            .inputs {width:100%; box-sizing: border-box; border: 1px solid #e1e1e1; padding: 8px 8px; margin: 0; font-size: 14px; color:#919191;}
            .clear {clear: both;}

            .topRow {margin-top: 24px;}
            .teamLabel {margin-top: 8px;}

            .selectedBox {border:1px solid #2D7BCD; }
            .selectedBox i {color:#2D7BCD; background-color: #fff;}
            .rightCircle{ position:absolute;right:-10px; top:-10px;}


            #wait, #successMsg, #failuresMsg {margin:100px 25px 25px 25px; max-width:100%;}

            #wait p, #successMsg p, #failuresMsg p {text-align: center;}


            #done {margin:100px 25px 25px 25px; max-width:100%;}
            #wait h1 {font-size: 22px; font-weight: normal;}
            #otherLabel {display: block; font-size: 12px;}

            .message_box{ height:275px; }

            .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 30px;
            margin-top: 30px;
            }


  

            .stickerThumb {width:35px; }

            /*  For New code*/
            .btnapply { cursor: pointer;margin-top:5px;color:#fff;background-color:#ce0e2d; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px 10px; width:25%; font-size: 14px; border: 0; transition: 0.5s ease; }
            .inputszemp {width:36%; box-sizing: border-box; border: 1px solid #e1e1e1; padding: 8px 8px; margin: 0; font-size: 14px; color:#919191;}

            /* Tooltip container */
            .tooltip {
            position: relative;
            display: inline-block;
            /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
            }

            /* Tooltip text */
            .tooltip .tooltiptext {
            visibility: hidden;
            width: 300px;
            background-color: #000000;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 16px;

            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 1;
            }

            /* Show the tooltip text when you mouse over the tooltip container */
            .tooltip:hover .tooltiptext {
            visibility: visible;
            }
            .ui-widget {font-family: 'Karla', sans-serif; z-index: 2;}
            .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {border:0;}
            .ui-menu{padding:0;}

            .ui-menu .ui-menu-item {
            font-size:13px;
            padding: 5px 0 5px 0;
            }

         /*   .card_templates{height: 80px;}*/

            #away_team {margin-top: 25px;}
            .multiple_mascot {margin-right: 25px; float:left;}
            .image_selected {border: 2px solid #ce0e2d;border-radius: 10px;}
         

                .color_selection_container{width: 200px; /*display: inline-block;*/ border-radius: 5px; position: relative; }
                .color_selection_content {position: absolute; top: 100%; left: 0; z-index: 1000; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background-color: #fff;}
                .color_selection_content ul {list-style-type: none;}
                .color_selection_content li {float: left; margin: 0; padding: 3px;}
                .selected_color_container{border: 1px solid #e1e1e1;  padding: 10px; display: inline-block; width: 311px;}
                .color_label {float: left; margin-left: 10px;}
                .brand_option {display: flex; align-items: center;}
                .brand_option img {margin-right: 5px;}
            /*    .floated_input {width: 333px;}*/

/* .liButton:nth-child(3n){ margin-right: 0;}*/

.template_thumb {height:150px;}