.modal-dialog{width: 95%;max-width: 650px;margin: 100px auto 0 auto;} .modal-backdrop.in{filter: alpha(opacity=50); opacity: 0.5;} .modal-content{border: none;} .modal-header{background-color: #ebeded;padding: 15px;border: none;} .modal-header .modal-title{color: #fff;line-height: 1;text-align: center;} .modal-header .modal-title img{width: 120px;float: left;position: relative;} .modal-header .modal-title h3{width: calc(100% - 200px);float: left;position: relative;text-align: center;font-size: 32px; font-weight: 300;line-height: 1;color: #000;} .top_msg_close,.modal_custom_close.close { font-size: 35px;font-weight: bolder;padding: 0 9px; position: absolute;color: #ffffff; background-color: #FF580F ; filter: alpha(opacity=100);opacity: 1;right: 0;top: 0;margin: 0;z-index: 1;} .top_msg_close:hover.modal_custom_close.close:hover{color: #bd1f3c; background-color: #333 ;text-shadow: 0 1px 0 #bd5b3c;} .modal-body{background-color: #FBFBFB;padding: 30px;} /*************Choose Font Color Modal****************/ #choseFontColor ul{list-style-type: none;padding: 30px ;} #choseFontColor ul li{width: calc(11.1111111% - 20px);float: left;margin: 0 20px 20px 0;cursor: pointer;border:1px solid #333;box-shadow: 2px 3px 4px 1px #665C5C;} #choseFontColor ul li p{padding:0;font-size: 25px;text-align: center;height: 115px;} #choseFontColor ul li span{display: block;text-align:center;padding: 10px 5px;font-size: 22px;float: left;width: 100%;background-color: #d0d0d0;font-weight: 500;} #choseFontColor ul li span>span{display:contents;} #choseFontColor p{padding:0 30px;text-align: left;width: 100%;float: left;font-size: 16px;font-weight: 300;color: #B1AAAA;line-height: 1.4;} #choseFontColor .color_search_list>p,#choseFont .color_search_list>p{padding: 8px 0 0 10px;color: #fff;} #choseFontColor .serchClearFontColor{top:12px;} #choseClipart, #choseFont, #choseState, #choseFontColor{padding: 0 !important;} #choseFont .modal-dialog, #choseState .modal-dialog, #choseClipart .modal-dialog, #choseFontColor .modal-dialog{max-width: 100%;margin: 0;width: 100%;height: 100%;display: flex;} #choseFont .modal-content, #choseClipart .modal-content, #choseState .modal-content, #choseFontColor .modal-content{margin: 0;width: 100%;max-width: 100%;} #choseFont .modal-header, #choseState .modal-header, #choseClipart .modal-header, #choseFontColor .modal-header{background-color: #878E9E;padding: 15px 0;} #choseFont .modal-header input, #choseClipart .modal-header input, #choseFontColor .modal-header input{max-width: 450px;height: 55px;margin: 0 auto;font-size: 20px;} #choseFont .modal_custom_close.close, #choseClipart .modal_custom_close.close, #choseFontColor .modal_custom_close.close{font-size: 70px;color: #FF0303;background-color: #878E9E;padding: 0;margin: 5px 20px;} #choseFont .modal_custom_close.close:hover, #choseClipart .modal_custom_close.close:hover, #choseFontColor .modal_custom_close.close:hover{background-color: #878E9E;color: #fff;} #choseFont .modal-body, #choseClipart .modal-body, #choseFontColor .modal-body{padding: 0;} #choseFont ul, #choseClipart ul{list-style-type: none;} .modal .tab_list{width: 280px;float: left;background-color: #fff;border-right: 1px solid #707070;height: calc(100vh - 85px);overflow-y: auto;} .modal .tab_list li{width: 100%;float: left;border-bottom: 1px solid #707070;background-color: #FCFCFC;} .modal .tab_list li.active{background-color: #F1F1F1;} .modal .tab_list li a{font-size: 20px;display: block;text-align: center;padding: 15px 0;} .modal .tab-content{width: calc(100% - 280px);float: left;padding: 25px;height: calc(100vh - 85px);overflow-y: auto;} .modal .tab-content li{width: 115px;height: 115px;float: left;margin: 0 20px 20px 0;display: flex;} .modal .tab-content li button{width: 100%;border-color: #fff;} .modal .tab-content li button.active, .modal .tab-content li button:active{background-color: #fff;} .modal .tab-content li button:hover{border-color: #ff9900;} .modal .tab-content img{margin: auto;} .modal .tab-content>p{padding: 30px 0 50px 0;text-align: left;width: 100%;float: left;max-width: 1420px;font-size: 16px;font-weight: 300;color: #B1AAAA;line-height: 1.4;} #choseFont.modal .tab-content li{width: calc(50% - 20px);height: auto;float: left;margin: 0 20px 20px 0;display: inherit;cursor: pointer;} #choseFont.modal .tab-content img{height: 60px;} #choseFont ul li p{padding: 10px 0;font-size: 30px;text-align: center;} #choseFont ul li span{text-align: center;padding: 10px 0;font-size: 40px;} #choseFont .content_list{padding:20px 0 0 20px;height: calc(100vh - 85px);overflow-y: auto;} #choseFont .content_list li{width:calc(33.3333% - 20px);float:left;margin:0 20px 20px 0;} #choseFont .color_search_list ul li span,#choseFont ul li span span{padding: 0;font-size: 18px;text-align: inherit;width: initial;float: none;} #choseFont ul li span span{font-size: 32px;color:red;} #showClipart{padding: 0;} #showClipart .modal-dialog{max-width: 100%;margin: 0;width: 100%;height: 100%;} #showClipart .modal-content{margin: auto;width: 100%;max-width: 600px;} #showClipart .modal-body{background-color: #fff;padding:0;border: 2px solid #707070;padding: 40px 40px 0 40px;} .clipart_modal_close { position: absolute; top: 0; right: 0; border-left: 2px solid #707070; border-bottom: 2px solid #707070; padding: 1px 7px; border-bottom-left-radius: 10px; font-size: 24px; font-weight: 600; color: red; cursor: pointer;} .art_img{width: 380px;float: left;} .art_img img{width: 100%;} .art_button{width: calc(100% - 380px);float: left;} .art_button button{width: 100%; float: right;border: none;max-width: 80px;padding: 0;margin: 10px 0;} .art_button button img{margin: 0 auto;} .art_refresh button{border: none;width: 75px; float: left; margin: 20px 20px 20px 0;} .art_delete button{border: none;width: 135px; float: left; margin: 20px 20px 20px 0;color: #fff;font-size: 20px;font-weight: 300;background-color: #FF0303;padding: 10px 0;} .art_delete button:hover, .art_delete button:focus, .art_delete button:active { background-color: #FF0303; color: #fff; } .art_add button{border: none;width: 235px; float: left; margin: 20px 0;color: #fff;font-size: 20px;font-weight: 300;background-color: #0B9B0B;padding: 10px 0;} .art_add .btn-default:hover, .art_add .btn-default:focus, .art_add .btn-default:active { background-color: #0B9B0B; color: #fff; } /***************************/ #term_modal .modal-dialog{max-width: 100%;margin: 30px 0 0 0;width: 100%;height: auto;display: flex;max-height: 800px;overflow: hidden;} #term_modal .modal-content{max-width: 1140px;margin: auto;width: 100%;} #login,#forget_pass,#register{padding: 0;} #login .modal-dialog, #forget_pass .modal-dialog, #register .modal-dialog, .artwork_modal .modal-dialog{max-width: 100%;margin: 0;width: 100%;height: 100%;display: flex;} #login .modal-content, #forget_pass .modal-content, #register .modal-content{margin: auto;width: 100%;max-width: 670px;} #term_modal .terms_and_condition{padding: 0;overflow: auto;height: 60vh;} #term_modal .modal-body p{text-align: left;color: #888;padding: 0;} #term_modal .terms_and_condition h3, #term_modal .terms_and_condition h4{margin:10px 0;} #login .modal-header{padding: 30px;} #login .modal-header .modal-title h3{float: left;width: 60%;} #login .modal-header .modal-title img{float: left;} #login .modal-body{padding: 70px 0;} .modal-body p{padding: 0 15px 15px 15px;text-align: center;font-size: 15px;color: #aaa;} .modal-body h2{color: #979494;font-size: 20px;max-width: 385px;margin: 0 auto 20px auto;font-weight: 300;} .modal-body .form-group{width: 100%;max-width:312px;margin: 0 auto;} .modal-body .form-group .group{width: 100%;float: left;margin: 10px 0 0 0;position: relative;} .modal-body .form-group .group input{font-size:18px; display:block;height: 40px;border-radius: 0;padding: 0 15px;color: #979494;} .modal-body .form-group .group input:focus { outline:none; } .modal-body .form-group .group label {color:#979494; font-size:18px;font-weight:normal;position:absolute;left:15px;top:11px; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;transition:0.2s ease all; } .modal-body .form-group .group .subscribe{position: relative;width: 100%;max-width: 120px;margin: 10px auto;height: 20px;padding: 3px 0 0 30px;font-size: 15px;color: #979494;} .modal-body .form-group .group .subscribe input{height: 20px;margin: 0;position: absolute;visibility:hidden;outline: 0;} .modal-body .form-group .group .subscribe label.checkbox_area{left: 0;top: 0; width: 20px; height: 20px; border: 1px solid #000;cursor: pointer;} .modal-body .form-group .group .subscribe input[type="checkbox"]:checked ~ .checkbox_area:after {z-index: 11; content: ""; top: 0;left: 0;width: 25px;height: 10px;border: 2px solid green; border-top-style: none;border-right-style: none; position: absolute; transform: rotate(-45deg);} .modal-body .form-group .group p{text-align: center;font-size: 13px;color: #979494;font-weight: 300;margin: 0 0 20px 0;} #login .modal-body .form-group .group:last-child button.btn, #forget_pass .modal-body .form-group .group:last-child button.btn, .modal-body .form-group .group button.btn{max-width: 225px;margin: 0 auto;width: 100%;display: block;background-color: #FF5700;border-radius: 0;font-size: 26px;color: #fff;border: none;} .modal-body .form-group .group button.btn:hover, .modal-body .form-group .group button.btn:focus, .modal-body .form-group .group button.btn:after{color: #707070;box-shadow: inherit;} .modal-body .form-group .group:last-child button.btn{max-width: 125px;background-color: initial;font-size: 14px;color: #6A6A6A;} .modal-body .form-group .group a{color: #6A6A6A;font-size: 12px;margin: 0 0 30px 0; display: block;max-width: 100px;} .modal-body .form-group .group a:hover{color: #761c19;} .modal-body label p, .modal-body p>p{display: inline;} .modal-body .form-group .has-error, .modal-body .form-group .help-block , .modal-body label>p, .modal-body p>p{color: #ef4b1f;display: inline;} /* active state */ .modal-body .form-group .group input:focus ~ label, .modal-body .form-group .group.has-error input[type='email']:invalid ~ label, .modal-body .form-group .group input:valid ~ label{top:2px;font-size:12px; color:#555;} .serchClearFont{top: 12px;} /*ARTWORK MODAL*/ .artwork_modal .modal-body{border: 5px solid #ccc;} .artwork_modal .modal-content{margin: auto;width: 100%;max-width: 1500px;} .artwork_modal .modal-body h2{max-width: 100%;margin: 0;font-weight: 500;font-size: 25px;color: #707070;} .artwork_modal.modal .tab-content{width: 100%;} /*end*/ @media only screen and (max-width: 1500px){ #choseFont ul li span{font-size: 32px;} #choseFontColor .color_search_list > p, #choseFont .color_search_list > p{color: #fff;padding: 0 20px;line-height: 1;font-size: 14px;} #choseFontColor ul li{width: calc(14.285% - 20px);} .modal .tab-content{padding: 20px 10px 20px 20px;} #choseClipart.modal .tab-content li{width: calc(12.5% - 15px);height: auto;margin: 0 15px 15px 0;} } @media only screen and (max-width: 1199px){ .modal .tab_list{width: 180px;} .modal .tab_list li a{padding: 15px 0;} .modal .tab-content{width: calc(100% - 180px);padding: 15px;} .modal .tab-content > p{padding: 15px 0;} #choseFont.modal .tab-content li{width: calc(50% - 15px);margin: 0 15px 15px 0;} #choseFont ul li span{font-size: 25px;} #choseFontColor ul{padding: 20px 10px 20px 20px;} #choseFontColor ul li{width: calc(16.66667% - 20px);} #choseClipart.modal .tab-content li{width: calc(14.2587% - 15px);} } @media only screen and (max-width: 991px){ .modal-dialog{margin: 10px auto 0 auto;} #choseFont ul li span{font-size: 20px;} #choseFontColor ul li{width: calc(20% - 20px);} #choseFontColor ul li span{font-size: 18px;} #choseClipart.modal .tab-content li{width: calc(16.666% - 15px);} } @media only screen and (max-width: 767px){ .modal-dialog{max-width: 400px;} #login .modal-header, .modal-header{padding: 10px;} .modal-header .modal-title img{width: 90px;float: left;} .modal-header .modal-title h3{font-size: 20px;padding: 5px 0 0 0;width: calc(100% - 90px);float: left;text-align: left;} #login .modal-body { padding: 30px 15px; } .modal-body{padding: 15px;} .modal-body h2{font-size: 14px;margin: 0 auto 10px auto;} #forget_pass .modal-body p{font-size: 13px;} #forget_pass .modal-title h3{font-size: 16px;} #login .modal-body .form-group .group:last-child button.btn, #forget_pass .modal-body .form-group .group:last-child button.btn, .modal-body .form-group .group button.btn{font-size: 20px;} .modal-body .form-group .group label{font-size: 16px;top: 12px;} /*#choseFont ul li span{font-size: 25px;}*/ .modal .tab_list{width: 110px;} .modal .tab_list li a{padding: 10px 0;font-size: 14px;} .modal .tab-content{width: calc(100% - 110px);} .modal .tab-content > p{font-size: 13px;} #choseFont .content_list li{width: calc(50% - 20px);} #choseFont .modal-header input, #choseClipart .modal-header input, #choseFontColor .modal-header input{height: 45px;} #choseFont .modal_custom_close.close, #choseClipart .modal_custom_close.close, #choseFontColor .modal_custom_close.close{font-size: 55px;} .serchClearFont, #choseFontColor .serchClearFontColor{top: 7px;} #choseFontColor ul li{width: calc(25% - 10px);margin: 0 10px 10px 0;} #choseFontColor ul{padding: 15px;} #choseClipart.modal .tab-content li{width: calc(20% - 10px);margin: 0 10px 10px 0;} .modal .tab-content{padding: 10px;} } @media only screen and (max-width: 670px){ #choseFont.modal .tab-content li, #choseFont .content_list li{width:100%;margin:0 0 15px 0;} #choseFont .content_list {padding: 20px;} #choseFont .modal-header .modal-title, #choseFontColor .modal-header .modal-title, #choseClipart .modal-header .modal-title{max-width:calc(100% - 60px);margin:0 0 0 10px;} .art_button{width: 70px;} .art_img{width:calc(100% - 70px);} .art_img img { width: auto; max-height: 300px; margin: 0 auto;} li.art_refresh{width:60px;float:left;padding:10px 0;} li.art_delete{width:calc(50% - 60px);float:left;padding:10px;} li.art_add{width:50%;float:left;padding:10px;} .art_refresh button, .art_delete button, .art_add button{ width: 100%; margin: 0 auto;height: 40px;padding: 0;} .art_refresh button img{height: 40px;} #choseClipart.modal .tab-content li{width: calc(25% - 10px);} } @media only screen and (max-width: 550px){ #choseFontColor ul li{width: calc(33.33333% - 10px);} #choseClipart.modal .tab-content li{width: calc(33.3333% - 10px);} } @media only screen and (max-width: 400px){ #choseFont ul li span{font-size: 20px;} #choseFontColor ul li{width: calc(50% - 10px);} #showClipart .modal-body{padding:15px;} li.art_button{width: 50px;padding:5px;} li.art_img{width:calc(100% - 50px);padding:5px;} #choseClipart.modal .tab-content li{width: calc(50% - 10px);} }