body {
    background-color: #093e50;
    font-family: "Montserrat", sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 14px;
}

.loginBody {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000 !important;
}

.loginContainer {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 26px;
    background: radial-gradient(circle, rgb(62, 138, 155) 0%, rgb(24, 41, 45) 100%);
    -webkit-box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.2);
    left: calc(50% - 250px);
    left: -webkit-calc(50% - 250px);
    left: -moz-calc(50% - 250px);
    top: 20%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #222;
    opacity: 0.9;
}

.loginLogo {
    float: left;
    width: 54%;
    height: 170px;
    background: url(../img/logoonka.png) center center no-repeat;
    background-size: contain;
    margin-left: 22%;
    margin-top: 20px;
}

.loginTextBox {
    float: left;
    width: 83%;
    height: 50px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 16px;
    text-indent: 10px;
    border: none;
    margin-top: 20px;
    background-color: #d4e4e9;
}

.loginTextBox2 {
    float: left;
    width: 60%;
    height: 50px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 16px;
    text-indent: 10px;
    border: none;
    background-color: #d4e4e9;
}

.seperator {
    float: left;
    width: 500px;
    height: 20px;
}

.loginButton {
    float: left;
    width: 200px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    border-radius: 12px;
    background-color: #27a0af;
    border: none;
    cursor: pointer;
    margin-left: 45%;
    text-decoration: none;
    margin-top: 30px;
}

.loginButton:hover {
    background-color: #17262e;
    color: #fff;
}

.rememberBox {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 10px;
}

#rememberYes {
    float: left;
    width: 40px;
    height: 40px;
    background: url(../img/remy.png) center center no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-top: 6px;
}

#rememberNo {
    float: left;
    width: 40px;
    height: 40px;
    background: url(../img/remn.png) center center no-repeat;
    background-size: contain;
    cursor: pointer;
    display: none;
    margin-top: 6px;
}

.check {
    float: left;
    width: 26px;
    height: 26px;
    margin-left: 76px;
}

.checkText {
    float: left;
    width: 200px;
    height: 26px;
    margin-left: 10px;
    color: #fff;
    font-size: 16px;
    line-height: 29px;
}

#particle-canvas {
    position: absolute !important;
    z-index: 2;
    width: 100%;
    height: 830px;
    left: -10px;
    overflow: hidden;
}

.header {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
}

.logo {
    float: left;
    width: 200px;
    height: 70px;
    background: url(../img/logo.png) center center no-repeat;
    cursor: pointer;
}

.profilImage {
    float: right;
    width: 70px;
    height: 70px;
    margin-right: 10px;
}

.alertIcon {
    float: right;
    width: 70px;
    height: 70px;
    background: url(../img/alert.png) center center no-repeat;
}

.alertBadge {
    position: relative;
    width: 18px;
    height: 18px;
    background-color: #ec185d;
    border-radius: 100px;
    margin-top: 22px;
    margin-left: 38px;
}

.mainContainer {
    position: absolute;
    z-index: 2;
    width: 90%;
    height: auto;
    margin: 70px 0 70px 4.5%;
}

.mainContainerSubPage {
    position: absolute;
    z-index: 2;
    width: 90%;
    height: auto;
    margin: 100px 0 70px 4.5%;
}

.collapsableMenu {
    position: absolute;
    z-index: 10;
    width: 620px;
    height: 229px;
    background-color: #17282e;
    left: calc(50% - 360px);
    left: -webkit-calc(50% - 310px);
    left: -moz-calc(50% - 310px);
    top: -180px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    transition: all 1s ease;
    -webkit-box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 6px 11px -4px rgba(0, 0, 0, 0.4);
    background-image: url(../img/collapseIcon.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.collapsableMenu:hover {
    top: 0px;
}

.menuContainer {
    width: 100%;
    height: 180px;
    background: rgb(55, 96, 108);
    background: radial-gradient(circle, rgb(68, 123, 131), rgb(23, 64, 73));
}

.menuContainerContent {
    float: left;
    width: 90%;
    height: 200px;
    margin-left: 70px;
    margin-top: 30px;
}

.menuBoxContent {
    display: inline-block;
    width: 126px;
    height: 136px;
    margin-bottom: 30px;
    margin-left: 25px;
}

.menuBox {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    margin-left: 13px;
    background-color: #1b172e;
    background-image: url(../img/image-4.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.menuBox[two] {
    background-image: url(../img/image-3.png);
}

.menuBox[three] {
    background-image: url(../img/menuicon3.png);
}

.menuBox[for] {
    background-image: url(../img/menuicon4.png);
}

.menuBox[five] {
    background-image: url(../img/menuicon5.png);
}

.menuBox[six] {
    background-image: url(../img/menuicon6.png);
}

.menuBox[seven] {
    background-image: url(../img/menuicon7.png);
}

.menuBox[eight] {
    background-image: url(../img/menuicon8.png);
}

.menuBox[nine] {
    background-image: url(../img/menuicon9.png);
}

.menuBox[ten] {
    background-image: url(../img/menuicon10.png);
}

.menuBox[eleven] {
    background-image: url(../img/menuicon11.png);
}

.menuBox:hover {
    border: 2px solid #51a0aa;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 14px 3px rgba(128, 198, 212, 0.3);
    -moz-box-shadow: 0px 0px 14px 3px rgba(128, 198, 212, 0.3);
    box-shadow: 0px 0px 14px 3px rgba(128, 198, 212, 0.3);
}

.menuBoxInfo {
    float: left;
    width: 100px;
    height: 30px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin-top: 6px;
    margin-left: 13px;
    font-weight: bold;
    text-decoration: none;
}

.filterBlock {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.datePickerStart {
    display: inline-block;
    width: 360px;
    height: 50px;
    margin-left: calc(50% - 360px);
    margin-left: -webkit-calc(50% - 360px);
    margin-left: -moz-calc(50% - 360px);
    border-radius: 12px;
    border: 1px solid #272240;
    box-sizing: border-box;
}

.datePickerStart:hover {
    background-color: #3f3769;
}

.datePickerFinish {
    display: inline-block;
    width: 360px;
    height: 50px;
    border-radius: 12px;
    border: 1px solid #272240;
    box-sizing: border-box;
}

.datePickerFinish:hover {
    background-color: #3f3769;
}

.row {
    width: 100%;
    height: auto;
}


.rowContentBox4 {
    float: left;
    width: 50%;
    height: auto;
}

.rowContentBox2 {
    float: left;
    width: 50%;
    height: auto;
}

.rowContentBox {
    float: left;
    width: 100%;
    height: auto;
}

.contentBox {
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    height: auto;
    min-height: 200px;
    margin: 10px;
    border-radius: 12px;
    -webkit-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
    background: #1f6d85;
}

.contentBoxTop {
    float: left;
    width: 40%;
    height: 70px;
    background-color: #f3784e;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    margin-left: 10%;
    margin-top: -2px;
    box-shadow: 8px 9px 5px -6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 8px 9px 5px -6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 8px 9px 5px -6px rgba(0, 0, 0, 0.2);
}

.contentBoxTop[two] {
    background-color: #79be55;
}

.contentBoxTop[three] {
    background-color: #e1e712;
}

.contentBoxTop[for] {
    background-color: #4eb8f4;
}

.contentBoxTopImage {
    width: 40px;
    height: 40px;
    background: url(../img/icon2.png) center center no-repeat;
    margin-top: 14px;
    margin-left: calc(50% - 20px);
    margin-left: -webkit-calc(50% - 20px);
    margin-left: -moz-calc(50% - 20px);
    background-size: contain;
}

.contentBoxTopImage[two] {
    background: url(../img/icon1.png) center center no-repeat;
    background-size: contain;
}

.contentBoxTopImage[three] {
    background: url(../img/icon3.png) center center no-repeat;
    background-size: contain;
}

.contentBoxTopImage[for] {
    background: url(../img/icon4.png) center center no-repeat;
    background-size: contain;
}

.contentBoxData {
    float: left;
    width: 100%;
    height: 90px;
    text-align: center;
    font-size: 62px;
    line-height: 98px;
    color: #fff;
    font-weight: bold;
}

.contentBoxDataInfo {
    float: left;
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.3);
}

.footer {
    position: fixed;
    z-index: 8;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
    background-color: #18282d;
    color: rgba(255, 255, 255, 0.3);
    text-indent: 20px;
    text-align: left;
    line-height: 30px;
    font-size: 14px;
}


/*/ HARİTA/*/
.mapContainer {
    width: 100%;
    height: 500px;
    margin-top: 50px;
}

.svg-turkiye-haritasi {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    text-align: center;
}

.svg-turkiye-haritasi svg {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.il-isimleri {
    position: absolute;
    z-index: 2;
}

.il-isimleri div {
    display: inline-block;
    color: #fff;
    padding: 0px 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#svg-turkiye-haritasi path {
    cursor: pointer;
    fill: #383160;
}

#svg-turkiye-haritasi path:hover {
    fill: #634fac;
}

#guney-kibris {
    pointer-events: none;
}


/*/ ÖRNEK CHART/*/

.area-chart {
    margin: 0;
    padding: 0;
    border: 0;
    width: 90%;
    height: 200px;
    margin-left: 5%;
}

.area-chart tbody {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: row;
}

.area-chart tr {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.area-chart td {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color, rgba(240, 50, 50, 0.75));
    clip-path: polygon(0% calc(100% * (1 - var(--start))), 100% calc(100% * (1 - var(--end))), 100% 100%, 0% 100%);
}

.area-chart td:nth-of-type(1) {
    --color: rgba(240, 50, 50, 0.75);
}

.area-chart td:nth-of-type(2) {
    --color: rgba(255, 180, 50, 0.75);
}

.area-chart td:nth-of-type(3) {
    --color: rgba(255, 220, 90, 0.75);
}


/*/ ALT SAYFALAR /*/

.subPageTopBar {
    width: 100%;
    height: 50px;
}

.subPageMenu {
    display: inline-block;
    width: 19%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: #17272e;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 2px;
}



.subPageMenuOne {
    display: inline-block;
    width: 24%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: #1b172e;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 5px;
}

.subPageMenuTwo {
    display: inline-block;
    width: 24%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: #1b172e;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 5px;
}

.subPageMenuThree {
    display: inline-block;
    width: 24%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: #1b172e;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 5px;
}

.subPageMenuFor {
    display: inline-block;
    width: 24%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: #1b172e;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 5px;
}

.selectactive {
    font-weight: bold;
    color: #fff;
    background-color: #27a0af;
}

.subPageContainer {
    width: 100%;
    height: auto;
    border-top: 5px solid #27a0af;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    -webkit-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    float: left;
    margin-bottom: 120px;
}

.subPageContentBox {
    width: 96%;
    height: auto;
    margin: 2%;
    margin-bottom: 2%;
    float: left;
}


/*/ QR ÇIKTI/*/

.QRBox {
    position: fixed;
    z-index: 11;
    width: 140px;
    height: 170px;
    bottom: -140px;
    right: 20px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    line-height: 26px;
    background-color: #1b172e;
    background-image: url(../img/qr.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.QRBox:hover {
    bottom: 0px;
    transition: all 1s ease;
}

.QRicon {
    width: 30px;
    height: 30px;
    background-image: url(../img/qricon.png);
    background-position-x: left;
    background-position-y: top;
    background-repeat: no-repeat;
    margin-top: -27px;
}


/*/ TABLET/*/

@media (max-width: 990px) {

    .collapsableMenu {
        height: 440px;
        top: -390px;
    }

    .collapsableMenu:active {
        top: 0px;
    }

    .menuContainer {
        height: 390px;
    }

    .header {
        top: 60px;
    }

    .mainContainer {
        margin: 138px 0 70px 4.2%;
    }

    .mainContainerSubPage {
        margin: 140px 0 70px 4.2%;
    }

    .profilImage {
        margin-right: 10px;
    }

    .rowContentBox4 {
        width: 50%;
    }

    .imageUploadedArea {
        float: left;
        width: 50%;
        padding: 3px;
        transition: all 1s ease-in-out;
        border-radius: 12px;
    }
}


/*/ TELEFON /*/

@media screen and (max-width: 546px) {

    .loginContainer {
        width: 360px;
        height: 500px;
        left: calc(50% - 180px);
        left: -webkit-calc(50% - 180px);
        left: -moz-calc(50% - 180px);
        top: 15%;
        border-radius: 0;
    }

    .loginButton {
        margin-left: 30%;
    }

    .collapsableMenu {
        width: 360px;
        height: 730px;
        left: calc(50% - 180px);
        left: -webkit-calc(50% - 180px);
        left: -moz-calc(50% - 180px);
        top: -680px;
    }

    .collapsableMenu:active {
        top: 0px;
    }

    .menuContainer {
        height: 680px;
    }

    .menuContainerContent {
        float: left;
        width: 96%;
        height: 400px;
        margin-left: 2.5%;
        margin-top: 30px;
    }

    .menuBoxContent {
        display: inline-block;
        width: 110px;
        height: 136px;
        margin-bottom: 20px;
    }

    .menuBox {
        margin-left: 5px;
    }

    .menuBoxInfo {
        margin-left: 5px;
    }

    .header {
        top: 60px;
    }

    .profilImage {
        margin-right: 10px;
    }

    .mainContainer {
        margin: 140px 0 70px 3.3%;
    }

    .mainContainerSubPage {
        margin: 140px 0 70px 3.3%;
    }

    .datePickerStart {
        display: inline-block;
        width: 360px;
        height: 50px;
        margin-left: calc(50% - 180px);
        margin-left: -webkit-calc(50% - 180px);
        margin-left: -moz-calc(50% - 180px);
        margin-bottom: 10px;
    }

    .datePickerFinish {
        display: inline-block;
        width: 360px;
        height: 50px;
        margin-left: calc(50% - 180px);
        margin-left: -webkit-calc(50% - 180px);
        margin-left: -moz-calc(50% - 180px);
    }

    .rowContentBox4 {
        float: left;
        width: 100%;
    }

    .rowContentBox2 {
        width: 100%;
    }

    .subPageMenuOne {
        font-size: 12px;
    }

    .subPageMenuTwo {
        font-size: 12px;
    }

    .subPageMenuThree {
        font-size: 12px;
    }

    .subPageMenuFor {
        font-size: 12px;
    }

    .footer {
        font-size: 12px;
    }

    .check {
        margin-left: 52px;
    }

    .subPageContainer {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-radius: 0px;
    }
}


/*/ ÜRÜNLER DETAY POP-UP/*/

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 740px;
    border-radius: 12px;
}

.close {
    color: #529eaa;
    float: right;
    font-size: 46px;
    font-weight: bold;
    height: 20px;
    margin-top: -18px;
}

.close:hover,
.close:focus {
    color: #17262e;
    text-decoration: none;
    cursor: pointer;
}

#slider-wrapper {
    width: 700px;
    height: 500px;
    margin: 50px auto;
    position: relative;
    margin-bottom: 50px;
    background: #1b172e;
    overflow: hidden;
}

#s1 {
    padding: 6px;
    background: #6352aa;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -36px;
    border-radius: 20px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s2 {
    padding: 6px;
    background: #6352aa;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -12px;
    border-radius: 20px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s3 {
    padding: 6px;
    background: #6352aa;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: 12px;
    border-radius: 20px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s4 {
    padding: 6px;
    background: #6352aa;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: 36px;
    border-radius: 20px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
    opacity: .50;
}

.inner-wrapper {
    width: 700px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0px;
    overflow: hidden;
}

.control {
    display: none;
}

#Slide1:checked~.overflow-wrapper {
    margin-left: 0%;
}

#Slide2:checked~.overflow-wrapper {
    margin-left: -100%;
}

#Slide3:checked~.overflow-wrapper {
    margin-left: -200%;
}

#Slide4:checked~.overflow-wrapper {
    margin-left: -300%;
}

#Slide1:checked+#s1 {
    opacity: 1;
}

#Slide2:checked+#s2 {
    opacity: 1;
}

#Slide3:checked+#s3 {
    opacity: 1;
}

#Slide4:checked+#s4 {
    opacity: 1;
}

.overflow-wrapper {
    width: 400%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.slide img {
    width: 25%;
    float: left;
    height: 100%;
    background-size: contain;
}

.sliderInfoBlock {
    float: left;
    width: 700px;
    height: auto;
    margin-left: 20px;
    margin-top: -20px;
    border-radius: 12px;
    background-color: #6352aa;
}

.sliderInfoTitle {
    width: 90%;
    height: 40px;
    color: #fff;
    font-size: 20px;
    margin: 20px 20px 0 20px;
}

.sliderInfoText {
    width: 90%;
    height: auto;
    color: #fff;
    font-size: 15px;
    margin: 0 20px 20px 20px;
}

/*/ TELEFON /*/

@media screen and (max-width: 546px) {

    .modal-content {
        width: 360px;
        margin: 40% auto;
        height: 310px;
    }

    .close {
        margin-top: -26px;
        margin-right: -12px;
    }

    #slider-wrapper {
        width: 340px;
        height: 243px;
        margin: 20px auto;
        position: relative;
        margin-bottom: 10px;
        background: #1b172e;
        overflow: hidden;
    }

    .inner-wrapper {
        width: 340px;
        height: 243px;
        position: absolute;
        top: 0;
        left: 0;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .sliderInfoBlock {
        float: left;
        width: 340px;
        height: auto;
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 12px;
        background-color: #6352aa;
    }

    .subPageMenu {
        font-size: 11px;
    }
}


/*/ SOL ALT ÇIKTI MENÜSÜ/*/

.nav {
    position: fixed;
    bottom: 0px;
    z-index: 6;
}

.nav li {
    list-style-type: none;
    background-color: #223840;
    width: 50px;
    height: 50px;
    text-align: center;
    z-index: 5;
    cursor: pointer;
    display: block;
    border-radius: 12px;
    margin-top: 5px;
}

.nav li:hover {
    display: block;
    background-color: #529eaa;
    width: 60px;
    height: 60px;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    transition: 0.1s linear;
    margin-left: -5px;
    -webkit-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 9px 12px 2px rgba(0, 0, 0, 0.05);
}

.nav li a {
    display: block;
    width: 100%;
    height: 100%;
}

.nav li a:hover {
    color: #6352aa;
}

button.popupBottomMenu,
ul.trigger {
    text-align: center;
    width: 50px;
    height: 50px;
    position: fixed;
    margin-bottom: 50px;
    bottom: 0;
    left: 0;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    transition: 0.2s linear;
    border: none;
}

ul.trigger {
    margin-left: -20px;
    margin-bottom: -272px;
}

button.popupBottomMenu {
    background-color: #17272e;
    width: 50px;
    height: 77px;
    text-align: center;
    margin-bottom: 0px;
    margin-left: 20px;
    bottom: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
    border-radius: 12px;
    background-image: url(../img/bottomMenuIcon.png);
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
}

button.popupBottomMenu:hover {
    background-image: url(../img/bottomMenuIconH.png);
}

.popupBottomMenuBox {
    width: 50px;
    height: 50px;
    background: url(../img/bottomMenuPrintIcon.png) center center no-repeat;
}

.popupBottomMenuBox[two] {
    background: url(../img/bottomMenuSaveIcon.png) center center no-repeat;
}

.popupBottomMenuBox[three] {
    background: url(../img/bottomMenuPublishIcon.png) center center no-repeat;
}

.popupBottomMenuBox[for] {
    background: url(../img/bottomMenuShowIcon.png) center center no-repeat;
}

ul.trigger.slideout:nth-child(1) {
    -webkit-transform: translateY(-22.5em) translateX(0em);
    -moz-transform: translateY(-22.5em) translateX(0em);
    transform: translateY(-22.5em) translateX(0em);
}






/*/ COMPONENTLER/*/

.componentContainer {
    width: 90%;
    height: auto;
    margin: 5%;
}

.componentRow {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.componentTitle {
    color: #fff;
    font-size: 22px;
    margin-bottom: 30px;
}

.componentSubTitle {
    color: #fff;
    font-size: 18px;
    font-weight: lighter;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0.1rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    border-radius: 6px;
    height: 46px;
}

.btn:hover {
    color: #1b172e;
    text-decoration: none;
}

.btn-disabled {
    display: inline-block;
    background-color: rgba(99, 82, 170, 0.2);
    color: rgba(255, 255, 255, 0.2);
    text-align: center;
    height: 46px;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-primary {
    color: #fff;
    background-color: #529eaa;
    border-color: #529eaa;
}

.btn-primary:hover {
    color: #fff;
    background-color: #365d71;
    border-color: #315263;
}

.btn-refresh {
    display: inline-block;
    background-color: #5198aa;
    color: fff;
    text-align: center;
    height: 46px;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-refresh:hover {
    color: #223740;
    background-color: #d4e4e9;
}

.btn-outline-primary {
    color: #d4e7e9;
    border-color: #519daa;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #519daa;
    border-color: #519daa;
}

.btn-secondary {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:hover {
    color: #6352aa;
}

.btn-delete {
    color: #fff;
    background-color: #ec185d;
    border-color: #ec185d;
}

.btn-delete:hover {
    color: #fff;
    background-color: #980939;
    border-color: #980939;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}


.btn-edit {
    color: #fff;
    background-color: #2474b7;
    border-color: #2474b7;
}

.btn-edit:hover {
    color: #fff;
    background-color: #0a4e88;
    border-color: #0a4e88;
}

.buttonIcon {
    float: left;
    width: 26px;
    height: 26px;
}

.buttonText {
    float: left;
    font-size: 1rem;
    color: #fff;
    line-height: 0.8 !important;
    margin-left: auto;
}

.buttonIconText {
    float: left;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    margin-left: 8px;
}

input[type=range] {
    accent-color: #6352aa;
}

.fa {
    font-size: x-large !important;
}

.formBox {
    height: 36px;
    margin-bottom: 10px;
    padding: 5px;
}

.formBoxAutoHeight {
    height: auto;
    padding: 5px;
    width: 100%;
}

.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: 6px;
    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    border: 1px solid #ddd;
    font-family: "Montserrat", sans-serif;
    margin-top: -5px;
}

.form-controlAutoHeight {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1b172e;
    background-color: #d8d4e9;
    background-clip: padding-box;
    border: 1px solid #d8d4e9;
    border-radius: 6px;
    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.selectOption {
    background-color: #6352aa;
    color: #fff;
}

.dropup,
.dropright,
.dropdown,
.dropleft {
    position: relative;
    display: inline-block
}

.dropdown-toggle {
    white-space: nowrap;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #1b172e;
    text-align: left;
    list-style: none;
    background-color: #d4e5e9;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.mobilTopSep {
    margin-top: 150px;
    width: 100%;
    height: 10px;
    display: none;
}

@media screen and (max-width: 546px) {
    .dropdown-menu-sm-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-sm-right {
        right: 0;
        left: auto;
    }

    .mobilTopSep {
        display: block;
    }
}

.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropright .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropright .dropdown-toggle::after {
    vertical-align: 0;
}

.dropleft .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
}

.dropleft .dropdown-toggle::after {
    display: none;
}

.dropleft .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropleft .dropdown-toggle::before {
    vertical-align: 0;
}

.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
    right: auto;
    bottom: auto;
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

.dropdown-item {
    display: block;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none;
    font-size: 15px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    text-decoration: none;
    background-color: #5198aa;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #529eaa;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-header {
    display: block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
}

.dropdown-item-text {
    display: block;
    padding: 0.25rem 1.5rem;
    color: #16181b;
}

.btn-outline-secondary {
    color: #fff;
    border-color: #6352aa;
}

.btn-outline-secondary:hover {
    color: #16181b;
    background-color: #d8d4e9;
    border-color: #6352aa;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(57, 62, 70, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: #393e46;
    background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6352aa;
    border-color: #6352aa;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(57, 62, 70, 0.5);
}

.btn-group-lg>.btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.btn-group-sm>.btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.05rem;
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
    z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
    z-index: 1;
}

.btn-toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.btn-toolbar .input-group {
    width: auto;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
    margin-left: -1px;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:last-child)>.btn {
    margin-right: 2px;
    text-decoration: none;
    line-height: 46px;
    padding: 0px 10px;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
    margin-left: 2px;
    text-decoration: none;
    line-height: 46px;
    padding: 0px 10px;
}

.dropdown-toggle-split {
    padding-right: 0.5625rem;
    padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
    margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
    margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.btn-group-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
    width: 100%;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
    margin-top: -1px;
}

.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical>.btn-group:not(:last-child)>.btn {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
    margin-bottom: 0;
}

.btn-group-toggle>.btn input[type="radio"],
.btn-group-toggle>.btn input[type="checkbox"],
.btn-group-toggle>.btn-group>.btn input[type="radio"],
.btn-group-toggle>.btn-group>.btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.form {
    width: 300px;
}

.form-box {
    width: 272px;
    height: 36px;
    margin: 0 0 10px 10px;
    text-indent: 10px;
}

.form-check-input {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

.form-check-label {
    float: left;
    margin-left: 2px;
    font-size: 12px;
    line-height: 3;
}

.btn-loc {
    margin-left: 88px;
}

.progress {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 0.3rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.progress-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #6352aa;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        -webkit-transition: none;
        transition: none;
    }
}

.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 0.3rem 0.3rem;
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none;
    }
}

.mt-2 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.progresText {
    position: absolute;
    width: 90%;
    height: 20px;
    color: #000;
    text-align: center;
    margin-top: -20px;
    font-size: 14px;
}

.bg-success {
    background-color: #1bb74f;
}

.bg-danger {
    background-color: #ec185d;
}

.bg-warning {
    background-color: #ff6d02;
}

.pagination {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    border-radius: 6px;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.3rem 0.7rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #fff;
    border: 1px solid transparent;
    text-decoration: none !important;
    border-radius: 6px;
}

.page-link:hover {
    z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: rgba(105, 90, 166, 0.3);
    border-color: transparent;
    border-radius: 6px;
}

.page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(105, 90, 166, 0.25);
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
    z-index: 1;
    color: #d8d4e9;
    background-color: #6352aa;
    border-color: #6352aa;
    border-radius: 6px;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #d8d4e9;
    border-color: #dee2e6;
    border-radius: 6px;
}

.pagination-lg .page-link {
    padding: 0.4rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
    padding: 0.15rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.pagination-lg .page-link {
    padding: 0.4rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.leftPage {
    font-weight: bolder;
    color: #6352aa;
}

.rightPage {
    font-weight: bolder;
    color: #6352aa;
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge-primary {
    color: #fff;
    background-color: #6352aa;
}

.badge-secondary {
    color: #fff;
    background-color: #393e46;
}

.badge-success {
    color: #fff;
    background-color: #1bb74f;
}

.badge-info {
    color: #fff;
    background-color: #17a2b8;
}

.badge-warning {
    color: #fff;
    background-color: #ff6d02;
}

.badge-first {
    color: #fff;
    background-color: #ff6d02;
    position: relative !important;
    z-index: 3;
    top: -2px;
    left: 5px;
    height: 8px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    line-height: 8px;
}

.badge-danger {
    color: #fff;
    background-color: #ec185d;
}

.badge-light {
    color: #212529;
    background-color: #f8f9fa;
}

.badge-dark {
    color: #fff;
    background-color: #212529;
}


.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 4rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

.alert-success {
    color: #fff;
    background-color: #04AA6D;
    border-color: #04AA6D;
}

.alert-success hr {
    border-top-color: #ace5bf;
}

.alert-success .alert-link {
    color: #073316;
}

.alert-info {
    color: #fff;
    background-color: #2474b7;
    border-color: #2474b7;
}

.alert-info hr {
    border-top-color: #abdde5;
}

.alert-info .alert-link {
    color: #062c33;
}

.alert-warning {
    color: #fff;
    background-color: orange;
    border-color: orange;
}

.alert-warning hr {
    border-top-color: #ffc79f;
}

.alert-warning .alert-link {
    color: #522301;
}

.alert-danger {
    color: #fff;
    background-color: #ec185d;
    border-color: #ec185d;
}

.alert-danger hr {
    border-top-color: #f8a6c2;
}

.alert-danger .alert-link {
    color: #4d071e;
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-light hr {
    border-top-color: #ececf6;
}

.alert-light .alert-link {
    color: #686868;
}

.closeX {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
    background-color: transparent;
    border: none;
    margin-top: -5px;
    margin-right: -50px;
    cursor: pointer;
    color: #fff;
}

.closeX:hover {
    opacity: 1;
    text-decoration: none;
}

.danger {
    background-color: rgba(233, 32, 95, 0.4);
    border-left: 10px solid #e9205f;
    height: 46px;
    line-height: 46px;
    text-indent: 20px;
    color: #fff;
}

.success {
    background-color: rgba(27, 169, 111, 0.4);
    border-left: 10px solid #1ba96f;
    height: 46px;
    line-height: 46px;
    text-indent: 20px;
    color: #fff;
}

.info {
    background-color: rgba(41, 117, 181, 0.4);
    border-left: 10px solid #2975b5;
    height: 46px;
    line-height: 46px;
    text-indent: 20px;
    color: #fff;
}

.warning {
    background-color: rgba(253, 164, 40, 0.4);
    border-left: 10px solid #fda428;
    height: 46px;
    line-height: 46px;
    text-indent: 20px;
    color: #fff;
}

table {
    border-collapse: collapse;
    color: #111;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    overflow-x: scroll;
    overflow: hidden;
}

.mobileSearch {
    display: none;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dbf9ff;
    vertical-align: middle;
    text-align: left;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

.table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tableImage {
    width: 100px;
    height: 70px;
    padding: 5px;
    cursor: pointer;
}

.tableMobil {
    border-collapse: collapse;
    color: #111;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    overflow-x: scroll;
    overflow: hidden;
    min-width: 1120px;
    display: none;
}

.tableMobil th,
.tableMobil td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #ddd;
    vertical-align: middle;
    text-align: left;
}

.tableMobil-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

.tableMobil-bordered {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tableMobilImage {
    width: 100px;
    height: 70px;
    background-color: orange;
    padding: 5px;
    cursor: pointer;
}

.filterDiv {
    float: left;
    background-color: orange;
    color: #ffffff;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none;
    border-radius: 9px;
    cursor: pointer;
}

.showw {
    display: block;
}

.container {
    margin-top: 20px;
    overflow: hidden;
}

.box {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #182a2d;
    cursor: pointer;
    color: #fff;
    border-radius: 6px;
    height: 46px;
}

.box:hover {
    background-color: #5192aa;
    color: #fff;
}

.searchFilter {
    height: 46px;
    margin-bottom: 30px;
    margin-top: 20px;
    text-indent: 20px;
    font-size: 16px;
    background-color: #fff;
    border: none;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #999;
}

.box.selectbox {
    background-color: #6352aa;
    color: #fff;
}

.tablesHeader {
    width: 100%;
    display: inline-block;
}

tr:hover {
    background-color: #375862;
    color: #fff;
}


label {
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
    color: #000;
}

label input[type=checkbox].checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.6em;
    height: 1.6em;
    background: #fff;
    margin: 5px;
    margin-top: 5px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    outline: 0;
    transition: content 0.2s ease-in-out, background 0.2s ease-in-out;
    border: 1px solid #999;
    margin-top: 1px;
}

label input[type=checkbox].checkbox:checked {
    background: #6352aa;
}

label input[type=checkbox].checkbox:checked::after {
    content: "✓";
    left: 50%;
    top: 50%;
    font-size: 0;
    font-weight: bold;
    transform: translate(-50%, -50%);
    text-align: center;
    vertical-align: middle;
    position: absolute;
    -webkit-animation: checkAppear 0.4s ease-in-out forwards;
    animation: checkAppear 0.4s ease-in-out forwards;
}

label input[type=checkbox].checkbox::after {
    content: "";
    color: white;
    font-size: 100%;
}

label input[type=checkbox].toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 3em;
    height: 1.8em;
    background: #ddd;
    vertical-align: middle;
    border-radius: 1.6em;
    position: relative;
    outline: 0;
    margin: 5px;
    margin-top: -1px;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
}

label input[type=checkbox].toggle::after {
    content: "";
    width: 1.8em;
    height: 1.8em;
    background: white;
    position: absolute;
    border-radius: 1.2em;
    transform: scale(0.7);
    left: 0;
    box-shadow: 0 1px rgba(0, 0, 0, 0.5);
    transition: left 0.1s ease-in-out;
}

label input[type=checkbox].toggle:checked {
    background: #6352aa;
}

label input[type=checkbox].toggle:checked::after {
    left: 1.2em;
}

label input[type=radio].radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.8em;
    height: 1.8em;
    background: #ddd;
    vertical-align: middle;
    border-radius: 1.6em;
    position: relative;
    outline: 0;
    margin: 5px;
    margin-top: -1px;
    cursor: pointer;
}

label input[type=radio].radio::after {
    content: "";
    width: 1.8em;
    height: 1.7em;
    background: #6352aa;
    position: absolute;
    border-radius: 1.2em;
    box-shadow: 0 1px rgba(0, 0, 0, 0.5);
    transform: scale(0);
    display: none;
    animation: radioAppear 0.4s ease-in-out reverse;
}

label input[type=radio].radio:checked::after {
    display: block;
    -webkit-animation: radioAppear 0.4s ease-in-out forwards;
    animation: radioAppear 0.4s ease-in-out forwards;
}

@-webkit-keyframes checkAppear {
    50% {
        font-size: 2em;
    }

    100% {
        font-size: 1.15em;
    }
}

@keyframes checkAppear {
    50% {
        font-size: 2em;
    }

    100% {
        font-size: 1.15em;
    }
}

@-webkit-keyframes radioAppear {
    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.6);
    }
}

@keyframes radioAppear {
    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.6);
    }
}

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: white;
    box-sizing: border-box;
}

.containerTab {
    padding: 20px;
    color: white;
    margin-top: -20px;
}

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

.closebtn {
    float: right;
    color: white;
    font-size: 35px;
    cursor: pointer;
    margin-top: -10px;
}

.accordion {
    background-color: #6352aa;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom: 2px;
}

.accordion:hover {
    background-color: #3d316f;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: #d8d4e9;
    overflow: hidden;
}

.tab {
    overflow: hidden;
    border-top: 5px solid #1b172e;
    border-left: 5px solid #1b172e;
    background-color: #1b172e;
    color: #fff;
    border-top-right-radius: 9px;
    border-top-left-radius: 9px;
    box-sizing: border-box;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 15px;
    color: #fff;
}

.tab button:hover {
    background-color: #6352aa;
}

.tab button.active {
    background-color: #6352aa;
    color: #000;
    font-weight: bold;
}

.tabcontent {
    display: none;
    padding: 20px;
    border-top: none;
    color: #fff;
    font-size: 15px;
}

.topListContent {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.searchBox {
    float: left;
    width: calc(100% - 46px);
    width: -webkit-calc(100% - 46px);
    width: -moz-calc(100% - 46px);
    height: 46px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    text-indent: 10px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #d8d4e9;
    border: none;
}

.searchIcon {
    float: left;
    width: 46px;
    height: 46px;
    background: #6352aa;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-image: url(../img/searchIcon.png);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #d8d4e9;
}

.searchIcon:hover {
    background: #1b172e;
    background-image: url(../img/searchIcon.png);
    background-position: center;
    background-repeat: no-repeat;
}

.rowSeperator {
    float: left;
    width: 100%;
    height: 30px;
}

.custom-select select {
    display: block;
}

.select-selected {
    background-color: #6352aa;
}

.select-selected:after {
    position: relative;
    content: "";
    top: 14px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-color: #fff transparent transparent transparent;
    left: 10px;
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: -14px;
}

.select-items div,.select-selected {
    color: #ffffff;
    padding: 12px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.select-items {
    background-color: #6352aa;
    margin-top: 4px;
    border-radius: 9px;
    position: absolute;
    z-index: 8;
}

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.table-container {
    margin: auto;
    overflow: scroll;
    width: 100%;
}

.listArrow {
    height: 16px;
    background: url(../img/listArrow.png) center center no-repeat;
    float: right;
    margin-left: 10px;
    width: 10px;
}

.notification {
    background-color: #6352aa;
    color: white;
    text-decoration: none;
    padding: 13px 12px;
    position: relative;
    border-radius: 6px;
    top: 2px;
}

.notification:hover {
    background: #ec185d;
    ;
}

.notification .badge {
    position: absolute;
    top: -10px;
    right: -11px;
    padding: 6px 8px;
    border-radius: 50%;
    background: #ec185d;
    color: white;
}


#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2474b7;
    -webkit-animation: spin 1.7s linear infinite;
    animation: spin 1.7s linear infinite;
    z-index: 11;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #6352aa;
    -webkit-animation: spin-reverse 0.6s linear infinite;
    animation: spin-reverse 0.6s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: orange;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-reverse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes spin-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


/*/ CHARTS/*/

.chartBox {
    float: left;
    width: 470px;
    height: 180px;
    margin-left: calc(50% - 235px);
    margin-left: -webkit-calc(50% - 235px);
    margin-left: -moz-calc(50% - 235px);
    margin-top: 6px;
}

.chartBoxOne {
    float: left;
    width: 900px;
    height: 180px;
    margin-left: calc(50% - 450px);
    margin-left: -webkit-calc(50% - 450px);
    margin-left: -moz-calc(50% - 450px);
    margin-top: 6px;
}


.bottomSep {
    float: left;
    width: 100%;
    height: 50px;
}

.menuBoxSep {
    float: left;
    width: 100%;
    height: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: -24px;
    margin-bottom: 24px;
    border-bottom: 1px dotted #333;
}


@media screen and (max-width: 990px) {
    .chartBox {
        width: 300px;
        height: 120px;
        margin-left: calc(50% - 150px);
        margin-left: -webkit-calc(50% - 150px);
        margin-left: -moz-calc(50% - 150px);
        margin-top: 30px;
    }

    .chartBoxOne {
        width: 600px;
        height: 120px;
        margin-left: calc(50% - 300px);
        margin-left: -webkit-calc(50% - 300px);
        margin-left: -moz-calc(50% - 300px);
        margin-top: 30px;
    }
}


@media screen and (max-width: 546px) {
    .chartBox {
        width: 300px;
        height: 120px;
        margin-left: calc(50% - 150px);
        margin-left: -webkit-calc(50% - 150px);
        margin-left: -moz-calc(50% - 150px);
        margin-top: 30px;
    }

    .chartBoxOne {
        width: 300px;
        height: 120px;
        margin-left: calc(50% - 150px);
        margin-left: -webkit-calc(50% - 150px);
        margin-left: -moz-calc(50% - 150px);
        margin-top: 30px;
    }

    .area-chart {
        display: none;
    }

    .seperator {
        width: 320px;
    }
}


/*/ ALT SAYFALAR /*/

.imageUploadBlock {
    float: left;
    width: 100%;
    height: auto;
}

.dragDropArea {
    float: left;
    width: 50%;
    height: 200px;
    border: 3px dotted #999;
    color: #000;
    font-size: 26px;
    text-align: center;
    line-height: 200px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    box-sizing: border-box;
}

.imageUploadButtonArea {
    float: left;
    width: 50%;
    height: 200px;
    background-color: #ddd;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-sizing: border-box;
}

#imageUploadButton {
    float: left;
    width: 50%;
    height: 70px;
    margin-left: 25%;
    margin-top: 64px;
    line-height: 70px;
    border-radius: 9px;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all ease 1sn;
}

#imageUploadButton:hover {
    background-color: #79be55;
}

.imageUploadButton {
    float: left;
    width: 50%;
    height: 70px;
    margin-left: 25%;
    margin-top: 64px;
    line-height: 70px;
    border-radius: 9px;
    background-color: #6352aa;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all ease 1sn;
}

.imageUploadButton:hover {
    color: #fff;
    background-color: #6eaec6;
    border-color: #6eaec6;
}

.newsFormBlock {
    float: left;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.newsTitle {
    float: left;
    font-size: 26px;
    font-weight: bold;
    height: auto;
    margin-top: 40px;
    margin-bottom: 15px;
    border-radius: 9px;
    padding: 0.375rem 0.75rem;
}

.selectNewsCategoryBox {
    float: left;
    width: 100%;
    height: 24px;
}

.selectNewsCategory {
    float: left;
    width: 100%;
    height: 50px;
    background-color: #79be55;
    color: #fff;
    font-size: 20px;
    text-indent: 10px;
    margin-bottom: 20px;
    border-radius: 9px;
    border: none;
}

.texteEditor {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 30px !important;
    margin-top: 20px;
}

.categoryCheckText {
    font-size: 18px;
}

.categoryCheckText[first] {
    margin-left: calc(50% - 329px);
    margin-left: -webkit-calc(50% - 329px);
    margin-left: -moz-calc(50% - 329px);
}

.saveButton {
    position: fixed;
    z-index: 10;
    bottom: 40px;
    width: 200px;
    height: 50px;
    text-align: center;
    color: #fff;
    background-color: #000;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 12px;
    left: calc(50% - 100px);
    left: -webkit-calc(50% - 100px);
    left: -moz-calc(50% - 100px);
    cursor: pointer;
    text-decoration: none;
}

    .saveButton:hover {
        background-color: #5296aa;
    }

#uploadPhotosBlock {
    float: left;
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: none;
}

.uploadPhotosBox {
    display: inline-block;
    width: 150px;
    height: auto;
}

.uploadPhotosBoxImage {
    float: left;
    width: 150px;
    height: 110px;
    border: 1px solid #999;
}

#uploadPhotosBoxImage {
    float: left;
    width: 150px;
    height: 110px;
    border: 1px solid #999;
    background-color: #ddd;
    background-image: url(../img/imgAdd.png);
    background-position: center;
    cursor: pointer;
}

.showcaseRadioButton {
    float: left;
    width: 112px;
    height: 25px;
    padding-left: 26px;
    margin-top: 12px;
}

.uploadPhotosBoxImageMakerBlok {
    float: left;
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-top: 1px dotted #999;
    border-bottom: 1px dotted #999;
}

.imageMakerImage {
    float: left;
    width: 500px;
    height: 375px;
    background-color: #ddd;
    background-image: url(../img/imgBack.png);
    background-position: center;
}

.imageMakerContentBlok {
    float: left;
    width: calc(100% - 520px);
    width: -webkit-calc(50% - 520px);
    width: -moz-calc(50% - 520px);
    height: 335px;
    margin-top: 20px;
    margin-left: 20px;
}

.commentTopBlock {
    float: left;
    width: 100%;
    height: auto;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.commentTopBlock::-webkit-scrollbar {
    display: none;
}

.commentStatusSelect {
    float: left;
    width: 48.2%;
    height: 50px;
    border-radius: 6px;
    color: #7c7c7c;
    background-color: #d8d4e9;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    text-align: left;
    border: none;
    margin-bottom: 30px;
    padding: 0 20px 0 20px;
}

.commentFormBlock {
    float: left;
    width: 100%;
    height: auto;
}

.commentText {
    float: left;
    width: 360px;
    height: auto;
    color: rgb(0, 0, 0);
    font-size: 14px;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 360px;
    font-family: "Montserrat", sans-serif;
}

.commentChart {
    position: absolute;
    width: 500px;
    height: 114px;
    right: 23px;
    margin-left: 20px;
}

.sendMessageBlock {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.messageCounterBlock {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.sendMessageTextBox {
    float: left;
    width: 500px;
    height: 200px;
    color: rgb(0, 0, 0);
    font-size: 14px;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 360px;
    font-family: "Montserrat", sans-serif;
    max-height: 200px;
    min-height: 200px;
    min-width: 500px;
    max-width: 500px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: calc(50% - 250px);
    margin-left: -webkit-calc(50% - 250px);
    margin-left: -moz-calc(50% - 250px);
}

.sendMessageTextBox::-webkit-scrollbar {
    display: none;
}

.sendMessageButton {
    float: left;
    width: 120px;
    height: 46px;
    margin-left: calc(50% - 60px);
    margin-left: -webkit-calc(50% - 60px);
    margin-left: -moz-calc(50% - 60px);
    font-weight: bold;
    font-size: 18px;
    line-height: 46px;
    margin-top: 20px;
}

.counterBox {
    float: left;
    width: 200px;
    height: 100px;
    margin-left: calc(50% - 100px);
    margin-left: -webkit-calc(50% - 100px);
    margin-left: -moz-calc(50% - 100px);
}

#result {
    text-transform: uppercase;
}

.tryagain {
    float: left;
    font-weight: 400;
    color: black;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 20px;
    cursor: pointer;
    border-radius: 6px;
    height: 20px;
    background-color: #d8d4e9;
    width: 70px;
    margin-left: calc(50% - 35px);
    margin-left: -webkit-calc(50% - 35px);
    margin-left: -moz-calc(50% - 35px);
    text-align: center;
    text-decoration: none;
}

.hits {
    float: left;
    width: 70px;
    font-size: 2em;
    font-weight: bolder;
    margin-left: calc(50% - 24px);
    margin-left: -webkit-calc(50% - 24px);
    margin-left: -moz-calc(50% - 24px);
    text-align: center;
    color: #ddd;
}

.messageList {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.messageListBox {
    float: left;
    width: 500px;
    height: auto;
    color: #ddd;
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: calc(50% - 250px);
    margin-left: -webkit-calc(50% - 250px);
    margin-left: -moz-calc(50% - 250px);
    margin-top: 20px;
}

.coffeeBlok {
    float: left;
    width: 360px;
    height: auto;
    margin-left: calc(50% - 20px);
    margin-left: -webkit-calc(50% - 20px);
    margin-left: -moz-calc(50% - 20px);
    margin-top: -10px;
}

.analyseChartBox {
    float: left;
    width: 100%;
    height: 300px;
}

.highcharts-credits {
    color: #fff !important;
}

.textErase {
    position: absolute;
    z-index: 100;
    width: 200px;
    height: 12px;
    background-color: #fff;
    right: 0;
    top: 287px;
}

.rowMod {
    position: absolute;
    z-index: 999;
    width: 400px;
    top: 300px;
    right: 0;
    display: none;
}

.modImage {
    float: left;
    width: 100%;
    height: 360px;
    margin-top: 50px;
    background: url(../img/modImage1.png) center center no-repeat;
}

.modImage2 {
    float: left;
    width: 100%;
    height: 360px;
    margin-top: 50px;
    background: url(../img/modImage2.png) center center no-repeat;
}

.imageUploadedArea {
    float: left;
    width: 20%;
    padding: 3px;
    transition: all 1s ease-in-out;
    border-radius: 12px;
}

.addEditRow {
    float: left;
    width: 100%;
    height: 200px;
    margin-bottom: 30px;
}

.addEditImage {
    float: left;
    width: 300px;
    height: 200px;
    background-size: contain;
}

.addEditImage[one] {
    background: url(../img/970x250.png) center center no-repeat;
}

.addEditImage[two] {
    background: url(../img/970x90.png) center center no-repeat;
}

.addEditImage[three] {
    background: url(../img/728x90.png) center center no-repeat;
}

.addEditImage[for] {
    background: url(../img/300x600.png) center center no-repeat;
}

.addEditImage[five] {
    background: url(../img/336x280.png) center center no-repeat;
}

.addEditImage[six] {
    background: url(../img/300x300.png) center center no-repeat;
}


.addEditlink {
    float: left;
    width: calc(100% - 320px);
    width: -webkit-calc(100% - 320px);
    width: -moz-calc(100% - 320px);
    height: auto;
    margin-left: 20px;
}

.addLink {
    margin-top: 20px;
}

.addButton {
    margin-top: 46px;
}

.topListBackImage {
    position: absolute;
    z-index: -1;
    width: 720px;
    height: 360px;
    background-size: contain;
    margin-left: calc(50% - 360px);
    margin-left: -webkit-calc(50% - 360px);
    margin-left: -moz-calc(50% - 360px);
    margin-top: 400px;
    background: url(../img/topListBack.png) center center no-repeat;
}









@media screen and (max-width: 990px) {

    .commentChart {
        width: 700px;
        height: 114px;
        right: 0px;
        margin-left: 20px;
        margin-top: -129px;
    }

    .custom-select {
        margin-top: 124px;
    }

    .commentStatusSelect {
        width: 100%;
    }

    .coffeeBlok {
        margin-top: 50px;
    }
}






@media screen and (max-width: 546px) {

    .tableMobil {
        display: block;
        min-width: auto;
    }



    .commentText {
        width: 93%;
    }

    .commentOperation {
        display: none;
    }

    .desktopSearch {
        display: none;
    }

    .mobileSearch {
        display: block;
    }

    .dragDropArea {
        display: none;
    }

    .searchFilter {
        margin-bottom: 4px;
    }

    .imageUploadButtonArea {
        float: left;
        width: 100%;
        border-radius: 0 !important;
    }

    .imageUploadedArea {
        float: left;
        width: 100%;
        padding: 3px;
        transition: all 1s ease-in-out;
        border-radius: 12px;
    }

    #imageUploadButton {
        float: left;
        width: 60%;
        height: 50px;
        margin-top: 30px;
        margin-left: 20%;
        line-height: 50px;
        font-size: 16px;
    }

    .newsTitle {
        font-size: 19px;
        font-weight: bold;
        height: 60px;
        line-height: 80px;
        margin-top: 30px;
        border-radius: 9px;
    }

    .categoryCheckText {
        font-size: 14px;
    }

    .selectNewsCategoryBox {
        float: left;
        width: 100%;
        height: 46px;
    }

    .categoryCheckText[first] {
        margin-left: 56px;
    }

    .categoryCheckText[three] {
        margin-left: 43px;
    }

    #uploadPhotosBlock {
        height: auto;
        width: 307px;
        margin-left: 10px;
    }

    .imageMakerImage {
        float: left;
        width: 304px;
        height: 228px;
        background-color: #ddd;
        background-image: url(../img/imgBackM.png);
        background-position: center;
        margin-bottom: 20px;
        background-size: contain;
    }

    .imageMakerContentBlok {
        float: left;
        width: 100%;
        height: auto;
        margin-top: 0px;
        margin-left: 0px;
        margin-bottom: 20px;
    }

    .btn {
        margin-bottom: 3px;
    }

    .commentStatusSelect {
        width: 100%;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    .btn-refresh {
        padding-left: 10px;
    }

    .commentChart {
        width: 330px !important;
        height: 114px !important;
        right: 0px;
        margin-left: 10px !important;
        margin-top: -130px;
    }

    .custom-select {
        margin-top: 134px;
    }

    .sendMessageTextBox {
        width: 300px;
        height: 200px;
        max-height: 200px;
        min-height: 200px;
        min-width: 300px;
        max-width: 300px;
        margin-left: calc(50% - 160px);
        margin-left: -webkit-calc(50% - 160px);
        margin-left: -moz-calc(50% - 160px);
    }

    .sendMessageButton {
        margin-left: calc(50% - 70px);
        margin-left: -webkit-calc(50% - 70px);
        margin-left: -moz-calc(50% - 70px);
    }

    .messageListBox {
        width: 300px;
        height: auto;
        margin-left: calc(50% - 160px);
        margin-left: -webkit-calc(50% - 160px);
        margin-left: -moz-calc(50% - 160px);
    }

    .tryagain {
        margin-left: calc(50% - 45px);
        margin-left: -webkit-calc(50% - 45px);
        margin-left: -moz-calc(50% - 45px);
    }

    .hits {
        margin-left: calc(50% - 34px);
        margin-left: -webkit-calc(50% - 34px);
        margin-left: -moz-calc(50% - 34px);
    }

    .coffeeBlok {
        display: none;
    }

    .rowMod {
        display: none;
    }

    .addEditImage {
        margin-left: calc(50% - 150px);
        margin-left: -webkit-calc(50% - 150px);
        margin-left: -moz-calc(50% - 150px);
    }

    .addEditlink {
        float: left;
        width: 100%;
        height: 56px;
        margin-left: 0px;
        margin-bottom: 10px;
    }

    .addLink {
        margin-top: 20px;
    }

    .addEditRow {
        height: 246px;
        margin-bottom: 130px;
    }

    .addButton {
        margin-top: 20px;
        margin-left: calc(50% - 55px);
        margin-left: -webkit-calc(50% - 55px);
        margin-left: -moz-calc(50% - 55px);
    }

    .topListBackImage {
        position: absolute;
        z-index: -1;
        width: 360px;
        height: 360px;
        background-size: contain;
        margin-left: calc(50% - 190px);
        margin-left: -webkit-calc(50% - 190px);
        margin-left: -moz-calc(50% - 190px);
        margin-top: 300px;
        background: url(../img/topListBackM.png) center center no-repeat;
    }
}



















/* KAHVE ANİMASYON */

#plate {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    position: relative;
    z-index: 100000;
    margin-left: -160px;
    margin-top: 50px;
    box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}


#handle {
    width: 10%;
    height: 30%;
    background-color: #fff;
    position: absolute;
    left: 71%;
    transform: rotate(-43deg);
    top: 65%;
    border-radius: 1vmin;
    box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
    z-index: 1;
}

#coffeBg {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #35210d 0%, #231105 100%);
    overflow: hidden;
}

#cupInner {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
    background-color: transparent;
    z-index: 1;
}

#foamWrapper {
    filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.foam {
    background-color: #f8c99d;
    width: 10%;
    height: 40%;
    border-radius: 50%;
    position: absolute;
    left: -3%;
    transform: rotate(21deg);
    top: 22%;
    filter: url("#scatter");
    box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
    top: -7%;
    left: 14%;
    transform: rotate(53deg);
    width: 6%;
}

#foam3 {
    top: -21%;
    left: 43%;
    transform: rotate(75deg);
}

#foam4 {
    top: -20%;
    left: 46%;
    transform: rotate(105deg);
}

#foam5 {
    top: -9%;
    left: 70%;
    transform: rotate(122deg);
    height: 30%;
}

#foam6 {
    top: 8%;
    left: 98%;
    transform: rotate(152deg);
    height: 60%;
    width: 5%;
}

#foam7 {
    top: 20%;
    left: 97%;
    transform: rotate(181deg);
    height: 60%;
    width: 5%;
}

#foam8 {
    top: 51%;
    left: 96%;
    transform: rotate(211deg);
    height: 40%;
    width: 5%;
}

#foam9 {
    top: 62%;
    left: 70%;
    transform: rotate(224deg);
    height: 80%;
    width: 5%;
}

#foam10 {
    top: 72%;
    left: 62%;
    transform: rotate(74deg);
    height: 50%;
    width: 5%;
}

#foam11 {
    top: 59%;
    left: 51%;
    transform: rotate(104deg);
    height: 80%;
    width: 4%;
}

#foam12 {
    top: 44%;
    left: 9%;
    transform: rotate(124deg);
    height: 80%;
    width: 4%;
}

#foam13 {
    top: 7%;
    left: -6%;
    transform: rotate(-26deg);
    height: 80%;
    width: 4%;
}

@keyframes foamMiddleAnimation {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 0%);
    }

    50% {
        transform: translate(45%, 20%);
    }

    90% {
        transform: translate(45%, 20%);
    }

    100% {
        transform: translate(45%, 20%);
    }
}

#foamMiddleWrapper {
    animation-name: foamMiddleAnimation;
    animation-duration: 10s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        #foamMiddleWrapper {
            animation-name: none;
            animation-duration: inherit;
            animation-timing-function: inherit;
            will-change: inherit;
        }
    }
}

@keyframes foamMiddleContainerAnimation {
    0% {
        transform: rotate(0);
    }

    55% {
        transform: rotate(30deg);
    }

    90% {
        transform: rotate(30deg);
    }

    100% {
        opacity: 0;
    }
}

#foamMiddleContainer {
    animation-name: foamMiddleContainerAnimation;
    animation-duration: 10s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        #foamMiddleContainer {
            animation-name: none;
            animation-duration: inherit;
            animation-timing-function: inherit;
            will-change: inherit;
        }
    }
}

.foamMiddle {
    background-color: #f8c99d;
    width: 13%;
    height: 18%;
    border-radius: 50%;
    position: absolute;
    left: 40%;
    transform: rotate(21deg);
    top: 40%;
    filter: url(#scatter);
    box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
    transform: rotate(-49deg);
    width: 10%;
    left: 47%;
}

@keyframes bubbleMiddle1Animation {
    0% {
        transform: scale(1) translate(0%, 0%);
    }

    35% {
        transform: scale(1) translate(60%, 40%);
    }

    45% {
        transform: scale(0) translate(60%, 40%);
    }

    100% {
        transform: scale(0) translate(60%, 40%);
    }
}

#bubbleMiddle1 {
    left: 50%;
    top: 48%;
    width: 7%;
    height: 7%;
    animation-name: bubbleMiddle1Animation;
    animation-duration: 10s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform;
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        #bubbleMiddle1 {
            animation-name: none;
            animation-duration: inherit;
            animation-timing-function: inherit;
            will-change: inherit;
        }
    }
}

@keyframes bubbleMiddle2Animation {
    0% {
        transform: scale(1) translate(0%, 0%);
    }

    39% {
        transform: scale(1) translate(10%, 10%);
    }

    49% {
        transform: scale(0) translate(10%, 10%);
    }

    100% {
        transform: scale(0) translate(10%, 10%);
    }
}

#bubbleMiddle2 {
    left: 44%;
    top: 40%;
    width: 6%;
    height: 7%;
    transform: rotate(50deg);
    animation-name: bubbleMiddle2Animation;
    animation-duration: 10s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform;
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        #bubbleMiddle2 {
            animation-name: none;
            animation-duration: inherit;
            animation-timing-function: inherit;
            will-change: inherit;
        }
    }
}

@keyframes bubbleMiddle3Animation {
    0% {
        transform: scale(1) translate(0%, 0%);
    }

    45% {
        transform: scale(1) translate(0%, 0%);
    }

    55% {
        transform: scale(0) translate(0%, 0%);
    }

    100% {
        transform: scale(0) translate(50%, -40%);
    }
}

#bubbleMiddle3 {
    left: 41%;
    top: 49%;
    width: 7%;
    height: 8%;
    transform: rotate(36deg);
    animation-name: bubbleMiddle3Animation;
    animation-duration: 10s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform;
    /* deactivate animations for safari because it's the new IE */
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        #bubbleMiddle3 {
            animation-name: none;
            animation-duration: inherit;
            animation-timing-function: inherit;
        }
    }
}

#bubbleMiddle4 {
    left: 51%;
    top: 45%;
    width: 2%;
    height: 2%;
    transform: rotate(36deg);
}

.bubble {
    width: 5%;
    height: 7%;
    border-radius: 50%;
    background-color: #35210d;
    position: absolute;
    top: 40%;
    left: 2%;
    box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}

.bubble:after {
    display: block;
    content: "";
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 23%;
    top: 12%;
    transform: rotate(-20deg);
    box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
    left: 5%;
    top: 30%;
    transform: rotate(25deg);
}

#bubble3 {
    left: 8%;
    top: 23%;
    transform: rotate(39deg);
    width: 3%;
    height: 5%;
}

#bubble4 {
    left: 94%;
    top: 43%;
    transform: rotate(-10deg);
    width: 5%;
    height: 7%;
}

#bubble5 {
    left: 95%;
    top: 37%;
    transform: rotate(-17deg);
    width: 3%;
    height: 4%;
}

#bubble6 {
    left: 39%;
    top: 0%;
    transform: rotate(76deg);
    width: 6%;
    height: 9%;
}

#bubble7 {
    left: 60%;
    top: 1%;
    transform: rotate(106deg);
    width: 4%;
    height: 7%;
}

#bubble8 {
    left: 35%;
    top: 91%;
    transform: rotate(106deg);
    width: 4%;
    height: 7%;
}

#bubble9 {
    left: 4%;
    top: 63%;
    transform: rotate(-23deg);
    width: 5%;
    height: 7%;
}

#bubble10 {
    left: 2%;
    top: 58%;
    transform: rotate(-18deg);
    width: 3%;
    height: 4%;
}

#bubble11 {
    left: 63%;
    top: 91%;
    transform: rotate(72deg);
    width: 4%;
    height: 6%;
}

#bubble12 {
    left: 31%;
    top: 3%;
    transform: rotate(68deg);
    width: 4%;
    height: 6%;
}

#bubble13 {
    left: 21%;
    top: 85%;
    transform: rotate(118deg);
    width: 4%;
    height: 6%;
}

#bubble14 {
    left: 95%;
    top: 53%;
    transform: rotate(373deg);
    width: 4%;
    height: 6%;
}

#bubble15 {
    left: 50%;
    top: 0%;
    transform: rotate(96deg);
    width: 3%;
    height: 5%;
}

.bubbleSmall {
    width: 1%;
    height: 2%;
    border-radius: 50%;
    background-color: #35210d;
    position: absolute;
    top: 48%;
    left: 1%;
    box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}

.bubbleSmall:after {
    display: block;
    content: "";
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 23%;
    top: 12%;
    transform: rotate(-20deg);
    box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
    opacity: 0.8;
}

#bubbleSmall2 {
    left: 3%;
    top: 37%;
    height: 1%;
}

#bubbleSmall3 {
    left: 6%;
    top: 28%;
    height: 1%;
}

#bubbleSmall4 {
    left: 96%;
    top: 35%;
    height: 1%;
}

#bubbleSmall5 {
    left: 60%;
    top: 96%;
    height: 1%;
}

#bubbleSmall6 {
    left: 8%;
    top: 72%;
    height: 1%;
}

#innerShadow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
    position: absolute;
    z-index: 10;
}

@keyframes steamAnimation {
    0% {
        transform: translate(30%, -70%);
        opacity: 0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: translate(60%, -90%);
        opacity: 0;
    }
}

#steamWrapper {
    width: 50%;
    height: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

#steam {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: -156px 492px 123px -252px #fff;
    background: url(../img/smoke.png) center center no-repeat;
    min-width: 600px;
    min-height: 600px;
    animation-name: steamAnimation;
    animation-duration: 4s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
    left: -180px;
    top: 300px;
    position: absolute;
}

@media (max-width: 600px) {
    #steam {
        top: -80%;
        box-shadow: -156px 492px 123px -252px #fff;
    }
}

@media (max-width: 480px) {
    #steam {
        top: -160%;
        box-shadow: -166px 492px 53px -272px #fff;
    }
}



.waitroomBox {
    position: absolute;
    width: 360px;
    top: 360px;
    left: calc(50% - 180px);
    left: moz-calc(50% - 180px);
    left: webkit-calc(50% - 180px);
}

.waitroomBoxM {
    float: left;
    width: 360px;
    height: auto;
}

.waitMusic {
    position: fixed;
    width: 270px;
    margin-left: 0;
    bottom: 50px;
    left: calc(50% - 150px);
    left: moz-calc(50% - 150px);
    left: webkit-calc(50% - 150px);
    z-index: 99999999999999;
}

.waitroomBoxTitle {
    float: left;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ffa223;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    border-radius: 9px;
}

.waitroomBoxTitle[first] {
    margin-top: 20px;
}

.waitroomBoxText {
    float: left;
    width: 100%;
    height: auto;
    font-size: 14px;
    margin-bottom: 40px;
    border-right: 1px dotted #ffa223;
    padding: 2px;
}

.waitroomBoxText:first-letter {
    font-size: 70px;
    padding-right: 1px;
    color: #ffa223;
    line-height: 30px;
    font-weight: bolder;
}

.waitroomBoxText[last] {
    margin-bottom: 150px;
}

.waitroomBoxTopImage {
    float: left;
    width: 360px;
    height: 250px;
    background: url(../img/coffee.html) center center no-repeat;
    margin-bottom: 30px;
    margin-top: 30px;
}


.swal-button {
    background-color: #000 !important;
}

.swal-footer {
    text-align: center !important;
}

.swal-icon--warning__dot {
    background-color: #000 !important;
}

.swal-icon {
    border-color: #000 !important;
}


.ui-sortable-handle {
    cursor: move !important;
}

.cke_dialog_container .cke_dialog tr:hover {
    background-color: white;
}

.liveDateBox {
    position: fixed;
    z-index: 9999;
    bottom: 40px;
    width: 200px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 2px;
    border-radius: 12px;
    left: calc(50% - 100px);
    cursor: pointer;
    text-decoration: none;
    background-color: #182b2d;
}

.profilBottom {
    float: right;
    width: 70px;
    height: 46px;
    margin-right: 2px;
    margin-top: 12px;
}

.profileUploadContent {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    margin-top: 20px;
}

.profileUploadContentMobile {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    margin-top: 20px;
    display: none;
}

.profileUploadImage {
    float: left;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
    border: 3px dotted #d8d4e9;
    font-size: 16px;
    color: #ddd;
    border-radius: 30px;
    margin-left: calc(50% - 150px);
    margin-left: -webkit-calc(50% - 150px);
    margin-left: -moz-calc(50% - 150px);
    text-align: center;
    line-height: 508px;
    background: url(../img/profileUpload.png) center center no-repeat;
}

.buttonLeftPosition {
    margin-left: calc(50% - 54px);
    margin-left: -webkit-calc(50% - 54px);
    margin-left: -moz-calc(50% - 54px);
}

.profileUploadButton {
    float: left;
    width: 100%;
    height: 46px;
}

.profilePasswordContent {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 1px;
}

.passwordFormBox {
    float: left;
    width: 300px;
    height: 46px;
    margin-left: calc(50% - 150px);
    margin-left: -webkit-calc(50% - 150px);
    margin-left: -moz-calc(50% - 150px);
}



@media screen and (max-width: 990px) {

    .liveDateBox {
        display: none;
    }

    button.popupBottomMenu {
        display: none;
    }

    .profileUploadContent {
        display: none;
    }

    .profileUploadContentMobile {
        display: block;
    }
}


@media screen and (max-width: 546px) {

    .liveDateBox {
        display: none;
    }

    button.popupBottomMenu {
        display: none;
    }

    .profileUploadContent {
        display: none;
    }

    .profileUploadContentMobile {
        display: block;
    }
}

.amm_canvas {
    border: 3px dotted #999 !important;
    box-sizing: border-box !important;
    margin-bottom: 10px;
}

.wrapper-memes-main {
    background-color: #f3f3f3 !important;
    border-radius: 9px !important;
    background-image: url(../img/kapak.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}

.wrapper-select-merge-image-amm {
    margin: 10px 10px !important;
}

.wrapper_hover_title_meme_amm {
    margin-bottom: 10px;
}

.survey-head-text {
    color: #000;
}
.addEditRowSurvey {
    float: left;
    width: 100%;
    height: 140px;
    margin-bottom: 5px;
    margin-top: 65px;
}

.btn-edit-survey {
    color: #fff;
    background-color: #6352aa;
    border-color: #6352aa;
}

.btn-edit-survey:hover {
    color: #fff;
    background-color: #9882f3;
    border-color: #fff;
}

.addEditRowSurvey:nth-child(3) {
    margin-top: 0;
}

.addButtonSurvey{
    margin-top: 38px;
}
.addEditlinkSurvey {
    float: left;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    height: auto;
    margin-left: 20px;
}