#divKendinTasarla{min-height:600px;}
.fancybox-opened .fancybox-skin { padding: 0 !important; background-color: #fff; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Arial; font-size: 12px; }

.kendinTasarlaContent {max-width:1000px; min-width: 1000px; min-height: 500px; }

.kendinTasarlaContent:after { clear: both; display: table; content: ""; }

.kendinTasarlaLeft { position: relative; padding: 10px 5px; width:40%; float:left; }

.kendinTasarlaLeft:after { clear: both; display: table; content: ""; }

.kendinTasarlaRight { position: relative; margin: 10px 0; width:60%; float:right; text-align:center;padding:0 10px;}

.kendinTasarlaRight .canvas-container { max-width: 100% !important; margin:0 auto; }

.kendinTasarlaRight .canvas-container canvas { max-width: 100% !important; }


.kendinTasarlaRight:after { clear: both; display: table; content: ""; }

.bttn { margin: 0px; height: 30px; display: block; float: left; cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; }
.bttn svg{width:25px;}

.buttonEkle { background-color: #000 !important; width: 100%; margin:10px 0; border: 0; padding: 10px 0; cursor: pointer; color: #fff; }

#resimUpload { background-color: transparent !important; }


.kendinTasarlaBtn { width: 100%; margin: 10px 0; background-color: #000; border: 0; padding: 10px 0; cursor: pointer; color: #fff;float:left; }

.kendinTasarlaBtn:hover { background-color: #000; color: #fff; }


.square { width: 30px; background: #000000; }

.circle { width: 30px; background: #000000; border-radius: 30px; }

.rounded { width: 40px; background: #000000; border-radius: 10px; }

.triangle { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid #000; }

#islevler { margin-bottom: 20px; width: 100%; float: left; display: flex; justify-content: space-between; align-items: center; }

ul.tabs {padding: 0px; list-style: none; float: left; width: 100%; display: flex; justify-content: center; align-items: center;margin:10px 0 20px; }

ul.tabs li { background: none; color: #222; display: inline-block; padding: 8px 8px; cursor: pointer; font-weight: 600;flex:1;text-align:center; }

ul.tabs li.current { background: #d3d3d3; color: #222; }

.tab-content { display: none; }

.tab-content.current { display: inherit; max-height: 300px; overflow-x: hidden; overflow-y: auto;float:left;width:100%; }

#modal-background { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: .50; -webkit-opacity: .5; -moz-opacity: .5; filter: alpha(opacity=90); z-index: 1000; }

#modal-content { background-color: white; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0 0 20px 0 #222; -webkit-box-shadow: 0 0 20px 0 #222; -moz-box-shadow: 0 0 20px 0 #222; display: none; height: 750px; padding: 10px; position: absolute; width: 1185px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; }

#modal-background.active, #modal-content.active { display: block; }

.pinToggles { z-index: 100; }

#accordion { list-style: none; padding: 0 0 0 0; width: 300px; }

#accordion div.acc { display: block; background-color: #3f76b0; font-weight: bold; margin: 1px; cursor: pointer; padding: 5px 5px 5px 7px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #ffffff; }

#accordion ul { list-style: none; padding: 0 0 0 0; }

#accordion ul { display: none; }

#accordion ul li { font-weight: normal; cursor: auto; background-color: #f3f3f3; padding: 0 0 0 7px; }

.kendinTasarlaLeft table { width: 98%; }

.kendinTasarlaLeft table, th, td { }

.kendinTasarlaLeft th, .kendinTasarlaLeft td { padding: 5px 0; font-weight: 600; }


@media(max-width:768px) {
    #islevler{margin-bottom:0;}
    ul.tabs { margin-bottom: 0; }
    .kendinTasarlaContent { min-width: 100%; min-height: 100%; }
    .kendinTasarlaRight { width: 100%; }
    .kendinTasarlaLeft { width: 100%; }
    .kendinTasarlaRight .canvas-container { height: 47vh !important; }
    .kendinTasarlaRight .canvas-container canvas { height: 100% !important; }
    .kendinTasarlaContent textarea, .kendinTasarlaContent input[type="text"], .kendinTasarlaContent input[type="password"], .kendinTasarlaContent select { height: 30px; }
    .kendinTasarlaContent .kendinTasarlaBtn{margin-bottom:0;}
    .kendinTasarlaLeft th, .kendinTasarlaLeft td{font-size:11px;}
    .kendinTasarlaLeft .buttonEkle{margin-bottom:0;}
    .bttn svg{width:20px;}
    .bttn#clean svg{width:25px!important;}
}